Landings

* * *

WebSlides

The interface is your brand:

Create a stylish web presence easily

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code looks neat, pure. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer. Tutorials: Components · Classes.

<article id="webslides">
  <!-- Slide 1 -->
  <section>
    <h1>Design for trust</h1>
  </section>
  <!-- Slide 2 -->
  <section class="bg-primary">
    <div class="wrap">
      <h2>.wrap = container 1200px</h2>
    </div>
  </section>
</article>

Welcomes

WebSlides is an open source tool for telling stories.
Make it simple, but significant.

How to Tell Your Story?

* * *

Stories have the power to change the world. WebSlides helps you write better content, faster. Your slides are there to support your story. Choose words wisely, create meaning with them, keep it simple.

Why WebSlides? Good karma and productivity.


  • We're web people.

    There're excellent presentation tools out there. WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

  • Work better, faster.

    Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

Why WebSlides?

There are amazing presentation tools out there.

Everyone loves a good story. WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. How? Making HTML presentations easy. Hypertext, clean code, and beauty as narrative elements.

* * *

Best,
@jlantunez.

HTML Presentations Made Easy

WebSlides Demos · Github

  • 100% customizable

    Clean markup.
  • Good Karma

    Just the right features.
  • Prototype faster

    Design landings, portfolios...

Welcomes

Call to Action

Make secure purchases in stores, in apps, and now on the web. The safer way to pay.

iOS app Android app

Pixel Phone

Cari is your best friend

Your life will be more complete.

Cari makes connections based on your relationships, uses humor, and is eager to learn more about your world and how to make your life easier to manage.

iOS app Android app

Covers

California

Yosemite National Park.

GOOD KARMA

WebSlides is about telling the story, and sharing it in a beautiful way.

New in London

Hotel Daenerys

The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.

More info

Plan your next trip

Summ.er

The best places at the best price.

Install iOS app Install Android app

$975

Living on Mars

Paula Chan, CEO of SpaceY.

PROBLEM & SOLUTION

The history of the music industry is also the story of the development of technology.

Location Intelligence

The application of geographic mapping to data

Abouts & Teams

WebSlides help you build a culture of excellence.

WebSlides is the easiest HTML presentation framework. All content is for demo purposes only. All images are the copyright of their respective owners.

ul.flexblock.steps

  • 01. Passion

    When you're really passionate about your job, you can change the world.

  • 02. Purpose

    Why does this business exist? How are you different? Why matters?

  • 03. Principles

    Leadership through usefulness, openness, empathy, and good taste.

  • 04. Process

    • Useful
    • Easy
    • Fast
    • Beautiful

FAQs

WebSlides is an open source solution by @jlantunez. If you have additional questions, get in touch!

Why WebSlides?

There are excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

* * *

Is WebSlides a framework?

We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic structural components and a scalable CSS architecture.

What can I do with WebSlides?

WebSlides is a cute solution for making HTML presentations, landings, and portfolios. Put content wherever you want, add background images, videos...

* * *

How easy is WebSlides?

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

Why WebSlides?

.text-cols (2 columns).

Everyone loves a good story. WebSlides is about sharing and good karma. This is about telling the story, and sharing it in a beautiful way. How? Making HTML presentations easy. Hypertext, clean code, and beauty as narrative elements.

WebSlides help you build a culture of innovation and excellence. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste. When you're really passionate about your job, you can change the world.

  • @WebSlides
  • Contribute
  • Call us at 555.345.6789

Features & Benefits

Features

  • Simple Navigation

    with arrow keys and swipe.
  • Permalinks

    Go to a specific slide.
  • Slide Counter

    Current/Total number
  • 40+ Beautiful Components

    Covers, cards, quotes...
  • Vertical Rhythm

    Use multiples of 8.
  • 500+ SVG Icons

    Font Awesome Kit.

Feature 1

Test your web and mobile designs, and quickly incorporate user feedback.

Benefit 2

When you're really passionate about your job, you can change the world.

Design Better

The most popular elements commonly used for creating landings and portfolios.

iPhone

iPhone 7

3D Touch, 12MP photos, and 4K video. Centering vertically using grid.vertical-align

Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.

apple.com/iphone

iPhone 7

A phone should be absolutely simple, beautiful, and magical to use. 3D Touch, 12MP photos, and 4K video.

Benefit 1

The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.

Benefit 2

The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.

Pixel Phone

A Phone by Google

Pixel's camera lets you take brilliant photos in low light, bright light or any light.

