- Exhibeo 2 0 3 – Create Beautiful Html5 Presentations Responsive
- Exhibeo 2 0 3 – Create Beautiful Html5 Presentations Download
- Exhibeo 2 0 3 – Create Beautiful Html5 Presentations Free
Empower your whole team to create stunning, branded designs. Visme is the only tool your team needs to create all forms of visual content. Design beautiful and interactive presentations, infographics, reports, surveys, social graphics and over 20 other content formats. Beautiful content starts here. Follow along with author Justin Putney as he uses open technologies (HTML5, jQuery, and CSS) to create a dynamic presentation slideshow that responds to mobile and desktop layouts. Learn to customize the slideshow to fit your next project, and to display artwork, photography, and other kinds of content.
Install
npm install -g nodeppt
Demo Contents
- Keyboard Shortcuts
- CSS Syntax
- Background
- Animation
- Content Position
- Quotes
- Plugins: echarts/mermaid/ketax
- Others: Button/Table.
- Speaker mode.
Keyboard Shortcuts
- Page: ↑/↓/←/→ Space Home End
- Fullscreen: F
- Overview: -/+
- Speaker Note: N
- Grid Background: Enter
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..
- Sizes: .size-50, .size-40..
- Component: card, flexblock, gallery..
- Animation: autoplay, animate.css..
.text-landing
POWERED BY #WEBSLIDES
.text-subtitle
Create a simple web presence.
.text-intro
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
Corporate Backgrounds
General Colors
Colorful
Transparent Backgrounds
- Horizontal
.bg-gradient-h
- Radial
.bg-gradient-r
- Vertical
.bg-gradient-v
Radial Gradient
.bg-gradient-r
.background-video
WebSlides is the easiest way to make HTML presentations. Inspire and engage.
BG Video with Overlay
<slide video='https://webslides.tv/static/videos/working.mp4 poster='https://webslides.tv/static/images/working.jpg' .dark'>
or .light
Youtube Background
![Beautiful Beautiful](https://www.softpress.com/exhibeo/Resources/exhibeo2-screen.jpg)
<slide youtube='.dark autoplay loop'>
.background-(position)
All day battery life
Your battery worries may be over.All day battery life
We'll fix it or if we can't, we'll replace it.
Shadowbox
:::shadowbox
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.
Card
.card-50.bg-white
Unsplash is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great.
- Role: Frontend
- client: Acme
- year: 2018
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ộ.
Flexible blocks
:::flexblock
= Flexible blocks with auto-fill and equal height.Flexblock
Purpose
Businesses that people love5Purpose
Businesses that people love6Purpose
Businesses that people love7Purpose
Businesses that people love8
Flexblock {.blink.border}
Gallery
:::gallery
Watch TV shows anytime, anywhere
.frame.bg-red
Grid Columns
Design
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.
Users
We offer personalized services with deep expertise in design and technology.
Teams
We train teams to help organizations succeed in the digital age.
Autoplay Animation
.animated.lightSpeedIn.slow
animate.css + .build
- fadeIn
- swing
- flash
- pulse
- shake
- bounceIn
- wobble
- fadeInLeft
- flipInX
- tada
- slideInUp
- jello
- heartBeat
- fadeInUp
- lightSpeedIn
Content Position
1/9 left top
Wizard of legend 1 11. Put content wherever you want. Have less. Do more. Create beautiful solutions.
.slide-top and .content-left
2/9 center top
In a village of La Mancha, the name of which I have no desire to call to mind,
.slide-top and .content-center
3/9 right top
there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.
.slide-top and .content-right
4/9 left top
An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,
.content-left
5/9 center top
lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.
.content-center
6/9 right top
he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,
.content-right
7/9 left bottom
while on week-days he made a brave figure in his best homespun.
.slide-bottom
and .content-left
8/9 center bottom
He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,
.slide-bottom
and .content-center
9/9 right bottom
who used to saddle the hack as well as handle the bill-hook. Marvelous designer 7 full crack macos version.
.slide-bottom
and .content-right
1,000,000
We're working to protect up to a million acres of sustainable forest.
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.
Simple CSS Alignments
Put content wherever you want.
WebSlides is really easy
Each parent
<section>
in the #webslides element is an individual slide.Exhibeo 2 0 3 – Create Beautiful Html5 Presentations Responsive
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 onSimpleSlides , by Jenn Schiffer ::)
Vertical sliding?
<article>
Optional · 500+ icons
Font Awesome as SVG icons
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
echarts
Plugins:: mermaid
Exhibeo 2 0 3 – Create Beautiful Html5 Presentations Download
Basic sequence diagram
Message to self in loop
Gantt
Flowchart support for fontawesome
Exhibeo 2 0 3 – Create Beautiful Html5 Presentations Free
Plugins:: KaTex
KaTex
equation | description |
---|---|
∇⋅B⃗=0 | divergence of B⃗ is zero |
∇×E⃗+c1∂t∂B⃗=0⃗ | curl of E⃗ is proportional to the rate of change of B⃗ |
∇×B⃗−c1∂t∂E⃗=c4πj⃗∇⋅E⃗=4πρ | wha? |
Avatar
(80, 72, 64, 56, 48, and 40).
List
- Niubility!
- WebSlides
- Webpack build in
- Markdown-it
- Posthtml
- Prismjs
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 |
Speaker Mode
Click Url + ?mode=speaker to show Speaker Mode.
U work so hard, but 干不过 write PPTs
快使用 nodeppt 轻松搞定高大上 PPT
nodeppt 助力你的人生逆袭之路!
nodeppt 助力你的人生逆袭之路!