HTML CSS Product Card #3

How to create a simple responsive HTML CSS product card.

Final output:

Final Output Code for Responsive HTML CSS Product Card #3:

HTML

<div class="cy-product-card">
    <span class="cy-product-card-label">Best Seller</span>
    <img src="watch.jpg" alt="">
    <div class="cy-product-card-body">
        <span class="cy-product-card-category">Premium</span>
        <h3 class="cy-product-card-title">Midnight Black Watch</h3>
        <div class="cy-product-card-ratings-wrapper">
            <img src="star.svg" alt="">
            <img src="star.svg" alt="">
            <img src="star.svg" alt="">
            <img src="star.svg" alt="">
            <img src="star.svg" alt="">
        </div>
        <div class="cy-product-card-footer">
            <span class="cy-product-card-price">$1499</span>
            <a href="#">Add to Cart</a>
        </div>
    </div>
</div>

CSS

 * {
     margin: 0;
 }

 body {
     font-family: Arial, Helvetica, sans-serif;
 }

 .cy-product-card {
     max-width: 22rem;
     border-radius: 1.5rem;
     box-shadow: 0px 8px 10px -6px #0000001A;
     box-shadow: 0px 20px 25px -5px #0000001A;
     overflow: hidden;
     position: relative;
     background: linear-gradient(to top, #000000, #00000080, #00000000);
 }

 .cy-product-card img {
     width: 100%;
     max-height: 22rem;
     object-fit: cover;
     object-position: center top;
     transition: transform .3s ease-in-out;
 }

 .cy-product-card img:hover {
     transform: scale(1.1);
 }

 .cy-product-card .cy-product-card-label {
     position: absolute;
     top: 1rem;
     left: 1rem;
     text-transform: uppercase;
     font-size: 0.75rem;
     padding: .375rem 1rem;
     border-radius: 50rem;
     background: linear-gradient(to right, #FFB900, #FF6900);
 }

 .cy-product-card .cy-product-card-body {
     padding: 2rem 1.5rem 1.5rem;
     color: #ffffff;
 }

 .cy-product-card .cy-product-card-category {
     text-transform: uppercase;
     font-size: 0.75rem;
     color: #FFB900;
     margin-bottom: .375rem;
 }

 .cy-product-card .cy-product-card-title {
     font-size: 1.5rem;
     line-height: 1.3;
     font-weight: 500;
     margin-bottom: .875rem;
 }

 .cy-product-card .cy-product-card-ratings-wrapper {
     display: flex;
     gap: 2px;
     margin-bottom: 1rem;
 }

 .cy-product-card .cy-product-card-ratings-wrapper img {
     width: 1rem;
     height: 1rem;
 }

 .cy-product-card .cy-product-card-footer {
     display: flex;
     gap: 1rem;
     justify-content: space-between;
     align-items: center;
 }

 .cy-product-card .cy-product-card-price {
     font-size: 1.875rem;
     line-height: 1.2;
 }

 .cy-product-card .cy-product-card-footer a {
     background-color: #ffffff;
     color: #000000;
     text-decoration: none;
     border-radius: 50rem;
     padding: 0.75rem 1.5rem;
     font-weight: 500;
     font-size: 1rem;
     line-height: 1.5;
     border: 0;
     transition: background-color .3s ease-in-out;
 }

 .cy-product-card .cy-product-card-footer a:hover {
     background-color: #FFB900;
 }

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.