<header id="top-header">
  <a id="top-header-home" href="/">
    <img src="https://raw.githubusercontent.com/bpeldi2oerkd8/assets/main/images/site-icon.png" width="50" height="50" alt="site-logo">
    <p>サイト名</p>
  </a>
</header>
<main>
  <div class="main-area">
    <p>1行目</p>
    <p>2行目</p>
    <p>3行目</p>
    <p>4行目</p>
    <p>5行目</p>
    <p>6行目</p>
    <p>7行目</p>
    <p>8行目</p>
  </div>
</main>
<footer>
  <div class="flex">
    <a href="/link-to-privacy-policy/">プライバシーポリシー</a>
    <a href="/link-to-contact-form/">お問い合わせフォーム</a>
  </div>
  <p>© 2022 作者名. All Rights Reserved.</p>
</footer>
#top-header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.5rem 1rem;
  background: white;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d1dce5;
  z-index: 999;
}

#top-header-home {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: black;
}

main {
  margin-top: 5rem; /*上に空白を追加*/
}

.main-area {
  background-color: #797979;
  color: white;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  border-radius: 10px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

footer {
  text-align: center;
  padding: 1rem 0;
  background-color: #ffffff;
  border-top: 1px solid #d1dce5;
}

footer > p {
  margin: 0.25rem 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.