ul.flexblock.specs

  • Navigation with arrow keys and slide counter

    Fade transition to all slides.
  • Permalinks

    Go to a specific slide. URL: #slide=number
  • Vertical rhythm

    Use multiples of 8.
  • Ultra-Fast WiFi

    Faster LTE with the best worldwide roaming.
  • All day battery life

    Your battery worries may be over.
  • Lifetime Warranty

    We'll fix it or if we can't, we'll replace it.
iPhone

Cards

Man in a motorcycle
Ryan Holloway (Unsplash)

Cards

Price: $64 — .card-50

  • Size: 24/32.
  • Color: Black.
  • Composition: Cotton 99%; Elastane 1%.

5-pocket low-rise jeans in washed stretch denim with a button fly and slim legs. The jeans are made partly from recycled cotton.

Alhambra, Granada
Victoriano Izquierdo (Unsplash)

Cards

Alhambra, Granada — .card-60

The palatial city consist of six palaces and two tower-palaces, of which only the Palaces of Comares and of the Lions have been preserved.

Bonsai

Bonsai

Bonsai is a Japanese art form using trees grown in containers — .fullscreen > .card-50.

Similar practices exist in other cultures, including the Chinese tradition of penjing from which the art originated, and the miniature living landscapes of Vietnamese hòn non bộ.

* * *

Metrics & Data

WebSlides help you build a culture of innovation.

.flexblock.metrics All content is for demo purposes only, to show an example of a live site. All images are the copyright of their respective owners.

  • Founded 1986
  • 120+ Prebuilt Slides
  • 32M Downloads
  • Revenue: $72M

Metrics

  • Founded 1972
  • 24M Subscribers
  • Revenue: $16M
  • Monthly Growth 64%
  • 8 Offices
  • 48 Employees
  • EBITDA: $2,4M
  • Bank: $32M

2,356,478

downloads in first 72 hours

1,000,000

We're working to protect up to a million acres of sustainable forest.

Pricing & Offers

Choose one plan

Simple pricing. No credit card required!

Plans Good Better Awesome
Price Free $6 $10
HD Streaming No Yes Yes
Screens you can watch on at the same time 1 2 Unlimited
Access to exclusive content No No Yes

$40

Watch TV shows anytime, anywhere

.frame.bg-red

Get 8 weeks free

Quotes

Why WebSlides?

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."

Avatar @jlantunez.

I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers.

Zaha Hadid.

"We will reinvent productivity to empower every person and every organization on the planet to do more and achieve more."

Satya Nadella.

"Some people see innovation as change, but we have never really seen it like that. It's making things better."

Tim Cook, CEO of Apple.

Badges

a.badge-ios and a.badge-android

iOS App Android App

Forms

Planning a vacation?

Hidden attractions and unusual things to do.

Create a free account

  • Good karma

    Just the right features.
  • Fast & Versatile

    No need to know code. 120+ slides.
  • Private Network

    Simple and secure file sharing.

Accepting Pay is easy

Check out all the places where you can check out. If you already accept credit and debit cards, simply contact your payment provider to start accepting Apple Pay:

Welcome back

Don't have an account? Sign up!

Optional · 500+ icons

Font Awesome as SVG icons

<svg class="fa-flag">
	<use xlink:href="#fa-flag"></use>
</svg>

How to change icons?

  1. Go to fontastic.me.
  2. Create a free account.
  3. Select new icons.
  4. Publish as SVG sprite.
  5. Edit svg-icons.css and svg.icons.js.

Transparent Logos

Change the color of a .svg/.png image using CSS. Images are property of their respective owners.


  • Google

    Height recommended: 48px

  • img.blacklogo

  • img.graylogo

  • img.whitelogo

CSS Animations

Fadein transition to all slides.

<article id="webslides">
  <section>
    <div class="wrap fadeInUp">
      <h1>Slide</h1>
    </div>
  </section>
</article>

Just 3 basic animations: .fadeIn, .fadeInUp, and .zoomIn.

The little things mean the most

.fadeInUp

Pixel Phone

.zoomIn

.slow (animation duration)

<section>
      <div class="wrap">
      	<h2 class="fadeIn slow">Slide 1</h2>
      </div>
</section>

h2.fadeIn.slow

Embedding Media

Images, videos, maps, charts...

Unsplash = Fullscreen Backgrounds

How to embed Unsplash photos? →

<section>
  <span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"></span>
  <div class="wrap">
    <h1>Slide</h1>
  </div>
</section>

Position .backround outside of .wrap container.

Responsive Videos

<div class="embed">
 <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
 </iframe>
</div>

.embed

Every end is a new beginning

Overlay

section.bg-blue > .background-video.dark or .light

Status of Net Neutrality around the world.

Start in seconds

120+ prebuilt slides ready to use.

Free Download Pay what you want.