Hey, I have written HTML & CSS code for Product card UT Design, you can use it in your client project as well as it will help you to learn new more in HTML & CSS.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Product card UT Design</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="product">
<div class="imgbox">
<img src="1.jpg">
</div>
<div class="details">
<h2>Brand Name<br><span>Women's Designer T-Shirt</span></h2>
<div class="price">$55.99
</div>
<label>Size</label>
<ul>
<li>XS</li>
<li>S</li>
<li>M</li>
<li>XL</li>
<li>XXL</li>
</ul>
<label>Colors</label>
<ul class="color">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="#">Add to cart!</a>
</div>
</div>
</body>
</html>
CSS CODE:
body{
margin: 0;
padding: 0;
background:#ff4faf;
font-family: sans-serif;
}
.product
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 240px;
height: 340px;
background:#fff;
box-shadow: 0 5px 15px rgba(0,0,0,.25);
border-radius: 5px;
overflow: hidden;
}
.product .imgbox
{
height: 100%;
box-sizing: border-box;
}
.product .imgbox img
{
display: block;
width: 90%;
margin: 20px auto 0;
}
.details {
position: absolute;
width: 100%;
bottom: -130px;
background:#fff;
padding: 10px;
box-sizing: border-box;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: .5s;
}
.product:hover .details {
bottom: 0;
box-shadow: 0 -5px 15px rgba(0,0,0.25);
}
.details h2
{
margin: 0;
padding: 0;
font-size: 16px;
width: 100%;
}
.details h2 span
{
font-size: 12px;
color: #ccc;
font-weight: normal;
}
.details .price
{
position: absolute;
top: 10px;
right:20px;
font-weight: bold;
color:#ff4faf;
font-size: 20px;
}
label
{
display: block;
margin-top: 5px;
font-weight: bold;
font-size: 14px;
}
ul
{
display: flex;
margin: 0;
padding: 0;
}
ul li
{
list-style: none;
margin: 5px 5px 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
}
ul li:first-child
{
margin-left: 0;
}
ul.color li
{
width: 16px;
height: 16px;
}
ul.color li:nth-chid(1)
{
background:#ff0;
}
ul.color li:nth-chid(2)
{
background:#f00;
}
ul.color li:nth-chid(3)
{
background:#f0f;
}
ul.color li:nth-chid(4)
{
background:#ff0;
}
ul.color li:nth-chid(5)
{
background:#0ff;
}
a{
display: block;
padding: 5px;
color: #fff;
margin: 15px 0 0;
background:#ff4faf;
text-align: center;
text-decoration: none;
transition: .3s;
cursor: pointer;
}
a:hover
{
color: #fff;
background:#ff209a;
}
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Product card UT Design</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="product">
<div class="imgbox">
<img src="1.jpg">
</div>
<div class="details">
<h2>Brand Name<br><span>Women's Designer T-Shirt</span></h2>
<div class="price">$55.99
</div>
<label>Size</label>
<ul>
<li>XS</li>
<li>S</li>
<li>M</li>
<li>XL</li>
<li>XXL</li>
</ul>
<label>Colors</label>
<ul class="color">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="#">Add to cart!</a>
</div>
</div>
</body>
</html>
CSS CODE:
body{
margin: 0;
padding: 0;
background:#ff4faf;
font-family: sans-serif;
}
.product
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 240px;
height: 340px;
background:#fff;
box-shadow: 0 5px 15px rgba(0,0,0,.25);
border-radius: 5px;
overflow: hidden;
}
.product .imgbox
{
height: 100%;
box-sizing: border-box;
}
.product .imgbox img
{
display: block;
width: 90%;
margin: 20px auto 0;
}
.details {
position: absolute;
width: 100%;
bottom: -130px;
background:#fff;
padding: 10px;
box-sizing: border-box;
box-shadow: 0 0 0 rgba(0,0,0,0);
transition: .5s;
}
.product:hover .details {
bottom: 0;
box-shadow: 0 -5px 15px rgba(0,0,0.25);
}
.details h2
{
margin: 0;
padding: 0;
font-size: 16px;
width: 100%;
}
.details h2 span
{
font-size: 12px;
color: #ccc;
font-weight: normal;
}
.details .price
{
position: absolute;
top: 10px;
right:20px;
font-weight: bold;
color:#ff4faf;
font-size: 20px;
}
label
{
display: block;
margin-top: 5px;
font-weight: bold;
font-size: 14px;
}
ul
{
display: flex;
margin: 0;
padding: 0;
}
ul li
{
list-style: none;
margin: 5px 5px 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
}
ul li:first-child
{
margin-left: 0;
}
ul.color li
{
width: 16px;
height: 16px;
}
ul.color li:nth-chid(1)
{
background:#ff0;
}
ul.color li:nth-chid(2)
{
background:#f00;
}
ul.color li:nth-chid(3)
{
background:#f0f;
}
ul.color li:nth-chid(4)
{
background:#ff0;
}
ul.color li:nth-chid(5)
{
background:#0ff;
}
a{
display: block;
padding: 5px;
color: #fff;
margin: 15px 0 0;
background:#ff4faf;
text-align: center;
text-decoration: none;
transition: .3s;
cursor: pointer;
}
a:hover
{
color: #fff;
background:#ff209a;
}
