Prefooter 1
<!-- -------- START PRE-FOOTER 1 w/ SUBSCRIBE BUTTON AND IMAGE ------- --> <section class="py-7 mt-1"> <div class="container-fluid px-0"> <div class="row justify-content-center text-center"> <div class="col-12 position-relative"> <div class="row bg-gray-100 bottom-0 py-7"> <div class="col-xl-6 text-start ms-auto"> <h4>Be the first to see the news</h4> <p class="mb-4"> Your company may not be in the software business, but eventually, a software company will be in your business. </p> <div class="row"> <div class="col-sm-5"> <div class="input-group input-group-outline"> <label class="form-label">Email Here</label> <input type="text" class="form-control mb-sm-0 mb-2"> </div> </div> <div class="col-sm-4 ps-0"> <button type="button" class="btn bg-gradient-warning mb-0 h-100 position-relative z-index-2">Subscribe</button> </div> </div> </div> <div class="col-xl-4 position-relative"> <img class="w-100 max-width-300 border-radius-lg mt-n10 d-lg-block d-none shadow-xl" src="../../assets/img/examples/blog2.jpg" alt="image"> </div> </div> </div> </div> </div> </section> <!-- -------- END PRE-FOOTER 1 w/ SUBSCRIBE BUTTON AND IMAGE ------- -->
Prefooter 2
<!-- ------- START PRE-FOOTER 2 - simple social line w/ title & 3 buttons -------- --> <div class="py-11"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h4 class="mb-1">Thank you for your support!</h4> <p class="lead mb-0">Delivering the best products</p> </div> <div class="col-lg-6 d-flex align-items-center"> <a href="javascript:;" class="btn btn-twitter mb-0 me-2"> <i class="fab fa-twitter me-1"></i> Twitter </a> <a href="javascript:;" class="btn btn-facebook mb-0 me-2"> <i class="fab fa-facebook-square me-1"></i> Facebook </a> <a href="javascript:;" class="btn btn-tumblr mb-0 me-2"> <i class="fab fa-tumblr me-1"></i> Tumblr </a> <a href="javascript:;" class="btn btn-dribbble mb-0"> <i class="fab fa-dribbble me-1"></i> Dribbble </a> </div> </div> </div> </div> <!-- ------- END PRE-FOOTER 2 - simple social line w/ title & 3 buttons -------- -->
Prefooter 3
<!-- -------- START PRE-FOOTER 3 w/ SOCIAL BUTTONS ------- --> <section class="my-11"> <div class="container bg-gradient-dark border-radius-lg"> <div class="row py-4"> <div class="col-md-2 col-sm-4 col-6 text-center my-auto mb-md-0 mb-4 border-end-md"> <a href="javascript:;" class="btn btn-link btn-icon mb-0"> <i class="fab fa-twitter text-white text-lg"></i> </a> </div> <div class="col-md-2 col-sm-4 col-6 text-center my-auto mb-md-0 mb-4 border-end-md"> <a href="javascript:;" class="btn btn-link btn-icon mb-0"> <i class="fab fa-facebook text-white text-lg"></i> </a> </div> <div class="col-md-2 col-sm-4 col-6 text-center my-auto mb-md-0 mb-4 border-end-md"> <a href="javascript:;" class="btn btn-link btn-icon mb-0"> <i class="fab fa-pinterest text-white text-lg"></i> </a> </div> <div class="col-md-2 col-sm-4 col-6 text-center my-auto border-end-md"> <a href="javascript:;" class="btn btn-link btn-icon mb-0"> <i class="fab fa-dribbble text-white text-lg"></i> </a> </div> <div class="col-md-2 col-sm-4 col-6 text-center my-auto border-end-md"> <a href="javascript:;" class="btn btn-link btn-icon mb-0"> <i class="fab fa-youtube text-white text-lg"></i> </a> </div> <div class="col-md-2 col-sm-4 col-6 text-center my-auto"> <a href="javascript:;" class="btn btn-link btn-icon mb-0"> <i class="fab fa-instagram text-white text-lg"></i> </a> </div> </div> </div> </section> <!-- -------- END PRE-FOOTER 3 w/ SOCIAL BUTTONS ------- -->
Prefooter 4
<!-- ------- START PRE-FOOTER 4 - title & description and input -------- --> <div class="py-11"> <div class="container"> <div class="row"> <div class="col-lg-6 text-start"> <h4>Get tips & tricks every week</h4> <p class="mb-0">The latest news, articles and resources sent to your inbox weekely.</p> </div> <div class="col-lg-5 ms-auto text-end my-auto"> <div class="row"> <div class="col-lg-8 col-md-4 col-7"> <div class="input-group input-group-outline"> <label class="form-label">Your Email</label> <input class="form-control" type="email" > </div> </div> <div class="col-lg-4 col-md-4 col-5 text-start ps-0"> <button type="button" class="btn bg-gradient-dark mb-0">Subscribe</button> </div> </div> </div> </div> </div> </div> <!-- ------- END PRE-FOOTER 4 - title & description and input -------- -->
Prefooter 5
<!-- -------- START PRE-FOOTER 5 w/ DARK BACKGROUND ------- --> <section class="my-9 py-5 bg-gradient-dark position-relative overflow-hidden"> <img src="../../assets/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute start-0 top-0 w-100 opacity-4"> <div class="container position-relative z-index-2"> <div class="row"> <div class="col-lg-6 col-md-8 m-auto text-center"> <h5 class="text-white">Be the first to see the news</h5> <p class="mb-5 text-white"> Your company may not be in the software business, but eventually, a software company will be in your business. </p> <div class="row"> <div class="col-sm-8 pe-sm-0 mb-sm-0 mb-2"> <div class="input-group input-group-outline"> <label class="form-label">Email Here...</label> <input class="form-control" type="email" > </div> </div> <div class="col-sm-4 ps-sm-0"> <button type="button" class="btn bg-gradient-dark mb-0 ms-sm-3 me-auto w-100 d-block">Subscribe</button> </div> </div> </div> </div> </div> </section> <!-- -------- END PRE-FOOTER 5 w/ DARK BACKGROUND ------- -->
Prefooter 6
<!-- ------- START PRE-FOOTER 6 - title & description and input -------- --> <div class="py-8"> <div class="container"> <div class="row"> <div class="col-lg-6 mx-auto text-center"> <h3>Our products are built on top</h3> <p class="lead">Very nice logos here on this page, you can check more on our social profiles.</p> </div> </div> <div class="row mt-5"> <div class="col-lg-2 col-md-4 col-6 mb-4 ms-auto"> <img class="w-100 opacity-7" src="../../assets/img/logos/gray-logos/logo-apple.svg"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-7" src="../../assets/img/logos/gray-logos/logo-spotify.svg"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-7" src="../../assets/img/logos/gray-logos/logo-behance.svg"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-7" src="../../assets/img/logos/gray-logos/logo-facebook.svg"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4 me-auto"> <img class="w-100 opacity-7" src="../../assets/img/logos/gray-logos/logo-nasa.svg"> </div> </div> </div> </div> <!-- ------- END PRE-FOOTER 6 - title & description and input -------- -->
Prefooter 7
<!-- -------- START PRE-FOOTER 7 w/ TEXT AND 2 BUTTONS ------- --> <section class="my-10 py-5 bg-gradient-dark position-relative overflow-hidden"> <img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute start-0 top-0 w-100 opacity-1"> <div class="container position-relative z-index-2"> <div class="row"> <div class="col-lg-5 col-md-8 m-auto text-start"> <h5 class="text-white mb-lg-0 mb-5"> Your company may not be in the software business, but eventually, a software company will be in your business. </h5> </div> <div class="col-lg-6 m-auto"> <div class="row"> <div class="col-sm-4 col-6 ps-sm-0 ms-auto"> <button type="button" class="btn bg-gradient-dark mb-0 ms-lg-3 ms-sm-2 mb-sm-0 mb-2 me-auto w-100 d-block">Start Now</button> </div> <div class="col-sm-4 col-6 ps-sm-0 me-lg-0 me-auto"> <button type="button" class="btn btn-white mb-0 ms-lg-3 ms-sm-2 mb-sm-0 mb-2 me-auto w-100 d-block">Our Story</button> </div> </div> </div> </div> </div> </section> <!-- -------- END PRE-FOOTER 7 w/ TEXT AND 2 BUTTONS ------- -->
Prefooter 8
<!-- -------- START PRE-FOOTER 8 w/ TEXT, BG IMAGE AND 2 BUTTONS ------- --> <section class="my-10 py-5 bg-gradient-dark position-relative" style="background-image:url(../../assets/img/bg3.jpg)"> <span class="mask bg-gradient-dark opacity-8"></span> <div class="container position-relative z-index-2"> <div class="row"> <div class="col-lg-5 col-md-8 m-auto text-start"> <h5 class="text-white mb-lg-0 mb-5"> For being a bright color. For standing out. But the time is now to be okay to be the greatest you. </h5> </div> <div class="col-lg-6 m-auto"> <div class="row"> <div class="col-sm-4 col-6 ps-sm-0 ms-auto"> <button type="button" class="btn bg-gradient-warning mb-0 ms-lg-3 ms-sm-2 mb-sm-0 mb-2 me-auto w-100 d-block">Start Now</button> </div> </div> </div> </div> </div> </section> <!-- -------- END PRE-FOOTER 8 w/ TEXT, BG IMAGE AND 2 BUTTONS ------- -->