<div class="bg-dark">
  <header class="content-width flex-container">

    <a href="#skip-link-target" class="text-assistive display-at-top-on-focus">Skip to main content.</a>

    <section class="branding"><a href="#">Style Magic</a></section>
      <nav aria-label="Main menu" class="menu-right with-branding">
        <a href="#">Home</a>
        <a href="#">CSS</a>
        <a href="#">HTML</a>
        <a href="#">JS</a>
        <a href="#">Opinion</a>
        <a href="#">Inspiration</a>
        <a href="#">Contact</a>
      </nav>
  </header>
</div>

<div class="hero">
  <img src="https://placeimg.com/1000/200/tech/grayscale" alt="" />
</div>

<a href="#skip-link-target" class="text-assistive display-at-top-on-focus" id="skip-link-target">Start of main content.</a>

<main class="content-width">

  <h1>Skip To Content Demo – Standard Skip Link</h1>
  
  <p>Here it is, the finished basic demo for our <a href="https://css-tricks.com/a-deep-dive-on-skipping-to-content/">skip to content article</a> on CSS-Tricks which demonstrates semantic markup, improved keyboard focus visibility and a skip link. This technique should work for 96.84% of users at time of writing according to the excellent <a href="https://caniuse.com/css-clip-path">caniuse.com</a>.</p>

  <p>Hero image from <a href="https://placeimg.com/" >PlaceIMG</a>.</p>

  <h2>Want to test with a screenreader?</h2>
  <p>If you want to test this code with a screenreader like <a href="https://www.nvaccess.org/">NVDA</a> you will find it easier to use the <a href="https://rpress.io/examples/skip-to-content/skip-to-content-standard-skip-link.html" target="_blank">static version in a new tab</a>.</p>
</main>

<div class="bg-dark">
  <footer class="content-width flex-container">
    <nav aria-label="Utility menu" class="menu-right">
      <a href="#">Privacy</a>
      <a href="#">Terms &amp; Conditions</a>
    </nav>
  </footer>
</div>

/* Skip link styling */
.text-assistive {
  -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  box-sizing: border-box;
  position: absolute;
  margin: 0;
  padding: 0;
}
.text-assistive.display-at-top-on-focus {
  top: 0;
  left: 0;
  width: 100%;  
}
.text-assistive.display-at-top-on-focus:focus {
  -webkit-clip-path: none;
  clip-path: none;
  z-index: 999;
  height: 80px;
  line-height: 80px;
  background: white;
  font-size: 1.2rem;
  text-decoration: none;
  color: #1295e6;
  text-align: center;
}
#skip-link-target:focus {
  background: #084367;
  color: white;
}
/* end of skip link styling */

/* improved keyboard focus visibility */
a:focus {
  border-bottom-color: #1295e6;
}
.menu-right a:focus, .branding a:focus {
  background-color: white;
  color: #1295e6;
}
/* end of improved keyboard focus visibility */


/* basic styles for the rest of the page */
body {
  font-family: sans-serif;
  font-size: 20px;
  margin: 0;
  padding: 0;
}
.bg-dark {
  background: #1295e6;
  color: #fff; 
  min-height: 100px;
}
.content-width {
  box-sizing: border-box;
  max-width: 1208px;
  padding: 1rem;
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: #1295e6;
  border-bottom: 4px solid transparent;
}
a:hover {
  border-bottom-color: #1295e6;
}
.menu-right a, .branding a {
  color: white;
}
.menu-right a:hover, .branding a:hover {
  background-color: white;
  color: #1295e6;
}
.branding {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 220px;
  font-size: 2rem;
  font-style: italic;
  height: 68px;
}
.branding a {
  padding: 0 1rem;
}
.flex-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.menu-right {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 68px;
}
@media (min-width:900px){
  .menu-right {
    justify-content: flex-end;
    text-align: right;
  }
  .menu-right.with-branding {
      width: calc(100% - 220px);
  }  
}
.menu-right a {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}
.hero {
  width: 100%;
  height: 200px;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* end of basic styles for the rest of the page */