Lehigh Clutch Style Guide

Homepage 

<!--UCPA Emergency Banner Alert-->
  <div id="emergencyalert">
      <div id="AppArmorAlertID_2"></div>
      <script type="text/javascript" src="//lehigh.apparmor.com/Notifications/Feeds/Javascript/?AlertID=2" async></script>
  </div>
  <!--End UCPA Emergency Banner Alert-->
  <header class="header">
      <div class="container-fluid">
          <div class="row logo-wrapper">
              <button class="navbar-toggler main-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"><i class="fas fa-bars icon-default"><span class="sr-only">Open menu</span></i><i class="fa fa-times icon-hover"><span class="sr-only"><span>Close menu</span></i></span>
              </button>
              <div class="logo">
                  <picture class="image lehigh-logo e11y-ok">
                      <a href="" class="logo__link">
                          <img class="web" src="" alt="Lehigh University logo" width="200" height="43" />
                          <span class="u-a11y-text">Go to homepage</span>
                      </a>
                  </picture>
              </div><!-- end logo -->
              <div class="mobile-search">
                  <button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
              </div><!-- end mobile-search -->
          </div>
      </div>
      <div class="header-wrapper container-fluid ">
          <div class="row">
              <div class="col title">
                  <span class="site-title"><a href=""></a></span>
              </div><!-- title -->
          </div>
          <div class="navigation-wrapper">
          </div><!-- end navigation-wrapper -->
      </div><!-- end header-wrapper -->
  </header>

  <main class="d-print-block accent-">
      <a id="main-content" tabindex="-1"></a>

      <div class="container-fluid">
          <div class="row justify-content-center">
              <div class="content-top col-12 col-md-9 col-print-12 ">
                  <h1 class="page-title"></h1>
                  <nav aria-label="breadcrumb">
                      <h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
                      <ol class="breadcrumb">
                      </ol>
                  </nav>
              </div>
          </div>

      </div>

      <div class="container-fluid">

          <div class="row justify-content-center">

              <section class="main-content col-12 col-print-12">
                  <section class="homepage_hero ">
                      <div class="hero_text">
                          <h1>This is Page Heading</h1>
                          <p>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                          </p>
                          <div class="hero-buttons">
                              <a href="#" class="btn btn-primary dark-grey" role="button">
                                  <span class="button_text">Action Button</span>
                                  <span class="arrow fal fa-chevron-right"></span>
                              </a>
                          </div><!-- end hero-buttons -->
                      </div><!-- end hero_text -->
                      <div class="hero_video">
                          <div id="video-section-wrapper">
                              <div id="video">
                                  <video id="bgvid" autoplay loop muted playsinline>
                                      <source src="/video/Gliding_Shot_2.mp4" type="video/mp4">
                                      <img src="/img/video-fallback.jpg" />
                                  </video>
                                  <div class="video-controls">
                                      <button id="pause-btn" aria-pressed="false">
                                          <i class="fa fa-play"></i>
                                          <i class="fa fa-pause"></i>
                                          <span class="sr-only">Pause Video</span>
                                      </button>
                                  </div>
                                  <div class="mobile-background"></div>
                              </div>
                          </div> <!-- video-section-wrapper -->
                      </div><!-- end hero_img -->
                  </section>
              </section>

          </div><!-- end row -->
      </div><!-- end container-fluid -->
  </main>

  <section id="department_footer">
      <!-- region for footer-center or footer-main -->
      <footer class="footer-wrapper">
          <!-- Single Block styled as department footer -->

          <h2>Lehigh's New theme- clutch</h2>
          <ul class="social-media">

          </ul>

          <ul class="contact-info">
          </ul>

      </footer>
  </section>
  <footer id="site_footer">
      <div class="footer-wrapper">
          <div class="logo" role="logo">
              <picture class="image lehigh-logo e11y-ok">
                  <a href="" class="logo__link">
                      <img class="web" src="/img/lehigh-logo.svg" alt="Lehigh University logo" width="200" height="43" />
                      <span class="u-a11y-text">Go to homepage</span>
                  </a>
              </picture>
          </div><!-- end logo -->
          <div class="lehigh-contact">
              <address>27 Memorial Drive West<br />
                  Bethlehem, PA 18015, USA</address>
              <span class="phone"><a href="tel:610-758-3000">610-758-3000</a></span>
          </div>
          <div class="copyright">
              <p>&copy; <script>
                      document.write(new Date().getFullYear());
                  </script> Lehigh University. <a href="https://www2.lehigh.edu/about/copyright">All Rights Reserved</a>.
                  <a href="https://www2.lehigh.edu/about/privacy-policy">Privacy</a>. <a href="https://www2.lehigh.edu/about/service-agreement">Terms of Use</a>
              </p>
          </div><!-- end copyright -->
          <div class="common-links">
              <ul>
                  <li><a href="https://www2.lehigh.edu/about/the-perch">The Perch</a></li>
                  <li><a href="https://www2.lehigh.edu/directory">Directory</a></li>
                  <li><a href="https://www2.lehigh.edu/map">Maps</a></li>
                  <li><a href="https://www2.lehigh.edu/about/contact-lehigh">Contact</a></li>
                  <li><a href="https://www2.lehigh.edu/emergency">Emergency Info</a></li>
                  <li><a href="https://accessibility.lehigh.edu/">Web Accessibility</a></li>
                  <li><a href="https://www2.lehigh.edu/about/mobile-apps">Lehigh Mobile Apps</a></li>
                  <li><a href="https://accounts.lehigh.edu/html/">Account</a></li>
                  <li><a href="https://www2.lehigh.edu/about/service-agreement">Terms of Use</a></li>
                  <li><a href="https://www2.lehigh.edu/about/privacy-policy">Privacy</a></li>
                  <li><a href="https://provost.lehigh.edu/higher-education-opportunity-act-disclosures">Higher Education Opportunity Act</a></li>
                  <li><a href="https://www2.lehigh.edu/diversity-inclusion-equity">Equitable Community</a></li>
                  <li><a href="https://eocc.lehigh.edu/lehigh-university-non-discrimination-statement-and-title-ix-notice-non-discrimination">Non-Discrimination</a></li>
                  <li><a href="https://flippingbook.lehigh.edu/AnnualSecurityReport/">Annual Security & Annual Fire Safety Report</a></li>
                  <li><a href="https://www2.lehigh.edu/about/report-a-concern">Report a Concern</a></li>
              </ul>
          </div><!-- end common-links -->
      </div>
  </footer>
 
{% extends '@base_layout' %}

{% block region_main %}
{% include "@hero_homepage_video" %}
{% endblock region_main %}

{% block footer %}
{% render "@footer_option_1" %}
{% endblock footer %}
 
{
  "has_breadcrumbs": false,
  "hero_video_src": "/video/Gliding_Shot_2.mp4",
  "hero_video_fallback": "/img/video-fallback.jpg",
  "hero_heading": "This is Page Heading",
  "hero_text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>",
  "buttons": {
    "1": {
      "text": "Action Button",
      "url": "#",
      "color": "dark-grey",
      "audio_src": "/audio/old-spice-whistle-hq.mp3",
      "sound": "old_spice"
    }
  }
}

This shows an example of a homepage that uses an ambient video.