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-section border-top-end-radius-0 border-top-start-radius-0 border-bottom-end-radius-0" src="../../assets/img/curved-images/curved6.jpg" alt="image">
</div>
<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-gradient text-primary mb-0">Soft Design System.</h2>
<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 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 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="text-gradient text-primary 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/team-3.jpg" alt="..." class="avatar shadow">
<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/marie.jpg" alt="..." class="avatar shadow">
<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/team-2.jpg" alt="..." class="avatar shadow">
<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-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-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 -------- -->