Page Headers

Copy
<!-- -------- START HEADER 1 w/ text and image on right ------- -->
<header>
  <nav class="navbar navbar-expand-lg navbar-dark navbar-absolute bg-transparent shadow-none">
    <div class="container">
      <a class="navbar-brand text-white" href="javascript:;">Material Design</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header-2" aria-controls="navbar-header-2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar-header-2">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link text-white" href="javascript:;">
              Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="javascript:;">
              About Us
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="javascript:;">
              Contact Us
            </a>
          </li>
        </ul>

        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white" href="https://twitter.com/CreativeTim">
              <i class="fab fa-twitter"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white mx-2" href="https://www.facebook.com/CreativeTim">
              <i class="fab fa-facebook"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="https://www.instagram.com/CreativeTimOfficial">
              <i class="fab fa-instagram"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="page-header min-vh-100" style="background-image: url(&#39;https://images.unsplash.com/photo-1520769945061-0a448c463865?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80&#39;);" loading="lazy">
    <span class="mask bg-gradient-dark opacity-5"></span>
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
          <h1 class="text-white mb-4">Material Kit</h1>
          <p class="text-white opacity-8 lead pe-5 me-5">The time is now for it be okay to be great. People in this world shun people for being nice. </p>
          <div class="buttons">
            <button type="button" class="btn btn-white mt-4">Get Started</button>
            <button type="button" class="btn text-white shadow-none mt-4">Read more</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- -------- END HEADER 1 w/ text and image on right ------- -->
Copy
<!-- -------- START HEADER 2 w/ waves and typed text ------- -->
<header class="position-relative">
  <nav class="navbar navbar-expand-lg navbar-dark navbar-absolute bg-transparent shadow-none">
    <div class="container">
      <a class="navbar-brand text-white" href="javascript:;">Material Design</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header-2" aria-controls="navbar-header-2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar-header-2">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link text-white" href="javascript:;">
              Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="javascript:;">
              About Us
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="javascript:;">
              Contact Us
            </a>
          </li>
        </ul>

        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white" href="https://twitter.com/CreativeTim">
              <i class="fab fa-twitter"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white mx-2" href="https://www.facebook.com/CreativeTim">
              <i class="fab fa-facebook"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="https://www.instagram.com/CreativeTimOfficial">
              <i class="fab fa-instagram"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="page-header min-vh-100" style="background-image: url(./assets/img/bg9.jpg);" loading="lazy">
    <span class="mask bg-gradient-info opacity-4"></span>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 text-center mx-auto">
          <h1 class="text-white">Our company mission is to lead the <span class="text-white" id="typed"></span></h1>
            <div id="typed-strings">
              <h1>web development</h1>
              <h1>mobile development</h1>
              <h1>web design</h1>
            </div>
          <p class="lead text-white text-center pe-5 mt-4">The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. </p>
          <br />
          <div class="buttons text-center">
            <button type="button" class="btn btn-white">Contact Us</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- -------- END HEADER 2 w/ waves and typed text ------- -->

<!-- Mandatory init script -->
<script>
  if (document.getElementById("typed")) {
    var typed = new Typed("#typed", {
      stringsElement: "#typed-strings",
      typeSpeed: 70,
      backSpeed: 50,
      backDelay: 200,
      startDelay: 500,
      loop: true
    });
  }
