Here's what we'll be creating
Hey!👋
I hope you enjoyed my previous post where we build the Navigation using Flexbox.
In this post, we are going to code the Hero Section.
HTML:
<main>
<div class="hero-img">
<div class="container">
<div class="inside-container">
<div class="hero-content">
<h2>Start something that matters</h2>
<p>Stop wasting valuable time with projects that just isn't you.</p>
<a href="#">Learn more start today</a>
</div>
<div class="icons">
<li><i class="fab fa-facebook-square"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-twitter"></i></li>
</div>
</div>
</div>
</div>
</main>
CSS:
.hero-img{
background-image: url(images/Macbook.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width:100%;
position: relative;
}
.inside-container{
display: flex;
height: 100vh;
justify-content:flex-start;
align-items: center;
}
.hero-content{
color:#fff;
line-height: 1.5;
position: relative;
z-index: 2;
}
h2{
font-weight: 400;
font-size: 3.25rem;
letter-spacing: 1px;
}
p{
font-weight: 400;
font-size: 1.25rem;
letter-spacing: 1px;
margin-bottom: 2.25rem;
}
.hero-content a{
text-decoration: none;
color:#000;
font-weight: 400;
border: 1px solid transparent;
background-color: #CCCCCC;
padding:15px 25px;
font-size: 1rem;
margin: 0;
display:inline-block;
letter-spacing: 1px;
text-transform: initial;
}
.hero-content a:hover{
background-color: #fff;
}
.hero-img::after{
content: "";
background-color: rgba(0, 0, 0, 0.342);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
li{
list-style-type:none;
}
.icons{
display: flex;
color: #fff;
font-size:25px;
position: absolute;
z-index: 2;
color: #CCCCCC;
bottom: 0;
padding:25px 0px;
}
If you have any questions feel free to ask.
Happy Coding!🙌
Top comments (0)