CSS Only Presentation Library – slide.css

slide.css is a CSS library for creating interactive, responsive HTML presentations, one-page scrolling websites, and vertical page sliders without JavaScript.

It leverages the magic of CSS scroll-snap to snap presentation slides (pages) into place as users scroll through your content.

How to use it:

1. Download and import the slide.css stylesheet.

<link rel="stylesheet" href="slide.css" />

2. Add slides to section elements and the library will do the rest.

<!-- Fixed Header OPTIONAL -->
<header>
  Header Content
</header>
<!-- Slides -->
<main>
  <section>
    <h1>Bananas</h1>
  </section>
</main>
<!-- Fixed Footer OPTIONAL -->
<footer>
  Footer Content
</footer>

3. Override the default variables to create your own styles.

:root {
  --c-fg: black;
  --c-bg: snow;
  --c-primary: royalblue;
  --c-neutral: lavender;
  --c-notice: orange;
  --c-lines: var(--c-primary);
  --c-shadows: var(--c-neutral);
  --slide-width: 65ch;
  --slide-motion: 100ms ease;
  font-family: sans-serif;
  background-color: var(--c-bg);
  color: var(--c-fg);
}