Your IP : 216.73.216.198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Bootstrap Document</title>
<link rel="stylesheet" href="public/css/bootstrap.min.css">
<link rel="stylesheet" href="public/css/style.css">
</head>
<body>
<header class="navbar-fixed-top">
<div class="container justify-content-between">
<div class="row">
<div class="col-md-4 col-sm-12">
<a href="#" title="My website"><img src="public/img/logo.png" alt="My website logo"></a>
</div>
<div class="col-md-7 offset-md-1">
<nav class="container h100">
<ul class="row nav justify-content-end align-items-center h100">
<li class="nav-item">
<a class="nav-link btn btn-dark" href="#">test link</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-dark" href="#">test link</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-dark" href="#">test link</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-dark" href="#">test link</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<img src="public/img/bg.jpg" alt="" class="img-holder">
<section class="text-center topSection">
<div class="container">
<div class="row align-items-center">
<div class="col-md-12 text-light">
<h1>My bootstrap offer</h1>
<h2>Why us?</h2>
<p><a href="#" class="btn badge-dark btn-lg">Check it out</a></p>
</div>
</div>
</div>
</section>
<main class="p50">
<div class="container">
<div class="row">
</div>
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="main-content">
<h2 class="badge-dark p-2">Our company</h2>
<div class="p-3 real-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi velit hic reiciendis voluptatum quis dolore iste ipsam, eum impedit nemo eius deserunt accusantium fugit magni veniam inventore praesentium blanditiis commodi ut, voluptatibus nesciunt. Ipsa libero natus reprehenderit voluptates veritatis fugit officia quo inventore sunt ea illo quibusdam officiis quis, exercitationem sed quaerat necessitatibus adipisci placeat tempore porro! Quam reprehenderit impedit quisquam, eligendi veniam accusamus repellendus suscipit magni ad vel expedita ex et possimus ipsum facilis aliquam minima nulla unde beatae, amet hic! Praesentium quo deleniti sint, porro, magni dolorem distinctio incidunt cupiditate facere quod libero commodi animi. Voluptatem aut, distinctio.</p>
<p>Eum sequi asperiores dolore nam quam maxime dolor ullam, ut temporibus minus officiis quidem consequuntur hic facere impedit sit amet nulla fugit. Animi deleniti ipsa, doloremque, voluptates quis, obcaecati, earum pariatur fugit voluptatibus neque accusamus voluptas veniam tempore. Voluptatem voluptate consequatur cum sed nesciunt sunt rerum, vel debitis magni odit illo rem dolore impedit nemo sapiente. Sunt vitae corrupti quam non modi harum fugiat pariatur saepe perspiciatis obcaecati, voluptas, incidunt dolorum magni. Doloremque, nesciunt, repellat! Tenetur provident incidunt autem, voluptas impedit atque est, aperiam accusantium optio, quisquam harum doloremque nobis quaerat repellat mollitia ex. Sapiente sed quas officiis nobis, molestiae.</p>
</div>
</div>
</div>
<div class="col-md-4 offset-md-1 col-sm-12">
<div class="badge-dark inner-form-container pb-3 pl-4 pr-4 pt-2 text-center">
<h4 class="p-2">Give us e-mail, receive an offer</h4>
<form class="p-3">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="bg-transparent border-warning form-control text-warning" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-block btn-outline-warning">Submit</button>
</form>
</div>
</div>
</div>
</div>
</main>
<aside class="offer p50">
<div class="container justify-content-between">
<div class="row">
<h3>Our offer</h3>
</div>
<div class="row text-center">
<div class="col-md-4 col-sm-12 offer-box">
<div class="p-3 badge-secondary">
<h4>Offer title</h4>
<p class="small">Tiny description of our offer in card, which contains some informations about this particular offer item</p>
<div class="p-3">
<ul class="list-unstyled">
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
</ul>
</div>
<div class="price p-3">
<p class="h3">100,00 $</p>
</div>
<p><a href="#" class="btn btn-warning">Check it out now!</a></p>
</div>
</div>
<div class="col-md-4 col-sm-12 lead offer-box">
<div class="p-3 badge-dark">
<h4 class="h2">Offer title</h4>
<p class="small">Tiny description of our offer in card, which contains some informations about this particular offer item</p>
<div class="p-3">
<ul class="list-unstyled">
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
</ul>
</div>
<div class="price p-3">
<p class="h1">100,00 $</p>
</div>
<p><a href="#" class="btn btn-lg btn-warning">Check it out now!</a></p>
</div>
</div>
<div class="col-md-4 col-sm-12 offer-box">
<div class="p-3 badge-secondary">
<h4>Offer title</h4>
<p class="small">Tiny description of our offer in card, which contains some informations about this particular offer item</p>
<div class="p-3">
<ul class="list-unstyled">
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
<li class="border-bottom mb-2 p-1 pl-3 pr-3">Test value of list</li>
</ul>
</div>
<div class="price p-3">
<p class="h3">100,00 $</p>
</div>
<p><a href="#" class="btn btn-warning">Check it out now!</a></p>
</div>
</div>
</div>
</div>
</aside>
<aside class="whyUs p50">
<div class="container justify-content-between">
<div class="row">
<h3>Why us?</h3>
</div>
<div class="row p50">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-reason1-list" data-toggle="list" href="#list-reason1" role="tab" aria-controls="Reason 1">Reason 1</a>
<a class="list-group-item list-group-item-action" id="list-reason2-list" data-toggle="list" href="#list-reason2" role="tab" aria-controls="Reason 2">Reason 2</a>
<a class="list-group-item list-group-item-action" id="list-reason3-list" data-toggle="list" href="#list-reason3" role="tab" aria-controls="Reason 3">Reason 3</a>
<a class="list-group-item list-group-item-action" id="list-reason4-list" data-toggle="list" href="#list-reason4" role="tab" aria-controls="Reason 4">Reason 4</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-reason1" role="tabpanel" aria-labelledby="list-reason1-list">
<h4>Reason 1 title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A iure doloribus reiciendis debitis earum, suscipit delectus veritatis accusantium aspernatur quos. Aspernatur eligendi odio excepturi consequuntur fugiat id, ab, itaque ad distinctio laboriosam ducimus nemo commodi ex eveniet voluptates totam expedita temporibus illum. Molestias autem vel sint quod possimus minima quibusdam!</p>
<p>Deleniti ea assumenda nesciunt, minus laborum cum doloribus asperiores nemo. Fugit eius, voluptas. Laboriosam molestias excepturi consequatur illum laborum quisquam deserunt atque eaque ad facere nemo, dolorem eius ipsam id, modi sequi at repellendus consequuntur. Dolores non optio error reprehenderit vero, dicta, quae magni dolore doloremque a dolorum eos nulla.</p>
</div>
<div class="tab-pane fade" id="list-reason2" role="tabpanel" aria-labelledby="list-reason2-list">
<h4>Reason 2 title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed non voluptate sint inventore, sit impedit necessitatibus odio at ipsam consectetur. Vitae aliquid reiciendis consectetur unde rerum doloribus necessitatibus ea a cupiditate at ipsa, saepe hic laboriosam consequatur eaque aut fugit non sequi accusamus. Obcaecati odio autem eaque ipsum id, delectus!</p>
<p>Autem quo exercitationem velit molestias voluptates veritatis architecto nihil quia eius libero ut expedita deserunt ullam, vitae ipsam voluptatibus quaerat alias cumque, nam laboriosam est veniam commodi magnam. Ipsa itaque, magni maxime accusamus nostrum quae hic ipsam excepturi dolorum nobis necessitatibus repudiandae, esse omnis non, autem nihil voluptatum sed, repellendus.</p>
</div>
<div class="tab-pane fade" id="list-reason3" role="tabpanel" aria-labelledby="list-reason3-list">
<h4>Reason 3 title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fuga nobis magnam, animi libero dicta dolor accusamus iure placeat enim ratione inventore vitae. Laboriosam necessitatibus illo tempora debitis eos sint ipsam ullam maxime ipsa similique saepe rem vero inventore adipisci molestias est excepturi corporis, ab tenetur nam veniam, explicabo dolore.</p>
<p>Qui unde ipsa earum delectus ullam cumque, omnis pariatur laudantium repudiandae eius cupiditate asperiores! Animi doloremque ab optio, nemo omnis id. Culpa nostrum voluptates, quod accusamus, officia obcaecati quasi mollitia soluta accusantium dolores illo eaque repellendus, saepe omnis? Porro illum obcaecati, reiciendis necessitatibus ab fugit ea eaque labore cupiditate qui.</p>
</div>
<div class="tab-pane fade" id="list-reason4" role="tabpanel" aria-labelledby="list-reason4-list">
<h4>Reason 4 title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam consectetur iusto, nobis molestiae dignissimos eveniet similique inventore vero repudiandae, corrupti perspiciatis incidunt distinctio atque, ab error et, quod fugiat iste blanditiis. Totam similique dolor perferendis, sequi odio consequatur ea in eos, voluptate necessitatibus deleniti dolore fugit voluptatibus! Minima, alias, obcaecati.</p>
<p>Eveniet sit alias nesciunt quod totam similique consectetur deserunt tempora consequuntur impedit quibusdam tempore exercitationem, adipisci est doloremque nulla perferendis ad illo odio! Eius placeat, deserunt ullam, illo suscipit iusto, cum, vel nulla pariatur atque amet tenetur ea. Quisquam nesciunt, debitis id doloremque ut obcaecati voluptatem a dignissimos provident totam?</p>
</div>
</div>
</div>
</div>
</div>
</aside>
<aside class="whatYouGet p50">
<div class="container justify-content-between">
<div class="row">
<h3>What you get?</h3>
</div>
<div class="row p50">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="public/img/card1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, totam, illo est quos debitis, similique, sapiente consectetur pariatur modi incidunt porro delectus voluptate officiis quidem tempora neque quibusdam praesentium quae.</p>
</div>
<div class="card-footer">
<small class="text-muted">#offer #green #bootstrap</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="public/img/card2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta quibusdam iusto necessitatibus excepturi asperiores, dolores sed placeat eum nobis fuga ratione consectetur veniam odio sunt pariatur officia mollitia aliquam officiis unde consequatur soluta error rem. Dignissimos ut a autem laboriosam, impedit quo accusantium sed aperiam expedita tempora sit aliquam odit.</p>
</div>
<div class="card-footer">
<small class="text-muted">#offer #green #bootstrap</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="public/img/card3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dignissimos, tenetur nisi placeat vero. Dolore, impedit quae incidunt suscipit provident fugit fuga expedita commodi atque sunt eum vel libero. Porro!</p>
</div>
<div class="card-footer">
<small class="text-muted">#offer #green #bootstrap</small>
</div>
</div>
</div>
</div>
</div>
</aside>
<footer>
<div class="container justify-content-between">
<div class="row">
<div class="info col-md-3 col-sm-12 text-muted">
<h5>Bootstrap company</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi rerum architecto vitae, dolores molestias magnam, cum aliquam sapiente? Iste nemo, perspiciatis rerum possimus, sint facere!</p>
</div>
<div class="bottom-menu col-md-5 col-sm-12">
<div class="container justify-content-between">
<nav class="row">
<ul class="list-unstyled col-md-6 col-sm-12">
<li><a class="text-success" href="#">test</a></li>
<li><a class="text-success" href="#">test</a></li>
<li><a class="text-success" href="#">test</a></li>
<li><a class="text-success" href="#">test</a></li>
</ul>
<ul class="list-unstyled col-md-6 col-sm-12">
<li><a class="text-success" href="#">test</a></li>
<li><a class="text-success" href="#">test</a></li>
<li><a class="text-success" href="#">test</a></li>
<li><a class="text-success" href="#">test</a></li>
</ul>
</nav>
</div>
</div>
<div class="contact col-md-4 col-sm-12">
<p><span class="text-muted">Contact:</span> <a href="#" class="text-success">contact@contact.com</a></p>
<p><span class="text-muted">Contact:</span> <a href="#" class="text-success">contact@contact.com</a></p>
<p><span class="text-muted">Contact:</span> <a href="#" class="text-success">contact@contact.com</a></p>
</div>
</div>
</div>
</footer>
<div class="bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="small text-muted">Company ©2018 Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<script src="public/js/jquery.min.js"></script>
<script src="public/js/bootstrap.min.js"></script>
<script src="public/js/app.js"></script>
</body>
</html>