Table of Contents
Introduction:
In today’s digital world, creating visually appealing product cards can significantly enhance user engagement and drive sales. In this step-by-step guide, I will tell you through the process of designing a captivating product card using HTML and CSS.
first Steps to Create a Product Card with HTML and CSS
Getting Started:
To begin, create a folder with any name you prefer. Within this folder, create two files: index.html and `style.css`. These files will contain the HTML and CSS code for our product card.
Explaining HTML:
The HTML file (index.html) serves as the structure of our product card. It consists of various elements such as containers, text areas, and color selectors. Let’s break down the key components:
– The `<div>` elements with specific classes represent different sections of the product card, such as the container, card container, shoe area, text area, etc.
– Input elements (<input>) of type radio are used for color selection. These inputs are visually hidden but play a crucial role in activating different color themes via CSS.
– Images (<img>) are utilized to display the product logo and shoe variations.
– Headings (<h2>, <h4>) and paragraphs (<p>) provide essential information about the product.
<!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" type="text/css">
<title> product Card</title>
</head>
<body>
<div class="container">
<div class="card-container">
<input type="radio" name="colors-btn" id="color-1" checked>
<input type="radio" name="colors-btn" id="color-2">
<input type="radio" name="colors-btn" id="color-3">
<input type="radio" name="colors-btn" id="color-4">
<div class="shoe-area">
<div class="logo-div">
<img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/nike-logo.png?raw=true" alt="">
</div>
<div class="floating-div">
<div class="shoe-1"><img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/red-nike.png?raw=true" alt="red-nike" ></div>
<div class="shoe-2"><img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/orange-nike.png?raw=true" alt="orange-nike"></div>
<div class="shoe-3"><img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/white.png?raw=true" alt="white-nike"></div>
<div class="shoe-4"><img src="https://github.com/gerrardNwoke/Prdouct-Card/blob/main/Shoe-product-card/imgs/black-nike.png?raw=true" alt="black-nike"></div>
</div>
</div>
<div class="text-area">
<div class="heading-area">
<h2>Jordan Proto-Lyte</h2>
<h4>Running Collection</h4>
</div>
<p class="paragraph-area">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, rerum asperiores error omnis pariatur sequi placeat quia fuga ullam. Harum obcaecati suscipit illum similique excepturi voluptates quae deserunt tempore, distinctio architecto ipsum dolor laboriosam inventore impedit nostrum totam eaque sed est? Non rem repudiandae, vitae iure suscipit pariatur, cum esse sequi cumque saepe commodi reprehenderit quaerat. Quasi ipsam repellendus similique
</p>
<div class="color-selection">
<div class="h5-text"><h5>Available Colors: </h5></div>
<div class="color-pick-div">
<label for="color-1" class="colors color-1"></label>
<label for="color-2" class="colors color-2"></label>
<label for="color-3"class="colors color-3" ></label>
<label for="color-4" class="colors color-4"></label>
</div>
</div>
<div class="price-and-buy-btn">
<h2 class="price-1">$ 854.75</h2>
<h2 class="price-2">$ 824.15</h2>
<h2 class="price-3">$ 914.38</h2>
<h2 class="price-4">$ 884.12</h2>
<button class="buy-btn">BUY NOW</button>
</div>
</div>
</div>
</div>
</body>
</html>Second Steps to Create a Product Card with HTML and CSS:
Explaining CSS:
The CSS file (tyle.css) defines the styling and visual aspects of our product card. Here’s an overview of the CSS sections:
– We use CSS variables to define primary colors, text area color, and other style-related variables for easy customization.
– Selectors like `.container`, `.shoe-area`, and `.text-area` target specific HTML elements and apply styles to them.
– Various CSS properties such as `display`, `flex-direction`, `transition`, and `animation` are utilized to create dynamic effects like color transitions and floating animations.
– Media queries (@media) are employed to ensure responsiveness across different screen sizes, adjusting the layout and styling accordingly.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
padding: 0;
margin: 0;
}
:root{
font-family: "Poppins";
--primary-color-1: hsl(348, 68%, 34%);
--primary-color-2: hsl(20,94%,34%);
--primary-color-3: hsl(232,16%,34%);
--primary-color-4: hsl(0, 0%, 25%);
--text-area-color: whitesmoke;
--heading-secondary-color: hsl(0, 0%, 55%);
--secondary-card-color: whitesmoke;
}
html{
width: 100%;
height: 100%;
}
body{
/* background-color: skyblue; */
}
input{
display: none;
}
.container{
margin: 0 auto;
/* background-color: green; */
max-width: 60rem;
min-height: 30rem;
padding: 3rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.card-container{
display: flex;
flex-direction: row;
/* background-color: wheat; */
box-sizing: border-box;
box-shadow: 0px 0px 10px 0px rgb(145, 145, 145);
border-radius: 0.8rem;
}
.shoe-area{
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
transition: background-color 0.3s ease-in-out;
border-radius: 0.8rem 0 0 0.8rem
}
.logo-div{
margin: 2rem 0 0 1.5rem;
position: absolute;
opacity: 1;
top: 0;
left: 0;
width: 100%;
/* background-color: yellowgreen; */
}
.logo-div img{
width: 70%;
opacity: 0.1;
}
.floating-div{
/* background-color: yellowgreen; */
height: 100%;
width: 100%;
display: grid;
place-items: center;
align-items: center;
animation: float 6s ease-in-out infinite;
box-sizing: border-box;
}
@keyframes float{
0%{
transform: translateY(0%);
}
50%{
transform: translateY(-6%);
}
100%{
transform: translateY(0%);
}
}
.shoe-area :is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) {
/* background-color: yellow; */
position: absolute;
width: 100%;
transform: rotateZ(-30deg) scale(1.3) translateX(-10%);
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
.shoe-area .shoe-4{
/* background-color: whitesmoke; */
}
:is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) img{
width: 100%;
opacity: 0;
transform: rotateZ(-30deg) scale(1.3) translateX(-10%);
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
/* =============
Text styling
========== */
.text-area{
background-color: var(--text-area-color);
/* background-color: rgb(114, 91, 114); */
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
border-radius: 0 0.8rem 0.8rem 0
}
.text-area .heading-area{
padding: 1rem;
}
.heading-area h2{
font-weight: 800;
font-size: 2.5rem;
transition: color 0.3s ease-in-out;
}
.heading-area h4{
margin: 0.25rem 0 0 0;
}
.paragraph-area{
margin: 1.5rem 1rem 1.5rem 5rem;
/* background-color: yellow; */
font-size: 1rem;
}
/* =============
Available colors
========== */
.color-selection{
margin: 1rem 1rem 1.5rem 5rem;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.8rem;
box-sizing: border-box;
/* background-color: wheat; */
}
.color-selection h5{
font-size: 1rem;
}
.color-selection .colors{
padding: 1rem;
border-radius: 50%;
cursor: pointer;
}
.color-pick-div{
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.8rem;
}
.color-selection .color-1{
background-color: var(--primary-color-1);
}
.color-selection .color-2{
background-color: var(--primary-color-2);
}
.color-selection .color-3{
background-color: var(--primary-color-3);
}
.color-selection .color-4{
background-color: var(--primary-color-4);
}
/* =============
price-and-buy-btn styling
========== */
.price-and-buy-btn{
display: flex;
justify-content: space-between;
padding: 1.5rem 1rem;
}
.price-and-buy-btn :is(.price-1, .price-2, .price-3, .price-4){
display: none;
font-weight: 800;
font-size: 2.5rem;
transition: color 0.3s ease-in-out;
}
.buy-btn{
padding: 1em 1.5em;
font-size: 1.2rem;
border-radius: 2rem;
border: none;
color: whitesmoke;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
/* ========== Themes ======== */
/* Theme 1 */
#color-1:checked ~ .text-area .color-selection .color-pick-div .color-1{
outline: 2px solid var(--primary-color-1);
outline-offset: 2px;
}
#color-1:checked ~ .shoe-area{
background-color: var(--primary-color-1);
}
#color-1:checked ~ .text-area .heading-area h2{
color: var(--primary-color-1)
}
#color-1:checked ~ .text-area .price-and-buy-btn .price-1{
display: block;
color: var(--primary-color-1);
}
#color-1:checked ~* .buy-btn{
background-color: var(--primary-color-1);
}
/* Theme 2 */
#color-2:checked ~ .text-area .color-selection .color-pick-div .color-2{
outline: 2px solid var(--primary-color-2);
outline-offset: 2px;
}
#color-2:checked ~ .shoe-area{
background-color: var(--primary-color-2);
}
#color-2:checked ~ .text-area .heading-area h2{
color: var(--primary-color-2)
}
#color-2:checked ~ .text-area .price-and-buy-btn .price-2{
display: block;
color: var(--primary-color-2);
}
#color-2:checked ~* .buy-btn{
background-color: var(--primary-color-2);
}
/* Theme 3 */
#color-3:checked ~ .text-area .color-selection .color-pick-div .color-3{
outline: 2px solid var(--primary-color-3);
outline-offset: 2px;
}
#color-3:checked ~ .text-area .price-and-buy-btn .price-3{
display: block;
color: var(--primary-color-3);
}
#color-3:checked ~ .shoe-area{
background-color: var(--primary-color-3);
}
#color-3:checked ~ .text-area .heading-area h2{
color: var(--primary-color-3)
}
#color-3:checked ~* .buy-btn{
background-color: var(--primary-color-3);
}
/* Theme 4 */
#color-4:checked ~ .text-area .color-selection .color-pick-div .color-4{
outline: 2px solid var(--primary-color-4);
outline-offset: 2px;
}
#color-4:checked ~ .shoe-area{
background-color: var(--primary-color-4);
}
#color-4:checked ~ .text-area .price-and-buy-btn .price-4{
display: unset;
color: var(--primary-color-4);
}
#color-4:checked ~ .text-area .heading-area h2{
color: var(--primary-color-4)
}
#color-4:checked ~* .buy-btn{
background-color: var(--primary-color-4);
}
/* Transition when the screen is higher than 1000px */
@media screen and (min-width: 62.5rem){
#color-1:checked ~ .shoe-area .floating-div .shoe-1 {
transition-delay: 0.2s;
animation-delay: 0.3s;
transform: rotateZ(0);
z-index: 99;
}
#color-1:checked ~ .shoe-area .floating-div .shoe-1 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 2 */
#color-2:checked ~ .shoe-area .floating-div .shoe-2 {
transition-delay: 0.2s;
transform: rotateZ(0);
z-index: 99;
}
#color-2:checked ~ .shoe-area .floating-div .shoe-2 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 3 */
#color-3:checked ~ .shoe-area .floating-div .shoe-3 {
transition-delay: 0.2s;
transform: rotateZ(0);
z-index: 99;
}
#color-3:checked ~ .shoe-area .floating-div .shoe-3 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 4 */
#color-4:checked ~ .shoe-area .floating-div .shoe-4 {
transition-delay: 0.2s;
transform: rotateZ(0);
z-index: 99;
}
#color-4:checked ~ .shoe-area .floating-div .shoe-4 img{
transition-delay: 0.2s;
opacity: 1;
}
}
#color-4:checked ~* .heading-area h2{
color: var(--primary-color-4)
}
@media screen and (max-width: 62.5rem){
.container{
padding: 1rem;
}
.card-container{
display: flex;
flex-direction: column;
}
.shoe-area{
width: 100%;
height: 40vw;
padding: 1rem 0;
border-radius: 0.8rem 0.8rem 0 0;
}
.shoe-area :is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) {
/* background-color: yellow; */
position: absolute;
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
}
/* Transition for any screen lower than 1000px */
.shoe-area :is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) {
/* background-color: yellow; */
transform: rotateZ(0deg) translateY(-10%);
width: 70%;
margin: 1rem 0;
opacity: 0;
}
:is(.shoe-1, .shoe-2, .shoe-3, .shoe-4) img{
transform: rotateZ(0) scale(1) ;
opacity: 1;
}
#color-1:checked ~ .shoe-area .floating-div .shoe-1 {
transition-delay: 0.2s;
opacity: 1;
transform: rotateZ(0);
}
#color-1:checked ~ .shoe-area .floating-div .shoe-1 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 2 */
#color-2:checked ~ .shoe-area .floating-div .shoe-2 {
transition-delay: 0.2s;
opacity: 1;
transform: rotateZ(0);
}
#color-2:checked ~ .shoe-area .floating-div .shoe-2 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 3 */
#color-3:checked ~ .shoe-area .floating-div .shoe-3 {
transition-delay: 0.2s;
opacity: 1;
transform: rotateZ(0);
}
#color-3:checked ~ .shoe-area .floating-div .shoe-3 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Theme 4 */
#color-4:checked ~ .shoe-area .floating-div .shoe-4 {
transition-delay: 0.2s;
transform: rotateZ(0);
opacity: 1;
}
#color-4:checked ~ .shoe-area .floating-div .shoe-4 img{
transition-delay: 0.2s;
opacity: 1;
}
/* Transition end */
.logo-div img{
width: 40%;
}
.text-area{
/* background-color: rgb(114, 91, 114); */
width: 100%;
display: flex;
flex-direction: column;
padding: 1rem;
box-sizing: border-box;
border-radius: 0 0 0.8rem 0.8rem
}
.paragraph-area, .color-selection{
margin: 1.5rem 1rem;
}
}
/* ====== Phone Size ===== */
@media screen and (max-width: 26.9rem){
.paragraph-area{
margin: 1rem;
font-size: 0.8rem;
}
.paragraph-area, .color-selection{
margin: 0.7rem 1rem;
}
.color-selection{
display: flex;
flex-direction: column;
align-items: unset;
row-gap: 0.8rem;;
}
.price-and-buy-btn{
padding: 0.5rem 1rem;
flex-direction: column;
row-gap: 0.8rem;
align-items: flex-start;
}
}Conclusion:
By following this guide, you learn how to create a visually stunning product card with HTML and CSS. Experiment with different styles, colors, and layouts to tailor the product card to your specific needs. Incorporating captivating product cards can greatly enhance the visual appeal of your website or online store, ultimately driving user engagement and conversions.
By optimizing your product card for search engines and incorporating relevant keywords, you can improve its visibility and attract more organic traffic to your website
Join Our Telegram Channel to Download the coding material, notes, ebook, etc: Click Here
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, the navbar we recommend recreating other useful website elements such as Custom Button, Footer, Bubble Team Section, etc.
