Header 1
<!-- -------- START HEADER 1 w/ text and image on right ------- -->
<header>
<div class="page-header min-vh-100">
<div class="oblique position-absolute top-0 h-100 d-md-block d-none">
<div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6" style="background-image:url(../../assets/img/curved-images/curved11.jpg)"></div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
<h1 class="text-gradient text-primary">Your Work With</h1>
<h1 class="mb-4">Soft Design System</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>
<button type="button" class="btn text-primary 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:;">Soft</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" 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/meeting.jpg);">
<span class="mask bg-gradient-primary"></span>
<div class="container">
<div class="row">
<div class="col-lg-8 text-start">
<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-start 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">
<button type="button" class="btn btn-lg btn-white">Contact Us</button>
<button type="button" class="btn btn-lg btn-link text-white">Read More</button>
</div>
</div>
</div>
</div>
</div>
<div class="position-absolute w-100 z-index-1 bottom-0">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="moving-waves">
<use xlink:href="#gentle-wave" x="48" y="-1" fill="rgba(251,251,251,0.40" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(251,251,251,0.35)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(251,251,251,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="8" fill="rgba(251,251,251,0.20)" />
<use xlink:href="#gentle-wave" x="48" y="13" fill="rgba(251,251,251,0.15)" />
<use xlink:href="#gentle-wave" x="48" y="16" fill="rgba(251,251,251,0.95" />
</g>
</svg>
</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:;">Soft</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/curved-images/curved14.jpg);">
<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 fa-2x text-white me-5"></i></a>
<a href="javascript:;"><i class="fab fa-instagram fa-2x text-white me-5"></i></a>
<a href="javascript:;"><i class="fab fa-twitter fa-2x text-white me-5"></i></a>
<a href="javascript:;"><i class="fab fa-google-plus fa-2x text-white"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="relative" style="height: 36px;overflow: hidden;margin-top: -36px; z-index:2">
<div class="w-full absolute bottom-0 start-0 end-0" style="transform: scale(2);transform-origin: top center;color: #fbfbfb;">
<svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
</svg>
</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:;">Soft</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" 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://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/airport.jpg)">
<span class="mask bg-gradient-dark"></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="position-relative overflow-hidden" style="height:36px;margin-top:-35px;">
<div class="w-full absolute bottom-0 start-0 end-0" style="transform: scale(2);transform-origin: top center;color: #fff;">
<svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
</svg>
</div>
</div>
<div class="container">
<div class="row bg-white shadow-lg mt-n6 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="">Leave From</label>
<select class="form-control" name="choices-leave" id="choices-leave" placeholder="Departure">
<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="">To</label>
<select class="form-control" name="choices-to" id="choices-to" placeholder="Destination">
<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="">Depart</label>
<div class="input-group">
<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 d-flex align-items-center my-auto">
<button type="button" class="btn bg-gradient-dark w-100 btn-lg mb-0 m4 mt-3">Search</button>
</div>
</div>
</div>
</header>
<!-- -------- END HEADER 4 w/ search book a ticket form ------- -->
<!-- Mandatory init scripts -->
<script>
if (document.getElementById("choices-leave")) {
var element = document.getElementById("choices-leave");
const example = new Choices(element, {
searchEnabled: false
});
}
if (document.getElementById("choices-to")) {
var element = document.getElementById("choices-to");
const example = new Choices(element, {
searchEnabled: false
});
}
if (document.querySelector(".datepicker")) {
flatpickr(".datepicker", {
mode: "range"
});
}
</script>Header 5
<!-- -------- START HEADER 5 w/ text and illustration ------- -->
<header>
<div class="page-header min-vh-75">
<div class="container">
<div class="row">
<div class="col-lg-4 my-auto">
<h1 class="text-gradient text-warning mb-0">Your Desired</h1>
<h1 class="mb-4">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">
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-0 mt-lg-7" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desire.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/chair.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/facade.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-0 mt-lg-5" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/architecture.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/baloon.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-3" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/seaside.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/medusa.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- -------- END HEADER 5 w/ text and illustration ------- -->Header 6
<!-- -------- START HEADER 6 w/ mobile ------- -->
<header class="overflow-hidden">
<div class="page-header min-vh-50 bg-gradient-dark"></div>
<div class="bg-gradient-primary position-relative mx-xxl-8 mx-xl-4 mx-lg-3 mx-3 py-5 z-index-2 border-radius-xl mt-n11">
<img src="../../assets/img/shapes/waves-white.svg" alt="pattern-lines" class="position-absolute opacity-6 start-0 top-0 w-100">
<div class="container position-relative">
<div class="row justify-content-center align-items-center">
<div class="col-lg-6 col-md-8 text-start py-5 me-auto position-relative">
<div class="position-relative">
<h1 class="mt-4 text-white">Our beautiful App</h1>
<p class="lead text-white">An arrangement you make to have a hotel room, tickets, etc. at a particular time in the future:</p>
<div class="row justify-content-start mt-4">
<div class="col-lg-2 col-4 pe-lg-0">
<a href="javascript:;">
<img class="w-100" src="../../assets/img/logos/appstore.png">
</a>
</div>
<div class="col-lg-2 col-4 pe-lg-0">
<a href="javascript:;">
<img class="w-100" src="../../assets/img/logos/google-play.png">
</a>
</div>
</div>
<p class="font-weight-bold text-white text-xs mt-4">Free Trial: <span class="badge bg-gradient-dark ms-1">30 days</span></p>
</div>
</div>
</div>
<div class="position-absolute end-0 bottom-0 mb-n6 me-xl-n8 me-lg-n5 me-n7 z-index-2 w-25 d-md-block d-none">
<img class="w-100" src="../../assets/img/phones.png">
</div>
</div>
</div>
</header>
<!-- -------- 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(../../assets/img/curved-images/curved8.jpg); background-size:cover;"></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 class="text-gradient text-primary">Your Work With</h1>
<h1 class="mb-4">Soft Design System</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 ------- -->Header 8
<!-- -------- START HEADER 8 w/ two background colors ------- -->
<header class="header-rounded-images">
<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:;">Soft</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header-9" aria-controls="navbar-header-9" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-header-9">
<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" 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">
<div class="container">
<div class="row">
<div class="col-lg-6 text-lg-start text-center py-sm-0 py-7">
<h1 class="text-white">Our company mission is to lead the</h1>
<p class="text-white text-lg-start 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">
<button type="button" class="btn btn-lg bg-gradient-primary btn-rounded">Contact Us</button>
<button type="button" class="btn btn-lg btn-outline-white btn-rounded ms-xl-3">Read More</button>
</div>
<div class="row mt-5 justify-content-start">
<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 class="col-lg-6 text-end position-relative">
<div class="position-absolute top-0 w-100">
<img src="../../assets/img/team-2.jpg" class="position-absolute rounded-circle img-1 d-lg-block d-none z-index-3" alt="avatar">
<img src="../../assets/img/shapes/shape-3.svg" class="top-0 end-0 position-absolute shape-3 d-lg-block d-none" alt="shape">
<img src="../../assets/img/shapes/shape-2.svg" class="mt-4 position-absolute shape-2 d-lg-block d-none" alt="shape">
<img src="../../assets/img/shapes/shape-1.svg" class="mt-n6 position-absolute shape-1 d-lg-block d-none" alt="shape">
<img src="../../assets/img/team-3.jpg" class="position-absolute rounded-circle img-2 d-lg-block d-none z-index-3" alt="avatar">
</div>
</div>
</div>
</div>
<div class="min-vh-100 w-100 position-absolute mt-sm-n11 top-0 d-lg-none d-block" style="background: #101010;"></div>
<div class="min-vh-100 w-75 position-absolute border-radius-section ms-n10 mt-n10 top-0 d-lg-block d-none" style="background: #101010;"></div>
<div class="min-vh-75 w-50 blur-section blur-gradient-primary position-absolute border-top-start-radius-0 border-top-end-radius-0 border-bottom-end-radius-0 border-radius-section mt-n8 me-n4 top-0 end-0 d-lg-block d-none"></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" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/nightsky.jpg);">
<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-gradient text-primary 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-5">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 btn-rounded 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>
<img src="../../assets/img/illustrations/man-rocket.png" class="position-absolute floating-man ms-7 fadeIn1 fadeInBottom mt-n10 d-none d-sm-none d-md-none d-lg-block" alt="">
<img src="../../assets/img/illustrations/man-cloud.png" class="position-absolute floating-man end-0 fadeIn3 fadeInBottom me-8 mt-10 d-none d-sm-none d-md-none d-lg-block" alt="">
<div class="position-absolute w-100 z-index-1 bottom-0">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="moving-waves">
<use xlink:href="#gentle-wave" x="48" y="-1" fill="rgba(255,255,255,0.40" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.35)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="8" fill="rgba(255,255,255,0.20)" />
<use xlink:href="#gentle-wave" x="48" y="13" fill="rgba(255,255,255,0.15)" />
<use xlink:href="#gentle-wave" x="48" y="16" fill="rgba(255,255,255,1" />
</g>
</svg>
</div>
</div>
</header>
<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>
<!-- -------- 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 m-3 border-radius-xl" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/mark.jpg);">
<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="container-fluid px-3">
<div class="row">
<div class="col-lg-4">
<div class="info-horizontal bg-gradient-primary border-radius-xl p-5">
<div class="icon">
<svg width="25px" height="25px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>office</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1869.000000, -293.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="office" transform="translate(153.000000, 2.000000)">
<path d="M12.25,17.5 L8.75,17.5 L8.75,1.75 C8.75,0.78225 9.53225,0 10.5,0 L31.5,0 C32.46775,0 33.25,0.78225 33.25,1.75 L33.25,12.25 L29.75,12.25 L29.75,3.5 L12.25,3.5 L12.25,17.5 Z" opacity="0.6"></path>
<path d="M40.25,14 L24.5,14 C23.53225,14 22.75,14.78225 22.75,15.75 L22.75,38.5 L19.25,38.5 L19.25,22.75 C19.25,21.78225 18.46775,21 17.5,21 L1.75,21 C0.78225,21 0,21.78225 0,22.75 L0,40.25 C0,41.21775 0.78225,42 1.75,42 L40.25,42 C41.21775,42 42,41.21775 42,40.25 L42,15.75 C42,14.78225 41.21775,14 40.25,14 Z M12.25,36.75 L7,36.75 L7,33.25 L12.25,33.25 L12.25,36.75 Z M12.25,29.75 L7,29.75 L7,26.25 L12.25,26.25 L12.25,29.75 Z M35,36.75 L29.75,36.75 L29.75,33.25 L35,33.25 L35,36.75 Z M35,29.75 L29.75,29.75 L29.75,26.25 L35,26.25 L35,29.75 Z M35,22.75 L29.75,22.75 L29.75,19.25 L35,19.25 L35,22.75 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<h5 class="text-white">Netflix's Shuffle Play</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.</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 px-1">
<div class="info-horizontal bg-light border-radius-xl p-5">
<div class="icon">
<svg class="text-primary" width="25px" height="25px" viewBox="0 0 46 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>delivery-fast</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2320.000000, -741.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="delivery-fast" transform="translate(604.000000, 450.000000)">
<rect class="color-background" opacity="0.601143973" x="0" y="0" width="17.25" height="3.83333333"></rect>
<rect class="color-background" opacity="0.601143973" x="3.83333333" y="7.66666667" width="13.4166667" height="3.83333333"></rect>
<rect class="color-background" opacity="0.601143973" x="7.66666667" y="15.3333333" width="9.58333333" height="3.83333333"></rect>
<rect class="color-background" opacity="0.601888021" x="11.5" y="23" width="5.75" height="3.83333333"></rect>
<path class="color-foreground" d="M44.9400833,19.3679167 L38.0611667,15.9294167 L36.3591667,9.1195 C36.1464167,8.26466667 35.37975,7.66666667 34.5,7.66666667 L31.3854167,7.66666667 L21.0833333,7.66666667 C21.0833333,7.66666667 21.0833333,31.5310833 21.0833333,32.5833333 C21.0833333,33.6355833 21.1810833,34.5 21.1810833,34.5 C21.6640833,38.801 25.2808333,42.1666667 29.7083333,42.1666667 C34.1358333,42.1666667 37.7525833,38.801 38.2355833,34.5 L44.0833333,34.5 C45.1413333,34.5 46,33.6413333 46,32.5833333 L46,21.0833333 C46,20.3569167 45.5898333,19.69375 44.9400833,19.3679167 Z M29.7083333,38.3333333 C27.0671667,38.3333333 24.9166667,36.18475 24.9166667,33.5416667 C24.9166667,30.8985833 27.0671667,28.75 29.7083333,28.75 C32.3495,28.75 34.5,30.8985833 34.5,33.5416667 C34.5,36.18475 32.3495,38.3333333 29.7083333,38.3333333 Z M24.9166667,17.25 L24.9166667,11.5 L33.2426667,11.5 L34.5,17.25 L24.9166667,17.25 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<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.</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">
<div class="info-horizontal bg-light border-radius-xl p-5">
<div class="icon">
<svg class="text-primary" width="25px" height="25px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ungroup</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2170.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="ungroup" transform="translate(454.000000, 151.000000)">
<path class="color-background" d="M38.1818182,10.9090909 L32.7272727,10.9090909 L32.7272727,30.9090909 C32.7272727,31.9127273 31.9127273,32.7272727 30.9090909,32.7272727 L10.9090909,32.7272727 L10.9090909,38.1818182 C10.9090909,39.1854545 11.7236364,40 12.7272727,40 L38.1818182,40 C39.1854545,40 40,39.1854545 40,38.1818182 L40,12.7272727 C40,11.7236364 39.1854545,10.9090909 38.1818182,10.9090909 Z"></path>
<path class="color-foreground" d="M27.2727273,29.0909091 L1.81818182,29.0909091 C0.812727273,29.0909091 0,28.2781818 0,27.2727273 L0,1.81818182 C0,0.814545455 0.812727273,0 1.81818182,0 L27.2727273,0 C28.2781818,0 29.0909091,0.814545455 29.0909091,1.81818182 L29.0909091,27.2727273 C29.0909091,28.2781818 28.2781818,29.0909091 27.2727273,29.0909091 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<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.</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 class="carousel-item">
<div class="page-header min-vh-75 m-3 border-radius-xl" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/meeting.jpg);">
<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="container-fluid px-3">
<div class="row">
<div class="col-lg-4">
<div class="info-horizontal bg-light border-radius-xl p-5">
<div class="icon">
<svg class="text-info" width="25px" height="25px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>spaceship</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(4.000000, 301.000000)">
<path class="color-foreground"
d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"
></path>
<path class="color-foreground"
d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"
></path>
<path class="color-background"
d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
></path>
<path class="color-background"
d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
id="color-3"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<h5>Netflix's Shuffle Play</h5>
<p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue.</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 px-1">
<div class="info-horizontal bg-gradient-info border-radius-xl p-5">
<div class="icon">
<svg width="25px" height="25px" viewBox="0 0 44 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>megaphone</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2168.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="megaphone" transform="translate(452.000000, 300.000000)">
<path
d="M35.7958333,0.273166667 C35.2558424,-0.0603712374 34.5817509,-0.0908856664 34.0138333,0.1925 L19.734,7.33333333 L9.16666667,7.33333333 C4.10405646,7.33333333 0,11.4373898 0,16.5 C0,21.5626102 4.10405646,25.6666667 9.16666667,25.6666667 L19.734,25.6666667 L34.0138333,32.8166667 C34.5837412,33.1014624 35.2606401,33.0699651 35.8016385,32.7334768 C36.3426368,32.3969885 36.6701539,31.8037627 36.6666942,31.1666667 L36.6666942,1.83333333 C36.6666942,1.19744715 36.3370375,0.607006911 35.7958333,0.273166667 Z"
></path>
<path d="M38.5,11 L38.5,22 C41.5375661,22 44,19.5375661 44,16.5 C44,13.4624339 41.5375661,11 38.5,11 Z" opacity="0.601050967"></path>
<path
d="M18.5936667,29.3333333 L10.6571667,29.3333333 L14.9361667,39.864 C15.7423448,41.6604248 17.8234451,42.4993948 19.6501416,41.764381 C21.4768381,41.0293672 22.3968823,38.982817 21.7341667,37.1286667 L18.5936667,29.3333333 Z"
opacity="0.601050967"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<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.</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">
<div class="info-horizontal bg-light border-radius-xl p-5">
<div class="icon">
<svg class="text-info" width="25px" height="25px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>spaceship</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(4.000000, 301.000000)">
<path class="color-foreground"
d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"
></path>
<path class="color-foreground"
d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"
></path>
<path class="color-background"
d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"
></path>
<path class="color-background"
d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"
id="color-3"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<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.</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 class="carousel-item">
<div class="page-header min-vh-75 m-3 border-radius-xl" style="background-image: url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/lounge.jpg);">
<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="container-fluid px-3">
<div class="row">
<div class="col-lg-4">
<div class="info-horizontal bg-light border-radius-xl p-5">
<div class="icon">
<svg class="text-danger" width="25px" height="25px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>document</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(154.000000, 300.000000)">
<path class="color-foreground" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
<path class="color-background"
d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"
></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<h5>Netflix's Shuffle Play</h5>
<p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue.</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 px-1">
<div class="info-horizontal bg-light border-radius-xl p-5">
<div class="icon">
<svg class="text-danger" width="25px" height="25px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>document</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(154.000000, 300.000000)">
<path class="color-foreground" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
<path class="color-background"
d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"
></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<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.</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">
<div class="info-horizontal bg-gradient-danger border-radius-xl p-5">
<div class="icon">
<svg class="mt-1" width="25px" height="25px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>settings</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="settings" transform="translate(304.000000, 151.000000)">
<polygon opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
<path
d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z"
opacity="0.596981957"></path>
<path
d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"
></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="description ps-4">
<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.</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 class="min-vh-75 position-absolute w-100 top-0">
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon position-absolute bottom-50 ms-n7" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon position-absolute bottom-50 me-n7" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</header>
<!-- -------- END HEADER 11 w/ carousel ------- -->