Hi dear welcome to ascode - blog in this tutorial post we are going to learn how to make an e-comerce card design using html css and javascript.So let's start coding. Write basic HTML 5 template in index.html . And link style.css file to index file and creat another app.js file conect it with the index.html file now flow this code and copy pest and set all this things..
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="ap.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="col-1">
<div class="content">
<h2>Awsam <span>Lhenga</span> Collection</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt fugit eum perspiciatis libero dignissimos alias itaque eius ad esse rerum placeat illo ipsam consequuntur quas cupiditate, assumenda sequi expedita voluptas. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum temporibus, repudiandae quod veniam esse fugiat ipsa omnis debitis qui aut? Cupiditate, necessitatibus perferendis eligendi maiores corporis officiis eum harum accusamus?</p>
<div class="price">$35 USD</div>
<a href="#">Buy Now</a>
<a href="#" class="btn">Add to Cart</a>
</div>
</div>
<div class="col-2">
<div class="big-img">
<img src="lhenga-1.jpeg" id="BigImg">
</div>
<div class="small-img-row">
<div class="small-img">
<img src="lhenga-1.jpeg" class="SmallImg">
</div>
<div class="small-img">
<img src="lhenga-2.jpeg" class="SmallImg">
</div>
<div class="small-img">
<img src="lhenga-3.jpeg" class="SmallImg">
</div>
<div class="small-img">
<img src="lhenga-4.jpeg" class="SmallImg">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
padding: 10px;
box-shadow: 0 0 5px #ccc;
border-radius: 10px;
transition: 0.5s ease-out;
}
.container:hover .col-2 {
display: block;
}
.container .col-1 {
float: left;
width: 400px;
}
.col-1 .content {
margin: 0 20px;
margin-top: 30px;
}
.content h2 {
font-size: 2rem;
color: #000;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.content .price {
font-size: 2rem;
color: #000;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.content p {
font-size: 1rem;
color: #000;
font-weight: 600;
opacity: 0.8;
margin: 10px 0;
}
.content a {
display: inline-block;
font-size: 1.2rem;
color: #fff;
padding: 10px;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none;
background:orangered;
border-radius: 1px;
margin: 20px 10px;
transition: 0.2s;
}
.content a:hover {
background: transparent;
border:3px solid orangered;
color: orangered;
}
.content a.btn{
background: #079fc5;
}
.content a.btn:hover {
border:3px solid #079fc5;
color: #079fc5;
background: transparent;
}
.content h2 span {
color: orangered;
}
.container .col-2 {
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
border-radius: 10px;
padding:10px 20px;
box-shadow: 0 0 5px #ccc;
float: right;
display: none;
}
.col-2 .big-img{
width: 300px;
height: 350px;
margin: 0 auto;
transition: 0.5s ease-out;
}
.big-img img {
width: 100%;
height: 100%;
padding:10px;
border-radius: 5px;
box-shadow: 0 0 3px #ccc;
transition: 0.5s ease-out;
}
.col-2 .small-img-row {
display: flex;
justify-content: center;
align-self: center;
margin: 10px auto;
border-radius: 10px;
}
.small-img-row .small-img {
width: 70px;
height: 80px;
margin:10px 5px;
padding: 5px;
box-shadow: 0 0 3px #ccc;
border-radius: 5px;
transition: 0.3s;
}
.small-img-row .small-img:hover{
width: 80px;
height: 90px;
}
.small-img img {
width: 100%;
height: 100%;
}
Javascript
var BigImg = document.getElementById("BigImg");
var SmallImg = document.getElementsByClassName("SmallImg");
SmallImg[0].onclick = function(){
BigImg.src = SmallImg[0].src;
}
SmallImg[1].onclick = function(){
BigImg.src = SmallImg[1].src;
}
SmallImg[2].onclick = function(){
BigImg.src = SmallImg[2].src;
}
SmallImg[3].onclick = function(){
BigImg.src = SmallImg[3].src;
}
0 Comments