Home CSS Animation Hero Section Using HTML and CSS Only – Animation

Hero Section Using HTML and CSS Only – Animation

33
0
Hero Section HTML and CSS

In this tutorials i will be teach how to Hero Section with Html and Css. i added slide animation watch the video and below is the source code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hero section html css</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="header">
      <div class="layer">
        <div class="container">
          <div class="nav">
            <div class="logo">
              LOGO
            </div>
            <div class="nav-menu">
              <a href="#">Work</a>
              <a href="#">Resume</a>
            </div>
          </div>
          <div class="hero-box">
            <div class="left-side">
              <h2>Front-End Developer</h2>
              <h4>Front-end Guy</h4>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Dolorem ad similique provident nesciunt, aspernatur quasi sed
                quae aut nobis, 
              </p>
              <a href="#">Hire Me</a>
            </div>
            <div class="right-side">
                <div class="image-box">
                    <div class="profile-image">
                      
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,700;1,100&display=swap");

/* #c500d6
    #24203b  */

 *{
     margin:0;
     padding: 0;
     box-sizing: border-box;
 }  
 
 body{
     font-family: "Monterrat", sans-serif;
 }

 .container{
     max-width: 1140px;
     margin: 0 auto;
 }

 .header{
     width: 100%;
     height: 768px;
     background-color: #c500d6;
 }

 .layer{
     background-color:#24203b ;
     height: 650px;
     border-bottom-right-radius: 100px;
     padding-top:40px ;
 }

 .nav{
     display: flex;
     justify-content: space-between;
     padding: 0 20px;
 }

 .nav .logo{
     color: #ffffff;
     font-weight: 600;
 }
.nav .nav-menu a{
    text-decoration: none;
    color: #ffffff;
    padding: 10px 20px;
    background-color: #c500d6;
    border-bottom-right-radius: 10px;
    margin-left: 20px;

}

.nav .nav-menu a:hover{
    background-color: #ffffff;
    color: #c500d6;
    transition: .2s;
}
.hero-box{
    display: flex;
    padding-top: 150px;
    color: #ffffff;
}

.hero-box .left-side{
    width: 50%;
    padding: 20px;
}

.hero-box .left-side h2{
    text-transform: uppercase;
    font-size: 30px;
    line-height: 2;
}

.hero-box .left-side h4{
    font-size: 20px;
    text-transform: uppercase;
    line-height: 2;
}

.hero-box .left-side p{
    margin-bottom: 30px;
}

.hero-box .left-side a{
    background-color: #c500d6;
    padding: 15px 30px;
    border-bottom-right-radius: 10px;
    color: #ffffff;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
}

.hero-box .left-side a:hover{
    background-color: #ffffff;
    color: #c500d6;
    transition: .2s;
    
}

/* Right Side */
.hero-box .right-side{
    width: 50%;
}

.hero-box .right-side .image-box{
    width: 350px;
    height: 350px;
    border: 5px solid #c500d6;
    margin: auto;
    border-bottom-right-radius: 20px;
    position: relative;

}

.hero-box .right-side .image-box::before{
    content: "";
    width: 100%;
    height: 100%;
    border: 5px solid #ffffff;
    position: absolute;
    top: 0;
    left: 20px;
    border-bottom-right-radius: 20px;
    animation: slide 0.8s ease-in;
    animation-delay: 2s;

}

.hero-box .right-side .image-box .profile-image{
    background-image: url("profile-image.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    border-bottom-right-radius: 20px;
    animation: slide 0.8s ease-in;
    animation-delay: 1s;
}

/* Animation */
@keyframes slide{
    0%{
        transform: translateX(500px);
    }100%{
        transform: translateX(0);
    }
}











(Visited 12 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here