eCommerce blog post components

        <!--Section: Block Content-->
        <section>

          <div class="jumbotron color-grey-light card-intro-preview">
            <div class="d-flex align-items-center h-100">
              <div class="container text-center py-5">
                <h4 class="mb-0">Title of the article</h4>
              </div>
            </div>
          </div>

        </section>
        <!--Section: Block Content-->
    
      

    <!--Section: Block Content-->
    <section>

      <!-- Featured image -->
      <img src="https://mdbootstrap.com/img/Photos/Slides/img (102).jpg" class="img-fluid z-depth-2 mb-4 rounded"
        alt="Responsive image">

      <!-- Post data -->
      <div class="text-center d-md-flex align-items-center justify-content-between text-uppercase text-muted small">
        <p>by
          <a href="#!" class="text-reset"><strong>marthasteward </strong></a>
          <a href="#!" class="text-reset ml-3">February 20, 2020</a>
        </p>
        <p>
          <a href="#!" class="text-reset">Design</a>,
          <a href="#!" class="text-reset ml-1 mr-3">News</a>
          <a href="#!" class="text-reset">
            <i class="fas fa-comment-alt mr-2"></i>1
          </a>
        </p>
      </div>

    </section>
    <!--Section: Block Content-->

        

          <!-- Divider -->
          <hr class="my-4">
    
        

          <!-- Block Content -->
          <section class="text-justify">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate elit.
              Quisque a eleifend velit. Nullam pellentesque ligula aliquam, tempus eros vitae, hendrerit tellus.
              Praesent volutpat rutrum tortor. Quisque sit amet justo semper, porta metus id, ultrices ante. Nulla
              sem sem, bibendum eu magna ac, ornare ultricies mi. Class aptent taciti sociosqu ad litora torquent
              per conubia nostra, per inceptos himenaeos. Sed eget mollis est, in tincidunt nisl. Fusce bibendum
              nisl at congue tempus. Nam vel volutpat nibh. Vestibulum ante ipsum primis in faucibus orci luctus et
              ultrices posuere cubilia Curae; Nulla et arcu pharetra, rutrum nulla sit amet, volutpat metus. Nunc
              sem arcu, varius laoreet vestibulum sed, mollis eget orci.</p>

            <blockquote class="blockquote my-5">
              <p class="py-1 mb-0"><em>Nulla sem sem, bibendum eu magna ac, ornare ultricies mi.</em></p>
            </blockquote>

            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
              Nulla et arcu pharetra, rutrum nulla sit amet, volutpat metus.&nbsp;<em>Class aptent taciti sociosqu
                ad litora torquent per conubia nostra, per inceptos himenaeos.</em></p>

          </section>
          <!-- Block Content -->
  
        

        <!-- Section: Block Content -->
        <section class="text-center mb-4">

          <hr>

          <div class="d-md-flex justify-content-center align-items-center">

            <p class="font-weight-bold mr-2 mb-2 mb-md-0">Spreed the word: </p>

            <div>

              <!--Facebook-->
              <a class="btn btn-sm btn-fb mr-1 my-2" role="button" href="#!">
                <i class="fab fa-facebook-f"></i>
              </a>
        
              <!--Twitter-->
              <a class="btn btn-sm btn-tw mr-1 my-2" role="button" href="#!">
                <i class="fab fa-twitter"></i>
              </a>
        
              <!--Linkedin-->
              <a class="btn btn-sm btn-li mr-1 my-2" role="button" href="#!">
                <i class="fab fa-linkedin-in"></i>
              </a>

            </div>

          </div>

          <hr>

        </section>
        <!-- Section: Block Content -->
  
      

        <!--Section: Author box-->
        <section class="">

          <h5 class="text-center">About author</h5>

          <div class="media mt-4 px-1">
            <img class="card-img-100 rounded d-flex z-depth-1 mr-3"
              src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" alt="Generic placeholder image">
            <div class="media-body">

              <div class="d-block">
                <h6><a class="text-reset" href="#!">John Doe</a></h6>
                <div class="my-2">
                  <a href="#!" class="text-reset mr-1" role="button"><i class="fab fa-facebook-f"></i></a>
                  <a href="#!" class="text-reset mx-1" role="button"><i class="fab fa-twitter"></i></a>
                  <a href="#!" class="text-reset mx-1" role="button"><i class="fab fa-linkedin-in"></i></a>
                </div>
              </div>

              <p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis molestiae delectus
                nulla porro voluptatem fugiat quod amet aspernatur iusto! Minus debitis quos molestias voluptatibus et vero
                corrupti cupiditate odit dolores.</p>
            </div>
          </div>

        </section>
        <!--Section: Author box-->
  
        

        <!--Section: Block Content-->
        <section class="text-center text-lg-left mb-4">

          <h5 class="text-center mb-4"><span>2</span> comments</h5>

          <div class="media d-block d-md-flex mt-3">
            <img class="card-img-64 rounded z-depth-1 d-flex mx-auto mb-3"
              src="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg" alt="Generic placeholder image">
            <div class="media-body text-center text-md-left ml-md-3 ml-0">
              <h6><a class="text-reset my-0" href="#!">Miley Steward</a></h6>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                laborum.</p>

                <div class="media d-block d-md-flex mt-3">
                  <img class="card-img-64 rounded z-depth-1 d-flex mx-auto mb-3"
                    src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" alt="Generic placeholder image">
                  <div class="media-body text-center text-md-left ml-md-3 ml-0">
                    <h6><a class="text-reset my-0" href="#!">Caroline Horwitz</a></h6>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                      laborum.</p>
                  </div>
                </div>

            </div>
          </div>

        </section>
        <!--Section: Block Content-->
  
      

          <!--Section: Block Content-->
          <section class="mb-5">

            <h5 class="text-center mb-4">Leave a Reply</h5>

            <div class="d-md-flex flex-md-fill">
              <div class="d-flex justify-content-center">
                <img class="card-img-100 rounded d-flex z-depth-1 mr-3 mb-4" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" alt="avatar">
              </div>
              <!-- Your review -->
              <div class="md-form md-outline mt-0 w-100">
                <textarea id="form76" class="md-textarea form-control" rows="4"></textarea>
                <label for="form76">Message</label>
              </div>
            </div>
            <div class="text-center">
              <button class="btn btn-primary btn-md">Submit</button>
            </div>

          </section>
          <!--Section: Block Content-->

        

          <!-- Section: Block Content -->
          <section>

            <div class="mb-5">

              <h5 class="text-center mb-4">Leave a Reply</h5>
      
              <!-- Your review -->
              <div class="md-form md-outline">
                <textarea id="form76" class="md-textarea form-control" rows="4"></textarea>
                <label for="form76">Message</label>
              </div>
      
              <!-- Name -->
              <div class="md-form md-outline">
                <input type="text" id="form75" class="form-control">
                <label for="form75">Name</label>
              </div>
      
              <!-- Email -->
              <div class="md-form md-outline">
                <input type="email" id="form77" class="form-control">
                <label for="form77">Email</label>
              </div>
      
              <!-- Name -->
              <div class="md-form md-outline">
                <input type="text" id="form78" class="form-control">
                <label for="form78">Website</label>
              </div>
      
              <div class="text-center text-md-left">
                <button type="button" class="btn btn-primary btn-md">Submit</button>
              </div>
      
            </div>

          </section>
          <!-- Section: Block Content -->