Header Logo
<!-- -------- START HEADER 8 w/ card over right bg image ------- --> <header> <div class="page-header min-vh-85"> <div> <img class="position-absolute fixed-top ms-auto w-50 h-100 z-index-0 d-none d-sm-none d-md-block border-radius-xl border-top-end-radius-0 border-top-start-radius-0 border-bottom-end-radius-0" src="../../assets/img/pricing3.jpg" alt="image"> </div> <div class="container"> <div class="row"> <div class="col-lg-7 d-flex"> <div class="card card-body text-md-start text-center px-sm-5 shadow mt-sm-5 py-sm-5"> <h2 class="mb-0">Now UI Design System.</h2> <h2 class="text-dark mb-4">Choose the best</h2> <p class="lead pe-md-5 me-md-5"> Find the story of Creative Tim's most complex design system and all the work that make this design available. </p> <div class="buttons"> <button type="button" class="btn btn-rounded bg-gradient-primary mt-4">Contact Us</button> <button type="button" class="btn btn-rounded btn-outline-secondary mt-4 ms-2">Read More</button> </div> <div class="row mt-2"> <div class="col-md-3 col-6 p-0"> <img class="w-100" src="../../assets/img/logos/gray-logos/logo-pinterest.svg" alt="logo"> </div> <div class="col-md-3 col-6 p-0"> <img class="w-100" src="../../assets/img/logos/gray-logos/logo-netflix.svg" alt="logo"> </div> <div class="col-md-3 col-6 p-0"> <img class="w-100" src="../../assets/img/logos/gray-logos/logo-coinbase.svg" alt="logo"> </div> <div class="col-md-3 col-6 p-0"> <img class="w-100" src="../../assets/img/logos/gray-logos/logo-nasa.svg" alt="logo"> </div> </div> </div> </div> </div> </div> </div> </header> <!-- -------- END HEADER 8 w/ card over right bg image ------- -->
Logo Area
<!-- ------- START PRE-FOOTER 6 - title & description and input -------- --> <div class="py-5"> <div class="container"> <div class="row"> <div class="col-8 mx-auto text-center"> <h6 class="opacity-5"> More than 50+ brands trust Now UI</h6> </div> </div> <div class="row mt-4"> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-9" src="../../assets/img/logos/gray-logos/logo-coinbase.svg" alt="logo"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-9" src="../../assets/img/logos/gray-logos/logo-nasa.svg" alt="logo"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-9" src="../../assets/img/logos/gray-logos/logo-netflix.svg" alt="logo"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-9" src="../../assets/img/logos/gray-logos/logo-pinterest.svg" alt="logo"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-9" src="../../assets/img/logos/gray-logos/logo-spotify.svg" alt="logo"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-9" src="../../assets/img/logos/gray-logos/logo-vodafone.svg" alt="logo"> </div> </div> </div> </div> <!-- ------- END PRE-FOOTER 6 - title & description and input -------- -->
Logos
<section class="py-5"> <div class="container"> <div class="row"> <div class="col-lg-6 mx-auto text-center"> <h2 class="mb-0">What random people</h2> <h2 class="mb-3">Think about us</h2> <p>That’s the main thing people are controlled by! Thoughts- their perception of themselves! </p> </div> </div> <div class="row mt-6"> <div class="col-lg-4 col-md-8"> <div class="card card-plain"> <div class="card-body"> <div class="author"> <img src="../../assets/img/james.jpg" alt="..." class="avatar shadow rounded-circle"> <div class="name ps-2"> <span>Mathew Glock</span> <div class="stats"> <small><i class="far fa-clock"></i> 5 min read</small> </div> </div> </div> <p class="mt-4">"If you have the opportunity to play this game of life you need to appreciate every moment."</p> <div class="rating mt-3"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> </div> </div> </div> <div class="col-lg-4 col-md-8 ms-md-auto"> <div class="card bg-gradient-primary"> <div class="card-body"> <div class="author align-items-center"> <img src="../../assets/img/emily.jpg" alt="..." class="avatar shadow rounded-circle"> <div class="name ps-2"> <span class="text-white">Mathew Glock</span> <div class="stats"> <small class="text-white">Posted on 28 February</small> </div> </div> </div> <p class="mt-4 text-white">"If you have the opportunity to play this game of life you need to appreciate every moment."</p> <div class="rating mt-3"> <i class="fas fa-star text-white"></i> <i class="fas fa-star text-white"></i> <i class="fas fa-star text-white"></i> <i class="far fa-star text-white"></i> <i class="far fa-star text-white"></i> </div> </div> </div> </div> <div class="col-lg-4 col-md-8"> <div class="card card-plain"> <div class="card-body"> <div class="author"> <img src="../../assets/img/emilyz.jpg" alt="..." class="avatar shadow rounded-circle"> <div class="name ps-2"> <span>Mathew Glock</span> <div class="stats"> <small><i class="far fa-clock"></i> 5 min read</small> </div> </div> </div> <p class="mt-4">"If you have the opportunity to play this game of life you need to appreciate every moment."</p> <div class="rating mt-3"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> </div> <hr class="horizontal dark my-5"> <div class="row"> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="../../assets/img/logos/gray-logos/logo-apple.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="../../assets/img/logos/gray-logos/logo-facebook.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="../../assets/img/logos/gray-logos/logo-behance.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="../../assets/img/logos/gray-logos/logo-spotify.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="../../assets/img/logos/gray-logos/logo-coinbase.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="../../assets/img/logos/gray-logos/logo-pinterest.svg" alt="Logo"> </div> </div> </div> </section>
Logo Section
<!-- ------- 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/medium-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/medium-logos/logo-mailchimp.svg"> </div> <div class="col-lg-2 col-md-4 col-6 mb-4"> <img class="w-100 opacity-7" src="../../assets/img/logos/medium-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/medium-logos/logo-mailchimp.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/medium-logos/logo-nasa.svg"> </div> </div> </div> </div> <!-- ------- END PRE-FOOTER 6 - title & description and input -------- -->