How to create a hero image

#css #flexbox #webdev #tutorial

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;
}