Footer 1
<!-- -------- START FOOTER 1 w/ COMPANY DESCRIPTION AND 4 COLS ------- --> <footer class="footer py-9"> <div class="container"> <div class="row"> <div class="col-lg-3 mb-5 mb-lg-0"> <h6 class="text-uppercase mb-2">Soft</h6> <p class="mb-4 pb-2"> The next generation of design systems. </p> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3"> <span class="text-lg fab fa-facebook"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3"> <span class="text-lg fab fa-twitter"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3"> <span class="text-lg fab fa-instagram"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3"> <span class="text-lg fab fa-pinterest"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-3"> <span class="text-lg fab fa-github"></span> </a> </div> <div class="col-md-2 col-6 ms-lg-auto mb-md-0 mb-4"> <h6 class="text-sm">Company</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> About Us </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Careers </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Press </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Blog </a> </li> </ul> </div> <div class="col-md-2 col-6 mb-md-0 mb-4"> <h6 class="text-sm">Pages</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Login </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Register </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Add list </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Contact </a> </li> </ul> </div> <div class="col-md-2 col-6 mb-md-0 mb-4"> <h6 class="text-sm">Legal</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Terms </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> About Us </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Team </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Privacy </a> </li> </ul> </div> <div class="col-md-2 col-6 mb-md-0 mb-4"> <h6 class="text-sm">Resources</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Blog </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Service </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Product </a> </li> <li class="nav-item"> <a class="nav-link text-secondary" href="https://www.creative-tim.com" target="_blank"> Pricing </a> </li> </ul> </div> </div> <hr class="horizontal dark mt-lg-5 mt-4 mb-sm-4 mb-1"> <div class="row"> <div class="col-8 mx-lg-auto text-lg-center"> <p class="text-sm text-secondary"> Copyright © <script>document.write(new Date().getFullYear())</script> Soft by Creative Tim. </p> </div> </div> </div> </footer> <!-- -------- END FOOTER 1 w/ COMPANY DESCRIPTION AND 4 COLS ------- -->
Footer 2
<!-- ---- START FOOTER 2 dark w/ bg image 5 cols & subscribe area & social---- --> <footer class="footer py-7 position-relative bg-gradient-dark overflow-hidden"> <div class="position-absolute w-100 z-inde-1 top-0 mt-n3"> <svg width="100%" viewBox="0 -2 1920 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>wave-down</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g fill="#FFFFFF" fill-rule="nonzero"> <g id="wave-down"> <path d="M0,60.8320331 C299.333333,115.127115 618.333333,111.165365 959,47.8320321 C1299.66667,-15.5013009 1620.66667,-15.2062179 1920,47.8320331 L1920,156.389409 L0,156.389409 L0,60.8320331 Z" id="Path-Copy-2" transform="translate(960.000000, 78.416017) rotate(180.000000) translate(-960.000000, -78.416017) "></path> </g> </g> </g> </svg> </div> <div class="container position-relative mt-8"> <div class="row "> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-white text-sm">Company</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Marketing </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Analytics </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Commerce </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Insights </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-white text-sm">Support</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Pricing </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Docs </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Guides </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> API Suport </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-white text-sm">Pages</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/presentation" target="_blank"> About </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/blog" target="_blank"> Blog </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Jobs </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Press </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/affiliates/new" target="_blank"> Affiliates </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-white text-sm">Legal</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Claim </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Privacy </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Terms </a> </li> </ul> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-8 ms-md-auto"> <h6 class="text-white text-md-end text-sm mb-0">Language & Currency</h6> <ul class="nav flex-column"> <li class="nav-item mt-3"> <select class="form-control" name="language-button" id="language-button" placeholder="Language"> <option value="Choice 1" selected>English</option> <option value="Choice 2">Chinese</option> <option value="Choice 3">French</option> <option value="Choice 4">Romanian</option> </select> </li> <li class="nav-item mt-3"> <select class="form-control" name="currency-button" id="currency-button" placeholder="Currency"> <option value="Choice 1" selected>USD</option> <option value="Choice 2">EUR</option> <option value="Choice 3">JPY</option> <option value="Choice 4">GBP</option> <option value="Choice 5">CAD</option> <option value="Choice 6">RON</option> </select> </li> </ul> </div> </div> <hr class="horizontal light mb-4 mt-lg-4"> <div class="row"> <div class="col-lg-6 text-start"> <h6 class="text-white">Subscribe to our newsletters</h6> <p class="text-white opacity-8 mb-lg-0 mb-3">The latest news, articles and resources sent to your inbox weekely.</p> </div> <div class="col-lg-4 ms-auto text-end my-auto"> <div class="row"> <div class="col-md-8 col-7"> <div class="form-group mb-0"> <div class="input-group input-group-alternative"> <input class="form-control" placeholder="E-mail" type="email"> </div> </div> </div> <div class="col-md-4 col-5 text-start ps-0"> <button type="button" class="btn bg-gradient-info mb-0 h-100">Subscribe</button> </div> </div> </div> </div> <hr class="horizontal light my-4"> <div class="row"> <div class="col-lg-6 col-md-6 my-auto"> <p class="text-white mb-0 opacity-8"> Copyright © <script>document.write(new Date().getFullYear())</script> Soft by Creative Tim. </p> </div> <div class="col-lg-4 col-md-6 ms-auto text-end"> <button type="button" class="btn btn-icon-only btn-link text-white mb-0 opacity-6"> <i class="fab fa-facebook text-lg"></i> </button> <button type="button" class="btn btn-icon-only btn-link text-white mb-0 opacity-6"> <i class="fab fa-twitter text-lg"></i> </button> <button type="button" class="btn btn-icon-only btn-link text-white mb-0 opacity-6"> <i class="fab fa-dribbble text-lg"></i> </button> <button type="button" class="btn btn-icon-only btn-link text-white mb-0 opacity-6"> <i class="fab fa-github text-lg"></i> </button> </div> </div> </div> </footer> <!-- ---- END FOOTER 2 dark w/ bg image 5 cols & subscribe area & social---- -->
Footer 3
<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- --> <footer class="footer py-10"> <div class="container"> <div class="row"> <div class="col-lg-8 mb-4 mx-auto text-center"> <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2"> Company </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2"> About Us </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2"> Team </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2"> Products </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2"> Blog </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2"> Pricing </a> </div> <div class="col-lg-8 mx-auto text-center mb-4 mt-2"> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4"> <span class="text-lg fab fa-dribbble"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4"> <span class="text-lg fab fa-twitter"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4"> <span class="text-lg fab fa-instagram"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4"> <span class="text-lg fab fa-pinterest"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4"> <span class="text-lg fab fa-github"></span> </a> </div> </div> <div class="row"> <div class="col-8 mx-auto text-center mt-1"> <p class="mb-0 text-secondary"> Copyright © <script>document.write(new Date().getFullYear())</script> Soft by Creative Tim. </p> </div> </div> </div> </footer> <!-- -------- END FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
Footer 4
<!-- ---- START FOOTER 4 dark w/ 2 cols ---- --> <footer class="footer py-4 my-11 bg-gradient-dark"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-3 text-start my-auto"> <p class="mb-0 text-white text-sm"> Copyright © <script>document.write(new Date().getFullYear())</script> Soft by Creative Tim. </p> </div> <div class="col-lg-5 col-md-8 ms-auto text-end"> <ul class="nav flex-row ms-n3 align-items-center mt-4 mt-sm-0"> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Home </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/presentation" target="_blank"> About </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/blog" target="_blank"> Blog </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Services </a> </li> <li class="nav-item ms-auto"> <button type="button" class="btn bg-gradient-info mb-0 ms-3 ms-sm-0 mt-3 mt-sm-0">Get in Touch</button> </li> </ul> </div> </div> </div> </footer> <!-- ---- END FOOTER 4 dark w/ 2 cols ---- -->
Footer 5
<!-- -------- START FOOTER 5 w/ DARK BACKGROUND ------- --> <footer class="footer py-5 my-9 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-6"> <div class="container position-relative z-index-1"> <div class="row"> <div class="col-lg-4 me-auto mb-lg-0 mb-4 text-lg-start text-center"> <h6 class="text-white font-weight-bolder text-uppercase mb-lg-4 mb-3">Soft</h6> <ul class="nav flex-row ms-n3 align-items-center mb-4 mt-sm-0"> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Home </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/presentation" target="_blank"> About </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com/blog" target="_blank"> Blog </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8" href="https://www.creative-tim.com" target="_blank"> Services </a> </li> </ul> <p class="text-sm text-white opacity-8 mb-0"> Copyright © <script>document.write(new Date().getFullYear())</script> Soft by Creative Tim. </p> </div> <div class="col-lg-6 ms-auto text-lg-end text-center"> <p class="mb-5 text-lg text-white font-weight-bold"> The reward for getting on the stage is fame. The price of fame is you can’t get off the stage. </p> <a href="javascript:;" target="_blank" class="text-white me-xl-4 me-4 opacity-5"> <span class="fab fa-dribbble"></span> </a> <a href="javascript:;" target="_blank" class="text-white me-xl-4 me-4 opacity-5"> <span class="fab fa-twitter"></span> </a> <a href="javascript:;" target="_blank" class="text-white me-xl-4 me-4 opacity-5"> <span class="fab fa-pinterest"></span> </a> <a href="javascript:;" target="_blank" class="text-white opacity-5"> <span class="fab fa-github"></span> </a> </div> </div> </div> </footer> <!-- -------- END FOOTER 5 w/ DARK BACKGROUND ------- -->
Footer 6
<!-- ---- START FOOTER 6 dark w/ 3 cols and subscribe area ---- --> <footer class="footer py-10"> <div class="container"> <div class="row "> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Company</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Marketing </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Analytics </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Insights </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Support</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Pricing </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Docs </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Guides </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Company</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-muted" href="https://www.creative-tim.com/presentation" target="_blank"> About Us </a> </li> <li class="nav-item"> <a class="nav-link text-muted" href="https://www.creative-tim.com/blog" target="_blank"> Blog </a> </li> <li class="nav-item"> <a class="nav-link text-muted" href="https://www.creative-tim.com" target="_blank"> Jobs </a> </li> </ul> </div> <div class="col-lg-4 col-md-5 col-sm-6 col-12 ms-auto mt-4 mt-sm-0"> <h6>Subscribe</h6> <p class="text-sm">Get access to subscriber exclusive deals and be the first who gets informed about fresh sales.</p> <div class="row"> <div class="col-md-8 col-7"> <div class="form-group"> <div class="input-group input-group-alternative mb-4"> <input class="form-control" placeholder="Enter your e-mail" type="text"> </div> </div> </div> <div class="col-md-4 col-5 ps-0"> <button type="button" class="btn bg-gradient-info">Subscribe</button> </div> </div> </div> </div> </div> </footer> <!-- ---- END FOOTER 6 dark w/ 3 cols and subscribe area ---- -->
Footer 7
<!-- -------- START FOOTER 7 w/ DARK BACKGROUND AND 3 COLUMNS ------- --> <footer class="footer py-5 my-10 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-6"> <div class="container position-relative"> <div class="row"> <div class="col-lg-4 me-auto my-auto text-lg-start text-center"> <h6 class="text-white font-weight-bolder text-uppercase mb-2">Soft</h6> <p class="text-white"> Copyright © <script>document.write(new Date().getFullYear())</script> Soft by Creative Tim. </p> </div> <div class="col-lg-2 col-sm-4 col-12 ms-md-auto text-lg-start text-center mb-sm-0 mb-4"> <div> <h6 class="text-white text-sm mb-1">Company</h6> <ul class="flex-column ms-lg-n3 nav"> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> About Us </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> Careers </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> Press </a> </li> </ul> </div> </div> <div class="col-lg-2 col-sm-4 col-12 text-lg-start text-center mb-sm-0 mb-4"> <div> <h6 class="text-white text-sm mb-1">Pages</h6> <ul class="flex-column ms-lg-n3 nav"> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> Login </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> Register </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> About </a> </li> </ul> </div> </div> <div class="col-lg-2 col-sm-4 col-12 text-lg-start text-center mb-sm-0 mb-4"> <div> <h6 class="text-white text-sm mb-1">Products</h6> <ul class="flex-column ms-lg-n3 nav"> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> Free </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> PRO </a> </li> <li class="nav-item"> <a class="nav-link text-white opacity-8 text-sm" href="javascript:;" target="_blank"> Latest </a> </li> </ul> </div> </div> </div> </div> </footer> <!-- -------- END FOOTER 7 w/ DARK BACKGROUND AND 3 COLUMNS ------- -->
Footer 8
<!-- ---- START FOOTER 8 dark w/ 3 cols and subscribe area ---- --> <footer class="footer py-10"> <div class="container position-relative"> <div class="row "> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Company</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Marketing </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Analytics </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Insights </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Support</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Pricing </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Docs </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Guides </a> </li> </ul> </div> <div class="col-lg-8 col-md-5 col-sm-6 col-12 mt-4 mt-sm-0"> <h6>Subscribe</h6> <p class="text-sm">Get access to subscriber exclusive deals and be the first who gets informed about fresh sales.</p> <div class="row"> <div class="col-md-5 col-7"> <div class="form-group"> <div class="input-group input-group-alternative mb-4"> <input class="form-control" placeholder="Enter your e-mail" type="text"> </div> </div> </div> <div class="col-md-4 col-5 ps-0"> <button type="button" class="btn bg-gradient-info">Subscribe</button> </div> </div> </div> </div> <hr class="horizontal dark"> <ul class="nav flex-row justify-content-center"> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Terms & conditions </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Privacy policy </a> </li> <li class="nav-item"> <a class="nav-link text-body" href="https://www.creative-tim.com" target="_blank"> Legal notice </a> </li> </ul> </div> </footer> <!-- ---- START FOOTER 8 dark w/ 3 cols and subscribe area ---- -->
Footer 9
<!-- -------- START FOOTER 5 w/ DARK BACKGROUND ------- --> <div class="position-relative mt-8"> <div class="container"> <div class="card bg-gradient-primary z-index-3"> <div class="card-body"> <div class="row"> <div class="col-md-8 mx-auto text-center"> <h3 class="text-white">Be the first who see the news</h3> <p class="text-white opacity-8 mb-5 pe-5"> 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 ms-auto"> <div class="input-group"> <span class="input-group-text"><i class="fas fa-envelope"></i></span> <input type="text" class="form-control mb-sm-0 mb-2" placeholder="Email Here..." > </div> </div> <div class="col-sm-3 me-auto text-start"> <button type="button" class="btn bg-white w-100 mb-0 h-100 position-relative z-index-2">Subscribe</button> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer pb-5 pt-10 bg-light mt-n8 position-relative"> <div class="position-absolute w-100 z-inde-1 top-0 mt-n3"> <svg width="100%" viewBox="0 -2 1920 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>wave-down</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g fill="#FFFFFF" fill-rule="nonzero"> <g id="wave-down"> <path d="M0,60.8320331 C299.333333,115.127115 618.333333,111.165365 959,47.8320321 C1299.66667,-15.5013009 1620.66667,-15.2062179 1920,47.8320331 L1920,156.389409 L0,156.389409 L0,60.8320331 Z" id="Path-Copy-2" transform="translate(960.000000, 78.416017) rotate(180.000000) translate(-960.000000, -78.416017) "></path> </g> </g> </g> </svg> </div> <div class="container"> <div class="row"> <div class="col-lg-3"> <h6 class="font-weight-bolder mb-lg-4 mb-3">Soft UI Design</h6> </div> <div class="col-lg-6 text-center"> <ul class="nav flex-row align-items-center mb-5 mt-sm-0 justify-content-center"> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com" target="_blank"> Home </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/presentation" target="_blank"> About </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/blog" target="_blank"> Blog </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com" target="_blank"> Services </a> </li> </ul> <p class="mb-0"> Copyright © <script> document.write(new Date().getFullYear()) </script> Soft by Creative Tim. </p> </div> <div class="col-lg-3 text-end"> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4"> <span class="fab fa-dribbble text-lg"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4"> <span class="fab fa-twitter text-lg"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4"> <span class="fab fa-pinterest text-lg"></span> </a> <a href="javascript:;" target="_blank" class="text-secondary"> <span class="fab fa-github text-lg"></span> </a> </div> </div> </div> </footer> <!-- -------- END FOOTER 5 w/ DARK BACKGROUND ------- -->
Footer 10
<!-- ---- START FOOTER 10 white w/ bg image 5 cols & subscribe area & social---- --> <footer class="footer py-7 position-relative overflow-hidden"> <img src="../../assets/img/shapes/waves-gray.svg" alt="pattern-lines" class="position-absolute start-0 top-0 w-100 opacity-6"> <div class="position-absolute w-100 bottom-0"> <svg width="100%" viewBox="0 -1 1920 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>wave-up</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(0.000000, 5.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g id="wave-up" transform="translate(0.000000, -5.000000)"> <path d="M0,70 C298.666667,105.333333 618.666667,95 960,39 C1301.33333,-17 1621.33333,-11.3333333 1920,56 L1920,165 L0,165 L0,70 Z"></path> </g> </g> </g> </svg> </div> <div class="container position-relative z-index-1 mt-8"> <div class="row "> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Company</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Marketing </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Analytics </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Commerce </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Insights </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Support</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Pricing </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Docs </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Guides </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> API Suport </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Pages</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com/presentation" target="_blank"> About </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com/blog" target="_blank"> Blog </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Jobs </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Press </a> </li> </ul> </div> <div class="col-lg-2 col-md-2 col-4"> <h6 class="text-sm">Legal</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com/affiliates/new" target="_blank"> Affiliates </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Claim </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Privacy </a> </li> <li class="nav-item"> <a class="nav-link opacity-8" href="https://www.creative-tim.com" target="_blank"> Terms </a> </li> </ul> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-8 ms-auto"> <h6 class="text-end text-sm">Language & Currency</h6> <ul class="nav flex-column"> <li class="nav-item mt-3"> <select class="form-control" name="language-button" id="language-button" placeholder="Language"> <option value="Choice 1" selected>English</option> <option value="Choice 2">Chinese</option> <option value="Choice 3">French</option> <option value="Choice 4">Romanian</option> </select> </li> <li class="nav-item mt-3"> <select class="form-control" name="currency-button" id="currency-button" placeholder="Currency"> <option value="Choice 1" selected>USD</option> <option value="Choice 2">EUR</option> <option value="Choice 3">JPY</option> <option value="Choice 4">GBP</option> <option value="Choice 5">CAD</option> <option value="Choice 6">RON</option> </select> </li> </ul> </div> </div> <hr class="horizontal dark my-4"> <div class="row"> <div class="col-lg-6 col-md-6 my-auto"> <p class="mb-0 opacity-8"> Copyright © <script>document.write(new Date().getFullYear())</script> Soft by Creative Tim. </p> </div> <div class="col-lg-4 col-md-6 ms-auto text-end"> <button type="button" class="btn btn-icon-only btn-link mb-0 opacity-6"> <i class="fab fa-facebook text-lg text-secondary"></i> </button> <button type="button" class="btn btn-icon-only btn-link mb-0 opacity-6"> <i class="fab fa-twitter text-lg text-secondary"></i> </button> <button type="button" class="btn btn-icon-only btn-link mb-0 opacity-6"> <i class="fab fa-dribbble text-lg text-secondary"></i> </button> <button type="button" class="btn btn-icon-only btn-link mb-0 opacity-6"> <i class="fab fa-github text-lg text-secondary"></i> </button> </div> </div> </div> </footer> <!-- ---- END FOOTER 10 white w/ bg image 5 cols & subscribe area & social---- -->