Creating Responsive Hero Section using Html & CSS
<!DOCTYPE html>
<html>
<head>
<title>Codekarnedo.com | Responsive Hero Section</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- section start -->
<section class="banner swiper mySwiper">
<div class="wrapper swiper-wrapper">
<div class="slide swiper-slide">
<img src="images/3.jpeg" alt="" class="image" />
<div class="image-part">
<h5 class="text">Welcome our Website Add Your Sub Title hear</h5>
<h2>Add Your Site Name & Page Title</h2>
<a href="#" class="button-cus">Get in Teach</a>
</div>
</div>
</div>
</section>
<!-- section end-->
</body>
</html>
.banner {
height: 65vh;
font-family: cursive;
width: 100%;
}
.wrapper,
.slide {
position: relative;
width: 100%;
height: 100%;
}
.slide::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 10;
}
.slide .image {
height: 100%;
width: 100%;
object-fit: cover;
}
.slide .image-part {
position: absolute;
top: 50%;
background-color: #00000014;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 75%;
border-radius: 35px 0px;
padding: 40px;
border: 4px solid #00000000;
box-shadow: 0px 0px 3px #0000004d;
z-index: 100;
}
.image-part h5.text {
font-size: 20px;
font-weight: 600;
margin-left: 10px;
text-shadow: 0px 0px 2px black;
margin-right: 10px;
color: #fff;
}
.image-part h2 {
font-size: 50px;
font-weight: 700;
text-shadow: 0px 0px 4px black;
margin-left: 10px;
margin-right: 10px;
color: #fff;
}
a.button-cus {
display: inline-block;
padding: 8px 18px;
border-radius: 30px;
color: #333;
margin-bottom: 10px;
background: #fff;
text-decoration: none;
margin-top: 5px;
transition: .3s;
}
a.button-cus:hover {
color: #fff;
background-color: #c87e4f;
}
@media only screen and (max-width: 768px) {
.banner {height: 98vh;width: 100%;}
.slide .image-part {width: 90%;padding: 8px;}
.image-part h2 {font-size: 38px;width: 100%;}
}
empty
1
26 Jun 20241.