WebSlides

# WebSlides = Create stories with Karma Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. — [https://webslides.tv/demos](https://webslides.tv/demos). * * * ### Download Simply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip). * * * ### 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/ ``` ## Features - Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe. - Slide counter. - Permalinks: go to a specific slide. - Autoslide. - Click to nav. - 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). ## Markup - Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. - Each parent `` in the `#webslides` element is an individual slide. ```html

Slide 1

``` ### Vertical Sliding ```html ``` ### CSS Syntax (classes) - Typography: `.text-landing`, `.text-data`, `.text-intro`... - Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`... - Background Images: `.background`,`.background-center-bottom`... - Cards: `.card-50`, `.card-40`... - Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`... ### Extensions You can add: - [Unsplash](https://unsplash.com) photos - [animate.css](https://daneden.github.io/animate.css) - [particles.js](https://github.com/VincentGarreau/particles.js) - [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles) - [pt](http://williamngan.github.io/pt/) ### Dive In! - Do not miss [our demos](https://webslides.tv/). - Want to get techie? Read [our wiki](https://github.com/webslides/WebSlides/wiki): - [FAQ](https://github.com/webslides/WebSlides/wiki) - [Core API](https://github.com/webslides/WebSlides/wiki/Core-API) - [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs) - [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development) ### Credits - WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus). - Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan). - Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).