How to Create Awesome Product Card UI | HTML & CSS Project - Frontend everything 2022

Create Amazing Product Card using HTML and CSS - Frontend Everything

Hello Everyone 👋 Welcome to My New Blog. Today I have made an Amazing Profile 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 Profile Card UI Using HTML & CSS step by step.

Photo 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.

 <div class="container page-wrapper">  
  <div class="page-inner">  
   <div class="row">  
    <div class="el-wrapper">  
     <div class="box-up">  
      <img class="img" src="http://code.slicecrowd.com/labs/4/images/t-shirt.png" alt="">  
      <div class="img-info">  
       <div class="info-inner">  
        <span class="p-name">I feel like Pablo</span>  
        <span class="p-company">Yeezy</span>  
       </div>  
       <div class="a-size">Available sizes : <span class="size">S , M , L , XL</span></div>  
      </div>  
     </div>  
     <div class="box-down">  
      <div class="h-bg">  
       <div class="h-bg-inner"></div>  
      </div>  
      <a class="cart" href="#">  
       <span class="price">$120</span>  
       <span class="add-to-cart">  
        <span class="txt">Add in cart</span>  
       </span>  
      </a>  
     </div>  
    </div>  
   </div>  
  </div>  
 </div>

After the HTML we will design the Profile Card UI with CSS..

Output till now

CSS🎈( step - 2)

 body,  
 html {  
  height: 100%;  
 }  
 .d-flex {  
  display: -webkit-box;  
  display: -ms-flexbox;  
  display: flex;  
 }  
 .align-center {  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
 }  
 .flex-centerY-centerX {  
  justify-content: center;  
  -webkit-box-pack: center;  
  -ms-flex-pack: center;  
  justify-content: center;  
  -webkit-box-align: center;  
  -ms-flex-align: center;  
  align-items: center;  
 }  
 body {  
  background-color: #f7f7f7;  
 }  
 .page-wrapper {  
  height: 100%;  
  display: table;  
 }  
 .page-wrapper .page-inner {  
  display: table-cell;  
  vertical-align: middle;  
 }  
 .el-wrapper {  
  width: 360px;  
  padding: 15px;  
  margin: 15px auto;  
  background-color: #fff;  
 }  
 @media (max-width: 991px) {  
  .el-wrapper {  
   width: 345px;  
  }  
 }  
 @media (max-width: 767px) {  
  .el-wrapper {  
   width: 290px;  
   margin: 30px auto;  
  }  
 }  
 .el-wrapper:hover .h-bg {  
  left: 0px;  
 }  
 .el-wrapper:hover .price {  
  left: 20px;  
  -webkit-transform: translateY(-50%);  
  -ms-transform: translateY(-50%);  
  -o-transform: translateY(-50%);  
  transform: translateY(-50%);  
  color: #818181;  
 }  
 .el-wrapper:hover .add-to-cart {  
  left: 50%;  
 }  
 .el-wrapper:hover .img {  
  webkit-filter: blur(7px);  
  -o-filter: blur(7px);  
  -ms-filter: blur(7px);  
  filter: blur(7px);  
  filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0');  
  opacity: 0.4;  
 }  
 .el-wrapper:hover .info-inner {  
  bottom: 155px;  
 }  
 .el-wrapper:hover .a-size {  
  -webkit-transition-delay: 300ms;  
  -o-transition-delay: 300ms;  
  transition-delay: 300ms;  
  bottom: 50px;  
  opacity: 1;  
 }  
 .el-wrapper .box-down {  
  width: 100%;  
  height: 60px;  
  position: relative;  
  overflow: hidden;  
 }  
 .el-wrapper .box-up {  
  width: 100%;  
  height: 300px;  
  position: relative;  
  overflow: hidden;  
  text-align: center;  
 }  
 .el-wrapper .img {  
  padding: 20px 0;  
  -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);  
  -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);  
  transition: all 800ms cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
 }  
 .h-bg {  
  -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);  
  -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);  
  transition: all 800ms cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  width: 660px;  
  height: 100%;  
  background-color: #3f96cd;  
  position: absolute;  
  left: -659px;  
 }  
 .h-bg .h-bg-inner {  
  width: 50%;  
  height: 100%;  
  background-color: #464646;  
 }  
 .info-inner {  
  -webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);  
  -o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);  
  transition: all 400ms cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  position: absolute;  
  width: 100%;  
  bottom: 25px;  
 }  
 .info-inner .p-name,  
 .info-inner .p-company {  
  display: block;  
 }  
 .info-inner .p-name {  
  font-family: 'PT Sans', sans-serif;  
  font-size: 18px;  
  color: #252525;  
 }  
 .info-inner .p-company {  
  font-family: 'Lato', sans-serif;  
  font-size: 12px;  
  text-transform: uppercase;  
  color: #8c8c8c;  
 }  
 .a-size {  
  -webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);  
  -o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);  
  transition: all 300ms cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  position: absolute;  
  width: 100%;  
  bottom: -20px;  
  font-family: 'PT Sans', sans-serif;  
  color: #828282;  
  opacity: 0;  
 }  
 .a-size .size {  
  color: #252525;  
 }  
 .cart {  
  display: block;  
  position: absolute;  
  width: 100%;  
  height: 100%;  
  top: 0;  
  left: 0;  
  font-family: 'Lato', sans-serif;  
  font-weight: 700;  
 }  
 .cart .price {  
  -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);  
  -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);  
  transition: all 600ms cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  -webkit-transition-delay: 100ms;  
  -o-transition-delay: 100ms;  
  transition-delay: 100ms;  
  display: block;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  -webkit-transform: translate(-50%, -50%);  
  -ms-transform: translate(-50%, -50%);  
  -o-transform: translate(-50%, -50%);  
  transform: translate(-50%, -50%);  
  font-size: 16px;  
  color: #252525;  
 }  
 .cart .add-to-cart {  
  -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);  
  -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);  
  transition: all 600ms cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  transition-timing-function: cubic-bezier(0, 0, 0.18, 1);  
  /* ease-out */  
  -webkit-transition-delay: 100ms;  
  -o-transition-delay: 100ms;  
  transition-delay: 100ms;  
  display: block;  
  position: absolute;  
  top: 50%;  
  left: 110%;  
  -webkit-transform: translate(-50%, -50%);  
  -ms-transform: translate(-50%, -50%);  
  -o-transform: translate(-50%, -50%);  
  transform: translate(-50%, -50%);  
 }  
 .cart .add-to-cart .txt {  
  font-size: 12px;  
  color: #fff;  
  letter-spacing: 0.045em;  
  text-transform: uppercase;  
  white-space: nowrap;  
 }

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!

