2021-02-07

Single HTML webpage without JavaScript

I really like this concept of having all the content in a single HTML page and show/hide the sections using CSS. I would like to use it in some future project.

For me the interesting- and new part is the following CSS

/* ------- Sections ------- */

section {
  padding: calc(6em + 5vw) 5vw 8vw 5vw;
  /* ! Everything below is needed ! */
  display: none;
  position: absolute;
  top: 0;
  min-height: 100vh;
  width: 100%;
  background: var(--bgcolor);
}

section:target { /* Show section */
  display: block;
}

section#home { /* Show #home by default */
  display: block;
}

No comments: