Animated website header in pure html and css by enfblogs

website header and animation in pure html and css code

Html Code :

<!DOCTYPE html>
<html lang=”en”>
<head>
<!–meta tags –>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!–title tags–>
<title>Animated website header</title>
<!–css files font links –>
<link rel=”stylesheet” href=”css/style.css“>
<link href=”https://fonts.googleapis.com/css2?family=Josefin+Slab:[email protected]&display=swap” rel=”stylesheet”>
<link
rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
/>
</head>
<body>
<!—Header section start here–>
<header>
<!—Nav section start here–>
<nav>
<div class=”logo”><h1 class=”animate__animated animate__heartBeat animate__infinite”>Enf Security</h1></div>
<div class=”navbar_menu”>
<a href=”#“> Home </a>
<a href=”#“> Cources </a>
<a href=”#“> About </a>
<a href=”#“> Contact Us </a>
</div>
</nav>
<!—Nav section close here here–>
<!—Main section start here–>
<main>
<section>
<h3> Run to learn </h3>
<h1>Your best Cources <span class=”changecource”></span></h1>
<p>Learning is a key to sucess</p>
<a href=”#” class=”buttonone”>More Cources</a>
<a href=”#” class=”buttontwo”>Membership</a>
</section>
</main>
<!—Main section close here–>
</header>
</body>
</html>

Css :

/universal classes/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Josefin Slab’, serif;
color: white;

}
a{
text-decoration:none;
}

/* first header page include classes header main nav*/
header{
width: 100%;
height: 100vh;
background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.1)),url(“../images/background.jpg”);
background-size: cover;
}
nav{
width: 100%;
height: 15vh;color: white;
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
}
.logo{
width: 25%;
text-align: center;

}
.logo h1{
color: violet;
}
nav .navbar_menu{
width: 50%;
display: flex;
justify-content: space-around;
}

nav .navbar_menu a{
width: 25%;
font-weight: bold;
}
nav .navbar_menu a:first-child{
color: violet;
}
main{
width: 100%;
height: 85vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.5s ease;
}
section h3{
font-size: 35px;
font-weight: 500;
text-shadow: 1px 1px 2px black;
}
section h1{
font-size: 60px;
font-weight: 900;
text-shadow: 3px 2px 6px black;
}
section p{
font-size: 20px;
font-weight: 800;
text-shadow: 3px 2px 6px black;
padding-bottom: 20px;

}
.buttonone{

font-size: 20px;
font-weight: 800;
text-shadow: 3px 2px 6px black;
border-radius: 5px;
border:2px solid white;
padding:10px 20px;

}
.buttontwo{

font-size: 20px;
font-weight: 800;
border-radius: 5px;
border:2px solid white;
padding:10px 20px;
background-color: violet;

}
.buttonone:hover{
font-size: 20px;
font-weight: 800;
border-radius: 5px;
border:2px solid white;
padding:10px 20px;
background-color: violet;
}
.buttontwo:hover{
font-size: 20px;
font-weight: 800;
text-shadow: 3px 2px 6px black;
border-radius: 5px;
border:2px solid white;
padding:10px 20px;
background-color: transparent;
}
.changecource:after{
content:”;
animation: cources 10s infinite linear;
color: violet;
}
@keyframes cources{
0%{content:”Python”;}
20%{content:”CCNA”;}
50%{content:”Web Development”;}
70%{content:”Ai”;}
100%{content:”Hacking”;}
}
/*/

Previous articleWhat is Python?
Next articleAfghan Taliban

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular