### Page Headers

Header 1

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

Header 2

Screenshot
Get the Code

Header 3

Screenshot
Get the Code

Header 4

Screenshot
Get the Code

Header 5

Screenshot
Get the Code

Header 6

Screenshot
Get the Code

Header 7

Screenshot
Get the Code

Header 8

Screenshot
Get the Code

Header 9

Screenshot
Get the Code

Header 10

Screenshot
Get the Code