Creating a Responsive Animated Website
Hello friend, I hope you are doing great. Today you will learn how to create an Responsive Animated Auto Color Change Website using HTML CSS
The interesting thing about this website is that when the user open website on
any screen , it automatically changes color to the every 25sec . And when you open it on any device, it automatically adjusts.
Output
Other
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title> Amezone Clone </title>
</head>
<body>
<header >
<h1>BrodSchool</h1>
<nav >
<a href="#"class="active">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Services</a>
<a href="#">Login</a>
</nav>
</header>
<section class="home">
<div class="box">
<h1>BrodSchool</h1>
<h1>Future Interface</h1>
<p>Empowering the future with seamless innovation, where technology meets artistry</p>
<span class="btn-box">
<button type="button"class="btn">Start Now></button>
<button type="button"class="btn">Contact Us></button>
</span>
</div>
<img src="img/obj.png"class="objct">
<img src="img/face.png"class="face">
</section>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
font-family: sans-serif ;
}
.home {
display :flex ;
background :1f2223 ;
posittion :relative ;
margin :0px auto ;
align-items :center ;
height :100vh ;
cursor :pointer ;
color :#fff ;
justify-content :space-between ;
}
.header {
position :fixed ;
top :0px ;
left :0px ;
width :100% ;
align-items :center ;
justify-content :space-between ;
z-index :99 ;
display :flex ;
color :#fff ;
font-size :22px ;
padding :30px 90px; ;
opacity :0 ;
animation :to-bottom 1s ease forwards ;
}
.btn {
position :relative ;
padding :12px 30px ;
color :#fff ;
border :2px solid #01fa04 ;
font-size :20px ;
background :transparent ;
border-radius :4px ;
justify-content :space-between ;
display :flex ;
cursor :pointer ;
transition :.3s ;
animation :to-right 1s ease forwards 1.9s ;
}
.object {
width :75% ;
right :-15% ;
bottom :50% ;
margin-bottom :-35% ;
animation :rotate 25s linear infinite, fade-in 1s ease forwards 1.2s ;
}
@keyframes to-bottom {
0%{
opacity :0 ;
transform :translateY(-50px) ;
}
100% {
opacity :0 ;
transform :translateY(0) ;
}
}
@keyframes to-right {
0%{
opacity :0 ;
transform :translateX(-50px) ;
}
100% {
opacity :1 ;
transform :translateX(0) ;
}
}
@keyframes face {
0%{
opacity :0 ;
transform :translateX(20px) ;
}
100% {
opacity :1 ;
transform :translateX(0) ;
}
}