"complete site 2"
Bootstrap 4.1.1 Snippet by jeevan123456

<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="//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"> <section class="py-5 border-bottom"> <div class="container"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-6 border-right"> <span class="text-pink"><b>ABOUT US</b></span> <h2>We are Dynamic Team of SEO Agency</h2> <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt labore dolore magna aliqua.</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> <div class="col-12 col-lg-4 d-none d-lg-block "> <i class="fa fa-group fa-6x text-pink"></i> </div> </div> </div> </section> <section id="4boxes" class="py-5 border-bottom bg-dark text-white"> <div class="container"> <div class="row d-flex align-items-center text-center"> <div class="col-md-3 col-xs-3"> <i class="fa fa-balance-scale fa-4x mb-4 text-pink"></i> <h4 class="text-pink">Verified Template</h4> <p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover.</p> </div> <div class="col-md-3 col-xs-3"> <i class="fa fa-bullseye fa-4x mb-4 text-pink "></i> <h4 class="text-pink">Bull's Eye</h4> <p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover.</p> </div> <div class="col-md-3 col-xs-3"> <i class="fa fa-connectdevelop fa-4x mb-4 text-pink"></i> <h4 class="text-pink">Connect Develop</h4> <p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover.</p> </div> <div class="col-md-3 col-xs-3"> <i class="fa fa-rocket fa-4x mb-4 text-pink"></i> <h4 class="text-pink">Jump Start</h4> <p>Generate Lorem Ipsum placeholder text for use in your graphic, print and web layouts, and discover.</p> </div> </div> </div> </section> <section class="py-5 border-bottom"> <div class="container"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-4 d-none d-lg-block border-right "> <i class="fa fa-bullseye fa-6x text-pink"></i> </div> <div class="col-12 col-lg-6 "> <span class="text-pink"><b>ABOUT US</b></span> <h2>We are Dynamic Team of SEO Agency</h2> <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt labore dolore magna aliqua.</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> </div> </section> <section class="py-5 border-bottom"> <div class="container"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-6 border-right"> <span class="text-pink"><b>ABOUT US</b></span> <h2>We are Dynamic Team of SEO Agency</h2> <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt labore dolore magna aliqua.</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> <div class="col-12 col-lg-4 d-none d-lg-block "> <i class="fa fa-bullhorn fa-6x text-pink"></i> </div> </div> </div> </section> <section class="py-5 border-bottom"> <div class="container"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-4 d-none d-lg-block border-right "> <i class="fa fa-rocket fa-6x text-pink"></i> </div> <div class="col-12 col-lg-6 "> <span class="text-pink"><b>ABOUT US</b></span> <h2>We are Dynamic Team of SEO Agency</h2> <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt labore dolore magna aliqua.</b></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> </div> </section> <section id="cta" class="pt-4 pb-3 bg-pink text-white"> <div class="container"> <div class="row d-flex align-items-center "> <div class="col-md-12 "> <ul class="list-inline "> <li class="list-inline-item"><h4>Add a photo to show how it went</h4></li> <li class="list-inline-item pull-right"><button type="button" class="btn btn-warning btn-sm">Ask a Question ?</button></li> </ul> </div> </div> </div> </section> <section id="footer" class="pt-5 pb-3 border-bottom"> <div class="container "> <div class="row d-flex "> <div class="col-md-2 col-xs-3"> <b class="text-pink">ABOUT</b> <div class="mb-2 mt-2 border-top "></div> <ul class="list-unstyled"> <li class="mb-2"><a href="#" class="text-secondary">About Us</a></li> <li class="mb-2"><a href="#" class="text-secondary">Contact Us</a></li> <li class="mb-2"><a href="#" class="text-secondary">Career</a></li> <li class="mb-2"><a href="#" class="text-secondary">Press</a></li> </ul> </div> <div class="col-md-2 col-xs-3"> <b class="text-pink">POLICY</b> <div class="mb-2 mt-2 border-top "></div> <ul class="list-unstyled"> <li class="mb-2"><a href="#" class="text-secondary">Return Policy</a></li> <li class="mb-2"><a href="#" class="text-secondary">Terms of Use</a></li> <li class="mb-2"><a href="#" class="text-secondary">Security</a></li> <li class="mb-2"><a href="#" class="text-secondary">Privacy</a></li> <li class="mb-2"><a href="#" class="text-secondary">Sitemap</a></li> </ul> </div> <div class="col-md-2 col-xs-3"> <b class="text-pink">HELP</b> <div class="mb-2 mt-2 border-top "></div> <ul class="list-unstyled"> <li class="mb-2"><a href="#" class="text-secondary">Payments</a></li> <li class="mb-2"><a href="#" class="text-secondary">Shipping</a></li> <li class="mb-2"><a href="#" class="text-secondary">Cancellation</a></li> <li class="mb-2"><a href="#" class="text-secondary">FAQ</a></li> </ul> </div> <div class="col-md-2 col-xs-3 border-right"> <b class="text-pink">SOCIAL</b> <div class="mb-2 mt-2 border-top "></div> <ul class="list-unstyled"> <li class="mb-2"><a href="#" class="text-secondary">Facebook</a></li> <li class="mb-2"><a href="#" class="text-secondary">Twitter</a></li> <li class="mb-2"><a href="#" class="text-secondary">Instagram</a></li> <li class="mb-2"><a href="#" class="text-secondary">Youtube</a></li> </ul> </div> <div class="col-md-4 col-xs-3"> <b class="text-pink">WHO WE ARE</b> <div class="mb-2 mt-2 border-top "></div> <p class="text-secondary">Your kids deserve only the best. From bodysuits, booties, diapers to strollers, if you're an expecting mother or a new mother, you will find everything you need to set sail on a smooth parenting journey with the help of our baby</p> </div> </div> </div> </section> <section id="copyright" class="pt-3"> <div class="container"> <div class="row d-flex align-items-center "> <div class="col-md-12 "> <ul class="list-inline "> <li class="list-inline-item"><small>© 1996-2020, websited.com, Inc. or its affiliates</small></li> <li class="list-inline-item pull-right"><small>All Rights Reserved</small></li> </ul> </div> </div> </div> </section>
.text-pink {color:#f20791;} .bg-pink {background-color:#f20791;} .fa-6x {font-size: 16em !important;}

Related: See More


Questions / Comments: