How to Create Awesome Product Card UI | HTML & CSS Project - Frontend everything 2022
Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Product Card UI with the help of HTML and CSS Only! 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's an Amazing Product Card UI that you can use in your own blog project. So it will look attractive.
Let's start making these amazing Product Card UI Using HTML & CSS step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have used divs for containers.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title>Product Card UI Design</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="imgBx">
<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5782.png" alt="nike-air-shoe">
</div>
<div class="contentBx">
<h2>Nike Shoes</h2>
<div class="size">
<h3>Size :</h3>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</div>
<div class="color">
<h3>Color :</h3>
<span></span>
<span></span>
<span></span>
</div>
<a href="#">Buy Now</a>
</div>
</div>
</div>
</body>
</html>
After the HTML we will design the Product Card UI with CSS..
Output till now
CSS🎈( step - 2)
@import url('https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700,800, 800i, 900&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #131313;
}
.container {
position: relative;
}
.container .card {
position: relative;
width: 320px;
height: 450px;
background: #232323;
border-radius: 20px;
overflow: hidden;
}
.container .card:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1BBFE9;
clip-path: circle(150px at 80% 20%);
transition: 0.5s ease-in-out;
}
.container .card:hover:before {
clip-path: circle(300px at 80% -20%);
}
.container .card:after {
content: "Nike";
position: absolute;
top: 30%;
left: -20%;
font-size: 12em;
font-weight: 800;
font-style: italic;
color: rgba(255, 255, 255, 0.04);
}
.container .card .imgBx {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
width: 100%;
height: 100%;
transition: .5s;
}
.container .card:hover .imgBx {
top: 0%;
transform: translateY(-25%);
/* bug */
}
.container .card .imgBx img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(20deg);
width: 270px;
}
.container .card .contentBx {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
transition: 1s;
z-index: 90;
}
.container .card:hover .contentBx {
height: 210px;
}
.container .card .contentBx h2 {
position: relative;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
.container .card .contentBx .size,
.container .card .contentBx .color {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 20px;
transition: .5s;
opacity: 0;
visibility: hidden;
}
.container .card:hover .contentBx .size {
opacity: 1;
visibility: visible;
transition-delay: .5s;
}
.container .card:hover .contentBx .color {
opacity: 1;
visibility: visible;
transition-delay: .6s;
}
.container .card .contentBx .size h3,
.container .card .contentBx .color h3 {
color: white;
font-weight: 300;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 10px;
}
.container .card .contentBx .size span {
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
font-size: 14px;
display: inline-block;
color: #111;
background: #fff;
margin: 0 5px;
transition: .5s;
color: #111;
border-radius: 4px;
cursor: pointer;
}
.container .card .contentBx .size span:hover { /* other bug */
background: #B90000;
}
.container .card .contentBx .color span {
width: 20px;
height: 20px;
background: #ff0;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
.container .card .contentBx .color span:nth-child(2) {
background: #1BBFE9;
}
.container .card .contentBx .color span:nth-child(3) {
background: #1B2FE9;
}
.container .card .contentBx .color span:nth-child(4) {
background: #080481;
}
.container .card .contentBx a {
display: inline-block;
padding: 10px 20px;
background: #fff;
border-radius: 4px;
margin-top: 10px;
text-decoration: none;
font-weight: 600;
color: #111;
opacity: 0;
transform: translateY(50px);
transition: .5s;
}
.container .card:hover .contentBx a {
opacity: 1;
transform: translateY(0px);
transition-delay: .7s;
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
.
creator of project: ONLINE TUTORIALS
If you found any value in this blog you can support me by buying me a coffee.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
I read your blog now share great information here
ReplyDeleteNdi Ptz Camera
Impressive and powerful suggestion by the author of this blog are really helpful to me.
ReplyDeleteVehicle GPS Brisbane
Great blog ! I am impressed with suggestions of author.
ReplyDeleteFamille d Accueil Irlande
Thanks for share your blog here .
ReplyDeleteladies perfume sale uk
You've written a very detailed post regarding..... This information is useful to me and is also beneficial to people who...... I appreciate you providing this information.digital signature
ReplyDeleteYou've provided here with great substance. I'm happy that I came into this article because it has a wealth of useful information. I appreciate you sharing such an informative article.Offshore Java Developers
ReplyDeleteNice and interesting information and informative too.campamentos de verano en irlanda
ReplyDelete