<!-- card-overlay -->
 <div class="card">
     <!-- media div -->
     <div class="card-media">
         <img class="" src="https://picsum.photos/200" />
     </div>
     <!-- content div -->
     <div class="card-content">
         <span class="title"> Chrome-book 500 </span>
         <span class="subtitle"> powered by Google </span>
         <div class="card-description">
             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum,
             dolor sit amet consectetur adipisicing elit.
         </div>
         <span>Price : <del>$500</del> $455 </span>
     </div>

     <!-- buttons div -->
     <div class="card-footer">
         <button class="btn btn-secondary-outline">
             <span class="material-icons md-18"> shopping_cart </span>
             Add to cart
         </button>
         <button class="btn btn-primary-outline">
             Buy Now
             <span class="material-icons md-18"> shopping_bag </span>
         </button>
     </div>

     <div class="overlay-content gray-bg-color">
         <div class="overlay-text light-text">Out of Stock</div>
         <button class="btn btn-secondary btn-large">Remind me!</button>
     </div>
 </div>