Classes

nodeppt

这可能是迄今为止最好的网页版演示库

Github

CSS Syntax

WebSlides is so easy to understand and love. Baseline: 8.

  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
  • BG Images: .background, .background-center-bottom...
  • Cards: .card-60, .card-50, .card-40...
  • Sizes: .size-50, .size-40...
  • Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...

Optional · 500+ icons

Font Awesome as SVG icons

:fa-flag:

WebSlides is really easy

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

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides , by Jenn Schiffer ::)

<article id="webslides">
  <!-- Slide 1 -->
  <section>
    <h1>Design for trust</h1>
  </section>
  <!-- Slide 2 -->
  <section class="bg-primary">
    <div class="wrap">
      <h2>.wrap = container (width: 90%) with fadein</h2>
    </div>
  </section>
</article>

Vertical sliding? <article id="webslides" class="vertical">

Header (logo) .alignright

Simple CSS Alignments

Put content wherever you want.

img.alignleft

img.alignleft.size-50

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

Image size recommended::
800x600px / 600x450px.

img.alignright

img.alignright.size-50

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

Image size recommended::
800x600px / 600x450px.

img.aligncenter.size-40

Landings

.text-landing

Landings

Create a simple web presence.

.text-intro

POWERED BY #WEBSLIDES .text-subtitle

Landings

Create a simple web presence.

.text-intro

Landings

.text-shadow

4,235,678

.text-data

Why WebSlides? .text-context

WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.

.text-cols (2 columns)

Why WebSlides? There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. Each parent <slide> in the #webslides element is an individual slide.

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

  • Call us at 555.345.6789

  • @username

  • Send us an email

A Phone by Google

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

  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
  • BG Images: .background, .background-center-bottom...
  • Sizes: .size-50, .size-40...
  • Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...

WebSlides is incredibly easy and versatile.

.text-serif (Maitree)

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

Clean markup with popular naming conventions. Minimum effort. Just focus on your content.

What is Stendhal Syndrome?

Beauty overdose. .text-pull-right

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

Psychiatrists have long debated whether it really exists.

The syndrome is not only associated with viewing a beautiful place, but also good art.

The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.

Design for understanding

  • 100% purpose

    Businesses that people love

  • Principles

    Useful → Easy → Fast → Beautiful

Designing Experiences

Meet locals who share your interests.

1,000,000

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

Interface

Design for growth. We've built a team of world-class designers, developers, and managers.

Videos

We connect your audience needs, business goals, and brand values into a strategy.

Recruiting

We offer personalized services with deep expertise in design and technology.

Formation

We train teams to help organizations succeed in the digital age.

table

Left-alignedCenter-alignedRight-aligned
git statusgit statusgit status
git diffgit diffgit diff
git statusgit statusgit status

avatar

(80, 72, 64, 56, 48, and 40).

Quote

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

"There is something only a CEO uniquely can do, which is set that tone, which can then capture the soul of the collective." Satya Nadella, CEO of Microsoft.

“WebSlides helped us build a culture of innovation and excellence.” Leonardo da Vinci

button

.button .button.radius

.button.ghost svg-icon

View More Demos?

* * *

U work so hard, but 干不过 write PPTs

快使用 nodeppt 轻松搞定高大上PPT
nodeppt 助力你的人生逆袭之路！

Github