<!-- card with header -->
<div class="card">
    <!-- card- header -->
    <div class="card-header">
        <span class="title"> One Plus 9T</span>
        <span class="subtitle"> powered by oneplus </span>
    </div>
    <!-- media div -->
    <div class="card-media">
        <img class="responsive-img" src="https://picsum.photos/200" />
    </div>
    <!-- content div -->
    <div class="card-content">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>

        <span> <strong> Price :</strong> <del>$500</del> &ensp; $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">
            Buy Now
            <span class="material-icons md-18"> shopping_bag </span>
        </button>
    </div>