</script>
Copy
<!-- -------- START HEADER 3 w/ image on background ------- -->
<header>
  <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent navbar-dark shadow-none">
    <div class="container">
      <a class="navbar-brand text-white" href="javascript:;">Material Design</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header-3" aria-controls="navbar-header-3" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar-header-3">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">
              Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">
              About Us
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">
              Contact Us
            </a>
          </li>
        </ul>

        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="https://twitter.com/CreativeTim">
              <button type="button" name="button" class="btn bg-white m-0">Buy Now</button>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="page-header min-vh-100" style="background-image: url(./assets/img/bg0.jpg);" loading="lazy">
    <span class="mask bg-gradient-dark opacity-4"></span>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-6 col-sm-9 text-center mx-auto">
          <h1 class="text-white mb-4">Work with an amazing</h1>
          <p class="lead text-white mb-sm-6 mb-4">We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game. If you have the opportunity to play this game.</p>
          <p class="text-white h6 text-uppercase mb-4">connect with us on:</p>

          <div class="d-flex justify-content-center">
            <a href="javascript:;"><i class="fab fa-facebook text-white me-5"></i></a>
            <a href="javascript:;"><i class="fab fa-instagram text-white me-5"></i></a>
            <a href="javascript:;"><i class="fab fa-twitter text-white me-5"></i></a>
            <a href="javascript:;"><i class="fab fa-google-plus text-white"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- -------- END HEADER 3 w/ image on background ------- -->
Copy
<!-- -------- START HEADER 4 w/ search book a ticket form ------- -->
<header>
  <nav class="navbar navbar-expand-lg navbar-dark navbar-absolute bg-transparent shadow-none">
    <div class="container">
      <a class="navbar-brand text-white" href="javascript:;">Material Design</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header-2" aria-controls="navbar-header-2" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar-header-2">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">
              Home
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">
              About Us
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">
              Contact Us
            </a>
          </li>
        </ul>

        <ul class="nav navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="https://twitter.com/CreativeTim">
              <i class="fab fa-twitter"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link mx-2" href="https://www.facebook.com/CreativeTim">
              <i class="fab fa-facebook"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://www.instagram.com/CreativeTimOfficial">
              <i class="fab fa-instagram"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="page-header min-vh-75" style="background-image: url(https://images.unsplash.com/photo-1501446529957-6226bd447c46?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2378&q=80)" loading="lazy">
    <span class="mask bg-gradient-dark opacity-4"></span>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 mx-auto text-white text-center">
          <h2 class="text-white">Book your next trip</h2>
          <p class="lead">An arrangement you make to have a hotel room, tickets, etc. at a particular time in the future</p>
        </div>
      </div>
    </div>
  </div>
  <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
    <div class="container">
      <div class="row border-radius-md pb-4 p-3 mx-sm-0 mx-1 position-relative">
        <div class="col-lg-3 mt-lg-n2 mt-2">
          <label class="ms-0">Leave From</label>
          <select class="form-control" name="choices-leave" id="choices-leave">
            <option value="Choice 1" selected="">Brazil</option>
            <option value="Choice 2">Bucharest</option>
            <option value="Choice 3">London</option>
            <option value="Choice 4">USA</option>
          </select>
        </div>
        <div class="col-lg-3 mt-lg-n2 mt-2">
          <label class="ms-0">To</label>
          <select class="form-control" name="choices-to" id="choices-to">
            <option value="Choice 1" selected="">Italy</option>
            <option value="Choice 2">Spain</option>
            <option value="Choice 3">Denmark</option>
            <option value="Choice 4">Poland</option>
          </select>
        </div>
        <div class="col-lg-3 mt-lg-n2 mt-2">
          <label class="ms-0">Depart</label>
          <div class="input-group input-group-static">
            <span class="input-group-text"><i class="fas fa-calendar"></i></span>
            <input class="form-control datepicker" placeholder="Please select date" type="text" >
          </div>
        </div>
        <div class="col-lg-3 mt-lg-n2 mt-2">
          <label>&nbsp;</label>
          <button type="button" class="btn bg-gradient-primary w-100 mb-0">Search</button>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- -------- END HEADER 4 w/ search book a ticket form ------- -->
