Index.html

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage with Image Slider and Hero Section</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="./css/style.css">
<style>
.hero-section {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
padding: 100px;
color: #ffffff;
}
.hero-text {
max-width: 50%;
}
.hero-text h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
.hero-text p {
font-size: 1.2em;
line-height: 1.5;
margin-bottom: 25px;
}
.hero-image {
max-width: 45%;
}
.hero-image img {
width: 100%;
height: auto;
}
.cards-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 50px 20px;
background-color: #212731;
}
.card {
border-radius: 10px;
overflow: hidden;
width: calc(33.333% - 20px);
margin: 0 auto;
text-align: center;
color: #fff;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-10px);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 20px;
}
.card h3 {
margin: 0 0 10px;
font-size: 1.5em;
}
.card p {
font-size: 1em;
line-height: 1.5;
}
.enroll-btn {
display: inline-block;
padding: 10px 20px;
background-color: #F75842;
color: #fff;
text-decoration: none;
font-size: 1em;
margin-top: 10px;
border-radius: 5px;
transition: background-color 0.3s;
}
.enroll-btn:hover {
}
</style>
</head>
<body>
<nav>
<div class="container nav__container">
<a href="index.html">
<h4>MargdarshanByIITians</h4>
</a>
<ul class="nav__menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="contact.html">Test</a></li>
<li><a href="contact.html">Test</a></li>
<li><a href="#" class="register-btn">Register Now</a></li>
</ul>
<button id="open-menu-btn"><i class="uil uil-bars"></i></button>
<button id="close-menu-btn"><i class="uil uil-multiply"></i></button>
</div>
</nav>
<section class="hero-section">
<div class="hero-text">
<h1>Welcome to Our Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium at
culpa delectus deserunt distinctio dolorem dolorum earum eius, eos est eveniet ex
fugit id illo illum in ipsam iusto labore minima natus neque nulla officia omnis
praesentium quas reiciendis repellat reprehenderit sed sint suscipit ullam ut velit
voluptas voluptates. Iure, tempora.</p>
<a href="#" class="register-btn">Enroll Now</a>
</div>
<div class="hero-image">
<img src="https://via.placeholder.com/600x400" alt="Hero Image">
</div>
</section>
<section class="cards-section">
<div class="card">
<img src="https://via.placeholder.com/400x200" alt="Card Image">
<div class="card-content">
<h3>Test 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam,
vero.</p>
<a href="#" class="enroll-btn">Enroll</a>
</div>
</div>
<div class="card">
<h3>Test 2</h3>
vero.</p>
</div>
</div>
<div class="card">
<h3>Test 3</h3>
vero.</p>
</div>
</div>
<div class="card">
<h3>Test 3</h3>
vero.</p>
</div>
</div>
<div class="card">
<h3>Test 3</h3>
vero.</p>
</div>
</div>
<div class="card">
<h3>Test 3</h3>
vero.</p>
</div>
</div>
</section>
</body>
</html>

Index.html

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Index.html

Uploaded by

Copyright:

Available Formats

<!

You might also like