Product Card in CSS

HTML CSS JS Tidy

<section>
  <h2>Leading Skin care Products</h2>
  <div class="container">
    <div class="card">
      <div class="card-inner" style="--clr:#fff;">
        <div class="box">
          <div class="imgBox">
            <img src="https://images.unsplash.com/photo-1615396899839-c99c121888b0?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Skin Whiteing">
          </div>
          <div class="icon">
            <a href="#" class="iconBox"> <span class="material-symbols-outlined">
                arrow_outward
              </span></a>
          </div>
        </div>
      </div>
      <div class="content">
        <h3>BigGlow</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut euismod ligula.</p>
        <ul>
          <li class="tag">Glow</li>
          <li class="tagNew">New</li>
        </ul>
      </div>
    </div>
    <div class="card">
      <div class="card-inner" style="--clr:#fff;">
        <div class="box">
          <div class="imgBox">
            <img src="https://images.unsplash.com/photo-1564594218151-a67498fb2922?q=80&w=2786&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="turmeric">
          </div>
          <div class="icon">
            <a href="#" class="iconBox"> <span class="material-symbols-outlined">
                arrow_outward
              </span></a>
          </div>
        </div>
      </div>
      <div class="content">
        <h3>Turmeric Brightening</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut euismod ligula.</p>
        <ul>
          <li class="tagNew">Brightening</li>
          <li class="tagDis">Oragnic</li>
        </ul>
      </div>
    </div>
    <div class="card">
      <div class="card-inner" style="--clr:#fff;">
        <div class="box">
          <div class="imgBox">
            <img src="https://images.unsplash.com/photo-1567721913486-6585f069b332?q=80&w=2788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Skin care">
          </div>
          <div class="icon">
            <a href="#" class="iconBox"> <span class="material-symbols-outlined">
                arrow_outward
              </span></a>
          </div>
        </div>
      </div>
      <div class="content">
        <h3>Skin Care Pack</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut euismod ligula.</p>
        <ul>
          <li class="tagDis">50%Off</li>
          <li class="tagNew">full Skin Care</li>
        </ul>
      </div>
    </div>
  </div>
</section>

HTML CSS JS Tidy

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #fff;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

section {
    padding-block: min(20vh, 2rem);
    width: calc(min(76.5rem, 90%));
    margin-inline: auto;
    color: #111;
    h2 {
        text-transform: capitalize;
        letter-spacing: 0.025em;
        font-size: clamp(2rem, 1.8125rem + 0.75vw, 2.6rem);
    }
    a {
        display: inline-block;
        text-decoration: none;
    }
    .container {
        margin-top: 5em;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        gap: 2rem;
        .card {
            &:nth-child(1) .box .icon .iconBox {
                background: #7cb9e8;
            }
            &:nth-child(2) .box .icon .iconBox {
                background: #966fd6;
            }
            &:nth-child(3) .box .icon .iconBox {
                background: #ab274f;
            }
            ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 0.625rem;
                li {
                    text-transform: uppercase;
                    background: var(--clr-tag);
                    color: #282828;
                    font-weight: 700;
                    font-size: 0.8rem;
                    padding: 0.375rem 0.625rem;
                    border-radius: 0.188rem;
                }
                .tag {
                    color: #fff;
                    background-color: #aba0d9;
                }
                .tagNew {
                    color: #fff;
                    background-color: #b19cd9;
                }
                .tagDis {
                    color: #fff;
                    background-color: #e40078;
                }
            }
            .content {
                padding: 0.938rem 0.625rem;
                h3 {
                    text-transform: capitalize;
                    font-size: clamp(1.5rem, 1.3909rem + 0.4364vw, 1.8rem);
                }
                p {
                    margin: 0.625rem 0 1.25rem;
                    color: #565656;
                }
            }
        }
        .card-inner {
            position: relative;
            width: inherit;
            height: 18.75rem;
            background: var(--clr);
            border-radius: 1.25rem;
            border-bottom-right-radius: 0;
            overflow: hidden;
            .box {
                width: 100%;
                height: 100%;
                background: #fff;
                border-radius: 1.25rem;
                overflow: hidden;
                .imgBox {
                    position: absolute;
                    inset: 0;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .icon {
                    position: absolute;
                    bottom: -0.375rem;
                    right: rem;
                    width: 6rem;
                    height: 6rem;
                    background: var(--clr);
                    border-top-left-radius: 50%;
				    border-top-right-radius: 50%;
                    &:hover .iconBox {
                        transform: scale(.9);
                    }
                    .iconBox {
                        position: absolute;
                        inset: 0.625rem;
                        background: #282828;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        transition: 0.3s;
                        span {
                            color: #fff;
                            font-size: 1.5rem;
                        }
                    }
                }
            }
        }
    }
}

HTML CSS JS Tidy

Product Card in CSS

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply