Blocks - Call to Action
Copy any custom block snippet below and paste it on your page to build your website easily.
Join Our Community
We are trusted by over 5000+ clients. Join them by using our services and grow your business.
Join Us<template>
<section
class="wrapper image-wrapper bg-auto no-overlay bg-image text-center py-14 py-md-16 bg-map"
style="background-image: url(/assets/img/map.png)"
>
<div class="container py-0 py-md-17">
<div class="row">
<div class="col-lg-6 col-xl-5 mx-auto">
<h2 class="display-4 mb-3 text-center">Join Our Community</h2>
<p class="lead mb-5 px-md-16 px-lg-3">
We are trusted by over 5000+ clients. Join them by using our
services and grow your business.
</p>
<a href="#" class="btn btn-primary rounded-pill">Join Us</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>We are trusted by over 5000+ clients. Join them by using our services and grow your business.
Join Us<template>
<section id="snippet-2" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div class="col-xl-10 mx-auto">
<div
class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400"
style="background-image: url(/assets/img/photos/bg3.jpg)"
>
<div
class="card-body p-6 p-md-11 d-lg-flex flex-row align-items-lg-center justify-content-md-between text-center text-lg-start"
>
<h3
class="display-6 mb-6 mb-lg-0 pe-lg-10 pe-xl-5 pe-xxl-18 text-white"
>
We are trusted by over 5000+ clients. Join them by using our
services and grow your business.
</h3>
<a href="#" class="btn btn-white rounded-pill mb-0 text-nowrap"
>Join Us</a
>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>
Join Our Community
We are trusted by over 5000+ clients. Join them by using our services and grow your business.
Join Us<template>
<section id="snippet-3" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15 text-center">
<div class="row">
<div class="col-md-9 col-lg-7 col-xl-7 mx-auto text-center">
<nuxt-img
src="/assets/img/icons/lineal/puzzle-2.svg"
class="icon-svg icon-svg-md mb-4"
alt=""
/>
<h2 class="display-4 mb-3">Join Our Community</h2>
<p class="lead fs-lg mb-6 px-xl-10 px-xxl-15">
We are trusted by over 5000+ clients. Join them by using our
services and grow your business.
</p>
<a href="#" class="btn btn-primary rounded">Join Us</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>Join Our Community
We are trusted by over 5000+ clients. Join them now and grow your business.
<template>
<section id="snippet-4" class="wrapper bg-light">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div
class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-300"
style="background-image: url(/assets/img/photos/bg16.png)"
>
<div class="card-body p-10 p-xl-12">
<div class="row text-center">
<div class="col-xl-11 col-xxl-9 mx-auto">
<h2 class="fs-16 text-uppercase text-white mb-3">
Join Our Community
</h2>
<h3 class="display-3 mb-8 px-lg-8 text-white">
We are
<span class="underline-3 style-2 yellow">trusted</span> by over
5000+ clients. Join them now and grow your business.
</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="d-flex justify-content-center">
<span><a class="btn btn-white rounded">Get Started</a></span>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>Analyze Now
Wonder how much faster your website can go? Easily check your SEO Score now.
<template>
<section id="snippet-5" class="wrapper bg-light wrapper-border">
<div class="wrapper bg-soft-primary mb-12 mb-md-14">
<div class="container py-14 py-md-16">
<div class="row mb-8">
<div class="col-lg-8 mx-auto text-center">
<h2 class="fs-16 text-uppercase text-primary mb-3">Analyze Now</h2>
<h3 class="display-4 mb-0">
Wonder how much faster your website can go? Easily check your SEO
Score now.
</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-5 mx-auto">
<form @submit.prevent="handleSubmit">
<div class="form-floating input-group">
<input
type="url"
class="form-control border-0"
placeholder="Enter Website URL"
id="analyze"
/>
<label for="analyze">Enter Website URL</label>
<button class="btn btn-primary" type="button">Analyze</button>
</div>
</form>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.container -->
</section>
</template>
<script setup>
const handleSubmit = () => {};
</script>
<style lang="scss" scoped></style>
Get all of your steps, exercise, sleep and meds in one place.
Sandbox is now available to download from both the App Store and Google Play Store.
<template>
<section id="snippet-6" class="wrapper bg-light wrapper-border">
<div
class="container pt-10 pb-15 py-lg-17 py-xl-20 py-xxl-22 position-relative"
>
<nuxt-img
class="position-lg-absolute col-12 col-lg-12 mt-lg-n50p mb-3 mb-md-10 mb-lg-0"
src="/assets/img/photos/devices2.png"
srcset="/assets/img/photos/devices2@2x.png 2x"
alt=""
style="top: 50%; left: -23%"
/>
<div class="row gx-lg-8 gx-xl-12 align-items-center">
<div
class="col-md-10 offset-md-1 col-lg-6 offset-lg-6 mt-md-n9 text-center text-lg-start"
>
<h1 class="display-4 mb-4 px-md-10 px-lg-0">
Get all of your steps, exercise, sleep and meds in one place.
</h1>
<p class="lead fs-lg mb-7 px-md-10 px-lg-0 pe-xxl-15">
Sandbox is now available to download from both the App Store and
Google Play Store.
</p>
<div class="d-flex justify-content-center justify-content-lg-start">
<span
><a class="btn btn-primary btn-icon btn-icon-start rounded me-2"
><i class="uil uil-apple"></i> App Store</a
></span
>
<span
><a class="btn btn-green btn-icon btn-icon-start rounded"
><i class="uil uil-google-play"></i> Google Play</a
></span
>
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>
Manage all your bills, accounts & budgets in one place.
Sandbox is available to download from both App Store and Google Play Store.
<template>
<section id="snippet-7" class="wrapper bg-light wrapper-border">
<div class="pt-20 pb-10 position-relative">
<section
class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
data-image-src="/assets/img/photos/bg23.png"
>
<div class="overflow-hidden" style="z-index: 1">
<div class="divider divider-alt text-light mx-n2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
<g fill="currentColor">
<polygon points="1440 100 0 15 0 0 1440 0 1440 100" />
</g>
</svg>
</div>
</div>
<!-- /.overflow-hidden -->
<div
class="container pt-10 pt-lg-10 pt-md-13 pb-8 pb-md-10 text-center text-lg-start"
>
<div class="row gx-0 gy-10">
<div
class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 col-xl-5 position-relative"
>
<nuxt-img
src="/assets/img/svg/doodle2.svg"
class="h-15 position-absolute d-none d-lg-block"
style="bottom: 36%; right: -25%"
alt=""
/>
<nuxt-img
src="/assets/img/svg/doodle6.svg"
class="h-14 position-absolute d-none d-lg-block"
style="top: -20%; left: -25%"
alt=""
/>
<h2 class="display-3 mb-4">
Manage all your bills, accounts & budgets in
<span class="text-gradient gradient-7">one place.</span>
</h2>
<p class="lead fs-24 lh-sm mb-7">
Sandbox is available to download from both App Store and Google
Play Store.
</p>
<div
class="d-flex justify-content-center justify-content-lg-start"
>
<span
><a href="#" class="me-2"
><nuxt-img
src="/assets/img/photos/button-appstore.svg"
class="h-11 rounded-xl"
alt="" /></a
></span>
<span
><a href="#"
><nuxt-img
src="/assets/img/photos/button-google-play.svg"
class="h-11 rounded-xl"
alt="" /></a
></span>
</div>
</div>
<!-- /column -->
<div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
<figure>
<nuxt-img
src="/assets/img/photos/devices6.png"
srcset="/assets/img/photos/devices6@2x.png 2x"
alt=""
/>
</figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>Join Our Community
We are trusted by over 5000+ clients. Join them now and grow your business.
Join Us<template>
<section id="snippet-8" class="wrapper bg-light wrapper-border">
<div class="pt-20 pb-10 position-relative">
<section class="wrapper gradient-8 bg-lines">
<div class="container py-15 py-md-17 text-center">
<div class="row">
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
<h2 class="fs-16 text-uppercase text-white mb-3">
Join Our Community
</h2>
<h3 class="display-3 text-white mb-6">
We are
<span class="underline-2 underline-gradient-6"
><em>trusted</em></span
>
by over 5000+ clients. Join them now and grow your business.
</h3>
<a href="#" class="btn btn-white">Join Us</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>
Got a 👾 project in mind? Let's work together. ✌️
I bring rapid solutions to make the life of my clients easier. Have any questions? Reach out to me and I will get back to you shortly.
Contact Me<template>
<section id="snippet-9" class="wrapper bg-light wrapper-border">
<div class="pt-15 pb-10 position-relative">
<section class="section-frame mx-xxl-11 overflow-hidden">
<div
class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500"
style="background-image: url(/assets/img/photos/bg23.png)"
>
<div class="container py-16 py-md-18 text-center">
<div
class="position-absolute shape yellow d-none d-lg-block w-5"
style="top: 18%; left: 5%"
>
<nuxt-img
src="/assets/img/svg/pie.svg"
class=" icon-svg w-100 h-100"
alt=""
/>
</div>
<div
class="position-absolute shape leaf d-none d-lg-block w-10"
style="bottom: 30%; left: 2%"
>
<nuxt-img
src="/assets/img/svg/scribble.svg"
class=" icon-svg w-100 h-100"
alt=""
/>
</div>
<div
class="position-absolute shape fuchsia d-none d-lg-block w-6"
style="top: 20%; right: 2%; transform: rotate(70deg)"
>
<nuxt-img
src="/assets/img/svg/tri.svg"
class=" icon-svg w-100 h-100"
alt=""
/>
</div>
<div
class="position-absolute shape grape d-none d-lg-block w-6"
style="bottom: 28%; right: 5%"
>
<nuxt-img
src="/assets/img/svg/circle.svg"
class=" icon-svg w-100 h-100"
alt=""
/>
</div>
<div class="row">
<div class="col-lg-9 col-xxl-8 mx-auto">
<h1 class="display-1 fs-70 mx-lg-n10 mx-xl-0 mb-5">
Got a 👾 project in mind? Let's work together. ✌️
</h1>
<p class="lead fs-24 px-md-12 px-lg-0 mx-lg-n10 mx-xl-0 mb-8">
I bring rapid solutions to make the life of my clients easier.
Have any questions? Reach out to me and I will get back to you
shortly.
</p>
<a href="#" class="btn btn-lg btn-primary btn-icon btn-icon-end"
>Contact Me <i class="uil uil-arrow-up-right"></i
></a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.wrapper -->
</section>
<!-- /section -->
</div>
<!-- /.container -->
<!-- /.container -->
</section>
</template>
<script setup></script>
<style lang="scss" scoped></style>Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox Nuxtjs