Product Card HTML CSS JS style

Download free exemple Product Card HTML CSS JS style proweblab

Unfortunately, the author of the video did not leave us the files and we had to recreate them.
The result is a beautiful mobile-style product card design.


CSS

body {
font-family: 'Poppins';
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:#77acee;
}
.container{
position: relative;
z-index: 100;
}
.container .card{
position:relative;
width: 300px;
height: 550px;
background: #ebf4f4;
border-radius: 15px;
overflow: hidden;
margin: 30px;
}
.content-1{
position: relative;
width: 100%;
height: 35%;
background-image: linear-gradient(to bottom right, #0082FF , #252595);
}  
.content-1::after{
content: 'PLAY';
position:absolute;
left: 28%;
top: 20%;
font-size: 5.5em;
font-weight: 800;
color: rgba(227, 233, 238, 0.17);
-webkit-text-fill-color: rgba(49,108,185,0.231);
-webkit-text-stroke-width: 2px;
}
.content-1 .arrow-left{
position: absolute;
top: 8%;
left: 6%;
color: #e2e2e2;
font-size: 20px;
cursor: pointer;
}
.content-1 span{
position: absolute;
top: 8%;
right: 6%;
color: #e2e2e2;
font-size: 20px;
cursor: pointer;
}
.heart i.fa-heart{
 color:#FF0033;
 }
.content-1 .main-image img{
width: 250px;
height: 200px;
position:absolute;
top: 36%;
left: 8%;
z-index: 100;
}
.content-2{
height: 120px;
}
.content-2 .sub-image{
 display: flex;
 justify-content: center;
 align-items: center;
}
.content-2 .sub-image img{
 width: 30px;
 height: 30px;
 margin: 70px 7px 0px;
 padding: 5px;
 background: #fff;
 border-radius: 10px;
 box-shadow: -10px -10px 10px rgba(230,244,244,0.5), 5px 5px 5px rgba(70,70,70,0.12);
 cursor: pointer;
 border: 1.5px solid #fff;
}
.content-2 .sub-image img:hover{
 border: 1.5px solid #0b67df;
}
.content-3{
 position: relative;
 padding: 5px 20px 10px;
}
.branding span:nth-child(1){
 font-size: 18px;
 font-weight: 400;
}
.branding h4{
 font-size: 12px;
 font-weight: 500;
 color:#464444;
 margin-top: 0px;
 margin-bottom: 0px;
}
.ratings span{
 display: inline-block;
 text-align:center;
 line-height: 26px;
 font-size:10px;
 cursor: pointer;
 transition: all 0.5s;
 color:#FF9933;
 }   
 .ratings span:nth-child(5){
  color: #a7a7a3;
 }
.paragraph p{
 font-size: 11.5px;
 color: #000;
 font-weight: 500;
}
.paragraph span{
 color: #0b67df;
 font-weight: 700;
 cursor: pointer;
}
.price{
 display: flex;
 margin: 30px 0 10px;
}
.space{
 flex: 1;
}
.price span{
 font-size: 25px;
 font-weight: 600;
} 
.price span:nth-child(1){
font-size: 20px;
font-weight:400;
margin-top: 3px;
margin-right: 5px;
}
.price a{
 font-size:12px;
 text-decoration:none;
 background-image: linear-gradient(to bottom right, #0082FF , #252595);
 color:#FFFFFF;
 font-weight:500;
 letter-spacing: 1px;
 padding: 10px 30px;
 border-radius: 8px;
 cursor: pointer;
}      

HTML

<div class="container">
<div class="card">
<div class="content-1">
 <span class="arrow-left">
  <i class="fas fa-arrow-left"></i>
  </span>
  <span class="like">
   <i class="fas fa-heart" aria-hidden="true"></i>
  </span>
  <div class="main-image"> 
   <img src="remote.png" id="remote1" alt="">
  </div>
</div>
   <div class="content-2">
     <div class="sub-image">
	 <a><img onclick="change(this)" src="remote.png" alt=""></a>
	 <a><img onclick="change(this)" src="remote1.png" alt=""></a>
	 <a><img onclick="change(this)" src="remote2.png" alt=""></a>
	 <a><img onclick="change(this)" src="remote3.png" alt=""></a>
	 </div>
   </div>
   <div class="content-3">
     <div class="branding">
	  <span>Dualshock 4 Jet Black</span>
	  <h4>Playstation</h4>
	 </div>
     <div class="ratings">
	   <span><i class="fas fa-star"></i></span>
	   <span><i class="fas fa-star"></i></span>
	   <span><i class="fas fa-star"></i></span>
	   <span><i class="fas fa-star"></i></span>
	   <span><i class="fas fa-star"></i></span>
	 </div>
	 <div class="paragraph">
	   <p>All materials on the site are taken from open sources. 
	      <span>Read More</span>
	   </p> 
	  </div> 
	  <div class="price">
	    <span>$</span>
	    <span>55</span>
	  <div class="space"></div>
	  <a>ADD TO CART</a>
	    </div>
   </div>  
</div>
</div>

JS

var container = document.getElementById("remote1");
function change(image){
   container.src = image.src;
}

$(document).ready(function(){
 $(".like").click(function(){
   $(this).toggleClass("heart");
  })
 }); 

 

The full page with the files can be downloaded below.



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.