<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm fixed-top bg-light border ">
<div class="container">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="http://velikorodnov.com/html/autotrader/images/logo.png" alt="Logo" style="width:120px;">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#banner">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#discover">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#piano">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#flat">ContactUs</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="banner slider" id="banner">
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://wpregular.support/wp/insurers/wp-content/uploads/2017/03/Funeral-Plan-Beach-Umbrella.jpeg" alt="Los Angeles">
<div class="carousel-caption">
<div class="col-md-7">
<h1 class="display-5">Ready To Buy Your New
Insurance With Secure-Assurance? </h1>
<p>Tendis tempor ante acu ipsum finibus, et atimus etims urnatis quisle ratione lorem nets et sequi tempor.</p>
<button type="button" class="btn btn-success mt-4">Buy Insurance</button>
<button type="button" class="btn btn-dark mt-4">Get more details</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="http://wpregular.support/wp/insurers/wp-content/uploads/2017/03/s3.jpg" alt="Chicago">
<div class="carousel-caption">
<div class="col-md-7">
<h1 class="display-5">Ready To Buy Your New
Insurance With Secure-Assurance? </h1>
<p>Tendis tempor ante acu ipsum finibus, et atimus etims urnatis quisle ratione lorem nets et sequi tempor.</p>
<button type="button" class="btn btn-success mt-4">Buy Insurance</button>
<button type="button" class="btn btn-dark mt-4">Get more details</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://images.cardekho.com/images/featuredcarimages/Honda-WR-V-19/wrv-0.jpg" alt="New York">
<div class="carousel-caption">
<div class="col-md-7">
<h1 class="display-5">Ready To Buy Your New
Insurance With Secure-Assurance? </h1>
<p>Tendis tempor ante acu ipsum finibus, et atimus etims urnatis quisle ratione lorem nets et sequi tempor.</p>
<button type="button" class="btn btn-success mt-4">Buy Insurance</button>
<button type="button" class="btn btn-dark mt-4">Get more details</button>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<section class="aboutus py-5" id="aboutus">
<div class="container py-5 text-center">
<div class="row">
<div class="col-md-12">
<h2>How it works</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration, by injected humour, or new randomised words.</p>
</div>
</div>
<div class="row pt-4">
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
</div>
</div>
</section>
<section class="discover py-5 bg-dark text-white" id="discover">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://demo.epic-webdesign.com/tf-pacifico/v4/images/image-section.jpg">
</div>
<div class="col-md-6 pt-5">
<h4>Get ready to discover all the benefits and secrets of a perfect launch</h4>
<ul class="list-inline list-unstyled pt-3">
<li class="list-inline-item"><i class="fa fa-arrow-circle-right "></i> Is the app available in all countries?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right"></i> How can I manage or stop the notifications I receive?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right "></i> Is the app available in all countries?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right"></i> How can I manage or stop the notifications I receive?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right "></i> Is the app available in all countries?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right"></i> How can I manage or stop the notifications I receive?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right "></i> Is the app available in all countries?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right"></i> How can I manage or stop the notifications I receive?</li>
</ul>
<button type="button" class="btn btn-primary">Read More...</button>
</div>
</div>
</div>
</section>
<section class="info py-5" id="info">
<div class="container py-5 text-center">
<div class="row">
<div class="col-md-12">
<h2>How it works</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration, by injected humour, or new randomised words.</p>
</div>
</div>
<div class="row pt-4">
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
</div>
</div>
</section>
<section class="piano py-5 bg-primary text-white" id="piano">
<div class="container">
<div class="row">
<div class="col-md-6 pt-5">
<h4>Get ready to discover all the benefits and secrets of a perfect launch</h4>
<ul class="list-inline list-unstyled pt-3">
<li class="list-inline-item"><i class="fa fa-arrow-circle-right "></i> Is the app available in all countries?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right"></i> How can I manage or stop the notifications I receive?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right "></i> Is the app available in all countries?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right"></i> How can I manage or stop the notifications I receive?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right "></i> Is the app available in all countries?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right"></i> How can I manage or stop the notifications I receive?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right "></i> Is the app available in all countries?</li>
<li class="list-inline-item"><i class="fa fa-arrow-circle-right"></i> How can I manage or stop the notifications I receive?</li>
</ul>
<button type="button" class="btn btn-primary">Read More...</button>
</div>
<div class="col-md-6">
<img src="http://demo.epic-webdesign.com/tf-pacifico/v4/images/image-section.jpg">
</div>
</div>
</div>
</section>
<section class="flat py-5" id="flat">
<div class="container py-5 text-center">
<div class="row">
<div class="col-md-12">
<h2>How it works</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration, by injected humour, or new randomised words.</p>
</div>
</div>
<div class="row pt-4">
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
<div class="col-md-4">
<i class="fa fa-search fa-3x "></i>
<h5 class="py-3">Search Opportunities</h5>
<p>Curabitur quam etsum lacus etsumis nulat iaculis ets vitae etsum nisle varius sed aliquam ets vitae dictis netsum.
</p>
</div>
</div>
</div>
</section>
<section class="copyright bg-secondary text-white py-2">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<small>ⓒ 2018 PIWO. All rights reserved.</small>
</div>
</div>
</div>
</section>
