diff options
Diffstat (limited to 'site/page-header.html')
| -rw-r--r-- | site/page-header.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/site/page-header.html b/site/page-header.html new file mode 100644 index 0000000..ff5670b --- /dev/null +++ b/site/page-header.html @@ -0,0 +1,103 @@ +<section class="usa-banner" aria-label="Accessible website"> + <div class="usa-accordion"> + + <header class="usa-banner__header"> + <div class="usa-banner__inner"> + <div class="grid-col-auto"> + <img class="usa-banner__header-flag" src="assets/uswds-2.10.1/img/us_flag_small.png" alt="U.S. flag"> + </div> + <div class="grid-col-fill tablet:grid-col-auto"> + <p class="usa-banner__header-text">Proudly designed with the U.S. Web Design System.</p> + <p class="usa-banner__header-action" aria-hidden="true">Here's how you know</p> + </div> + <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner"> + <span class="usa-banner__button-text">Here's how you know</span> + </button> + </div> + </header> + + <div class="usa-banner__content usa-accordion__content" id="gov-banner"> + <div class="grid-row grid-gap-lg"> + <div class="usa-banner__guidance tablet:grid-col-6"> + <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true"> + <div class="usa-media-block__body"> + <p> + <strong>Design for democracy</strong> + <br/> + The <a href="https://designsystem.digital.gov/">U.S. Web Design System</a> emphasizes universal accessibility. + </p> + </div> + </div> + <div class="usa-banner__guidance tablet:grid-col-6"> + <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-https.svg" role="img" alt="" aria-hidden="true"> + <div class="usa-media-block__body"> + <p> + <strong>Secure .gov websites use HTTPS</strong> + <br/> + This website will soon feature identical protection features! + </p> + </div> + </div> + </div> + </div> + + </div> +</section> + +<header class="usa-header usa-header--extended sd-header"> + <div class="usa-navbar"> + <div class="usa-logo" id="extended-logo"> + <em class="usa-logo__text"><a href="index.html" title="Home" aria-label="Home">Smart Documents</a></em> + </div> + <button class="usa-menu-btn">Menu</button> + </div> + + <nav aria-label="Primary navigation" class="usa-nav"> + <div class="usa-nav__inner"> + + <button class="usa-nav__close"> + <img src="assets/img/usa-icons/close.svg" role="img" alt="close"> + </button> + + <ul class="usa-nav__primary usa-accordion"> + + <li class="usa-nav__primary-item"> + <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two"> + <span>Features</span> + </button> + <ul id="extended-nav-section-two" class="usa-nav__submenu"> + <li class="usa-nav__submenu-item"><a href="#" class=""> wan</a></li> + <li class="usa-nav__submenu-item"><a href="#" class=""> tu</a></li> + <li class="usa-nav__submenu-item"><a href="#" class=""> mute</a></li> + </ul> + </li> + + <li class="usa-nav__primary-item"> + <a class="usa-nav__link" href="original-paper.html"><span>The original paper</span></a> + </li> + + <li class="usa-nav__primary-item"> + <a class="usa-nav__link" href="jobs.html"><span>I am...</span></a> + </li> + + <li class="usa-nav__primary-item"> + <a class="usa-nav__link" href="about.html"><span>About</span></a> + </li> + + </ul> + + <div class="usa-nav__secondary"> + <ul class="usa-nav__secondary-links"> + <li class="usa-nav__secondary-item"><a href="">Contact</a></li> + <li class="usa-nav__secondary-item"><a href="">Contribute</a></li> + </ul> + + <form class="usa-search usa-search--small " role="search"> + <label class="usa-sr-only" for="extended-search-field-small">Search small</label> + <input class="usa-input" id="extended-search-field-small" type="search" name="search"> + <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button> + </form> + </div> + </div> + </nav> +</header> |