Media Objects
Component #1
Hanna Wolfe
July 15, 2018
<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
Written by
Hanna Wolfe
I create advanced website builders made exclusively for web developers.
3 Comments
-
Dave Austin 1 day agoAs a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.
Reply -
Christina Kray 2 days agoSince our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.
Reply
<div class="container">
<!-- Author -->
<div class="media align-items-center border-top border-bottom py-5 my-8">
<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 class="pt-2 mb-11">
<div class="mb-4">
<h3>3 Comments</h3>
</div>
<ul class="list-unstyled">
<!-- Comment -->
<li class="mb-5">
<div class="media align-items-center mb-2">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">Dave Austin</span>
<small class="text-muted">1 day ago</small>
</div>
</div>
</div>
<p>As a Special Education teacher this resonates so well with me. Fighting with gen ed teachers to flatten for the students with learning disabilities. It also confirms some things for me in my writing.</p>
<a class="font-weight-bold" href="#">Reply</a>
<ul class="list-unstyled mt-5">
<!-- Comment -->
<li class="mb-5">
<div class="border-left border-3 pl-4">
<div class="media align-items-center mb-2">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">Hanna Wolfe</span>
<small class="text-muted">1 day ago</small>
</div>
</div>
</div>
<p>Love it Dave! We're all about keeping it up.</p>
<a class="font-weight-bold" href="#">Reply</a>
</div>
</li>
<!-- End Comment -->
</ul>
</li>
<!-- End Comment -->
<!-- Comment -->
<li class="mb-5">
<div class="media align-items-center mb-2">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 mb-0">Christina Kray</span>
<small class="text-muted">2 days ago</small>
</div>
</div>
</div>
<p>Since our attention spans seem to be shrinking by the day — keeping it simple is more important than ever.</p>
<a class="font-weight-bold" href="#">Reply</a>
</li>
<!-- End Comment -->
</ul>
</div>
</div>
Component #3
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
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 -->
Component #5
Reviews
April 3, 2019
Maria Kunis
This course helped me in learning python in a very simple and effective way & boosts up my confidence. Concepts have been explained in a crystal clear way.
December 25, 2018
Lui Marcu
HUUUUUUUUUUUGE fan of Emily Milda
Master of Python, I took other classes also. I was very impressed, a very good teacher, in detail explanations, easy to understand. I owe him many thanks and hopefully. THAAAANK YOUU!
November 9, 2018
Brandon Rogers
Section 19 needs to be addressed. the 1st topic in the section tells us it is optional and can be skipped. this is not true and your instructions tell us to contact udemy support if there is an issue. we did and they told us to contact you.
<!-- Ratings & Reviews -->
<div class="container space-2">
<!-- Overall Ratings -->
<div class="mb-7">
<h3 class="mb-4">Student feedback</h3>
<div class="row align-items-center">
<div class="col-lg-4 mb-4 mb-lg-0">
<!-- Overall Review Rating -->
<div class="card bg-primary text-white text-center py-4 px-3">
<span class="display-4">4.87</span>
<ul class="list-inline mb-2">
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="22"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="22"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="22"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="22"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-half.svg" alt="Review rating" width="22"></li>
</ul>
<span>Course rating</span>
</div>
<!-- End Overall Review Rating -->
</div>
<div class="col-lg-8">
<ul class="list-unstyled list-sm-article mb-0">
<li>
<!-- Review Rating -->
<a class="d-flex align-items-center font-size-1" href="javascript:;">
<div class="progress w-100" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 64%;" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center min-w-21rem ml-3">
<ul class="list-inline mr-1 mb-2">
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
</ul>
<span>892</span>
</div>
</a>
<!-- End Review Rating -->
</li>
<li>
<!-- Review Rating -->
<a class="d-flex align-items-center font-size-1" href="javascript:;">
<div class="progress w-100" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 24%;" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center min-w-21rem ml-3">
<ul class="list-inline mr-1 mb-2">
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
</ul>
<span>368</span>
</div>
</a>
<!-- End Review Rating -->
</li>
<li>
<!-- Review Rating -->
<a class="d-flex align-items-center font-size-1" href="javascript:;">
<div class="progress w-100" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 8%;" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center min-w-21rem ml-3">
<ul class="list-inline mr-1 mb-2">
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
</ul>
<span>124</span>
</div>
</a>
<!-- End Review Rating -->
</li>
<li>
<!-- Review Rating -->
<a class="d-flex align-items-center font-size-1" href="javascript:;">
<div class="progress w-100" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 3%;" aria-valuenow="3" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center min-w-21rem ml-3">
<ul class="list-inline mr-1 mb-2">
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
</ul>
<span>56</span>
</div>
</a>
<!-- End Review Rating -->
</li>
<li>
<!-- Review Rating -->
<a class="d-flex align-items-center font-size-1" href="javascript:;">
<div class="progress w-100" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex align-items-center min-w-21rem ml-3">
<ul class="list-inline mr-1 mb-2">
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
<li class="list-inline-item mr-1"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16"></li>
</ul>
<span>23</span>
</div>
</a>
<!-- End Review Rating -->
</li>
</ul>
</div>
</div>
</div>
<!-- End Overall Ratings -->
<!-- Reviews Header -->
<div class="row justify-content-md-between align-items-md-center">
<div class="col-md-6">
<h3 class="mb-0">Reviews</h3>
</div>
<div class="col-md-6">
<!-- Search Form -->
<form class="input-group input-group-sm">
<input type="search" class="form-control" placeholder="Search reviews" aria-label="Search reviews">
<div class="input-group-append">
<button type="button" class="btn btn-primary">
<i class="fa fa-search"></i>
</button>
</div>
</form>
<!-- End Search Form -->
</div>
</div>
<!-- End Reviews Header -->
<!-- Review -->
<div class="border-top pt-5 mt-5">
<div class="row mb-2">
<div class="col-lg-4 mb-3 mb-lg-0">
<!-- Review -->
<div class="media align-items-center">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-body font-size-1">April 3, 2019</span>
<h4 class="mb-0">Maria Kunis</h4>
</div>
</div>
<!-- End Review -->
</div>
<div class="col-lg-8">
<ul class="list-inline mb-2">
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
</ul>
<p>This course helped me in learning python in a very simple and effective way & boosts up my confidence. Concepts have been explained in a crystal clear way.</p>
</div>
</div>
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="btn btn-xs btn-outline-secondary" href="javascript:;">Yes</a>
</span>
<span class="ml-2">
<a class="btn btn-xs btn-outline-secondary" href="javascript:;">No</a>
</span>
<span class="ml-3">
<i class="far fa-flag text-body mr-1"></i>
<a class="text-muted" href="#">Report</a>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<!-- Review -->
<div class="border-top pt-5 mt-5">
<div class="row mb-2">
<div class="col-lg-4 mb-3 mb-lg-0">
<!-- Review -->
<div class="media align-items-center">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-body font-size-1">December 25, 2018</span>
<h4 class="mb-0">Lui Marcu</h4>
</div>
</div>
<!-- End Review -->
</div>
<div class="col-lg-8">
<ul class="list-inline mb-2">
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
</ul>
<p>HUUUUUUUUUUUGE fan of Emily Milda</p>
<p>Master of Python, I took other classes also. I was very impressed, a very good teacher, in detail explanations, easy to understand. I owe him many thanks and hopefully. THAAAANK YOUU!</p>
</div>
</div>
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="btn btn-xs btn-outline-secondary" href="javascript:;">Yes</a>
</span>
<span class="ml-2">
<a class="btn btn-xs btn-outline-secondary" href="javascript:;">No</a>
</span>
<span class="ml-3">
<i class="far fa-flag text-body mr-1"></i>
<a class="text-muted" href="#">Report</a>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<!-- Review -->
<div class="border-top pt-5 mt-5">
<div class="row mb-2">
<div class="col-lg-4 mb-3 mb-lg-0">
<!-- Review -->
<div class="media align-items-center">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-body font-size-1">November 9, 2018</span>
<h4 class="mb-0">Brandon Rogers</h4>
</div>
</div>
<!-- End Review -->
</div>
<div class="col-lg-8">
<ul class="list-inline mb-2">
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="16" height="16"></li>
<li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16" height="16"></li>
</ul>
<p>Section 19 needs to be addressed. the 1st topic in the section tells us it is optional and can be skipped. this is not true and your instructions tell us to contact udemy support if there is an issue. we did and they told us to contact you.</p>
</div>
</div>
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="btn btn-xs btn-outline-secondary" href="javascript:;">Yes</a>
</span>
<span class="ml-2">
<a class="btn btn-xs btn-outline-secondary" href="javascript:;">No</a>
</span>
<span class="ml-3">
<i class="far fa-flag text-body mr-1"></i>
<a class="text-muted" href="#">Report</a>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<div class="border-top text-center pt-5 mt-5">
<a class="btn btn-sm btn-outline-primary transition-3d-hover" href="#">See all Reviews</a>
</div>
</div>
<!-- End Ratings & Reviews -->
Component #6
Reviews (156)
Dave Austin
This is a pretty cool integration. It is fun and easy to use. I had to make a few sharing for work and Gliffy helped me get the job done. If I had a tablet or touch screen, I would use this more.
Was this review helpful? Yes No
Google Drive
Love it Dave! We're all about keeping it fun and easy.
<div class="tab-pane fade pt-6" id="pills-two-example1" role="tabpanel" aria-labelledby="pills-two-example1-tab">
<!-- Review Header -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center border-bottom pb-3 mb-4">
<div class="d-flex align-items-center mb-2 mb-sm-0">
<h4 class="mb-0">Reviews <small class="text-muted ml-1">(156)</small></h4>
</div>
<!-- Select -->
<select class="js-selectpicker dropdown-select"
data-hs-selectpicker-options='{
"width": "fit",
"style": "btn-soft-secondary btn-xs"
}'>
<option value="showCategoryByFilterSelect1" selected>Newest first</option>
<option value="showCategoryByFilterSelect2">Highest rated</option>
<option value="showCategoryByFilterSelect3">Lowest rated</option>
</select>
<!-- End Select -->
</div>
<!-- End Review Header -->
<!-- Review -->
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body border-bottom pb-6 mb-6">
<span class="h4">Christina Kray</span>
<p>Just started using Front for Google Drive, and finding it to serve all my needs and it integrates perfectly with Front! Sharing diagrams is now much easier for our team.</p>
<small class="text-body mr-2">Was this review helpful?</small>
<a class="small mr-2" href="javascript:;">Yes</a>
<a class="small" href="javascript:;">No</a>
<!-- Reply -->
<div class="card bg-light shadow-none p-3 mt-4">
<div class="media">
<div class="avatar mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img23.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark font-weight-bold">Google Drive</span>
<p>Thanks for the review Maria! Let us know if you ever need anything.</p>
</div>
</div>
</div>
<!-- End Reply -->
</div>
</div>
<!-- End Review -->
<!-- Review -->
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body border-bottom pb-6 mb-6">
<span class="h4">Dave Austin</span>
<p>This is a pretty cool integration. It is fun and easy to use. I had to make a few sharing for work and Gliffy helped me get the job done. If I had a tablet or touch screen, I would use this more.</p>
<small class="text-body mr-2">Was this review helpful?</small>
<a class="small mr-2" href="javascript:;">Yes</a>
<a class="small" href="javascript:;">No</a>
<!-- Reply -->
<div class="card bg-light shadow-none p-3 mt-4">
<div class="media">
<div class="avatar mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img23.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark font-weight-bold">Google Drive</span>
<p>Love it Dave! We're all about keeping it fun and easy.</p>
</div>
</div>
</div>
<!-- End Reply -->
</div>
</div>
<!-- End Review -->
<!-- Review -->
<div class="media">
<div class="avatar avatar-circle mr-3">
<img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
</div>
<div class="media-body border-bottom pb-6 mb-6">
<span class="h4">Nika Mundada</span>
<p>I love Google Drive! It's super easy to get started and works great with Front pages.</p>
<small class="text-body mr-2">Was this review helpful?</small>
<a class="small mr-2" href="javascript:;">Yes</a>
<a class="small" href="javascript:;">No</a>
<!-- Reply -->
<div class="card bg-light shadow-none p-3 mt-4">
<div class="media">
<div class="avatar mr-3">
<img class="avatar-img" src="../../assets/img/160x160/img23.png" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block text-dark font-weight-bold">Google Drive</span>
<p>Thanks for the feedback Nika!</p>
</div>
</div>
</div>
<!-- End Reply -->
</div>
</div>
<!-- End Review -->
<div class="text-center">
<a class="font-weight-bold" href="#">Read More Reviews <i class="fas fa-angle-right ml-1"></i></a>
</div>
</div>
Component #7
77%
of customers recommend this product
Sort on
I jus love it!
I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.
Hailey
- Verified Purchase
Really nice
Material is great and the hat is comfortable and stylish.
David
- Verified Purchase
A really well built cap. It looks great and wears just as well. A great staple in ball caps.
Chrizelle
- Verified Purchase
<!-- Review Section -->
<div class="container space-2">
<div class="row">
<div class="col-lg-4 mb-7 mb-lg-0">
<div class="border-bottom pb-4 mb-4">
<!-- Overall Rating Stats -->
<div class="card bg-primary text-white p-4 mb-3">
<div class="d-flex justify-content-center align-items-center">
<span class="display-4">4.7</span>
<div class="ml-3">
<div class="small">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<span><span class="font-weight-bold">287</span> reviews</span>
</div>
</div>
</div>
<!-- End Overall Rating Stats -->
<h3>Rating breakdown</h3>
<!-- Ratings -->
<ul class="list-unstyled list-sm-article">
<li>
<a class="row align-items-center mx-n2 font-size-1" href="javascript:;">
<div class="col-3 px-2">
<span class="text-dark">5 stars</span>
</div>
<div class="col-7 px-2">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right px-2">
<span>205</span>
</div>
</a>
</li>
<li>
<a class="row align-items-center mx-n2 font-size-1" href="javascript:;">
<div class="col-3 px-2">
<span class="text-dark">4 stars</span>
</div>
<div class="col-7 px-2">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right px-2">
<span>55</span>
</div>
</a>
</li>
<li>
<a class="row align-items-center mx-n2 font-size-1" href="javascript:;">
<div class="col-3 px-2">
<span class="text-dark">3 stars</span>
</div>
<div class="col-7 px-2">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right px-2">
<span>23</span>
</div>
</a>
</li>
<li>
<a class="row align-items-center mx-n2 font-size-1" href="javascript:;">
<div class="col-3 px-2">
<span class="text-dark">2 stars</span>
</div>
<div class="col-7 px-2">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right px-2">
<span>0</span>
</div>
</a>
</li>
<li>
<a class="row align-items-center mx-n2 font-size-1" href="javascript:;">
<div class="col-3 px-2">
<span class="text-dark">1 stars</span>
</div>
<div class="col-7 px-2">
<div class="progress" style="height: 4px;">
<div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-2 text-right px-2">
<span>4</span>
</div>
</a>
</li>
</ul>
<!-- End Ratings -->
</div>
<span class="d-block display-4 text-dark">77%</span>
<p class="small">of customers recommend this product</p>
</div>
<div class="col-lg-8">
<div class="pl-lg-4">
<!-- Title -->
<div class="border-bottom pb-4 mb-4">
<div class="d-flex justify-content-between align-items-center">
<h4 class="text-body mb-0">Sort on</h4>
<!-- Select -->
<select class="js-selectpicker dropdown-select"
data-hs-selectpicker-options='{
"width": "fit",
"style": "btn-soft-secondary btn-xs"
}'>
<option value="mostRecent" selected>Most recent</option>
<option value="relevant">Relevant</option>
<option value="helpful">Helpful</option>
<option value="newest">Newest</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Title -->
<!-- Review -->
<div class="border-bottom pb-4 mb-4">
<!-- Review Rating -->
<div class="d-flex justify-content-between align-items-center text-body font-size-1 mb-3">
<div class="text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<span>April 3, 2019</span>
</div>
<!-- End Review Rating -->
<h4 class="text-uppercase">I jus love it!</h4>
<p>I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.</p>
<!-- Reviewer -->
<div class="text-body font-size-1 mb-2">
<span class="text-dark font-weight-bold">Hailey</span>
<span>- Verified Purchase</span>
</div>
<!-- End Reviewer -->
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="link-underline" href="javascript:;">Yes</a>
<span>(45)</span>
</span>
<span class="ml-2">
<a class="link-underline" href="javascript:;">No</a>
<span>(21)</span>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<!-- Review -->
<div class="border-bottom pb-4 mb-4">
<!-- Review Rating -->
<div class="d-flex justify-content-between align-items-center text-body font-size-1 mb-3">
<div class="text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<span>January 19, 2019</span>
</div>
<!-- End Review Rating -->
<h4 class="text-uppercase">Really nice</h4>
<p>Material is great and the hat is comfortable and stylish.</p>
<!-- Reviewer -->
<div class="text-body font-size-1 mb-2">
<span class="text-dark font-weight-bold">David</span>
<span>- Verified Purchase</span>
</div>
<!-- End Reviewer -->
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="link-underline" href="javascript:;">Yes</a>
<span>(2)</span>
</span>
<span class="ml-2">
<a class="link-underline" href="javascript:;">No</a>
<span>(0)</span>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<!-- Review -->
<div class="border-bottom pb-4 mb-4">
<!-- Review Rating -->
<div class="d-flex justify-content-between align-items-center text-body font-size-1 mb-3">
<div class="text-warning">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<span>December 21, 2018</span>
</div>
<!-- End Review Rating -->
<p>A really well built cap. It looks great and wears just as well. A great staple in ball caps.</p>
<!-- Reviewer -->
<div class="text-body font-size-1 mb-2">
<span class="text-dark font-weight-bold">Chrizelle</span>
<span>- Verified Purchase</span>
</div>
<!-- End Reviewer -->
<!-- Helpful -->
<div class="font-size-1">
<span>Was this helpful?</span>
<span class="ml-2">
<a class="link-underline" href="javascript:;">Yes</a>
<span>(0)</span>
</span>
<span class="ml-2">
<a class="link-underline" href="javascript:;">No</a>
<span>(0)</span>
</span>
</div>
<!-- End Helpful -->
</div>
<!-- End Review -->
<div class="d-sm-flex justify-content-sm-end">
<a class="btn btn-link w-100 w-sm-auto px-5 mb-2 mr-sm-3" href="#">Read More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
<button type="button" class="btn btn-primary btn-pill w-100 w-sm-auto transition-3d-hover px-5 mb-2">Write a Review</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Review Section -->