WebSlides = Good Karma
Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. A new release (at least) every 8th day of the month — https://webslides.tv/demos.
Simply choose a demo and customize it in minutes. Latest version: webslides.tv/webslides-latest.zip.
Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content.
- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.
- Slide counter.
- Permalinks: go to a specific slide.
- Click to nav. Read more!
- Simple CSS alignments. Put content wherever you want (vertical centering...)
- 40+ components: background images/videos, quotes, cards, covers...
- Flexible blocks with auto-fill and equal height.
- Fonts: Roboto, Maitree (Serif), and San Francisco.
- Vertical rhythm (use multiples of 8).
There's a handful of keys that can be used to achieve navigation within WebSlides. Here's the list:
←: If WebSlides is not vertical, it will go to the previous slide.
→: If WebSlides is not vertical, it will go to the next slide.
↑: If WebSlides is vertical, it will go to the previous slide.
↓: If WebSlides is vertical, it will go to the next slide.
Page Up: Go to the previous slide.
Page Down: Go to the next slide.
Space: Go to the next slide.
Home: Go to the first slide.
End: Go to the last slide.
- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.
- Each parent
#webslideselement is an individual slide.
<article id="webslides"> <section> <h1>Slide 1</h1> </section> <section class="bg-black aligncenter"> <!-- .wrap = container 1200px --> <div class="wrap"> <h1>Slide 2</h1> </div> </section> </article>
<article id="webslides" class="vertical">
What's in the download?
The download includes demos and images (devices and logos). All content is for demo purposes only. Images are property of their respective owners.
webslides/ ├── index.html ├── css/ │ ├── base.css │ └── colors.css │ └── svg-icons.css (optional) ├── js/ │ ├── webslides.js │ └── svg-icons.js (optional) └── demos/ └── images/
CSS Syntax (classes)
- Background Colors:
- Background Images:
- Flexible Blocks:
You can add:
WebSlides is licensed under the MIT License. Use it to make something cool.
Please check out: