Hidden Sections

by the_voder

HTML

<nav>
  <ul>
    <li><a href="#platform">platform</a></li>
    <li><a href="#library">library</a></li>
    <li><a href="#present">present</a></li>
  </ul>
</nav>

<a name="platform" />
<section id="platform_section">
  <div class="section_wrapper">
    <h2>PLATFORM</h2>
    <p>Content of PLATFORM section</p>
  </div>
</section>
<a name="library" />
<section id="library_section">
  <div class="section_wrapper">
    <h2>LIBRARY</h2>
    <p>Content of LIBRARY section</p>
  </div>
</section>
<a name="present" />
<section id="present_section">
  <div class="section_wrapper">
    <h2>PRESENT</h2>
    <p>Content of PRESENT section</p>
  </div>
</section>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0
}

nav {
  position: fixed;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.25);
}

nav ul {
  list-style-type: none;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

section {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#platform_section {
	background-color: rgba(255, 0, 0, 0.25);
}

section#library_section {
	background-color: rgba(0, 255, 0, 0.25);
}

section#present_section {
	background-color: rgba(0, 0, 255, 0.25);
}