User Profile

Component #1

Image Description
Hanna Wolfe July 15, 2018
Share:
                    
                      <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>
                    
                  

Component #2

Image Description
Written by

Hanna Wolfe

I create advanced website builders made exclusively for web developers.

                    
                      <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>
                    
                  

Component #3

Image Description Icon

Hanna Wolfe

906 Posts
19.5k Followers
109 Following

Nataly is a freelance journalist who's been published by Popular Science, The Washington Post, USA Today, Slate, and many more. Read more at hannawolfe.com

                    
                      <!-- 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 -->
                    
                  

Component #4

About the instructor

Image Description
4.87 Instructor rating
1,533 reviews
23,912 students
29 courses

Nataly Gaga

Head of Data Science, Pierian Data Inc.

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.

                    
                      <!-- 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 -->