Styling the hero section

hello and welcome. In this lecture we are going to style the hero section.

we need some stock images for our projects. these images will be copyright free. There are some free and premium stock images site in there. we will use the free ones.

here are some free stock image sites.

although i have already downloaded the images that we need for our project. you can get those on the resources section. I will add the link in the resources.

so lets head back to the css.

#home{
    display: flex;
    height: 100vh;
    background-image: url(/assets/images/background/bg.jpg);
    background-size: cover;
    position: relative;
}

Now. lets design the next section icon here

.next-section{
    position: absolute;
    right: 50%;
    bottom: 0%;
    transform: translate(50%, 0%);
}   
.next-section a{
    color: #fff;
    padding: 16px 21px 0px 21px;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-top: 2px solid #fff;
    border-top-left-radius: 55px;
    border-top-right-radius: 55px;
    transition: all .5s ease-in;
}
.next-section a:hover{
    color: var(--special-color);
    border-color: var(--special-color);
}
.next-section i{
    animation: bounce 2s infinite 2s;
}
@keyframes bounce{
    0%,
    100%,
    20%,
    50%,
    80%{
        transform: translateY(0);
    }
    40%{
        transform: translateY(-10px);
    }
    60%{
        transform: translateY(-5px);
    }
}
<div class="home-content flex-column d-flex justify-content-center">
.home-content{
    height: 100%;
}
.home-content .hello {
    color: #fff;
    font-family: var(--title-font);
    font-size: 15px;
}
.home-content .hello span{
    color: var(--special-color);
}
.home-content .intro h1{
    color: #FFF;
    font-size: 62px;
}
.home-content .intro h1 span{
    color: var(--special-color);
}
.home-content .desc{
    color: #b9b9b9;
    display: block;
    max-width: 40%;
}
.hire a{
    display: inline-block;
    color: #FFF;
    text-transform: uppercase;
    font-family: var(--title-font);
    font-size: 9px;
    letter-spacing: 2px;
    background: var(--special-color);
    padding: 12px 25px;
    border-radius: 25px;
    transition: all .2s;
    position: relative;
}
.hire a:hover{
    background: #bb3d23;
    transform: translateY(0px);
}

.hire a::after{
    content: '';
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: var(--special-color);
    top: 0;
    left: 0;
    position: absolute;
    border-radius: 25px;
    z-index: -1;
    transition: all .5s;
}
.hire a:hover::after{
    transform: scaleX(1.4) scaleY(1.3);
    opacity: 0;
}
.intro_skill h5{
    color: #fff;
}