<div class="container">
  <!-- Author -->
  <div class="border-top border-bottom py-4">
    <div class="row align-items-md-center">
      <div class="col-md-7 mb-5 mb-md-0">
        <div class="media align-items-center">
          <div class="avatar avatar-circle">
            <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
          </div>
          <div class="media-body font-size-1 ml-3">
            <span class="h6"><a href="#">Hanna Wolfe</a> <button type="button" class="btn btn-xs btn-soft-primary font-weight-bold transition-3d-hover py-1 px-2 ml-1">Follow</button></span>
            <span class="d-block text-muted">July 15, 2018</span>
          </div>
        </div>
      </div>
      <div class="col-md-5">
        <div class="d-flex justify-content-md-end align-items-center">
          <span class="d-block small font-weight-bold text-cap mr-2">Share:</span>

          <a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle ml-2" href="#">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle ml-2" href="#">
            <i class="fab fa-twitter"></i>
          </a>
          <a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle ml-2" href="#">
            <i class="fab fa-instagram"></i>
          </a>
          <a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle ml-2" href="#">
            <i class="fab fa-telegram"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- End Author -->
</div>

<div class="container">
  <!-- Author -->
  <div class="media align-items-center border-top border-bottom py-5">
    <div class="avatar avatar-circle avatar-xl">
      <img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
    </div>
    <div class="media-body ml-3">
      <small class="d-block small font-weight-bold text-cap">Written by</small>
      <h3 class="mb-0"><a href="#">Hanna Wolfe</a> <button type="button" class="btn btn-xs btn-soft-primary font-weight-bold transition-3d-hover py-1 px-2 ml-1">Follow</button></h3>
      <p class="mb-0">I create advanced website builders made exclusively for web developers.</p>
    </div>
  </div>
  <!-- End Author -->
</div>

<!-- User Profile Section -->
<div class="container space-2">
  <div class="border-bottom w-md-75 w-lg-60 space-bottom-2 mx-md-auto">
    <div class="media d-block d-sm-flex">
      <div class="position-relative mx-auto mb-3 mb-sm-0 mr-sm-4" style="width: 160px; height: 160px;">
        <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img1.jpg" alt="Image Description" width="160" height="160">
        <img class="bg-white position-absolute bottom-0 right-0 rounded-circle p-1" src="../../assets/svg/illustrations/top-vendor.svg" alt="Icon" width="36" height="36" title="Top Writer">
      </div>

      <div class="media-body">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <h1 class="h3">Hanna Wolfe</h1>
          <div class="d-block">
            <button type="button" class="btn btn-xs btn-outline-primary font-weight-bold text-nowrap ml-1">Follow</button>
          </div>
        </div>

        <div class="row text-body font-size-1 mb-2">
          <div class="col-auto">
            <span class="h6">906</span>
            <span>Posts</span>
          </div>
          <div class="col-auto">
            <span class="h6">19.5k</span>
            <span>Followers</span>
          </div>
          <div class="col-auto">
            <span class="h6">109</span>
            <span>Following</span>
          </div>
        </div>

        <p class="mb-0">Nataly is a freelance journalist who's been published by Popular Science, The Washington Post, USA Today, Slate, and many more. Read more at <a class="font-weight-bold" href="#">hannawolfe.com</a></p>
      </div>
    </div>
  </div>
</div>
<!-- End User Profile Section -->

<!-- Author -->
<div class="container">
  <h3 class="mb-4">About the instructor</h3>

  <div class="row">
    <div class="col-lg-4 mb-4 mb-lg-0">
      <div class="avatar avatar-xl avatar-circle mb-3">
        <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
      </div>

      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-2">
        <div class="min-w-3rem text-center mr-2">
          <i class="fa fa-star"></i>
        </div>
        <div class="media-body">
          4.87 Instructor rating
        </div>
      </div>
      <!-- End Icon Block -->

      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-2">
        <div class="min-w-3rem text-center mr-2">
          <i class="fa fa-comments"></i>
        </div>
        <div class="media-body">
          1,533 reviews
        </div>
      </div>
      <!-- End Icon Block -->

      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-2">
        <div class="min-w-3rem text-center mr-2">
          <i class="fa fa-user"></i>
        </div>
        <div class="media-body">
          23,912 students
        </div>
      </div>
      <!-- End Icon Block -->

      <!-- Icon Block -->
      <div class="media text-body font-size-1 mb-2">
        <div class="min-w-3rem text-center mr-2">
          <i class="fa fa-play"></i>
        </div>
        <div class="media-body">
          29 courses
        </div>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-lg-8">
      <!-- Info -->
      <div class="mb-2">
        <h4 class="h5 mb-1"><a href="author.html">Nataly Gaga</a></h4>
        <span class="d-block font-size-1 font-weight-bold">Head of Data Science, Pierian Data Inc.</span>
      </div>

      <p>Nataly Gaga has a BS and MS in Mechanical Engineering from Santa Clara University and years of experience as a professional instructor and trainer for Data Science and programming. She has publications and patents in various fields such as microfluidics, materials science, and data science technologies.</p>
      <!-- End Info -->
    </div>
  </div>
</div>
<!-- End Author -->