Scribd
Upload
2 views2 pages

HTML

This document is an HTML template for a web project featuring a header with a logo and navigation links. It includes a Swiper carousel with multiple slides and navigation buttons for user interaction. The document links to external stylesheets and scripts for styling and functionality.

Uploaded by

ubadahkamran87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views2 pages

HTML

This document is an HTML template for a web project featuring a header with a logo and navigation links. It includes a Swiper carousel with multiple slides and navigation buttons for user interaction. The document links to external stylesheets and scripts for styling and functionality.

Uploaded by

ubadahkamran87
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-
bundle.min.css" />

<link rel="stylesheet" href="style.css">


<title>Project</title>
</head>
<body>
<div class="header">
<div class="container">
<div class="flex-box">
<div class="logo">
<a href="#">logo</a>
</div>
<div class="navbar">
<ul>
<li><a href="#">Contact Us</a> </li>
<li><a href="#">Donate</a></li>
<li><a href="#">Need Help!</a> </li>
<li><a href="#">More About us</a> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-
bundle.min.js"></script>

<!-- Initialize Swiper -->


<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>

You might also like