Enhance the user experience on your website by implementing an elegant and user-friendly product preview card. In this tutorial, we'll walk through the creation of a sleek product preview card using HTML and CSS. Elevate your website's aesthetics and functionality with this UI/UX design that seamlessly showcases your products.
Step 1: HTML Markup:
Start by establishing the HTML structure for your product preview card. Create a container that holds essential information and elements such as product images, titles, and details.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product UI UX Design - Only CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="left-side">
<div class="background"></div>
<div class="brand-img">
<img src="image/shoe2.png" alt="">
</div>
</div>
<div class="right-side">
<div class="brand">
<div class="brand-name">
EVOSPEED 2.0
</div>
<div class="style-number">
STYLE NUMBER: <span>7585-D4</span>
</div>
</div>
<div class="rate">
<span class="star-on">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</span>
<span class="star-off">
<i class="fa-solid fa-star"></i>
</span>
</div>
<div class="price">
<div class="original-price">
$117.26
</div>
<div class="recent-price">
$98.99
</div>
</div>
<div class="size">
SIZE CHART
<div class="size-number">
<input type="radio" name="size" id="s-7">
<label for="s-7">7</label>
<input type="radio" name="size" id="s-8">
<label for="s-8">8</label>
<input type="radio" name="size" id="s-9">
<label for="s-9">9</label>
<input type="radio" name="size" id="s-10">
<label for="s-10">10</label>
<input type="radio" name="size" id="s-11" checked>
<label for="s-11">11</label>
<input type="radio" name="size" id="s-12">
<label for="s-12">12</label>
</div>
</div>
<div class="colors">
COLOUR
<div class="color-box">
<input type="radio" name="color" id="c-1" checked>
<label class="color-1" for="c-1"></label>
<input type="radio" name="color" id="c-2">
<label class="color-2" for="c-2"></label>
<input type="radio" name="color" id="c-3">
<label class="color-3" for="c-3"></label>
<input type="radio" name="color" id="c-4">
<label class="color-4" for="c-4"></label>
</div>
</div>
<div class="btn">
<i class="fa-solid fa-circle-plus"></i> ADD TO CART
</div>
</div>
</div>
</body>
</html>
Step 2: Styling with CSS:
Create a dedicated CSS file (style.css) to style the product card. Focus on clean and intuitive design principles, ensuring a visually appealing and user-friendly interface.
/*-------------------- CSS --------------------*/
*{
margin: 0;padding: 0;box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
:root{
--border: 1px solid red;
}
.container {
width: 600px;
height: 400px;
border-radius: 20px;
box-shadow: 0 0 30px #11111155;
position: relative;
display: flex;
}
.left-side {
position: relative;
width: 50%;
margin-right: 10px;
}
.background {
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 0 20px;
overflow: hidden;
}
.background::before {
content: "";
position: absolute;
background: linear-gradient(#ff2929, #b10000);
height: 150%;
width: 100%;
top: 0;
transform: translate(-24%, -10%) rotate(-15deg);
}
.brand-img {
position: absolute;
width: 100%;
left: 0;
}
.brand-img img {
width: 135%;
object-fit: cover;
transform: translate(-25%, 5%);
}
.right-side {
position: relative;
width: 50%;
margin-left: 10px;
padding: 35px 35px 50px 10px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.brand-name {
font-size: 1.5rem;
font-weight: 800;
color: #5d5d5d;
}
.style-number {
font-size: 0.6rem;
color: #9e9e9e;
margin-top: 5px;
}
.style-number span {
color: black;
font-weight: bold;
}
.rate {
font-size: 0.8rem;
}
.star-on i {
color: #fcc12a;
}
.star-off i {
color: #cacaca;
}
.original-price {
color: #c7c7c7;
font-weight: bold;
text-decoration: line-through;
}
.recent-price {
margin-top: -5px;
font-size: 3rem;
font-weight: bold;
color: #bb0000;
}
.size {
color: #9e9e9e;
font-weight: bold;
font-size: 0.7rem;
}
.size input[type="radio"] {
display: none;
}
.size-number {
color: black;
font-weight: bold;
margin-top: 5px;
display: flex;
justify-content: space-between;
}
.size-number label {
display: inline-block;
width: 25px;
aspect-ratio: 1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.size-number input[type="radio"]:checked + label {
background: #bb0000;
color: white;
}
.colors {
color: #9e9e9e;
font-size: 0.7rem;
font-weight: bold;
}
.color-box {
display: flex;
}
.color-box input[type="radio"] {
display: none;
}
.color-box label {
width: 20px;
aspect-ratio: 1;
margin-top: 10px;
margin-right: 30px;
border-radius: 50%;
cursor: pointer;
}
.color-1 {
background: orangered;
}
.color-2 {
background: green;
}
.color-3 {
background: black;
}
.color-4 {
background: slateblue;
}
.color-box input[type="radio"]:checked + label {
border: 1px solid white;
box-shadow: 0 0 5px black;
}
.btn {
position: absolute;
background: linear-gradient(0deg, #00a500, #00c100);
height: 50px;
width: 70%;
border-radius: 50px;
color: white;
bottom: 0;
transform: translate(-50% , 50%);
left: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 0 15px gainsboro;
font-weight: 500;
}
.btn i {
margin-right: 20px;
}
.btn:hover {
background: linear-gradient(0deg, #00c900, #00da00);
}
.btn:active {
background: linear-gradient(0deg, #00a500, #00c100);
}
Implement a hover effect to create a smooth transition when users interact with the product card. This adds a subtle animation, making the UI more dynamic and engaging.
Tailor the content, colors, and styles to match your product branding. Consider integrating additional features like ratings, pricing, or a quick-add-to-cart button based on your specific needs.
0 Comments