Overlay Card

PHOTO EMBED

Fri Feb 11 2022 07:13:40 GMT+0000 (Coordinated Universal Time)

Saved by @avinashnanda #html

<div class="saiyan-vertical-card card-overlay">
  <img
    class="card__img"
    src="https://assets.myntassets.com/h_1440,q_90,w_1080/v1/assets/images/10523-1.jpg"
    alt="image"
  />

  <div class="card__body">
    <h3 class="card__heading">Free Authority</h3>
    <h4 class="card__subtext">Dragon Ball Z</h4>
    <div class="card__price__container">
      <span class="card__price">Rs. 599</span>
      <span class="card__price__stricked">Rs. 1499</span>
      <span class="card__price__discount">(60% OFF)</span>
    </div>
    <div class="card__actions">
      <a class="card__btn card__btn__secondary" href="#"
        ><i class="fa-solid fa-cart-arrow-down"></i> Add to Cart</a
      >

      <div class="card__like__btn">
        <div class="card__badge card__icon__badge">
          <span class="card__badge__icon"
            ><i class="fa-regular fa-heart"></i
          ></span>
        </div>
      </div>
    </div>

    <div class="card-overlay-text">
      <div class="card-overlay-text-bg">Out of Stock</div>
    </div>
  </div>
</div>
content_copyCOPY