Header Logo
<!-- -------- START HEADER 8 w/ two background colors ------- -->
<header class="header-rounded-images">
<div class="page-header min-vh-90">
<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-section border-top-end-radius-0 border-top-start-radius-0 border-bottom-end-radius-0" src="https://images.unsplash.com/photo-1538681105587-85640961bf8b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="image" loading="lazy">
<div class="container">
<div class="row">
<div class="col-lg-7 d-flex">
<div class="card card-body blur text-md-start text-center px-sm-5 shadow-lg mt-sm-5 py-sm-5">
<h2 class="text-dark mb-4">Choose the best</h2>
<p class="lead text-dark 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 bg-gradient-primary mt-4">Contact Us</button>
<button type="button" class="btn 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 9 w/ two background colors ------- -->Logo Area
<!-- ------- START PRE-FOOTER 6 - title & description and input -------- -->
<div class="py-11">
<div class="container">
<div class="row">
<div class="col-8 mx-auto text-center">
<h6 class="opacity-5"> More than 50+ brands trust Soft</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-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">
<div class="card-body">
<img src="../../assets/img/team-3.jpg" alt="..." class="avatar avatar-lg border-radius-lg shadow mt-n5">
<div class="author">
<div class="name">
<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">
<img src="../../assets/img/marie.jpg" alt="..." class="avatar avatar-lg border-radius-lg shadow mt-n5">
<div class="author align-items-center">
<div class="name">
<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">
<div class="card-body">
<img src="../../assets/img/team-2.jpg" alt="..." class="avatar avatar-lg border-radius-lg shadow mt-n5">
<div class="author">
<div class="name">
<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-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-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-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-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-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-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-5">
<div class="container">
<div class="row">
<div class="col-8 mx-auto text-center">
<h3 class="font-weight-bolder"> More than 500 brands trust Material</h3>
</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/medium-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/medium-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/medium-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/medium-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/medium-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/medium-logos/logo-vodafone.svg" alt="logo">
</div>
</div>
</div>
</div>
<!-- ------- END PRE-FOOTER 6 - title & description and input -------- -->