HEADER ADS 728X90

How to make an E-comerce Product Pricing Card design using Html css & javascript

css cards ascode.live,
simple css card design,
css cards responsive,
advanced css cards,
css card hover effects,
dashboard card design css,
profile card css ascode.live,
html card design,
responsive product card html css,
e commerce website using html css and javascript,
product card html css codepen,
e commerce website using html css and javascript github,
responsive animated product card using html css & javascript,
simple product card html css,
css creative product card ui design,
e-commerce product card design html, ascode, coding tutorial, how to learn coding easy way to learn coding

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;
        }

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram