Corporate Backgrounds

Corporate Backgrounds

  • .bg-primary

    #44d

  • .bg-secondary

    #67d

  • .bg-light

    #edf2f7

  • body

    #f7f9fb

General Colors

  • .bg-black

    #111

  • .bg-black-blue

    #123

  • .bg-white

    #fff

Colorful

  • .bg-red

    #c23

  • .bg-green

    #077

  • .bg-blue

    #346

  • .bg-purple

    #62b

Transparent Backgrounds

  • .bg-trans-dark

    rgba(0, 0, 0, 0.5)

  • .bg-trans-light

    rgba(255, 255, 255, 0.2)

Gradients

  • Horizontal .bg-gradient-h
  • Radial .bg-gradient-r
  • Vertical .bg-gradient-v

Vertical Gradient

.bg-gradient-v

Radial Gradient

.bg-gradient-r

One more background ::)

.bg-apple

nodeppt

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

为什么选择 nodeppt

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

为什么选择 nodeppt

  • 基于 GFM 的 markdown 语法编写
  • 支持 html 混排，再复杂的 demo 也可以做！
  • 导出网页或者 pdf 更容易分享
  • 支持单页背景图片
  • 多种模式：纵览模式，双屏模式，远程控制
  • 可以使用画板，可以使用 note 做备注
  • 支持语法高亮，自由选择 highlight 样式
  • 可以单页 ppt 内部动效，单步动效
  • 支持进入/退出回调，做在线 demo 很方便

为什么选择 nodeppt

  • 基于 GFM 的 markdown 语法编写
  • 支持 html 混排，再复杂的 demo 也可以做！
  • 导出网页或者 pdf 更容易分享
  • 支持单页背景图片
  • 多种模式：纵览模式，双屏模式，远程控制
  • 可以使用画板，可以使用 note 做备注
  • 支持语法高亮，自由选择 highlight 样式
  • 可以单页 ppt 内部动效，单步动效
  • 支持进入/退出回调，做在线 demo 很方便
<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%)</h2>
    </div>
  </section>
</article>

Autoplay Feature

Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.

Header

Header & Footer

Note

Footer

Feature 1

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

Feature 1

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

Feature 1

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

button

.button .button.radius

.button.ghost svg-icon

Let's check out some examples.

All content is for demo purposes only.

  1. Welcomes
  2. Covers
  3. Abouts & Teams
  4. Features & Benefits
  5. Cards
  6. Metrics & Data
  7. Pricing & Offers
  8. Quotes
  9. Buttons & Badges
  10. Forms
  11. SVG Icons
  12. Logos
  13. CSS Animations
  14. Embedding videos, maps, charts...

Welcomes

WebSlides is an open source tool for telling stories.

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.

California

GOOD KARMA

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

Plan your next trip

Summ.er

The best places at the best price.

$975

Location Intelligence

The application of geographic mapping to data

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

Abouts & Teams

ul.flexblock.specs

    SIMPLE NAVIGATION

    with arrow keys and swipe.

    Permalinks

    Go to a specific slide. URL:: #slide=number

    SVG ICONS

    Font Awesome Kit.

Watch TV shows anytime, anywhere

.frame.bg-red

$40

Watch TV shows anytime, anywhere

.frame.bg-red

Flexbox

    Founded

    24M Subscribers

    Founded

    Revenue:: $16M

    Covers, cards, quotes...

    Use multiples of 8.

    Font Awesome Kit.

    Bank:: $32M

Metrics

    Founded 1972

    24M Subscribers

    Founded 64%

    Revenue:: $16M

    Covers, cards, quotes...

    Use multiples of 8.

    Font Awesome Kit.

    Bank:: $32M

Features

    → SIMPLE NAVIGATION

    with arrow keys and swipe.

    Permalinks

    Go to a specific slide.

    Permalinks

    Go to a specific slide.

    40+ BEAUTIFUL COMPONENTS

    Covers, cards, quotes...

    VERTICAL RHYTHM

    Use multiples of 8.

    500+ SVG ICONS

    Font Awesome Kit.

About/Services/Clients

ul.flexblock.blink.border

ul.flexblock.steps

  • Interfaces

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

  • Interfaces

    1. Architecture
    2. Design
    3. Development

  • Interfaces

    1. Architecture
    2. Design
    3. Development

  • Interfaces

    1. Architecture
    2. Design
    3. Development

FAQs

WebSlides is an open source solution by

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

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

Team

Team

echarts

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ộ.

* * *

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

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ộ.

* * *

dfdasfs

table

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

KaTex

equationdescription
∇⋅B⃗=0\nabla \cdot \vec{\mathbf{B}} = 0divergence of B⃗\vec{\mathbf{B}} is zero
∇×E⃗+1c∂B⃗∂t=0⃗\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}curl of E⃗\vec{\mathbf{E}} is proportional to the rate of change of B⃗\vec{\mathbf{B}}
∇×B⃗−1c∂E⃗∂t=4πcj⃗∇⋅E⃗=4πρ\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rhowha?

Why WebSlides?

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

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

The little things mean the most

.fadeInUp

h2.fadeIn.slow