Hero Sections
Snippet #1
Become the hero of your own story
Join our Coach community of like-minded individuals. Get your ticket to the 2024 event.
Get Ticket<!--start hero section -->
<section style="background: url(../assets/images/hero-slide.jpg); background-size: cover; background-repeat: no-repeat; background-position: center">
<div class="container">
<div class="row">
<div class="offset-lg-2 col-lg-8 col-md-10 offset-md-1 col-12">
<div class="pt-17 pb-13 pt-lg-19 pb-lg-19 text-center text-light">
<h1 class="display-3 text-white mb-3 lh-1">Become the hero of your own story</h1>
<p class="px-xl-10 px-md-10 mb-5 lead">Join our Coach community of like-minded individuals. Get your ticket to the 2024 event.</p>
<a href="pages/signin.html" class="btn btn-primary btn-lg">Get Ticket</a>
</div>
</div>
</div>
</div>
</section>
<!--end of hero section-->Snippet #2
Ronald Cooper.
Begin your leadership + personal mastery journey with me here
Maecenas molestie sagittis tellus et venenatis. In suscipit tortor eget ante semper suscipit. Mauris dictum elementum diam in laoreet.
Book Coach<!--start hero section -->
<section
class="py-xxl-19 pt-14 pb-10 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/home-second-hero-img.jpg)"
>
<div class="container">
<div class="row">
<div class="col-xxl-5 col-lg-6 col-md-8 col-12">
<div class="text-white">
<!--title-->
<h1 class="text-white mb-3 display-3">Ronald Cooper.</h1>
<!--content-->
<h2 class="mb-3 text-white">Begin your leadership + personal mastery journey with me here</h2>
<p class="mb-3 pe-lg-12 pe-0">
Maecenas molestie sagittis tellus et venenatis. In suscipit tortor eget ante semper suscipit. Mauris dictum elementum diam in laoreet.
</p>
<a href="#" class="btn btn-primary btn-lg">Book Coach</a>
</div>
</div>
</div>
</div>
</section>
<!--end of hero section-->Snippet #3
Transform Life with Life Coach
Learn the transformational Life Coaching process and become a highly skilled, Certified Life & Motivational Coach.
Book Coach Watch Video
<!--start hero section-->
<section class="bg-dark right-slant-shape pt-lg-16 py-12 pb-lg-0">
<div class="container">
<div class="row d-lg-flex align-items-center">
<div class="col-xxl-5 col-md-6 col-12">
<div class="mb-0 mb-lg-8">
<!--heading -->
<h1 class="text-white mb-3 display-4">Transform Life with Life Coach</h1>
<!--para-->
<p class="mb-6 lead">Learn the transformational Life Coaching process and become a highly skilled, Certified Life & Motivational Coach.</p>
<a href="#" class="btn btn-primary me-3">Book Coach</a>
<a
class="popup-youtube icon-shape rounded-circle btn-play icon-md bg-secondary text-white me-1 text-decoration-none font-12"
href="https://www.youtube.com/watch?v=JRzWRZahOVU"
>
<i class="fas fa-play"></i>
</a>
<a href="https://www.youtube.com/watch?v=JRzWRZahOVU" class="popup-youtube text-white">Watch Video</a>
</div>
</div>
<div class="offset-xxl-2 col-xxl-5 offset-lg-1 col-lg-5 col-md-6 col-12 mb-n2 d-none d-md-block">
<!--image-->
<div class="position-relative z-1">
<img src="../assets/images/speaker-img-1.jpg" alt="img" class="img-fluid rounded w-100 border-bottom border-4 border-primary" />
<div class="card-img-overlay d-flex flex-column justify-content-end p-4">
<h4 class="mb-0 h2">Diane Wilson</h4>
<span class="font-12">International Motivational Speaker</span>
</div>
</div>
<div class="position-relative z-1">
<div class="position-absolute ms-n14 mt-n7">
<img src="../assets/images/shape.svg" alt="" />
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of client section-->Snippet #4
Coach for CEOs & Entrepreneurs
Coach is the International leading coaching firm for growth focused CEOs and entrepreneurs.
Learn More<!--start hero section -->
<section class="py-lg-18 py-xxl-20 py-10 bg-cover" style="background-image: url(../assets/images/hero-slide-2.jpg)">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-8 col-md-8 col-12">
<div class=" ">
<!--heading-->
<h1 class="text-white mb-3 display-4">Coach for CEOs & Entrepreneurs</h1>
<p class="mb-4 pe-lg-12 text-white lead">Coach is the International leading coaching firm for growth focused CEOs and entrepreneurs.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!--end of hero section-->Snippet #5
Deena Nichols, PERSONAL TRAINER
Train your body & your mind.
Get help from Coach, a professional business coach with advanced experience on growth and business scaling.
Book a Class About Me
<!--start hero section-->
<section
class="pt-lg-12 pt-xl-14"
style="
background: linear-gradient(243.24deg, #2d2455 5.22%, #231c40 19.82%, #261f44 24.59%, #382f5c 32.12%, #251e44 40.66%, #211b3c 51.15%, #272045 68.12%, #261f44 84.67%),
#261f44;
"
>
<div class="container">
<div class="row">
<div class="offset-xxl-1 col-xxl-10 col-12">
<div class="row d-lg-flex align-items-center py-13">
<div class="col-lg-6 col-md-6 col-12 order-2 mt-8 order-md-1">
<div class="mb-0 mb-lg-8">
<!-- content -->
<span class="text-uppercase text-white-50">Deena Nichols, PERSONAL TRAINER</span>
<h1 class="text-white mb-3 display-3 mt-2">Train your body & your mind.</h1>
<p class="mb-6 lead pe-xl-10">Get help from Coach, a professional business coach with advanced experience on growth and business scaling.</p>
<!-- button -->
<a href="#" class="btn btn-primary me-3">Book a Class</a>
<a href="#" class="btn btn-white me-3">About Me</a>
</div>
</div>
<div class="col-md-6 col-12 mb-n2 order-1">
<div>
<!-- img -->
<img src="../assets/images/fitness/fitness-hero-img.jpg" alt="hero img" class="img-fluid rounded-3 border-bottom border-5 border-secondary" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- about section -->
<div class="position-relative mt-8">
<div class="container position-relative z-1">
<div class="row">
<div class="offset-xl-1 col-xl-10 offset-lg-1 col-lg-10 col-md-12 col-12 text-center">
<!-- text -->
<span class="text-uppercase text-white-50">About Deena nichol</span>
<!-- heading -->
<h2 class="text-white mb-3 display-5 mt-2">
Deena Nichols tutoring thousand of
<br />
people online
</h2>
<!-- text -->
<p class="mb-0 lead px-xl-18">Praesent pellentesque maximus quam ac interdum. Cras fringilla sem eget ex imperdiet malesuada.</p>
<!-- row -->
<div class="row mt-10 mb-6">
<!-- col -->
<div class="col-md-4 col-12">
<div class="mb-4 mb-md-0">
<div class="d-flex align-items-center justify-content-center">
<i class="fe fe-star fs-4 text-primary"></i>
<span class="ms-2 fs-4 text-white">Certified trainer</span>
</div>
</div>
</div>
<!-- col -->
<div class="col-md-4 col-12">
<div class="mb-4 mb-md-0">
<div class="d-flex align-items-center justify-content-center">
<i class="fe fe-award fs-4 text-primary"></i>
<span class="ms-2 fs-4 text-white">10+ experience</span>
</div>
</div>
</div>
<!-- col -->
<div class="col-md-4 col-12">
<div class="mb-4 mb-md-0">
<div class="d-flex align-items-center justify-content-center">
<i class="fe fe-video fs-4 text-primary"></i>
<span class="ms-2 fs-4 text-white">16+ Classes</span>
</div>
</div>
</div>
</div>
<div>
<!-- video section -->
<div class="position-relative rounded-3 py-19 bg-cover" style="background-image: url(../assets/images/fitness/fitness-video-img.jpg)">
<a class="popup-youtube icon-shape rounded-circle btn-play icon-xl text-decoration-none" href="https://www.youtube.com/watch?v=JRzWRZahOVU">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 24
24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-play-circle"
>
<circle cx="12" cy="12" r="10"></circle>
<polygon points="10 8 16 12 10 16 10 8"></polygon>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- background hidden section -->
<div class="hidden-bg"></div>
</div>
</section>
<!--end of hero section-->Snippet #6
Online Yoga Trainer
Hello, I m Sarah Blais, Certified Yoga Instructor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna augue, viverra vel mollis non, pretium sed erat. Maecenas posuere id ante vitae molestie.
<!--start online yoga-->
<section class="pt-lg-8 pt-6 py-xxl-10">
<div class="container">
<!--row-->
<div class="row d-flex align-items-center">
<div class="col-xxl-5 col-lg-6 col-12">
<!--content-->
<div>
<h5 class="text-muted mb-4">Online Yoga Trainer</h5>
<h1 class="mb-3 fw-bold">
Hello, I m
<span class="text-bottom-line">Sarah Blais,</span>
Certified Yoga Instructor
</h1>
<p class="mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna augue, viverra vel mollis non, pretium sed erat. Maecenas posuere id ante vitae molestie.
</p>
<!--button-->
<div class="d-grid d-lg-block">
<a href="#" class="btn btn-secondary">Book online yoga now</a>
<a href="#" class="btn btn-outline-secondary ms-lg-1 mt-2 mt-lg-0">View my courses</a>
</div>
</div>
</div>
<!--col-->
<div class="col-xxl-6 offset-xxl-1 col-lg-6 col-12">
<!--image-->
<div class="text-center d-none d-lg-block">
<img src="../assets/images/yoga/yoga-hero-img.png" alt="yoga-coach" class="img-fluid" />
</div>
<!--image-->
</div>
</div>
</div>
</section>
<!--end of online yoga-->