Copy
<!-- -------- START HEADER 5 w/ text and illustration ------- -->
<header>
  <div class="page-header min-vh-80">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 my-auto">
          <h1 class="mb-4">Desired Experiences</h1>
          <p class="lead">The time is now for it to be okay to be great. For being a bright color. For standing out.</p>
          <div class="buttons">
            <button type="button" class="btn bg-gradient-warning mt-4">Discover</button>
            <button type="button" class="btn text-warning shadow-none mt-4">Read more</button>
          </div>
        </div>
        <div class="col-lg-8 ps-5 pe-0">
          <div class="row mt-3">
            <div class="col-lg-3 col-6">
              <img class="w-100 border-radius-lg shadow mt-0 mt-lg-7" src="./assets/img/examples/header-5-img-1.jpg" alt="flower-1" loading="lazy">
            </div>
            <div class="col-lg-3 col-6">
              <img class="w-100 border-radius-lg shadow" src="./assets/img/examples/header-5-img-2.jpg" alt="flower-2" loading="lazy">
              <img class="w-100 border-radius-lg shadow mt-4" src="./assets/img/examples/header-5-img-3.jpg" alt="flower-3" loading="lazy">
            </div>
            <div class="col-lg-3 col-6 mb-3">
              <img class="w-100 border-radius-lg shadow mt-0 mt-lg-5" src="./assets/img/examples/header-5-img-4.jpg" alt="flower-4" loading="lazy">
              <img class="w-100 border-radius-lg shadow mt-4" src="./assets/img/examples/header-5-img-5.jpg" alt="flower-5" loading="lazy">
            </div>
            <div class="col-lg-3 col-6">
              <img class="w-100 border-radius-lg shadow mt-3" src="./assets/img/examples/header-5-img-6.jpg" alt="flower-6" loading="lazy">
              <img class="w-100 border-radius-lg shadow mt-4" src="./assets/img/examples/header-5-img-7.jpg" alt="flower-7" loading="lazy">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- -------- END HEADER 5 w/ text and illustration ------- -->
Copy
<!-- -------- START HEADER 6 w/ mobile ------- -->
<header>
  <div class="page-header min-vh-75 bg-gradient-dark">
    <div class="container">
      <div class="row">
        <div class="col-lg-5 my-auto">
          <div class="brand">
            <h1 class="text-white mb-0"> Material Kit Premium</h1>
            <p class="text-white opacity-8"> Start your development with a badass material UI Kit for youy projects inspired by Material Design. </p>
            <button class="btn btn-white mt-4" type="button" name="button">Check more</button>
          </div>
        </div>
        <div class="col-lg-6 ms-auto">
          <img src="./assets/img/iphones.png" class="w-70 z-index-2 ms-5" loading="lazy">
        </div>
      </div>
    </div>
  </div>
</header>
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
  <div class="container">
    <div class="row pt-4">
      <div class="col-xl-5 col-md-8 col-12 text-start">
        <div class="text-start border-radius-lg">
          <h3>See our projects</h3>
          <p class="mb-4">
            <span class="font-weight-bold">The time</span>
            is now for it to be okay to be great. People in this world shun people for being great.
            For being a bright color. Contact us at <a href="javascript:;" class="text-primary font-weight-normal">[email protected]</a>.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- -------- END HEADER 12 w/ mobile ------- -->
Copy
<!-- -------- START HEADER 7 w/ card over right bg image ------- -->
<header>
  <div class="page-header min-vh-100">
    <div class="position-absolute fixed-top ms-auto w-50 h-100 z-index-0 d-none d-sm-none d-md-block" style="background-image: url(https://images.unsplash.com/photo-1632067117908-826d2531dba9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80); background-size:cover;" loading="lazy"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-7 d-flex justify-content-center flex-column">
          <div class="card card-body blur d-flex justify-content-center shadow-lg p-5 mt-5">
            <h1>Material Kit</h1>
            <p class="lead pe-5 me-5">The time is now for it be okay to be great. People in this world shun people for being nice. </p>
            <div class="buttons">
              <button type="button" class="btn bg-gradient-primary mt-4">Get Started</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- -------- END HEADER 8 w/ card over right bg image ------- -->
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 HEADER 9 w/ floating img and bg  ------- -->
<header class="position-relative">
  <div class="page-header min-vh-100 position-relative">
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" loading="lazy">
      <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
    </video>
    <span class="mask bg-gradient-dark"></span>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-6 text-center mx-auto mt-n7">
          <h4 class="text-white fadeIn1 fadeInBottom">Check our pricing plans</h4>
          <h1 class="text-white fadeIn2 fadeInBottom">Work with the rockets</h1>
          <p class="lead mb-5 fadeIn3 fadeInBottom text-white opacity-8">We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game</p>
          <button type="submit" class="btn bg-white me-2 fadeIn1 fadeInBottom">Get started</button>
          <button type="submit" class="btn bg-white btn-icon-only rounded-circle fadeIn1 fadeInBottom"><i class="fas fa-play"></i></button>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 mb-4">

