Author: | seifkamal |
---|---|
Views Total: | 197 views |
Official Page: | Go to website |
Last Update: | March 17, 2023 |
License: | MIT |
Preview:

Description:
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); }