Embedded Files
TITLE : How to build a E-commerce Landing Page Feat : PC Store | JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PC Store</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" />
</head>
<body>
<div class="btn">
<i class="fa fa-power-off" aria-hidden="true"></i>
</div>
<div class="bg">
<div class="fan">
<div class="center"></div>
</div>
<div class="fan">
<div class="center"></div>
</div>
<div class="fan">
<div class="center"></div>
</div>
</div>
<div class="overlay">
<h1>pc store</h1>
</div>
<section>
<div class="card">
<img src="Images/pc.jpg" alt="PC_image">
<div class="info">
Ryzen 5 5600X | RTX 3060 TI | 1TB SSD
</div>
<button class="buy">BUY $1599</button>
</div>
<div class="card">
<img src="Images/pc.jpg" alt="PC_image">
<div class="info">
Ryzen 5 5600X | RTX 3060 TI | 1TB SSD
</div>
<button class="buy">BUY $1599</button>
</div>
<div class="card">
<img src="Images/pc.jpg" alt="PC_image">
<div class="info">
Ryzen 5 5600X | RTX 3060 TI | 1TB SSD
</div>
<button class="buy">BUY $1599</button>
</div>
<div class="card">
<img src="Images/pc.jpg" alt="PC_image">
<div class="info">
Ryzen 5 5600X | RTX 3060 TI | 1TB SSD
</div>
<button class="buy">BUY $1599</button>
</div>
<div class="card">
<img src="Images/pc.jpg" alt="PC_image">
<div class="info">
Ryzen 5 5600X | RTX 3060 TI | 1TB SSD
</div>
<button class="buy">BUY $1599</button>
</div>
<div class="card">
<img src="Images/pc.jpg" alt="PC_image">
<div class="info">
Ryzen 5 5600X | RTX 3060 TI | 1TB SSD
</div>
<button class="buy">BUY $1599</button>
</div>
</section>
<script src="main.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: url('Images/bg.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.btn {
width: 50px;
height: 50px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
color:#000;
border-radius: 50%;
position: absolute;
left:25px;
z-index: 100;
bottom: 25px;
cursor: pointer;
}
.bg {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.bg .fan {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background:linear-gradient( to right top ,#00FF83,#FF60FF,#00AEFF,#FFF572) ;
animation: rotateEl 1s linear reverse infinite;
transform: rotate(0deg);
}
.bg .fan .center {
width: 460px;
height: 460px;
background:#000;
border-radius: 50%;
opacity: 0.8;
}
.bg .fan:first-child {
width: 400px;
height: 400px;
margin-right: -80px;
}
.bg .fan:first-child .center {
width: 360px;
height: 360px;
}
.bg .fan:last-child {
width: 400px;
height: 400px;
margin-left: -80px;
z-index: -1;
}
.bg .fan:last-child .center {
width: 360px;
height: 360px;
}
@keyframes rotateEl {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.overlay {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,1);
position: absolute;
top:0;
transition: 0.3s;
}
.overlay-on {
background: rgba(0,0,0,0.5);
}
.overlay h1 {
font-size: 5rem;
color:#fff;
text-transform: uppercase;
font-family: demonized;
opacity: 0;
transition: 0.3s;
}
.overlay .show {
opacity: 1;
}
section {
width: 100%;
height: 200vh;
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 0 auto;
background: #fff;
flex-wrap: wrap;
font-family: quicksand;
}
section .card {
width: 25%;
height: 30%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
margin: 25px;
padding: 10px 0 0 0;
background-color: #BBDEFB;
transition: 0.3s;
box-shadow: 0 10px 25px -10px rgba(0,0,0,0.5);
}
.card img {
width: 100%;
height: 70%;
}
.card .info {
width:100%;
height: auto;
padding: 15px;
}
.card .buy {
width: 100%;
padding: 15px 0;
border:none;
outline: none;
font-size: 1.05rem;
color: #fff;
background-color: #2196F3;
transition: 0.3s;
}
.card:hover {
background-color: #FFCDD2;
box-shadow: 0 25px 50px -20px rgba(0,0,0,0.5);
}
.card .buy:hover {
background-color: #F44336;
}
JavaScript :
var btn = document.querySelector('.btn');
var overlay = document.querySelector('.overlay');
var h1 = overlay.querySelector('h1');
btn.addEventListener("click",()=> {
overlay.classList.toggle('overlay-on');
h1.classList.toggle('show');
});
Page updated
Google Sites
Report abuse