{% extends "layouts/base.html" %}
{% load static %}

{% block body %}page-headers-sections{% endblock body %}

{% block navigation %}
  {% include "includes/navigation-light.html" %}
{% endblock navigation %}

{% block content %}

  <div class="container mt-5">
    <div class="row">
      <div class="col-lg-12 mx-auto">
        <div class="mb-4 w-100 w-md-50 w-lg-25">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="https://demos.creative-tim.com/material-kit-pro/index">Page Sections</a></li>
              <li class="breadcrumb-item active" aria-current="page">Page Headers</li>
            </ol>
          </nav>
          <h3>Page Headers</h3>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row justify-space-between py-2">
              <div class="col-lg-3 me-auto">
                <p class="lead text-dark pt-1 mb-0">Header 1</p>
              </div>
              <div class="col-lg-3">
                <div class="nav-wrapper position-relative end-0">
                  <ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
                    <li class="nav-item">
                      <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-header-1" role="tab" aria-selected="true">
                        <i class="fas fa-desktop text-sm me-2"></i> Preview
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-header-1" role="tab" aria-selected="false">
                        <i class="fas fa-code text-sm me-2"></i> Code
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-content tab-space">
            <div class="tab-pane active" id="preview-header-1">
              <iframe class="w-100 height-600" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/js/all.min.js" crossorigin="anonymous"></script>
        <!-- Material Icons -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
        <link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.1.0" rel="stylesheet" />
        <!-- -------- 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 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 ------- -->

        '></iframe>
            </div>
            <div class="tab-pane" id="code-header-1">
              <div class="position-relative p-4 pb-2">
                <a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
                <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- -------- START HEADER 1 w/ text and image on right ------- --&gt;</span>
<span class="nt">&lt;header&gt;</span>
  <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-dark navbar-absolute bg-transparent shadow-none"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand text-white"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">&gt;</span>Material Design<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbar-header-2"</span> <span class="na">aria-controls=</span><span class="s">"navbar-header-2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
      <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbar-header-2"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mx-auto"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">&gt;</span>
              Home
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">&gt;</span>
              About Us
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">&gt;</span>
              Contact Us
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>

        <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"https://twitter.com/CreativeTim"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-twitter"</span><span class="nt">&gt;&lt;/i&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link text-white mx-2"</span> <span class="na">href=</span><span class="s">"https://www.facebook.com/CreativeTim"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-facebook"</span><span class="nt">&gt;&lt;/i&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"https://www.instagram.com/CreativeTimOfficial"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fab fa-instagram"</span><span class="nt">&gt;&lt;/i&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/nav&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page-header min-vh-100"</span> <span class="na">style=</span><span class="s">"background-image: url(&amp;#39;https://images.unsplash.com/photo-1520769945061-0a448c463865?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1950&amp;q=80&amp;#39;);"</span> <span class="na">loading=</span><span class="s">"lazy"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mask bg-gradient-dark opacity-5"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6 col-md-7 d-flex justify-content-center flex-column"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"text-white font-weight-black mb-4"</span><span class="nt">&gt;</span>Material Kit<span class="nt">&lt;/h1&gt;</span>
          <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-white opacity-8 lead pe-5 me-5"</span><span class="nt">&gt;</span>The time is now for it be okay to be great. People in this world shun people for being nice. <span class="nt">&lt;/p&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-white mt-4"</span><span class="nt">&gt;</span>Get Started<span class="nt">&lt;/button&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn text-white shadow-none mt-4"</span><span class="nt">&gt;</span>Read more<span class="nt">&lt;/button&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="c">&lt;!-- -------- END HEADER 1 w/ text and image on right ------- --&gt;</span></code></pre>
                </figure>
              </div>
            </div>
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 2</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-2.jpg" alt="header-2">
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 3</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-3.jpg" alt="header-3">
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 4</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-4.jpg" alt="header-4">
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 5</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-5.jpg" alt="header-5">
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 6</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-6.jpg" alt="header-6">
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 7</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-7.jpg" alt="header-7">
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 8</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-8.jpg" alt="header-8">
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 9</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-9.jpg" alt="header-9">
          </div>
        </div>
        <div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
          <div class="container border-bottom">
            <div class="row py-3">
              <div class="col-lg-4 text-start">
                <p class="lead text-dark pt-1 mb-0">Header 10</p>
              </div>
              <div class="col-lg-4 mt-1 text-center">
                <span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
              </div>
              <div class="col-lg-4 text-end my-auto">
                <a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
                  <i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
                </a>
              </div>
            </div>
          </div>
          <div>
            <img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/hero/header-10.jpg" alt="header-10">
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock content %}

{% block footer %}
  {% include "includes/footer-light.html" %}
{% endblock footer %}

{% block extra_js %}

  <script src="{% static "assets/js/plugins/countup.min.js" %}"></script>
  <script src="{% static "assets/js/plugins/prism.min.js" %}"></script>
  <script src="{% static "assets/js/plugins/highlight.min.js" %}"></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>

{% endblock extra_js %}