{"id":13404034,"url":"https://github.com/webslides/WebSlides","last_synced_at":"2025-03-14T08:32:23.257Z","repository":{"id":39120961,"uuid":"78369010","full_name":"webslides/WebSlides","owner":"webslides","description":"Create HTML presentations in seconds —","archived":false,"fork":false,"pushed_at":"2022-12-10T13:03:52.000Z","size":3301,"stargazers_count":6211,"open_issues_count":76,"forks_count":586,"subscribers_count":156,"default_branch":"master","last_synced_at":"2024-10-29T15:02:38.004Z","etag":null,"topics":["css","design","html","html-presentation","javascript","slides","slideshow","webpack","webslides"],"latest_commit_sha":null,"homepage":"https://webslides.tv/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webslides.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-08T20:35:48.000Z","updated_at":"2024-10-28T19:36:23.000Z","dependencies_parsed_at":"2023-01-26T07:31:01.887Z","dependency_job_id":null,"html_url":"https://github.com/webslides/WebSlides","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webslides%2FWebSlides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webslides%2FWebSlides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webslides%2FWebSlides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webslides%2FWebSlides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webslides","download_url":"https://codeload.github.com/webslides/WebSlides/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243547562,"owners_count":20308726,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","design","html","html-presentation","javascript","slides","slideshow","webpack","webslides"],"created_at":"2024-07-30T19:01:37.981Z","updated_at":"2025-03-14T08:32:23.251Z","avatar_url":"https://github.com/webslides.png","language":"JavaScript","readme":"# WebSlides = Create stories with Karma\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)\n[![Release](https://img.shields.io/github/release/webslides/webslides.svg)](https://github.com/webslides/webslides/releases/latest)\n[![codecov](https://codecov.io/gh/webslides/WebSlides/branch/master/graph/badge.svg)](https://codecov.io/gh/webslides/WebSlides)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/jlantunez/8)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/webslides/webslides.svg?style=social)](https://twitter.com/webslides)\n\nFinally, 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).\n\n* * *\n### Download\nSimply choose a demo and customize it in seconds. Latest version: [webslides.tv/webslides-latest.zip](https://webslides.tv/webslides-latest.zip).\n* * *\n\n\n### What's in the download?\n\nThe download includes demos and images (devices and logos). \nAll content is for demo purposes only. Images are property of their respective owners.\n\n```\nwebslides/\n├── index.html\n├── css/\n│   ├── base.css\n│   └── colors.css\n│   └── svg-icons.css (optional)\n├── js/\n│   ├── webslides.js\n│   └── svg-icons.js (optional)\n└── demos/\n└── images/\n```\n\n## Features\n\n- Navigation (horizontal and vertical sliding): remote presenters, touchpad, keyboard shortcuts, and swipe.\n- Slide counter.\n- Permalinks: go to a specific slide.\n- Autoslide.\n- Click to nav.\n- Simple CSS alignments. Put content wherever you want (vertical centering...)\n- 40+ components: background images/videos, quotes, cards, covers...\n- Flexible blocks with auto-fill and equal height.\n- Fonts: Roboto, Maitree (Serif), and San Francisco.\n- Vertical rhythm (use multiples of 8).\n\n## Markup\n\n- Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting.\n- Each parent `\u003csection\u003e` in the `#webslides` element is an individual slide.\n\n```html\n\u003carticle id=\"webslides\"\u003e\n    \u003csection\u003e\n        \u003ch1\u003eSlide 1\u003c/h1\u003e\n    \u003c/section\u003e\n    \u003csection class=\"bg-black aligncenter\"\u003e\n    \u003c!-- .wrap = container 1200px --\u003e\n        \u003cdiv class=\"wrap\"\u003e\n            \u003ch1\u003eSlide 2\u003c/h1\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n\u003c/article\u003e\n```\n\n### Vertical Sliding\n\n```html\n\u003carticle id=\"webslides\" class=\"vertical\"\u003e\n```\n\n### CSS Syntax (classes)\n\n- Typography: `.text-landing`, `.text-data`, `.text-intro`...\n- Background Colors: `.bg-primary`, `.bg-apple`, `.bg-blue`...\n- Background Images: `.background`,`.background-center-bottom`...\n- Cards: `.card-50`, `.card-40`...\n- Flexible Blocks: `.flexblock.clients`, `.flexblock.metrics`...\n\n### Extensions\n\nYou can add:\n\n- [Unsplash](https://unsplash.com) photos\n- [animate.css](https://daneden.github.io/animate.css)\n- [particles.js](https://github.com/VincentGarreau/particles.js)\n- [Animate on scroll](http://michalsnik.github.io/aos/) (Useful for longform articles)\n- [pt](http://williamngan.github.io/pt/)\n\n### Dive In!\n\n- Do not miss [our demos](https://webslides.tv/). \n- Want to get techie? Read [our wiki](https://github.com/webslides/WebSlides/wiki):\n  - [FAQ](https://github.com/webslides/WebSlides/wiki)\n  - [Core API](https://github.com/webslides/WebSlides/wiki/Core-API)\n  - [Plugin Docs](https://github.com/webslides/WebSlides/wiki/Plugin-docs)\n  - [Plugin Development](https://github.com/webslides/WebSlides/wiki/Plugin-development)\n \n### Credits\n\n- WebSlides was created by [@jlantunez](https://twitter.com/jlantunez) using [Cactus](https://github.com/eudicots/Cactus).\n- Javascript: [@Belelros](https://twitter.com/Belelros) and [@LuisSacristan](https://twitter.com/luissacristan).\n- Based on [SimpleSlides](https://github.com/jennschiffer/SimpleSlides), by [@JennSchiffer](https://twitter.com/jennschiffer).\n","funding_links":["https://www.paypal.me/jlantunez/8"],"categories":["JavaScript","HarmonyOS"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebslides%2FWebSlides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebslides%2FWebSlides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebslides%2FWebSlides/lists"}