Header 1
<!-- -------- 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('https://images.unsplash.com/photo-1520769945061-0a448c463865?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');" 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 font-weight-black 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 ------- -->Header 2
<!-- -------- 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>Header 3
<!-- -------- 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 font-weight-black 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 ------- -->Header 4
<!-- -------- 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> </label>
<button type="button" class="btn bg-gradient-dark w-100 mb-0">Search</button>
</div>
</div>
</div>
</div>
</header>
<!-- -------- END HEADER 4 w/ search book a ticket form ------- -->Header 5
<!-- -------- 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 ------- -->Header 6
<!-- -------- 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 font-weight-black 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 ------- -->Header 7
<!-- -------- 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-dark mt-4">Get Started</button>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- -------- END HEADER 8 w/ card over right bg image ------- -->Header 8
<!-- -------- 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-dark 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 ------- -->Header 9
<!-- -------- 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 font-weight-black 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 ------- -->Header 10
<!-- -------- 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('https://images.unsplash.com/photo-1460794418188-1bb7dba2720d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');" 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 font-weight-black 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-dark border-radius-xl p-4 d-block d-md-flex ">
<i class="material-symbols-rounded 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-symbols-rounded 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-symbols-rounded 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('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');" 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 font-weight-black 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-symbols-rounded 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-symbols-rounded 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-symbols-rounded 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('https://images.unsplash.com/photo-1543269866-487350d6fa5e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');" 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 font-weight-black 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-symbols-rounded 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-symbols-rounded 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-symbols-rounded 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 ------- -->