Table of Contents

How to create furniture ecommerce Product with css

Share Now :

Title : How to create furniture ecommerce Product with css | W3pupil

Description

Hello W3PUPIL!!

W3pupil provides a dynamic and visually appealing product card snippet that showcases the information in a single glance. This product card snippet is created with precision using HTML and CSS.

A product card snippet displays the name of the product, accompanied by an image at the top of the card, to create a positive impression of the product. Additionally, a short description of the product can be added further down the page. The add to cart and add to favourite options can be used at the bottom of the page to add the product to the cart or to mark it as one’s favourite products. CSS can be used to add hover effects, and a responsive design can be used. Product card snippets are interactive and can be shown on multiple devices. They are fully responsive, allowing the product information to be displayed on a desktop, laptop screen, tablet screen, or smartphone.

With this HTML and CSS-powered product card snippet, you’re not just sharing information – you’re making a statement about your commitment to professionalism and modern web design. Impress, engage, and connect with the world through this creative and informative product card snippet.

Let's know how to create a file..

Creating and managing files and folders efficiently is crucial for a seamless development experience. A step-by-step tutorial is provided below:

W3pupil’s suggestion is to download and install Visual Studio Code.

  • After the successful completion of downloading and installing, open Visual Studio Code.
  • Create a new folder in your desktop.
  • Go to file and then open the folder created.
  • Then add a file for html with “.html” or “.htm” extension.
  • Also add another file for css with “.css” extension.
  • Now, you have a blank HTML file and CSS file ready for your code.

Let's know how to open a downloaded file..

  • After downloading the snippet file from W3pupil, you will receive a zip file.
  • Extract the file and open it in Visual Studio Code.
  • Now you have the HTML file and CSS file to work with.
  • Take time to fully understand the code’s functionality before making any desired changes.

Let's take a look at a code snippet created by W3pupil team using HTML and CSS.

HTML SOURCE CODE LOGO

HTML Source Code

HTML (Hypertext Markup Language) is a standard markup language for creating web pages, defining their structure and content using a system of tags and elements. (index.html)

  <!--Hello Future Developer Thanks for Using w3pupil.com, Share & Support us-->
<div class="section1">
<div class="card">
    <div class="cardin1">
        <div class="cardin1c1">
            <img src="https://cdn.pixabay.com/photo/2019/06/18/06/05/chair-4281517_1280.png" alt="Profile Image">
        </div>
        <div class="cardin1c2">
            <h2>Office Chair</h2>
            <h6>Color : Black</h6>
            <p>An office chair is a crucial piece of furniture designed to provide comfort and support during long hours of work. These chairs typically feature adjustable height, lumbar support, and ergonomic designs to ensure proper posture and reduce strain on the body. The seat and backrest are often padded with cushioning materials for added comfort. Office chairs come in various styles, including executive chairs, task chairs, and ergonomic options, allowing individuals to choose the one that best suits their needs and workspace aesthetics.</p>
            <br>
            <div class="star-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-half-alt"></i>
            </div>
        </div>
    </div>
    <div class="cardin2">
        <button><i class="fa-solid fa-heart"></i> Add To Favorite</button>
        <button><i class="fa-solid fa-cart-shopping"></i> Add To Cart</button>
    </div>
</div>
<div class="credit">Made with <span>❤ </span>by <a href="https://www.w3pupil.com/">W3pupil</a></div>
</div>
<!--Check our website Regularly For New Snippets Post-->  
CSS SOURCE CODE IMAGE

CSS Source Code

CSS (Cascading Style Sheet) enhances website aesthetics and layout, applying styles and design elements to create a visually appealing and responsive user interface. (style.css)

  /** 
Hello Future Developer Thanks for Using w3pupil.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
*{
    box-sizing: border-box;
}
body{
    font-family: Arial, sans-serif;
    margin:0%;
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);  
}
.card{
    display: flex;
    flex-direction:column;
    align-items:center;
    border-radius: 10px;
    width:700px;
    height:460px;
    background-color:#262626;
    color:#fff;
    padding:10px;
    row-gap:10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cardin1{
    padding:10px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    width:100%;
    height:350px;
    background-color: #343434;
}
.cardin1c1{
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    width:50%;
    height:350px;
}
.cardin1c1 .star-rating{
    font-size: 14px;
}
.cardin1c2 .star-rating .fas.fa-star{
    color: gold;
}
.cardin1c2 .star-rating .fas.fa-star-half-alt{
    color: gold; 
    border: none; 
}
.cardin1c2{
    display: flex;
    flex-direction:column;
    align-items:start;
    width:50%;
    height:350px;
}
.cardin1c1 img{
    width: 250px;
    height:330px;
    border-radius: 5px;
    object-fit:cover;
    filter: drop-shadow(0px 0px 15px #000000);
}
.cardin1c2 h2{
    margin:10px 0px 0px 0px;
    font-family: 'Play', sans-serif;
    font-size: 59px;
    color:#7babff
}
.cardin1c2 h6{
    margin:2px 0px 10px 0px;
    font-size:10px;
}
.cardin1c2 p{
    margin:0px;
    font-size:14px;
    color:#ddd;
}
.cardin2{
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    border-radius: 10px;
    width:100%;
    height:80px;
}
.cardin2 button{
    margin:auto;
    border:none;
    padding:15px;
    background-color:#343434;
    border-radius:10px;
    font-size:16px;
    transition:.5s;
    color: #ddd;
    width:46%;
    cursor: pointer;
}
.cardin2 button:nth-child(1):hover{
    transform: scale(1.05);
    color:hotpink;
}
.cardin2 button:nth-child(2):hover{
      transform: scale(1.05);
      color:rgb(79, 173, 255);
}
@media only screen and (max-width: 630px){
    .section1{
        height: fit-content;
    }
    .card{
        margin-top:20px;
        width:90%;
        height:100%;
    }
    .cardin1{
        flex-direction: column;
        height:100%;
    }
    .cardin1c1{
        width:100%;
    }
    .cardin1c2 h2{
        font-size:30px;
    }
    .cardin1c2{
        width:100%;
    }
    .cardin2 button{
        font-size:12px;
        height:100%;
    }
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}  

Note :

  • The CSS is coded in a separate file and linked to the HTML file.

Download :

Share and Support W3pupil.com

Conclusion :

To modify the code, you can download the snippet’s source code files. To enhance your skills in HTML and CSS, you can try to recreate other creative HTML and CSS snippets available on W3pupil. In case you experience any technical related doubts, you are welcome to contact W3pupil. We’ll try to solve your request at the earliest.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :