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 2,222 times, 1 visits today)
