Page Header
Snippet #1
Program List
Change your life with a 100% personalized program. Join the boss movement. Start your journey today. Get the result you want or it's free. Custom training program. Get access to 24/7 support.
<!--start hero section-->
<section
class="bg-shape bg-cover"
style="background-image: linear-gradient(180deg,
rgba(30, 24, 53, 0.4) 0%, rgba(30, 24, 53, 0.4) 90.16%),
url(../assets/images/program-hero-img.jpg)"
>
<div class="container">
<div class="row">
<div class="offset-lg-2 col-lg-8 col-md-12 col-12">
<div class="py-lg-16 py-xxl-19 py-15 text-light
text-center">
<!--heading-->
<h1 class="text-white mb-4 display-4">Program List</h1>
<p class="lead mb-0">
Change your life with a 100% personalized program. Join the boss movement. Start your
journey today. Get the result you want or it's free. Custom training
program. Get access to 24/7 support.
</p>
</div>
</div>
</div>
</div>
</section>
<!--end of hero section-->Snippet #2
Scarlett Robertson
Feugiat in ante metus dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu non odio at maecenas volutpat
Back to all Category 9 Articles to read
<!--start hero section -->
<section class="bg-shape bg-dark">
<div class="container">
<div class="row">
<div class="offset-xl-2 col-xl-8 col-lg-12 col-md-12
col-12">
<div class="pt-lg-18 pb-lg-8 py-12 text-center">
<img src="../assets/images/avatar-4.png" alt="avatar" class="rounded-circle avatar-xxl mx-auto mb-4" />
<h1 class="display-4 text-white">Scarlett Robertson</h1>
<p class="lead text-light mb-0">Feugiat in ante metus dictum at tempor
commodo ullamcorper a lacus vestibulum sed arcu non odio at maecenas volutpat</p>
<div class="mt-6 mb-4">
<a href="#"
class="me-3 text-white"><i class="fab fa-facebook-square"></i></a>
<a href="#"
class="me-3 text-white"><i class="fab fa-twitter-square"></i></a>
<a href="#"
class="me-3 text-white"><i class="fab fa-instagram"></i></a>
<a href="#"
class="me-3 text-white"><i class="fab fa-medium"></i></a>
<a href="#"
class="me-3 text-white"><i class="fab fa-linkedin"></i></a>
</div>
<p class="text-light">
<a href="#"
class="text-light me-4">Back to all Category</a>
<span>9 Articles to read</span>
</p>
</div>
</div>
</div>
</div>
</section>
<!--end of hero section-->Snippet #3
Shop
<!--start pageheader section-->
<section class="bg-shape bg-dark">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-12">
<div class="pt-lg-18 pb-lg-14 pt-14 pb-12">
<h1 class="h2 text-white">Shop</h1>
<!-- breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Shop</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</section>
<!--end of pageheader section-->Snippet #4
Accounts
Get coach account, profile, our favorite tips, and hands-on help.
<!--start pageheader section -->
<section class="bg-shape bg-secondary">
<div class="container">
<div class="row">
<div class="offset-xl-1 col-xl-10 col-lg-12 col-md-12
col-12">
<div class="pt-lg-18 pb-lg-16 py-12">
<div class="row align-items-center">
<div class="col-lg-12 col-md-12 col-12 mb-3">
<!-- breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-2">
<li class="breadcrumb-item text-white">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Account</li>
</ol>
</nav>
</div>
<div class="col-lg-6 col-md-6 col-12">
<h1 class="h2 text-white mb-2">Accounts</h1>
<p class="text-white-50 lead">Get coach account, profile, our favorite
tips, and hands-on help.</p>
</div>
<div class="col-lg-6 col-md-6 col-12">
<form>
<span class="position-absolute ps-3 pt-2 mt-1">
<i class="fe fe-search"></i>
</span>
<label for="helpFormHelp" class="form-label visually-hidden">Start Coach Help</label>
<input type="search" class="form-control ps-6 mb-2 border-0" id="helpFormHelp" placeholder="Start Coach Help " />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of pageheader section-->