Hi dear welcome to Ascode Blog . In this post we are going to learn how to make e-comerce website product pricing page design using html css and javascript. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it. 3rdly creat ap.js file Then Copy The Javascript CODE and pest it then open the index.html file with your browser.
HTML
<!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">
<script src="app.js"></script>
<title>Ecomers website product pricing</title>
</head>
<body>
<div class="container">
<nav>
<div class="logo"><span>YT</span>MOUGE</div>
<div class="nav-menu">
<img src="search.png" >
<img src="cart.png" >
<img src="menu.png" >
</div>
</nav>
<div class="row">
<div class="col-1">
<h1>YOUTUBE<br> BARNDED MOUGE</h1>
<p>Youtube moug is here just ordar now. It reached your home.<br> Our delevery time is 72 hours</p>
<h2>$20</h2>
<button type="button">ADD TO CARD</button>
</div>
<div class="col-2">
<div class="feature-img">
<img src="img-1.png" id="FeatureImg">
</div>
<div class="small-img-row">
<div class="small-img">
<img src="img-1.png" class="SmallImg">
</div>
<div class="small-img">
<img src="img-2.png" class="SmallImg">
</div>
<div class="small-img">
<img src="img-3.png" class="SmallImg">
</div>
<div class="small-img">
<img src="img-4.png" class="SmallImg">
</div>
</div>
<h2>YTMOUG</h2>
</div>
</div>
<div class="footer">
@Copyright - 2021 By YTMouge
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
background: #1e2227;
color: #fff;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 8%;
position: fixed;
top: 0;
width: 100%;
background: #1e2227;
z-index: 1;
}
.logo{
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: #fff;
}
span {
color: red;
}
.nav-menu img {
width: 25px;
margin-left: 30px;
cursor: pointer;
}
.row {
height: 100%;
width: 100%;
display: flex;
}
.col-1, .col-2 {
flex-basis: 50%;
display: flex;
height: 100%;
justify-content: center;
flex-direction: column;
}
.col-2 {
background: rgb(236, 236, 236);
padding-top: 8%;
position: relative;
}
.col-1 {
padding-left: 8%;
}
.col-1 h1 {
font-size: 60px;
line-height: 100px;
margin-bottom: 5px;
}
.col-1 h2 {
font-family: 35px;
margin-top: 60px;
font-weight: 500;
}
button {
display: inline-block;
width: fit-content;
padding:18px 50px;
background: red;
border: none;
color: #fff;
font-size: 18px;
margin-top: 20px;
cursor: pointer;
transition: transform 0.5s;
}
.feature-img {
width: 100%;
text-align: center;
}
.feature-img img{
width: 500px;
height: 500px;
}
.small-img-row {
display: flex;
width: 80%;
margin: 70px auto 0;
align-items: center;
justify-content: space-around;
}
.small-img {
position: relative;
width: 80px;
height: 80px;
background: #ccc;
bottom: 100px;
}
.small-img img {
width: 80px;
}
.small-img:nth-child(1){
background:rgb(250, 76, 76);
}
.small-img:nth-child(2){
background: rgb(103, 103, 250);
}
.small-img:nth-child(3){
background: rgb(243, 109, 109);
}
.small-img:nth-child(4){
background: rgb(99, 255, 99);
}
.col-2 h2{
position: absolute;
left: 10px;
top: 22%;
color: darkred;
font-size: 50px;
opacity: 0.3;
}
button:hover {
background: rgb(32, 4, 4);
transform: translateY(-5px);
}
.footer {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 15px;
color: #fff;
padding: 15px 8%;
position: fixed;
bottom: 0;
width: 100%;
background: #1e2227;
z-index: 2;
}
@media (max-width:700px){
.row {
display: block;
}
.feature-img img{
width: 400px;
height: 400px;
}
.small-img {
width: 50px;
height: 50px;
}
.small-img img {
width: 50px;
}
.col-1 {
padding-top: 15%;
}
.col-1 h1 {
font-size: 50px;
}
}
Javascript
var FeatureImg = document.getElementById("FeatureImg");
var SmallImg = document.getElementsByClassName("SmallImg");
SmallImg[0].onclick = function(){
FeatureImg.src = SmallImg[0].src;
}
SmallImg[1].onclick = function(){
FeatureImg.src = SmallImg[1].src;
}
SmallImg[2].onclick = function(){
FeatureImg.src = SmallImg[2].src;
}
SmallImg[3].onclick = function(){
FeatureImg.src = SmallImg[3].src;
}
0 Comments