title: nodeppt 样式演示 speaker: 三水清 url: https://github.com/ksky521/nodeppt webslidesOptions: autoslide: 5000
Classes{.text-subtitle.animated.fadeInDown.delay-800}
这可能是迄今为止最好的网页版演示库 {.text-intro}
:fa-github: Github{.button.ghost}
WebSlides is so easy to understand and love. Baseline: 8. {.text-intro}
- :Typography::{.text-label} .text-landing, .text-subtitle, .text-data, .text-intro...
- :BG Colors::{.text-label} .bg-primary, .bg-blue,.bg-apple...
- :BG Images::{.text-label} .background, .background-center-bottom...
- :Cards::{.text-label} .card-60, .card-50, .card-40...
- :Sizes::{.text-label} .size-50, .size-40...
- :Flex Blocks::{.text-label} .flexblock.clients, .flexblock.gallery, .flexblock.metrics... {.description}
Optional · 500+ icons {.text-subtitle}
:fa-flag: Font Awesome as SVG icons
:fa-flag::::column {.vertical-align}
Each parent <section> in the #webslides element is an individual slide. {.text-intro}
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"> {.aligncenter}
:::{.aligncenter}
Put content wherever you want. :::
:::footer Footer: logo, credits... (.alignleft) {.alignleft}
:fa-twitter: @username .alignright{.alignright}
:::
:::header Header (logo) :.alignright:{.alignright} :::
!
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.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 {.aligncenter}
.text-landing
Create a simple web presence. {.text-intro}
.text-intro
POWERED BY #WEBSLIDES .text-subtitle {.text-subtitle}
Create a simple web presence. {.text-intro}
.text-intro
.text-shadow {.text-intro}
.text-data
Why WebSlides? .text-context {.text-content}
.text-cols (2 columns)
:::div {.text-cols}
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.
:::
:::flexblock {.metrics}
:fa-phone:
Call us at 555.345.6789
:fa-twitter:
@username
:fa-envelope: Send us an email :::
:::column {.vertical-align}Pixel's camera lets you take brilliant photos in low light, bright light or any light. {.text-intro}
- :Typography::{.text-label} .text-landing, .text-subtitle, .text-data, .text-intro...
- :BG Colors::{.text-label} .bg-primary, .bg-blue,.bg-apple...
- :BG Images::{.text-label} .background, .background-center-bottom...
- :Sizes::{.text-label} .size-50, .size-40...
- :Flex Blocks::{.text-label} .flexblock.clients, .flexblock.gallery, .flexblock.metrics... {.description}
:::
:::div {.content-left}
.text-serif (Maitree)
:::
:::div {.content-left}
Each parent <slide> in the #webslides element is an individual slide.
Clean markup with popular naming conventions. Minimum effort. Just focus on your content.
:::
Beauty overdose. .text-pull-right {.text-intro}
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. {.text-pull-right}
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 :::flexblock {.features.fadeInUp}:100^%^: purpose
Useful → Easy → Fast → Beautiful :::
::: div {.content-left.bg-trans-dark.fadeInUp} !
Meet locals who share your interests. :::
:::div {.content-left} :fa-tree large:
:::
:::column
Design for growth. We've built a team of world-class designers, developers, and managers.
We connect your audience needs, business goals, and brand values into a strategy.
We offer personalized services with deep expertise in design and technology.
We train teams to help organizations succeed in the digital age. :::
## table| Left-aligned | Center-aligned | Right-aligned |
|---|---|---|
| git status | git status | git status |
| git diff | git diff | git diff |
| git status | git status | git status |
(80, 72, 64, 56, 48, and 40).
> I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers. > ==Zaha Hadid== > {.text-quote}:::div {.content-right}
:::card {.quote}"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==
::: {.content-left}
.button{.button} .button.radius{.button.radius}
.button.ghost{.button.ghost} :fa-github: svg-icon{.button} :::
* * * {.text-symbols}
* [:fa-th-large: Layout](./layout.html) * [:fa-tv: Background](./background.html) * [:fa-magic: Animation](./animation.html) * [:fa-cube: Component](./component.html) * [:fa-youtube: Media](./media.html) * [:fa-css3: Classes](./classes.html)快使用 nodeppt 轻松搞定高大上PPT
nodeppt 助力你的人生逆袭之路！ {.text-into}
:fa-cloud-download: Github{.button}