Header 1
<!-- -------- START HEADER 1 w/ text and image on right ------- -->
<header>
<div class="page-header min-vh-100">
<div>
<img class="position-absolute fixed-top ms-auto w-50 h-100 z-index-0 d-none d-sm-none d-md-block border-radius-xl border-top-end-radius-0 border-top-start-radius-0 border-bottom-end-radius-0" src="../../assets/img/project14.jpg">
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
<h1>Your Work With</h1>
<h1 class="mb-4">Now UI 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:;">Now UI PRO</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/bg6.jpg);">
<span class="mask bg-gradient-primary"></span>
<div class="container">
<div class="row">
<div class="col-lg-8 text-left">
<h1 class="text-white">Street Style: Couture.</h1>
<p class="lead text-white text-left 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>
</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:;">Now UI PRO</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/bg22.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>
</header>
<!-- -------- END HEADER 3 w/ image on background ------- -->Header 4
<!-- -------- START HEADER 4 w/ search book a ticket form ------- -->
<header>
<div class="page-header min-vh-50" style="background-image: url(../../assets/img/bg45.jpg)">
<span class="mask bg-dark opacity-8"></span>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto text-white text-center">
<h2 class="text-white">Book your new expericence</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="container">
<div class="row bg-white shadow mt-n5 border-radius-lg 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 mt-lg-n2 mt-2">
<label class=""> </label>
<button type="button" class="btn bg-gradient-primary w-100 mb-0">Search</button>
</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-75">
<div class="container">
<div class="row">
<div class="col-lg-4 my-auto">
<h1 class="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 h-50 shadow mt-0 mt-lg-7" src="../../assets/img/project12.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg h-50 shadow" src="../../assets/img/project13.jpg" alt="">
<img class="w-100 border-radius-lg h-50 shadow mt-4" src="../../assets/img/project14.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg h-50 shadow mt-0 mt-lg-5" src="../../assets/img/project19.jpg" alt="">
<img class="w-100 border-radius-lg h-50 shadow mt-4" src="../../assets/img/project16.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg h-50 shadow mt-3" src="../../assets/img/project17.jpg" alt="">
<img class="w-100 border-radius-lg h-50 shadow mt-4" src="../../assets/img/project18.jpg" alt="">
</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-50 bg-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-lg mt-n12">
<div class="container position-relative">
<div class="row justify-content-center align-items-center">
<div class="col-lg-6 col-md-8 text-left py-sm-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-3 col-4 pe-lg-0">
<a href="javascript:;" class="bg-gradient-dark border-radius-md py-1 px-1 d-inline-block">
<img class="w-100" src="../../assets/img/logos/app-store-button.svg" alt="logo-app">
</a>
</div>
<div class="col-lg-3 col-4 pe-lg-0">
<a href="javascript:;" class="bg-gradient-dark border-radius-md py-1 px-1 d-inline-block">
<img class="w-100" src="../../assets/img/logos/google-play-button.svg" alt="logo-play">
</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-n4 z-index-2 w-20 d-lg-block d-none">
<img class="w-100" src="../../assets/img/phones.png" alt="phones">
</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 border-radius-lg border-radius-bottom-end-0" style="background-image: url(../../assets/img/bg28.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 d-flex justify-content-center shadow-lg p-5 mt-5">
<h1>Your Work With</h1>
<h1 class="mb-4">Now UI 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 9
<!-- -------- START HEADER 9 w/ floating img and bg ------- -->
<header class="position-relative text-center">
<div class="page-header min-vh-50 position-relative mb-n1" 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 mt-5 mx-auto">
<h4 class="text-primary fadeIn1 fadeInBottom">Join Our Team</h4>
<h1 class="text-white fadeIn2 fadeInBottom">Work with the rockets</h1>
<p class="lead mb-5 fadeIn3 fadeInBottom text-white opacity-6">We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game</p>
</div>
</div>
</div>
</div>
<button type="submit" class="btn bg-gradient-primary mt-n4 btn-lg btn-rounded me-2 fadeIn1 fadeInBottom shadow-none mb-1">Get started</button>
<button type="submit" class="btn bg-gradient-primary mt-n4 btn-lg btn-icon-only rounded-circle fadeIn1 fadeInBottom shadow-none mb-1"><i class="fas fa-play text-sm"></i></button>
</header>
<!-- -------- END HEADER 10 w/ floating img and bg ------- -->