<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<section id="home" class="section bg-voilet bg-overlay overflow-hidden d-flex align-items-center">
<div class="container">
<div class="row align-items-center">
<!-- home Intro Start -->
<div class="col-12 col-md-7 col-lg-6">
<div class="home-intro">
<h1 class="text-white">Make cool Landing pages with sApp</h1>
<p class="text-white my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nihil tenetur minus quidem est deserunt molestias accusamus harum ullam tempore debitis et, expedita, repellat delectus aspernatur neque itaque qui quod.</p>
<!-- Store Buttons -->
<div class="button-group store-buttons d-flex">
<a href="#">
<img src="http://theme-land.com/sApp/demo/assets/img/icon/google-play.png" alt="">
</a>
<a href="#">
<img src="http://theme-land.com/sApp/demo/assets/img/icon/app-store.png" alt="">
</a>
</div>
<span class="d-inline-block text-white fw-3 font-italic mt-3">* Available on iPhone, iPad and all Android devices</span>
</div>
</div>
<div class="col-12 col-md-5 col-lg-6">
<!-- home Thumb -->
<div class="home-thumb mx-auto" >
<img src="http://theme-land.com/sApp/demo/assets/img/welcome/welcome-mockup.png" alt="">
</div>
</div>
</div>
</div>
<!-- Shape Bottom -->
<div class="shape-bottom">
<svg viewBox="0 0 1920 310" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg replaced-svg">
<title>Shape</title>
<desc>Created with shape</desc>
<defs></defs>
<g id="Landing-Page" stroke="none" stroke-width="12" fill="none" fill-rule="evenodd">
<g id="sApp-v1.0" transform="translate(0.000000, -554.000000)" fill="#ffffff">
<path d="M-3,551 C186.257589,757.321118 319.044414,856.322454 395.360475,848.004007 C509.834566,835.526337 561.525143,796.329212 637.731734,765.961549 C713.938325,735.593886 816.980646,681.910577 1035.72208,733.065469 C1254.46351,784.220361 1511.54925,678.92359 1539.40808,662.398665 C1567.2669,645.87374 1660.9143,591.478574 1773.19378,597.641868 C1848.04677,601.75073 1901.75645,588.357675 1934.32284,557.462704 L1934.32284,863.183395 L-3,863.183395" id="v1.0"></path>
</g>
</g>
</svg>
</div>
</section>
<section id="stats" class="py-3">
<div class="container">
<div class="row justify-content-center">
<div class="col-5 col-sm-3 text-center">
<h1 class="text-voilet"><b>3M</b></h1>
<div class="mb-3"></div>
<h5>Users</h5>
</div>
<div class="col-5 col-sm-3 text-center">
<h1 class="text-voilet"><b>3M</b></h1>
<div class="mb-3"></div>
<h5>Users</h5>
</div>
<div class="col-5 col-sm-3 text-center">
<h1 class="text-voilet"><b>3M</b></h1>
<div class="mb-3"></div>
<h5>Users</h5>
</div>
<div class="col-5 col-sm-3 text-center">
<h1 class="text-voilet"><b>3M</b></h1>
<div class="mb-3"></div>
<h5>Users</h5>
</div>
</div>
</div>
</section>
<section id="features" class="py-5 ">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-12 col-md-10 col-lg-7 section-heading text-center">
<h5 class="text-voilet mb-4">Premium Features</h5>
<h2>What Makes sApp Different?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum obcaecati dignissimos quae quo ad iste ipsum officiis deleniti asperiores sit.</p>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md-6 col-lg-4">
<i class="fa fa-bicycle fa-4x text-voilet"></i>
<h3 class="mb-2">Fully functional</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa expedita dignissimos.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<i class="fa fa-phone fa-4x text-success"></i>
<h3 class="mb-2">Fully functional</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa expedita dignissimos.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<i class="fa fa-coffee fa-4x text-voilet"></i>
<h3 class="mb-2">Fully functional</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa expedita dignissimos.</p>
</div>
</div>
</div>
</section>
<section id="services" class=" ">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-12 col-lg-6 ">
<h2 class="mb-4">Make your Device Manage Everything For you</h2>
<ul class="list-unstyled">
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
</ul>
</div>
<div class="col-12 col-lg-4 order-1 order-lg-2 d-none d-lg-block">
<div class="home-thumb mx-auto">
<img src="http://theme-land.com/sApp/demo/assets/img/features/thumb-1.png" alt="">
</div>
</div>
</div>
</div>
</section>
<section id="info" class=" py-5 ">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-12 col-lg-4 ">
<div class="mx-auto">
<img src="http://theme-land.com/sApp/demo/assets/img/discover/iphone_x.png" alt="">
</div>
</div>
<div class="col-12 col-lg-6 ">
<h2 class="mb-4">Easily communicate with clients using sApp.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique dolor ut iusto vitae autem neque eum ipsam, impedit asperiores vel cumque laborum dicta repellendus inventore voluptatibus et explicabo nobis unde.
</p>
<ul>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
<li><p>Fully layered dolor sit amet, consectetur adipisicing elit. Facere, nobis, id expedita dolores officiis laboriosam.</p></li>
</ul>
</div>
</div>
</div>
</section>
<section id="features" class="py-5 bg-voilet text-white">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-12 col-md-10 col-lg-7 section-heading text-center">
<h5 class="text-voilet mb-4">Premium Features</h5>
<h2>What Makes sApp Different?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum obcaecati dignissimos quae quo ad iste ipsum officiis deleniti asperiores sit.</p>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md-6 col-lg-4">
<i class="fa fa-bicycle fa-4x text-white"></i>
<h3 class="mb-2">Fully functional</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa expedita dignissimos.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<i class="fa fa-phone fa-4x text-white"></i>
<h3 class="mb-2">Fully functional</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa expedita dignissimos.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<i class="fa fa-coffee fa-4x text-white"></i>
<h3 class="mb-2">Fully functional</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa expedita dignissimos.</p>
</div>
</div>
</div>
</section>
<section id="features" class="py-5">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-12 col-md-10 col-lg-7 section-heading text-center">
<h5 class="text-voilet mb-4">Premium Features</h5>
<h2>Frequently Asked Questions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum obcaecati dignissimos quae quo ad iste ipsum officiis deleniti asperiores sit.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-12 col-md-6">
<div class="faq-items">
<h4> How to install sApp?</h4>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
</div>
<div class="faq-items">
<h4> How to install sApp?</h4>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
</div>
<div class="faq-items">
<h4> How to install sApp?</h4>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
</div>
</div>
<div class="col-12 col-md-6 justify-content-center">
<div class="faq-items">
<h4> How to install sApp?</h4>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
</div>
<div class="faq-items">
<h4> How to install sApp?</h4>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
</div>
<div class="faq-items">
<h4> How to install sApp?</h4>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-area footer-fixed pt-5">
<!-- Footer Top -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<a class="navbar-brand" href="#">
<img class="logo" src="http://theme-land.com/sApp/demo/assets/img/logo/logo.png" alt="">
</a>
<p class="mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis non, fugit totam vel laboriosam vitae.</p>
<div class="social-icons d-flex">
<a class="facebook" href="#">
<svg class="svg-inline--fa fa-facebook-f fa-w-10" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg><!-- <i class="fab fa-facebook-f"></i> -->
<svg class="svg-inline--fa fa-facebook-f fa-w-10" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg><!-- <i class="fab fa-facebook-f"></i> -->
</a>
<a class="twitter" href="#">
<svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg><!-- <i class="fab fa-twitter"></i> -->
<svg class="svg-inline--fa fa-twitter fa-w-16" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg><!-- <i class="fab fa-twitter"></i> -->
</a>
<a class="google-plus" href="#">
<svg class="svg-inline--fa fa-google-plus-g fa-w-20" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google-plus-g" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"></path></svg><!-- <i class="fab fa-google-plus-g"></i> -->
<svg class="svg-inline--fa fa-google-plus-g fa-w-20" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google-plus-g" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"></path></svg><!-- <i class="fab fa-google-plus-g"></i> -->
</a>
<a class="vine" href="#">
<svg class="svg-inline--fa fa-vine fa-w-12" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="vine" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M384 254.7v52.1c-18.4 4.2-36.9 6.1-52.1 6.1-36.9 77.4-103 143.8-125.1 156.2-14 7.9-27.1 8.4-42.7-.8C137 452 34.2 367.7 0 102.7h74.5C93.2 261.8 139 343.4 189.3 404.5c27.9-27.9 54.8-65.1 75.6-106.9-49.8-25.3-80.1-80.9-80.1-145.6 0-65.6 37.7-115.1 102.2-115.1 114.9 0 106.2 127.9 81.6 181.5 0 0-46.4 9.2-63.5-20.5 3.4-11.3 8.2-30.8 8.2-48.5 0-31.3-11.3-46.6-28.4-46.6-18.2 0-30.8 17.1-30.8 50 .1 79.2 59.4 118.7 129.9 101.9z"></path></svg><!-- <i class="fab fa-vine"></i> -->
<svg class="svg-inline--fa fa-vine fa-w-12" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="vine" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M384 254.7v52.1c-18.4 4.2-36.9 6.1-52.1 6.1-36.9 77.4-103 143.8-125.1 156.2-14 7.9-27.1 8.4-42.7-.8C137 452 34.2 367.7 0 102.7h74.5C93.2 261.8 139 343.4 189.3 404.5c27.9-27.9 54.8-65.1 75.6-106.9-49.8-25.3-80.1-80.9-80.1-145.6 0-65.6 37.7-115.1 102.2-115.1 114.9 0 106.2 127.9 81.6 181.5 0 0-46.4 9.2-63.5-20.5 3.4-11.3 8.2-30.8 8.2-48.5 0-31.3-11.3-46.6-28.4-46.6-18.2 0-30.8 17.1-30.8 50 .1 79.2 59.4 118.7 129.9 101.9z"></path></svg><!-- <i class="fab fa-vine"></i> -->
</a>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<!-- Footer Items -->
<div class="footer-items">
<!-- Footer Title -->
<h3 class="mb-2">Useful Links</h3>
<ul class="list-unstyled">
<li class="py-2"><a href="#" class="text-secondary">Home</a></li>
<li class="py-2"><a href="#" class="text-secondary">About Us</a></li>
<li class="py-2"><a href="#" class="text-secondary">Services</a></li>
<li class="py-2"><a href="#" class="text-secondary">Blog</a></li>
<li class="py-2"><a href="#" class="text-secondary">Contact</a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<!-- Footer Items -->
<div class="footer-items">
<!-- Footer Title -->
<h3 class="footer-title mb-2">Product Help</h3>
<ul class="list-unstyled">
<li class="py-2"><a href="#" class="text-secondary">FAQ</a></li>
<li class="py-2"><a href="#" class="text-secondary">Privacy Policy</a></li>
<li class="py-2"><a href="#" class="text-secondary">Support</a></li>
<li class="py-2"><a href="#" class="text-secondary">Terms & Conditions</a></li>
<li class="py-2"><a href="#" class="text-secondary">Contact</a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<!-- Footer Items -->
<div class="footer-items">
<!-- Footer Title -->
<h3 class="footer-title mb-2">Download</h3>
<!-- Store Buttons -->
<div class=" d-flex flex-wrap">
<a href="#" class="mb-2">
<img src="http://theme-land.com/sApp/demo/assets/img/icon/google-play-black.png" alt="">
</a>
<a href="#">
<img src="http://theme-land.com/sApp/demo/assets/img/icon/app-store-black.png" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Bottom -->
<div class="footer-bottom border-top">
<div class="container">
<div class="row ">
<div class="col-12">
<!-- Copyright Area -->
<div class="copyright-area d-flex flex-wrap justify-content-center justify-content-sm-between text-center py-4">
<!-- Copyright Left -->
<div class="copyright-left">© Copyrights 2020 sApp All rights reserved.</div>
<!-- Copyright Right -->
<div class="copyright-right">Made with By <a href="#">Theme Land</a></div>
</div>
</div>
</div>
</div>
</div>
</footer>
body {
font-family: 'Poppins';font-size: 14px;
}
img {height: auto;max-width: 100%;}
.text-voilet {color :#6a2de3 ;}
.home-area {
height: 800px;
z-index: 1;
}
.bg-voilet {
background: #6a2de3;
}
.home-thumb {
max-width: 300px;
padding-top: 70px;
}
.bg-overlay, .overlay-dark {
position: relative;
z-index: 0;
}
* {
margin: 0;
padding: 0;
}
.fw-3 {
font-weight: 300;
}
.home-area .shape-bottom {
z-index: -1;
}
.shape-bottom {
position: absolute;
top: auto;
bottom: -7px;
left: 0;
right: 0;
}
.button-group {
margin-top: 30px;
}
.store-buttons img {
max-width: 190px;
}
.store-buttons a {
text-align: left;
}
.button-group a {
margin-right: 10px;
}
