Laptop Ecommerce Card Design | Product Card Design | HTML, CSS And Bootstrap
An eCommerce product card represents the product sale indirectly if we are able to show all those product cards more effectively then we can easily convince customers also. On the product card, we can put all required specifications and other action buttons with the price tag then it will be a very effective card.
In this card, we will design cards for electronics items like laptops, mobiles, etc. If you want to add other products then you can do. This design is responsive and we are using bootstrap to create this card. So let's get started without further ado. If you want to check more website development stuff you can check out the below link:
01. Include Bootstrap Link
First, create an html file that contains HTML basic structure as you can see below.
<!DOCTYPE html> <html> <head> <title>Laptop Card Design | Rustcode</title> </head> <body> // html code </body> </html>
Now we include the bootstrap link into this HTML document. In head, we will add bootstrap css and font-awesome files. Here we are not using any javascript function so no need to add a script link but if you want to add then add it to the bottom of the HTML document.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
Now, this HTML document is ready to use bootstrap and the final structure will look like the below document.
<!DOCTYPE html> <html> <head> <title>Laptop Card Design | Rustcode</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/> </head> <body> // html code </body> </html>
02. HTML
Bootstrap has a great grid concept that will help us to make this design responsive. We divide this card into three parts-
01. Product Image
02. Product Details
03. Product Action
As you can see in the image, all three parts have specific content about the product.
01. Product Image: This container contains an only image of the product.
02. Product Details: It contains product title, product features, and product category.
03. Product Action: It contains the price of the product, add to cart, and product review rating.
Now let's see the code of one card and use all bootstrap classes carefully because these classes will help us to achieve a responsive layout. You can download product images from here.
<div id="card-main-container" class="mb-3"> <div class="col-md-3 col-lg-3"> <img src="laptop1.png" width="100%"> </div> <div class="col-md-6 col-lg-7"> <h5 class="font-weight-bold"><a href="#" class="text-secondary">Sony VIAO E Series Laptop</a></h5> <div class="d-flex flex-row mb-1 mt-3 product-tag"> <p class="bg-info p-1 pl-2 pr-2 mr-1"><a href="#">Electronics</a></p> <p class="bg-primary p-1 pl-2 pr-2"><a href="#">Laptops</a></p> </div> <p class="mb-3">3rd Gen, Core i5 | No SSD, RAM 4GB DDR3, 500GB | 2.6 GHz RPM 5400 CACHE 3MB | WINDOW 10, 1366 x 768 pixels</p> <div> <p class="list-inline-item">All items from <a href="#">sony official</a></p> <p class="list-inline-item">Add to <a href="#">wishlist</a></p> </div> </div> <div class="col-md-3 col-lg-2"> <h5 class="font-weight-bold">$799.99</h5> <div class="mt-3"> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <p class="text-muted mt-1">4512 review</p> </div> <button style="background: #7F00FF; font-size: 13px !important;" class="btn btn-success text-white mr-1 p-2 pl-3 pr-3 font-weight-bold"> <i class="fa-shopping-cart fa text-white mr-1"></i> ADD TO CART </button> </div> </div>
Use this card code multiple times as you want, just for demo purposes we are using it three times so that we can see the robustness of this design.
<!DOCTYPE html> <html> <head> <title>Laptop Card Design | Rustcode</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/> </head> <body> <div class="container col-xl-10 col-12 mt-5" id="outer-card-container"> <div> <div id="card-main-container" class="mb-3"> <div class="col-md-3 col-lg-3"> <img src="laptop1.png" width="100%"> </div> <div class="col-md-6 col-lg-7"> <h5 class="font-weight-bold"><a href="#" class="text-secondary">Sony VIAO E Series Laptop</a></h5> <div class="d-flex flex-row mb-1 mt-3 product-tag"> <p class="bg-info p-1 pl-2 pr-2 mr-1"><a href="#">Electronics</a></p> <p class="bg-primary p-1 pl-2 pr-2"><a href="#">Laptops</a></p> </div> <p class="mb-3">3rd Gen, Core i5 | No SSD, RAM 4GB DDR3, 500GB | 2.6 GHz RPM 5400 CACHE 3MB | WINDOW 10, 1366 x 768 pixels</p> <div> <p class="list-inline-item">All items from <a href="#">sony official</a></p> <p class="list-inline-item">Add to <a href="#">wishlist</a></p> </div> </div> <div class="col-md-3 col-lg-2"> <h5 class="font-weight-bold">$799.99</h5> <div class="mt-3"> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <p class="text-muted mt-1">4512 review</p> </div> <button style="background: #7F00FF; font-size: 13px !important;" class="btn btn-success text-white mr-1 p-2 pl-3 pr-3 font-weight-bold"> <i class="fa-shopping-cart fa text-white mr-1"></i> ADD TO CART </button> </div> </div> <div id="card-main-container" class="mb-3"> <div class="col-md-3 col-lg-3"> <img src="laptop2.png" width="100%"> </div> <div class="col-md-6 col-lg-7"> <h5 class="font-weight-bold"><a href="#" class="text-secondary">APPLE MacBook Air M1</a></h5> <div class="d-flex flex-row mb-1 mt-3 product-tag"> <p class="bg-info p-1 pl-2 pr-2 mr-1"><a href="#">Electronics</a></p> <p class="bg-primary p-1 pl-2 pr-2"><a href="#">Laptops</a></p> </div> <p class="mb-3">3rd Gen, Core i5 | No SSD, RAM 4GB DDR3, 500GB | 2.6 GHz RPM 5400 CACHE 3MB | WINDOW 10, 1366 x 768 pixels</p> <div> <p class="list-inline-item">All items from <a href="#">apple official</a></p> <p class="list-inline-item">Add to <a href="#">wishlist</a></p> </div> </div> <div class="col-md-3 col-lg-2"> <h5 class="font-weight-bold">$799.99</h5> <div class="mt-3"> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <p class="text-muted mt-1">4512 review</p> </div> <button style="background: #7F00FF; font-size: 13px !important;" class="btn btn-success text-white mr-1 p-2 pl-3 pr-3 font-weight-bold"> <i class="fa-shopping-cart fa text-white mr-1"></i> ADD TO CART </button> </div> </div> <div id="card-main-container" class="mb-3"> <div class="col-md-3 col-lg-3"> <img src="laptop3.png" width="100%"> </div> <div class="col-md-6 col-lg-7"> <h5 class="font-weight-bold"><a href="#" class="text-secondary">Lenovo Ideapad S100 Netbook</a></h5> <div class="d-flex flex-row mb-1 mt-3 product-tag"> <p class="bg-info p-1 pl-2 pr-2 mr-1"><a href="#">Electronics</a></p> <p class="bg-primary p-1 pl-2 pr-2"><a href="#">Laptops</a></p> </div> <p class="mb-3">3rd Gen, Core i5 | No SSD, RAM 4GB DDR3, 500GB | 2.6 GHz RPM 5400 CACHE 3MB | WINDOW 10, 1366 x 768 pixels</p> <div> <p class="list-inline-item">All items from <a href="#">lenovo official</a></p> <p class="list-inline-item">Add to <a href="#">wishlist</a></p> </div> </div> <div class="col-md-3 col-lg-2"> <h5 class="font-weight-bold">$799.99</h5> <div class="mt-3"> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <i class="fa-star fa"></i> <p class="text-muted mt-1">4512 review</p> </div> <button style="background: #7F00FF; font-size: 13px !important;" class="btn btn-success text-white mr-1 p-2 pl-3 pr-3 font-weight-bold"> <i class="fa-shopping-cart fa text-white mr-1"></i> ADD TO CART </button> </div> </div> </div> </div> </body> </html>
It is complete code for the HTML document. Until we didn't apply any custom CSS for this design we used bootstrap predefined classes only. The output will look like the below image:
03. CSS
Let's get started with css this is our main design file which helps us to create eCommerce product card user interface effectively. There are three main methods to include css in HTML documents. You can check out this article.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700'); *{ border-radius: 0px !important; border: 0px !important } body{ margin: 0px; font-family: "Poppins", sans-serif; text-align: left; background: #e1e1e1 !important; } #card-main-container{ padding: 20px; background: white; } #outer-card-container h5 a{ color: black !important; } #outer-card-container img:hover{ transform: scale(1.1); transition: all 1s; } .product-tag p:first-child{ background: #1C5D99 !important; } .product-tag p:last-child{ background: #F05D5E !important; } .product-tag p a{ color: white; } #outer-card-container a{ text-decoration: none !important; } #outer-card-container .fa{ color: #E94F37; } #outer-card-container p{ font-size: 14px !important; font-weight: 600 !important; } @media screen and (min-width: 770px) { #card-main-container{ display: flex; align-items: center; flex-direction: row !important; } }
04. Youtube Video
The product card design codes are very simple and we hope you understand the code but still you want to watch the video then go for the below video.
05. Source Code
We hope this video and code helped you to understand this product card design. If you want to download code then click the given link:
Comments
Post a Comment