Animated Gaming Website using Html & CSS
Hello Friends, Today in this blog you’ll learn how to create Gaming Website Page using HTML & CSS. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Animated Gaming Website using Html & CSS).
Animated Gaming Website using Html & CSS [Source Codes]
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<title>Gaming Website Page</title>
</head>
<body>
<section>
<header>
<a href="#" class="logo"><img src="/images/logo.png"></a>
<i class="fa-solid fa-magnifying-glass"></i>
</header>
<div class="imgScrol">
<div>
<img src="/images/img1.jpg">
<img src="/images/img2.jpg">
<img src="/images/img3.jpg">
<img src="/images/img4.jpg">
<img src="/images/img5.jpg">
<img src="/images/img6.jpg">
<img src="/images/img7.jpg">
<img src="/images/img8.jpg">
<img src="/images/img9.jpg">
</div>
<div>
<img src="/images/img1.jpg">
<img src="/images/img2.jpg">
<img src="/images/img3.jpg">
<img src="/images/img4.jpg">
<img src="/images/img5.jpg">
<img src="/images/img6.jpg">
<img src="/images/img7.jpg">
<img src="/images/img8.jpg">
<img src="/images/img9.jpg">
</div>
</div>
<ul class="navigation">
<li class="active"><a href="#"><i class="fa-solid fa-house"></i></a></li>
<li><a href="#"><i class="fa-solid fa-fire"></i></a></li>
<li><a href="#"><i class="fa-solid fa-gamepad"></i></a></li>
<li><a href="#"><i class="fa-solid fa-share"></i></a></li>
</ul>
</section>
</body>
</html>
Second, create an HTML file with the name of Style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .CSS extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
header{
position: absolute;
top: 0;
width: 100%;
padding: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo img{
position: relative;
max-width: 200px;
}
header i{
font-size: 1.5em;
cursor: pointer;
}
.navigation{
position: absolute;
bottom: 30px;
display: flex;
gap: 30px;
}
.navigation li{
position: relative;
list-style: none;
}
.navigation li a{
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
background: #fff;
color: #333;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-radius: 50%;
font-size: 1.5em;
text-decoration: none;
}
.navigation li.active a,
.navigation li a:hover{
background: #f00;
color: #fff;
}
.imgScrol{
position: absolute;
left: 0;
padding: 60px 0;
width: 100%;
display: flex;
overflow-x: hidden;
}
.imgScrol div{
display: flex;
animation: animate 40s linear infinite;
animation-delay:-40px ;
}
.imgScrol div:nth-child(2){
animation: animate1 40s linear infinite;
animation-delay:-20px ;
}
.imgScrol:hover div,
.imgScrol:hover div:nth-child(2){
animation-play-state: paused;
}
@keyframes animate{
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
@keyframes animate1{
0%{
transform: translateX(0%);
}
100%{
transform: translateX(-200%);
}
}
.imgScrol div img{
margin: 0 25px ;
max-width: 300px;
border: 10px solid transparent;
transition: 0.25s;
}
.imgScrol div img:hover{
border: 10px solid #fff;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.imgScrol:hover div img{
opacity: 0.05;
filter: blur(5px);
}
.imgScrol div img:hover{
opacity: 1;
filter: blur(0px);
}