Call to Action
Component 1
<div class="maindemo-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="bg-gray-100 p-4 p-md-5 position-relative overflow-hidden rounded-12">
<div class="row mb-0 mb-sm-5 mb-md-0">
<div class="col-lg-7 pb-5 pb-md-0 mb-5 mb-lg-0">
<h2 class="h1 mt-3 mb-1">Get started for free</h2>
<p class="big text-black-600">Turn your 3d ideas into incredible animations</p>
<div class="my-4">
<a href="javascript:void(0);" class="btn btn-lg btn-success">Start 30 day trial</a>
</div>
</div>
<div class="col-md-5">
<div class="get-started-img">
<img src="../assets/img/templates/get-started.png" class="img-fluid" alt="img">
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 2
<div class="bg-gray-100 travel-template py-5">
<div class="container">
<section class="muse-section px-3 px-md-0 py-md-5 bg-white rounded-12 shadow-dark-80">
<div class="col-12 col-md-9 col-xl-5 m-auto text-center py-md-4">
<h2 class="h1 mb-0">Travel Goodies</h2>
<p class="big text-black-600">Best deals for your next trip directly to your inbox</p>
<form class="mt-4 mx-lg-4 px-md-2 pt-2">
<div class="input-group input-group-xl">
<input type="text" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="button-addon2">
<button class="btn btn-xl btn-warning text-uppercase caption px-3" type="button" id="button-addon2">Sign up</button>
</div>
</form>
<p class="small text-gray-600 mt-2 pt-1 lh-sm">By joining our newsletter you agree to our <a href="#0" class="text-gray-600 font-weight-bold">Privacy</a> and <a href="#0" class="text-gray-600 font-weight-bold">Terms</a></p>
</div>
</section>
</div>
</div>
Component 3
Start your 30 day free trial.
<div class="bg-black-800 saas-template">
<div class="container">
<section class="muse-section">
<div class="bg-gray-800 position-relative overflow-hidden rounded-12">
<div class="row mb-0 mb-mb-5 mb-lg-0">
<div class="col-md-6">
<div class="p-4 p-md-5">
<h2 class="h1 pt-lg-5 pl-xl-4">Start your 30 day free trial.</h2>
<div class="my-4 pl-xl-4">
<a href="javascript:void(0);" class="btn btn-xl btn-danger rounded-pill">Sign up</a>
</div>
</div>
</div>
<div class="col-md-6 mt-auto">
<div class="text-right mt-md-5 pt-md-5">
<img src="../assets/img/templates/start-trial.jpg" class="img-fluid rounded-top-left" alt="img">
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 4
Daily Savings!
Best deals directly to your inbox
<div class="ecommerce-template">
<div class="container">
<section class="muse-section">
<div class="bg-gray-100 position-relative overflow-hidden rounded-12 mb-4 mb-md-0">
<div class="row align-items-center">
<div class="col-xl-6 col-md-7">
<div class="p-4 p-lg-5 m-sm-2">
<h2 class="h1 text-uppercase mb-0">Daily Savings!</h2>
<p class="fs-20 text-black-600 lh-lg">Best deals directly to your inbox</p>
<form class="mt-sm-4 signup-form">
<div class="input-group input-group-xl">
<input type="text" class="form-control" placeholder="Email address" aria-label="Email" aria-describedby="button-addon2">
<button class="btn btn-xl btn-success text-uppercase caption px-3" type="button" id="button-addon2">Sign up</button>
</div>
</form>
</div>
</div>
<div class="col-xl-6 col-md-5 mt-auto">
<div class="text-center mx-3 mx-md-0 pt-4 pt-md-5 mt-lg-3">
<img src="../assets/img/templates/mail-box.svg" class="img-fluid" alt="img">
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 5
We’re hiring!
Senior UI Designers needed, join our enthusiastic team
<div class="container">
<section class="muse-section">
<div class="bg-gray-100 position-relative overflow-hidden rounded-12">
<div class="row mb-0 mb-md-0">
<div class="col-md-6">
<div class="p-4 p-md-5">
<h2 class="mb-0">We’re hiring!</h2>
<p class="mb-0">Senior UI Designers needed, join our enthusiastic team</p>
</div>
</div>
<div class="col-md-6">
<div class="text-right mt-md-4 pt-md-4">
<a href="#" class="btn btn-lg btn-success apply-btn px-4">Apply <svg class="ml-2" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ffffff"></path>
</svg>
</a>
<img src="../assets/img/templates/hiring.png" class="img-fluid rounded-top-left" alt="img">
</div>
</div>
</div>
</div>
</section>
</div>
Component 6
<div class="bg-gray-100 magazine-template">
<div class="container">
<section class="muse-section">
<div class="bg-white p-4 p-md-5 rounded-12">
<div class="col-12 col-md-9 col-xl-6 m-auto text-center">
<img src="../assets/img/templates/signup-icon.svg" alt="img" class="mb-2">
<h2 class="mb-md-0 pt-1">Don’t miss our top stories</h2>
<p>Best deals for your next trip directly to your inbox</p>
<form class="mt-4 mx-md-5">
<div class="input-group input-group-xl">
<input type="text" class="form-control pl-3" placeholder="Email" aria-label="Email" aria-describedby="button-addon2">
<button class="btn btn-xl btn-purple text-uppercase caption px-2" type="button" id="button-addon2"><span class="px-1">Sign up</span></button>
</div>
</form>
<p class="small text-gray-600 mt-3 lh-sm">By joining our newsletter you agree to our <a href="javascript:void(0);" class="text-gray-600 font-weight-bold">Privacy</a> and <a href="javascript:void(0);" class="text-gray-600 font-weight-bold">Terms</a></p>
</div>
</div>
</section>
</div>
</div>
Component 7
Monthly goodies
Free assets delivered to you inbox!
<div class="container">
<section class="muse-section">
<div class="bg-gray-100 overflow-hidden rounded-12 p-4 p-sm-5">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="mb-0">Monthly goodies</h2>
<p class="mb-0">Free assets delivered to you inbox!</p>
</div>
<div class="col-md-6">
<form class="ml-lg-5 pl-lg-5 mt-4 mt-md-0">
<div class="input-group input-group-xl">
<input type="text" class="form-control pl-3" placeholder="Email address" aria-label="Email" aria-describedby="button-addon2">
<button class="btn btn-xl btn-primary text-uppercase caption px-3" type="button" id="button-addon2">Sign up</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
Component 8
<div class="container about-template">
<section class="muse-section">
<div class="bg-blue-400 rounded-12 py-5 px-4 text-center position-relative">
<h3 class="h1 text-white mt-3">Get started for free</h3>
<p class="big text-white lh-lg">Turn your 3d ideas into incredible animations</p>
<a href="#" class="btn btn-lg btn-blue-50 mt-1 mb-4">Sign up</a>
<div class="position-bottom">
<img src="../assets/img/templates/shape5.png" alt="img">
</div>
</div>
</section>
</div>
Component 9
<div class="blog-template bg-gray-100 py-5">
<div class="container">
<section class="muse-section py-4 py-md-5 bg-blue-50 rounded-12 my-md-5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="600">
<div class="col-md-9 col-lg-6 col-xl-5 m-auto text-center py-3 py-sm-4 px-3 px-sm-4 px-md-0">
<h2 class="h1 mb-0">Join our newsletter</h2>
<p class="big text-black-600 mb-2 mb-md-0">Best deals for your next trip directly to your inbox</p>
<form class="mt-2 mt-md-4 mx-lg-4 px-md-4 pt-2">
<div class="mb-3">
<input type="text" class="form-control form-control-lg" placeholder="Email">
<button class="btn btn-lg btn-primary btn-block mt-3" type="button">Sign up</button>
</div>
</form>
<p class="small text-gray-600 mt-2 pt-1 lh-sm mb-1 mb-md-3">By joining our newsletter you agree to our <a href="#0" class="text-gray-600 font-weight-bold">Privacy</a> and <a href="#0" class="text-gray-600 font-weight-bold">Terms</a></p>
</div>
</section>
</div>
</div>