<div class="container">
  <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;
}
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.