<div class="container my-5">
  <div class="row">
      <div class="col-lg-2 col-md-6 col-6">
        <img class="w-100 opacity-7" src="./assets/img/logos/gray-logos/logo-apple.svg">
      </div>
      <div class="col-lg-2 col-md-6 col-6">
        <img class="w-100 opacity-7" src="./assets/img/logos/gray-logos/logo-facebook.svg">
      </div>
      <div class="col-lg-2 col-md-6 col-6">
        <img class="w-100 opacity-7" src="./assets/img/logos/gray-logos/logo-behance.svg">
      </div>
      <div class="col-lg-2 col-md-6 col-6">
        <img class="w-100 opacity-7" src="./assets/img/logos/gray-logos/logo-google.svg">
      </div>
      <div class="col-lg-2 col-md-6 col-6">
        <img class="w-100 opacity-7" src="./assets/img/logos/gray-logos/logo-digitalocean.svg">
      </div>
      <div class="col-lg-2 col-md-6 col-6">
        <img class="w-100 opacity-7" src="./assets/img/logos/gray-logos/logo-mailchimp.svg">
      </div>
    </div>
</div>
</div>
<!-- -------- END HEADER 10 w/ floating img and bg  ------- -->
Copy
<!-- -------- START HEADER 10 w/ carousel ------- -->
<header>
  <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="page-header min-vh-75" style="background-image: url(&#39;https://images.unsplash.com/photo-1460794418188-1bb7dba2720d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80&#39;);" loading="lazy">
          <span class="mask bg-gradient-dark"></span>
          <div class="container">
            <div class="row">
              <div class="col-lg-6 my-auto">
                <h4 class="text-white mb-0 fadeIn1 fadeInBottom">Pricing Plans</h4>
                <h1 class="text-white fadeIn2 fadeInBottom">Work with the rockets</h1>
                <p class="lead text-white opacity-8 fadeIn3 fadeInBottom">Wealth creation is an evolutionarily recent positive-sum game. Status is an old zero-sum game. Those attacking wealth creation are often just seeking status.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card shadow-lg mt-n5 mx-4 mb-4">
          <div class="card-body">
            <div class="container-fluid px-0">
              <div class="row">
                <div class="col-lg-4 col-sm-6 mb-sm-0 mb-4">
                  <div class="info-horizontal bg-gradient-primary border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-white">shuffle</i>
                    <div class="description ps-0 ps-md-3">
                      <h5 class="text-white">Netflix's 'Shuffle Play' feature</h5>
                      <p class="text-white pe-0 pe-lg-5">The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-white icon-move-right">
                        More about us
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-sm-6 px-lg-1">
                  <div class="info-horizontal border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-gradient text-primary">redeem</i>
                    <div class="description ps-0 ps-md-3">
                      <h5>Landbot closes $8M Series</h5>
                      <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-primary icon-move-right">
                        More about us
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 mt-lg-0 mt-4">
                  <div class="info-horizontal border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-gradient text-primary">bookmarks</i>
                    <div class="description ps-0 ps-md-3">
                      <h5>Brave web browser</h5>
                      <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-primary icon-move-right">
                        More about us
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="page-header min-vh-75"
          style="background-image: url(&#39;https://images.unsplash.com/39/lIZrwvbeRuuzqOoWJUEn_Photoaday_CSD%20(1%20of%201)-5.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80&#39;);" loading="lazy">
          <span class="mask bg-gradient-dark"></span>
          <div class="container">
            <div class="row">
              <div class="col-lg-6 my-auto">
                <h4 class="text-white mb-0 fadeIn1 fadeInBottom">Our Team</h4>
                <h1 class="text-white fadeIn2 fadeInBottom">Work with the best</h1>
                <p class="lead text-white opacity-8 fadeIn3 fadeInBottom">Free people make free choices. Free choices mean you get unequal outcomes. You can have freedom, or you can have equal outcomes. You can’t have both.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card shadow-lg mt-n5 mx-4 mb-4">
          <div class="card-body">
            <div class="container-fluid px-0">
              <div class="row">
                <div class="col-lg-4 col-sm-6 mb-sm-0 mb-4">
                  <div class="info-horizontal border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-gradient text-info">shuffle_on</i>
                    <div class="description ps-0 ps-md-3">
                      <h5>Netflix's 'Shuffle Play' feature</h5>
                      <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-dark icon-move-right">
                        Learn more
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-sm-6 px-lg-1">
                  <div class="info-horizontal info-horizontal bg-gradient-info border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-white">beenhere</i>
                    <div class="description ps-0 ps-md-3">
                      <h5 class="text-white">Landbot closes $8M Series</h5>
                      <p class="text-white">The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-white icon-move-right">
                        Learn more
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 mt-lg-0 mt-4">
                  <div class="info-horizontal border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-gradient text-info">ballot</i>
                    <div class="description ps-0 ps-md-3">
                      <h5>Brave web browser</h5>
                      <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-dark icon-move-right">
                        Learn more
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="page-header min-vh-75" style="background-image: url(&#39;https://images.unsplash.com/photo-1543269866-487350d6fa5e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80&#39;);" loading="lazy">
          <span class="mask bg-gradient-dark"></span>
          <div class="container">
            <div class="row">
              <div class="col-lg-6 my-auto">
                <h4 class="text-white mb-0 fadeIn1 fadeInBottom">Office Places</h4>
                <h1 class="text-white fadeIn2 fadeInBottom">Work from home</h1>
                <p class="lead text-white opacity-8 fadeIn3 fadeInBottom">You’re spending time to save money when you should be spending money to save time.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card shadow-lg mt-n5 mx-4 mb-4">
          <div class="card-body">
            <div class="container-fluid px-0">
              <div class="row">
                <div class="col-lg-4 col-sm-6 mb-sm-0 mb-4">
                  <div class="info-horizontal border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-gradient text-danger">tune</i>
                    <div class="description ps-0 ps-md-3">
                      <h5>Netflix's 'Shuffle Play' feature</h5>
                      <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-dark icon-move-right">
                        More about us
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-sm-6 px-lg-1">
                  <div class="info-horizontal border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-gradient text-danger">settings_suggest</i>
                    <div class="description ps-0 ps-md-3">
                      <h5>Landbot closes $8M Series</h5>
                      <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-dark icon-move-right">
                        More about us
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 mt-lg-0 mt-4">
                  <div class="info-horizontal bg-gradient-danger border-radius-xl p-4 d-block d-md-flex ">
                    <i class="material-icons text-3xl text-white">compare</i>
                    <div class="description ps-0 ps-md-3">
                      <h5 class="text-white">Brave web browser</h5>
                      <p class="text-white">The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
                      <a href="javascript:;" class="text-white icon-move-right">
                        More about us
                        <i class="fas fa-arrow-right text-sm ms-1"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="min-vh-75 position-absolute w-100 top-0">
      <a class="carousel-control-prev ms-n5" href="#carouselExampleControls" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon position-absolute bottom-50" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </a>
      <a class="carousel-control-next me-n5" href="#carouselExampleControls" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon position-absolute bottom-50" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </a>
    </div>
  </div>
</header>
<!-- -------- END HEADER 11 w/ carousel ------- -->