Ecommerce Product Making with Html & CSS | Source Code

It's all about the look and feel! 💻

Creating a successful ecommerce website involves more than just writing HTML and CSS — it's also important to consider how you will be presenting your products.

Ever wondered how websites are built? Well, HTML, CSS and JavaScript are the tools used to create many of the products you use everyday.

What can you create with HTML, CSS, and JavaScript? The possibilities are truly endless!

From web applications to dynamic sites and more, you can design some amazing products using these three languages.

Source Code:

HTML Code:

  <!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">
    <title>Product UX/UI</title>
    <!-- ========StyleSheet=========== -->
    <link rel="stylesheet" href="style.css">
    <!-- font aweasome cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <div class="container">
        <div class="box one">
            <div class="details">
                <div class="topic">Discription</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt quos autem aspernatur qui
                    consequatur, aliquam sequi, voluptatem adipisci, voluptates commodi quidem rem neque nemo doloribus
                    magnam optio perspiciatis repellendus nostrum.</p>
                <div class="rating">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="price-box">
                    <div class="discount">$1800.00</div>
                    <div class="price">$2000.00</div>
                </div>
                </div>
                <div class="button1">
                    <button>Add To Cart</button>
                </div>
              
        </div>
        <div class="box two">
            <div class="image-box">
                <div class="image">
                    <img src="img/Colorful Freelancer YouTube Thumbnail.png" alt="">
                </div>
                <div class="info">
                    <div class="brand">SPORTS</div>
                    <div class="name">NIKE</div>
                    <div class="shipping">FREE SHIPPING</div>
                    <div class="button2">
                        <button>Login For More</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS Code:

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    width: 100%;
    background: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    display: flex;
    max-width: 720px;
    justify-content: space-between;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    position: relative;
}
.container::before{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 0 12px 12px 0;
    clip-path: circle(65% at right 35%);
    background: linear-gradient(135deg, #ff0077 10%, #2739fd 100%);
}
.container .box.one{
    padding: 35px 5px 0 35px;
}
.container .box.two .image{
    height: 340px;
    width: 430px;

}
.box.two .image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.box.one .details .topic{
    font-size: 30px;
    font-weight: 500;

}
.box.one .details p{
    color: #737373;
    font-size: 13px;
    font-weight: 500;

}
.box.one .details .rating{
    color: rgb(255, 162, 0);
}
.box.one .details .price-box{
    margin-top: 16px;

}
.details .price-box .discount{
    font-size: 20px;
    color: #737373;
    margin: 18px 0 0 12px;
    position: relative;
}
.price-box .discount::before{
    content: '';
    position: absolute;
    height: 1px;
    width: 100px;
    background: #737373;
    top: 50%;
    left: -8;

}
 .details .price-box .price{
    color: #fc6989;
    font-size: 30px;

 }
 .box.one .button1{
    margin-top: 55px;

 }
 .box.one .button1 button{
    outline: none;
    background: #54e600;
    padding: 8px 16px;
    color: rgb(0, 0, 0);
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 10px;
 }
 .box.one .button1 button:hover{
    transform: scale(0.98);
    
 }
 .container .box.two .image-box{
    position: relative;
    text-align: right;
    right: 0;
    bottom: 32px;


 }
 .box.two .info{
    margin: 0 35px 0 0;

 }
 .box.two .info .brand{
    font-size: 17px;
    font-weight: 600;
    color: #c9032e;
 }
 .box.two .info .name{
    font-size: 20px;
    font-weight: 500;
    color: #fff;
 }
 .box.two .info .shipping{
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
 }
 .box.two .info .button2{
    margin: 17px 0;

 }
 .box.two .info .button2 button{
    outline: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;

 }

E-commerce Product designing using html CSS | Source Code

Ecommerce Product Making with Html & CSS | Source Code

It's all about the look and feel! 💻

Creating a successful ecommerce website involves more than just writing HTML and CSS — it's also important to consider how you will be presenting your products.

You Might Also Like:

Source Code:

Post a Comment

Learn HTML in 7 Days: A Beginner's Guide to Creating Websites

Ludo Display UI Design Using Only HTML CSS | With Source Code

Categories

Latest Posts

Popular Posts

Contact Form