<div class="container">
  <ul class="skip-links">
    <li><a href="#nav">Skip to main nav</a></li>
    <li><a href="#main">Skip to main content</a></li>
  </ul>
  <header>
    <h1>Jerry&apos;s Cheese Shop</h1>
    <nav id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Locations</a></li>      
      </ul>
    </nav>
  </header>
  <main id="main">
    <h2>Welcome to Jerry&apos;s Cheese Shop</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sit harum id dolore nostrum ipsam animi dicta alias similique distinctio perferendis mollitia esse vero, quos ipsa nihil corrupti quisquam illo.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sit harum id dolore nostrum ipsam animi dicta alias similique distinctio perferendis mollitia esse vero, quos ipsa nihil corrupti quisquam illo.</p>
    <a href="#">Order Now</a>
    <section>
      <h3>Meet Tom - The shop helper</h3>
    <img src="https://placekitten.com/1600/1200" alt="">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sit harum id dolore nostrum ipsam animi dicta alias similique distinctio perferendis mollitia esse vero, quos ipsa nihil corrupti quisquam illo.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sit harum id dolore nostrum ipsam animi dicta alias similique distinctio perferendis mollitia esse vero, quos ipsa nihil corrupti quisquam illo.</p>
    </section>
  </main>
    <footer>&copy Jeery&apos;s Cheese Shop</footer>
</div>
a:focus{
  outline: 4px solid black;
}
.container{
  max-width: 1080px;
  margin: 0 auto;
}
.skip-links{
  list-style: none;
  margin: 0;
  padding: 0;
}
.skip-links a{
  position: absolute;
  top: -3em;
  background-color: black;
  color:white;
  padding: .5em 1em;
  font-weight: bold;
}
.skip-links a:focus{
  top: 0;
}

nav ul{
  background-color: #2e4a62;
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0;
}
nav ul li{
  flex: 1;
  text-align: center;
}
nav ul li a{
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
}
nav ul li a:hover{
  text-decoration: underline;
}
img{
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.