Logo Areas

Header Logo

Copy
<!-- -------- 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&#39;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 ------- -->
Copy
<!-- -------   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    -------- -->
Copy
<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

Copy
<!-- -------   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    -------- -->