CTA
Call to action (CTA) is a marketing term for any device designed to prompt an immediate response or encourage an immediate sale.
CTA #1
Sign Up To Share Your Knowledge
Follow these three simple steps to get started with Long Term Mentorship
You've invested a lot of time to learn your skill, craft, or expertise
Get paid for talking about the things you already know and love
Set your own availability and meet on your time
<section class="py-lg-8 py-6">
<div class="container py-lg-8">
<!--row-->
<div class="row align-items-center">
<div class="offset-xl-1 col-xl-4 col-lg-6 d-none d-lg-block">
<!--img-->
<div class="position-relative">
<img src="../assets/images/mentor/become-mentor.jpg" alt="mentor img" class="img-fluid w-100 rounded-4">
<img src="../assets/images/mentor/schedule.svg" alt="schedule" class="position-absolute top-50 start-100 translate-middle mt-n8 d-xl-block d-none">
<img src="../assets/images/mentor/verify.svg" alt="verify" class="position-absolute top-50 start-0 translate-middle mt-n2 d-xl-block d-none">
<img src="../assets/images/mentor/card.svg" alt="card" class="position-absolute top-50 start-0 translate-middle mt-8 d-xl-block d-none">
</div>
</div>
<div class="col-xl-6 col-lg-5 offset-lg-1 offset-xl-1">
<div class="d-flex flex-column gap-6">
<div class="d-flex flex-column gap-2">
<!--heading-->
<h2 class="mb-0 h1">Sign Up To Share Your Knowledge</h2>
<!--para-->
<p class="mb-0 fs-5">Follow these three simple steps to get started with Long Term Mentorship</p>
</div>
<div class="d-flex flex-column gap-8">
<div class="d-flex flex-column gap-5">
<div class="row gap-xxl-3 gap-0">
<div class="col-md-1 col-lg-2 col-xxl-1 col-2">
<!--svg-->
<div class="icon-shape icon-lg bg-danger-subtle rounded-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bullseye text-danger" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
<path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10m0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12"></path>
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8"></path>
<path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"></path>
</svg>
</div>
</div>
<!--text-->
<div class="col-md-6 col-lg-10 col-xxl-6 col-10">
<h4 class="mb-0">You've invested a lot of time to learn your skill, craft, or expertise</h4>
</div>
</div>
<div class="row gap-xxl-3">
<div class="col-md-1 col-lg-2 col-xxl-1 col-2">
<!--svg-->
<div class="icon-shape icon-lg bg-warning-subtle rounded-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cash-stack text-warning" viewBox="0 0 16 16">
<path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4"></path>
<path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2z"></path>
</svg>
</div>
</div>
<!--text-->
<div class="col-md-6 col-lg-10 col-xxl-6 col-10">
<h4 class="mb-0">Get paid for talking about the things you already know and love</h4>
</div>
</div>
<div class="row gap-xxl-3">
<div class="col-md-1 col-lg-2 col-xxl-1 col-2">
<!--svg-->
<div class="icon-shape icon-lg bg-success-subtle rounded-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-calendar-check text-success" viewBox="0 0 16 16">
<path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0"></path>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"></path>
</svg>
</div>
</div>
<!--text-->
<div class="col-md-6 col-lg-10 col-xxl-6 col-10">
<h4 class="mb-0">Set your own availability and meet on your time</h4>
</div>
</div>
</div>
<div>
<a href="#!" class="btn btn-primary">Become a mentor</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>CTA #2
Let’s find the right course for you!
…and achieve their learning goals. With our expert tutors, your goals are closer than ever!
<section class="py-lg-8">
<div class="container">
<div class="row">
<div class="col-xl-10 offset-xl-1 col-md-12 col-12">
<div class="bg-primary py-6 px-6 px-xl-0 rounded-4 ">
<div class="row align-items-center">
<div class="offset-xl-1 col-xl-5 col-md-6 col-12">
<div>
<h2 class="h1 text-white mb-3">Let’s find the right course for you!</h2>
<p class="text-white fs-4">…and achieve their learning goals. With our expert tutors, your goals are
closer
than ever!</p>
<button class="btn btn-dark">Start learning</button>
</div>
</div>
<div class="col-xl-6 col-md-6 col-12">
<div class="text-center">
<img src="../assets/images/education/course.png" alt="learning" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>CTA #3
Become an instructor today
Instructors from around the world teach millions of students on Geeks. We provide the tools and skills to teach what you love.
Start Teaching Today<section class="my-lg-14 mb-8">
<!-- container -->
<div class="container bg-primary rounded-3">
<!-- row -->
<div class="row align-items-center">
<!-- col -->
<div class="col-lg-6 col-12 d-none d-lg-block">
<div class="d-flex justify-content-center ">
<!-- img -->
<div class="position-relative">
<img src="../assets/images/png/cta-instructor-1.png" alt="" class="img-fluid mt-n13">
<div class="ms-n12 position-absolute bottom-0 start-0 mb-6">
<img src="../assets/images/svg/dollor.svg" alt="">
</div>
<!-- img -->
<div class="me-n4 position-absolute top-0 end-0">
<img src="../assets/images/svg/graph.svg" alt="">
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-12">
<div class="text-white p-5 p-xl-0">
<!-- text -->
<h2 class="h1 text-white">Become an instructor today</h2>
<p class="mb-0">Instructors from around the world teach millions of students on Geeks. We provide the tools
and skills to teach what you love.</p>
<a href="#" class="btn btn-white mt-4">Start Teaching Today</a>
</div>
</div>
</div>
</div>
</section>CTA #4
get things done
Just try it out! You’ll fall in love
Designed for modern companies looking to launch a simple, premium and modern website and apps.
Try For Free<div class="py-8 ">
<div class="container">
<div class="row">
<div class="offset-lg-2 col-lg-8 col-md-12 col-12 text-center">
<span class="fs-4 text-warning ls-md text-uppercase
fw-semibold">get things done
</span>
<!-- heading -->
<h2 class="display-3 mt-4 mb-3 fw-bold">Just try it out! You’ll
fall in love</h2>
<!-- para -->
<p class="lead px-lg-8 mb-6">Designed for modern
companies looking to launch
a simple, premium and modern website and apps.</p>
<a href="#" class="btn btn-primary">Try For Free</a>
</div>
</div>
</div>
</div>CTA #5
Get early access
Geeks is currently invite only. Sign up to the waitlist to be the first to try out Geeks and stay in the loop.
<div class="my-4">
<div class="container">
<div class="row">
<div class="offset-xl-1 col-xl-10 col-12 ">
<div class="row px-3 pt-3 pb-0 pe-lg-0 pt-lg-5 align-items-center
rounded-3 border smooth-shadow-sm">
<div class="col-lg-6 p-4 p-md-6 pt-lg-0">
<h1 class="display-4 fw-bold lh-1 mb-3">Get early access</h1>
<p class="lead mb-5">Geeks is currently invite only. Sign up to the
waitlist to be the first to try out Geeks and
stay in the loop.
</p>
<form class="row">
<div class="mb-3 col-md-7 col-12">
<input type="email" class="form-control" placeholder="Work Email" required="">
</div>
<div class="d-grid mb-3 col-md-5 col-12 ps-md-0">
<button class="btn btn-primary" type="submit">Request Access</button>
</div>
</form>
</div>
<div class="col-lg-5 offset-lg-1 p-0 overflow-hidden shadow-lg rounded-end-md">
<!-- Img -->
<img class="rounded-top-md card-img-size-600"
src="../assets/images/background/analytics.jpg" alt="" >
</div>
</div>
</div>
</div>
</div>
</div>CTA #6
Join more than 1 million learners worldwide
Effective learning starts with assessment. Learning a new skill is hard work—Signal makes it easier.
<div class="py-lg-16 py-10 bg-gray-200" style="background: url(../assets/images/background/course-graphics.svg)no-repeat; background-size: cover; background-position: top center">
<div class="container">
<!-- row -->
<div class="row justify-content-center text-center">
<div class="col-md-9 col-12">
<!-- heading -->
<h2 class="display-4 ">Join more than 1 million learners worldwide</h2>
<p class="lead px-lg-8 mb-6">Effective learning starts with assessment. Learning a new skill is
hard work—Signal makes it easier.</p>
<!-- button -->
<div class="d-grid d-md-block">
<a href="#" class="btn btn-primary mb-2 mb-md-0">Start Learning for Free</a>
<a href="#" class="btn btn-info">Geeks for Business</a>
</div>
</div>
</div>
</div>
</div>CTA #7
Join the Geeks team & shape the future of design
If you’re passionate and ready to dive in, we’d love to meet you. We’re committed to supporting our employee professional development and well-being.
View opportunities
<div class="bg-primary">
<div class="container">
<!-- row -->
<div class="row align-items-center g-0">
<div class="col-xl-6 col-lg-6 col-md-12">
<!-- heading -->
<div>
<h1 class="text-white display-4 fw-bold pe-lg-8">Join the Geeks team & shape the future of design
</h1>
<!-- text -->
<p class="text-white-50 mb-4 lead">
If you’re passionate and ready to dive in, we’d love to meet you. We’re committed to supporting our
employee professional development and well-being.
</p>
<!-- btn -->
<a href="#" class="btn btn-dark">View opportunities</a>
</div>
</div>
<!-- img -->
<div class=" col-xl-6 col-lg-6 col-md-12 text-lg-end text-center pt-6">
<img src="../assets/images/hero/hero-img.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>