<header>
  <a class="skiplink" href="#maincontent">Skip to main content</a>
  <a href="#" class="home">🏠</a>
  <nav>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
    </ul>
  </nav>
</header>
<main id="maincontent">
  <article>
    <header>
      <h1>Skip-a-dee doo daa: What a wonderful day to read content</h1>
      <svg class="author-img" viewBox="0 0 24 24">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" />
      </svg>
      <span class="author">Rob O'Leary</span>
      <span class="publish-date">| Published on Apr. 16, 2022</span>
    </header>
    <img src="https://images.unsplash.com/photo-1457131760772-7017c6180f05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="coding" />
    <p>
      <strong>Press <kbd>Tab</kbd> to see the "skip to main content" navigation
        link.</strong>
    </p>
    <p>
      Talking about code here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore. Culpa enim labore culpa sit enim irure.
      Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
      occaecat sit minim consectetur officia labore amet nisi do. Sint ad
      aliquip labore enim laboris occaecat sint sit id consequat nostrud
      velit anim laborum.
    </p>
    <p>
      Talking about code here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
      Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
      occaecat sit minim consectetur officia labore amet nisi do. Sint ad
      aliquip labore enim laboris
    </p>
    <p>
      Talking about code here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
      Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
      occaecat sit minim consectetur officia labore amet nisi do. Sint ad
      aliquip labore enim laboris
    </p>
    <p>
      Talking about code here. Aliquip est reprehenderit officia laborum
      esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
      Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
      occaecat sit minim consectetur officia labore amet nisi do. Sint ad
      aliquip labore enim laboris
    </p>
  </article>
</main>

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
}

/* "skip to main content" navigation link styles */
.skiplink {
  position: absolute;
  left: 5px;
  top: 0;
  transform: translateY(-100%);
  transition: transform 0.3s;

  background: hsl(28, 100%, 74%);
  padding: 20px;
}

.skiplink:focus {
  transform: translateY(0);
}

/* other styles */
main {
  display: grid;
  max-width: 800px;
  margin: 20px auto;
}

body > header {
  display: flex;
  align-items: center;
  min-height: 4em;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  font-size: 1.5rem;
  padding: 0;
}

.home {
  padding: 10px;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline-block;
  padding-right: 1rem;
}

nav a {
  text-decoration: none;
  color: inherit;
}

article > header {
  display: grid;
  grid-template-columns: auto max-content 1fr;
  align-items: center;
  grid-gap: 10px;
  margin-bottom: 30px;
  width: 100%;
}

h1 {
  font-family: Raleway, serif;
  font-size: 2.25em;
  line-height: 1.25em;
  grid-column: 1 / -1;
}

.author-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

article img {
  display: block;
  width: 100%;
}

a,
a:visited {
  text-decoration: none;
}