User Profile
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.
<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
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="#">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
UX/UI Designer
- Posted 7 hours ago
- Oxford, England, United Kingdom
- Full time
<!-- Page Header -->
<div class="container space-1">
<div class="w-lg-75 mx-lg-auto">
<div class="page-header">
<!-- Media -->
<div class="d-sm-flex mb-3">
<a class="mr-4" href="employer.html">
<img class="avatar avatar-lg mb-3" src="../assets/svg/brands/capsule.svg" alt="Image Description">
</a>
<div class="media-body">
<div class="row mb-2">
<div class="col">
<h1 class="h2 mb-1">UX/UI Designer</h1>
<ul class="list-inline list-separator">
<li class="list-inline-item">
<a href="employer.html">Capsule</a>
</li>
<li class="list-inline-item">
<!-- Rating List -->
<a class="d-flex align-items-center font-size-1" href="employer.html">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
<img class="mr-1" src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="12">
<span class="ml-1">2,391 reviews</span>
</a>
<!-- End Rating List -->
</li>
</ul>
</div>
<div class="col-auto">
<!-- Checkbbox Bookmark -->
<div class="custom-control custom-checkbox-bookmark">
<input type="checkbox" id="checkboxBookmarkSaveJob" class="custom-control-input custom-checkbox-bookmark-input">
<label class="custom-checkbox-bookmark-label" for="checkboxBookmarkSaveJob">
<span class="custom-checkbox-bookmark-default">
<i class="far fa-star mr-1"></i> <small class="text-body">Save this job</small>
</span>
<span class="custom-checkbox-bookmark-active">
<i class="fas fa-star mr-1"></i> <small class="text-body">Saved</small>
</span>
</label>
</div>
<!-- End Checkbbox Bookmark -->
</div>
</div>
<!-- End Row -->
<ul class="list-inline list-separator small text-body mb-2">
<li class="list-inline-item">Posted 7 hours ago</li>
<li class="list-inline-item">Oxford, England, United Kingdom</li>
<li class="list-inline-item">Full time</li>
</ul>
</div>
</div>
<!-- End Media -->
</div>
</div>
</div>
<!-- End Page Header -->
Component #6
Maria Williams
- London, UK
- maria@gmail.com
- +1 (062) 109-9222
<!-- Page Header -->
<div class="container space-1">
<div class="page-header">
<!-- Media -->
<div class="d-flex align-items-lg-center">
<div class="mr-4">
<img class="avatar avatar-xl avatar-circle" src="../assets/img/100x100/img20.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="row">
<div class="col-lg mb-3 mb-lg-0">
<h1 class="h2 mb-1">Maria Williams</h1>
<ul class="list-inline list-separator font-size-1">
<li class="list-inline-item">
<i class="fas fa-map-marker-alt text-primary mr-1"></i> London, UK
</li>
<li class="list-inline-item">maria@gmail.com</li>
<li class="list-inline-item">+1 (062) 109-9222</li>
</ul>
</div>
<div class="col-lg-auto align-self-lg-end text-lg-right">
<a class="btn btn-sm btn-primary mb-1 mr-1" href="#">
<i class="far fa-envelope fa-sm mr-1"></i> Contact me
</a>
<!-- Unfold -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-icon btn-sm btn-outline-primary mb-1" href="javascript:;"
data-hs-unfold-options='{
"target": "#importResumeFromDropdown",
"type": "css-animation"
}'>
<i class="fas fa-share-alt"></i>
</a>
<div id="importResumeFromDropdown" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-right mt-1">
<a class="dropdown-item" href="#">
<i class="fab fa-facebook dropdown-item-icon"></i> Facebook
</a>
<a class="dropdown-item" href="#">
<i class="fab fa-instagram dropdown-item-icon"></i> Instagram
</a>
<a class="dropdown-item" href="#">
<i class="fab fa-twitter dropdown-item-icon"></i> Twitter
</a>
</div>
</div>
<!-- End Unfold -->
</div>
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Page Header -->
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF UNFOLD
// =======================================================
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>