Click here for the code!

creator of the project: SliceCrowd

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.

More blogs you should give a check!

Pexels Website Clone With HTML< CSS and Javascript
Word Counter In Angular JS
Responsive Newsletter in CSS
Dark And Night mode toggle button in javascript
Best Youtube Channels For Learning Coding
Top-notch Project ideas For HTML< CSS< Javascript
Best Platform To sell your Website Templates
Google Homepage Clone With Html and CSS

Create Product Card using HTML and CSS - Frontend Everything

7 Comments

piyushaggarwal0190@gmail.com

Octet Design Studio1 August 2022 at 23:52
Hey, this is such a great article! Thanks for sharing. Our team will be excited to read this. We are UI UX design agency in Mumbai and we regularly also express our views on UI UX and product design. Do visit our website for more related content.
fragrance2go5 January 2023 at 22:53
This blog is really helpful to deliver updated affairs over internet which is really appraisable.
best perfume offers uk
Hebe Adventures9 January 2023 at 03:25
I am thankful to this blog giving unique and helpful knowledge about this topic.
summercamp ireland
Udaipur property13 January 2023 at 00:39
I found one successful example of this truth through this blog. I am going to use such information now.
flats in udaipur
fragrance2go16 January 2023 at 04:58
Impressive and powerful suggestion by the author of this blog are really helpful to me.
best perfume offers uk
Hebe Adventures17 January 2023 at 00:22
Great blog ! I am impressed with suggestions of author.
host families ireland
Udaipur property20 January 2023 at 06:20
Nice and interesting information and informative too
. bungalow in udaipur

Create Awesome Product Card UI - Frontend Everything