What is In-context?
-
Wearable Tech
The In-context hoodie allows the user to record, stream audio and video to an encrupted server also with the ablity to monitor an medical conditions.
-
In-context App
Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.
-
Work better, faster.
Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.
WebSlides is really easy
Each parent <section> in the #webslides element is an individual slide.
Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast.
<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>
Features
-
→ Simple Navigation
with arrow keys, presenter... -
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.
Guides
If you need help, here's just three tutorials. Just a basic knowledge of HTML is required:
Built to expand
The best way to inspire with your content is to connect on a personal level:
- Background images: Unsplash.
- CSS animations: Animate.css.
- Longforms: Animate on scroll.
Ready to Start?
Create your own presentation instantly.
120+ premium slides ready to use.
Make a Keynote presentation using HTML
WebSlides is an open source framework for building HTML presentations, landings, and portfolios.
.bg-apple
HTML presentations can be easy
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.
WebSlides was made to inspire people.
WebSlides is a wonderful way to showcase your company. All content is for demo purposes only. Images are property of their respective owners.
WebSlides help you build a culture of excellence.
The art of storytelling. Hypertext, clean code, and beauty as narrative elements. Just essential features and lovely CSS. All content is for demo purposes only.
- Founded 1976
- 524M Subscribers
- Revenue: $16M
- Monthly Growth 64%
- Founded 1976
- 524M Subscribers
- Revenue: $16M
- Monthly Growth 64%
- 6 Offices
- 14K Employees
- $4M EBITDA
- Bank: $76B
3,456,789
iPhone 7 in first 24 hours
$48 Billion
Revenue in Q4 2024
iPhone 7
3D Touch, 12MP photos, and 4K video.
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.
iPhone 7
We worked closely with the very talented people at Acme and created a new website. Content demo.
- Client: Apple (2016)
- Services: Web Design
- Website: apple.com/iphone
-
Ultra-Fast WiFi
Faster LTE with the best worldwide roaming. -
Two cameras that shoot as one.
12MP wide angle. -
Lifetime Warranty
We'll fix it or if we can't, we'll replace it.
Pay
Redesigning Pay
We've been working with the Acme team over the last three months to build a new app.
Payments Made Simple
Apple Pay is so easy. Pay with your debit cards and credit cards with just a touch.
Secure
Your card is never stored. Apple Pay uses a device-specific number and unique transaction code.
Universal
Apple Pay works with most major credit and debit cards from nearly all banks.
-
Incredibly fast
Just hold your iPhone near the reader. -
Works with all major banks
Apple Pay is accepted in restaurants, hotels... -
The safer way to pay
Your card number is never stored.
Pay
Use your iPhone to pay securely and easily at over a million store locations and within apps — with a single touch. See where you can use Apple Pay:
I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals.
Steve Jobs.
“We see that privacy is a fundamental human right that people have. We are going to do everything that we can to help maintain that trust.”
Tim Cook, CEO of Apple.
Header .alignright
Simple CSS Alignments
Put content wherever you want.
4/9 left center
The Apple III is a business-oriented personal computer that was intended as the successor to the Apple II series.
.content-left
5/9 center
Apple Lisa was one of the first personal computers to offer a graphical user interface.
.content-center
6/9 right center
The Macintosh was the company's first mass-market personal computer featuring a GUI and mouse.
.content-right
CSS Animations
Fadein transition to all slides.
<article id="webslides">
<section>
<div class="wrap fadeInUp">
<h1>Slide</h1>
</div>
</section>
</article>
Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.
Embedding Media
YouTube API
Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.
<div class="embed"> <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay ></div> </div>
.embed (responsive)
Be Awesome
Think Different
Overlay: fullscreen.bg-black > .embed.dark or .light
One more thing...
Ag
San Francisco
The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
😎
Thank you!</h2>
</section>A bit of context
Patty McCord created Netflix's culture. She wrote the document called "Netflix Culture: Freedom & Responsibility." (2009). So far, it's been shared over 16 million times on Slideshare and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.
We seek excellence
We value candor, transparency, and courage. We embrace context and avoid control, seeking insight and understanding to make sound decisions.
Diversity & Inclusiveness
7 Aspects of our Culture
- Values are what we Value
- High Performance
- Freedom & Responsibility
- Context, not Control
- Highly Alined, Loosely Coupled
- Pay Top of Market
- Promotions & Development
1/7 Values are what we value
Make your values mean something.
Many companies have nice sounding value statements displayed in the lobby. Enron, whose leaders went to jail, and which went bankrupt from fraud had these values displayed in their lobby: integrity, communication, respect, and excellence.
9 Behaviors
At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.
- Judgment
- Communication
- Impact
- Curiosity
- Innovation
- Courage
- Passion
- Honesty
- Selflessness
7 Aspects of our Culture
- Values are what we Value
- High Performance
- Freedom & Responsibility
- Context, not Control
- Highly Alined, Loosely Coupled
- Pay Top of Market
- Promotions & Development
2/7 High Performance
-
We're a team
not a family. -
We're a pro sports team
not a kid's recreational team. -
We have stars
in every position.
Why are we so manic on high performance?
In procedural work, the best are 2x better than the average.
In creative work, the best are 10x better than the average, so huge premium on creating effective teams of the best.
Content that people love
3/7 Freedom & Responsibility
Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.
Netflix's Policy: "Act in Netflix's best interest" (5 words long).
"Act in Netflix's best interest" generally means...
- Expense only what you would otherwise not spend.
- Travel as you would if it were your own money.
- What gifts you can accept? Disclose non-trivial vendor gifts.
- Take from Netflix only when it is inefficient to not take (calls...)
Summary of Freedom & Responsibility
- As we grow, minimize rules.
- Inhibit chaos with ever more high performance people.
- Flexibility is more important than efficiency in the long term.
This is a homage.
Patty McCord wrote "Netflix Culture: Freedom & Responsibility". Go to Slideshare to read the whole document.
A quick reference guide for beginners
Videos, images, maps, and charts.
Insert images wherever you want
15 different positions.
15 Different Backgrounds
- .background (fullscreen)
- .background-top (cover)
- .background-bottom (cover)
- .background.light (opacity)
- .background.dark (opacity)
- .background-center
- .background-center-top
- .background-center-bottom
- .background-left
- .background-left-top
- .background-left-bottom
- .background-right
- .background-right-top
- .background-right-bottom
- .background-anim (animated)
.background = Fullscreen Backgrounds
How to embed Unsplash photos? →
<section>
<span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
<div class="wrap">
<h1>Slide</h1>
</div>
</section>
Position .background outside of .wrap container.
.background-(position)
.background-right-bottom
-
Ultra-Fast WiFi
Simple and secure file sharing. -
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.
.background-(position)
.background-left-bottom
-
Ultra-Fast WiFi
Simple and secure file sharing. -
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.
.background.anim
Opacity
[class*="bg-"] > .background.light
<section class="bg-black">
<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
<div class="wrap">
<h1>Slide</h1>
</div>
</section>
Opacity
[class*="bg-"] > .background.dark
<section class="bg-black">
<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
<div class="wrap">
<h1>Slide</h1>
</div>
</section>
Optional · 500+ icons
Font Awesome as SVG icons
<svg class="fa-flag"> <use xlink:href="#fa-flag"></use> </svg>
How to change icons?
- Go to fontastic.me.
- Create a free account.
- Select new icons.
- Publish as SVG sprite.
- Edit svg-icons.css and svg.icons.js.
ul.flexblock.metrics.border
- Founded 2024
- 24M Subscribers
- Revenue: $16M
- Monthly Growth 64%
- 8 Offices
- 48 Employees
- EBITDA: $2,4M
- Bank: $32M
Transparent Logos
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism.
@username, .avatar-56
img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).
Devices
-
Ultra-Fast WiFi
Simple and secure file sharing. -
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.
Screenshots
HTML/CSS Browser.
<figure class="browser"> <img alt="Screenshot" src="image.jpg"> </figure>
Videos
Background videos
<section class="fullscreen">
<div class="embed">
<video autoplay loop poster="image.jpg">
<source src="video.mp4" type="video/mp4">
</video>
</div>
</section>
.fullscreen > .embed (responsive) > video
Background videos
Transparent overlay:
<section class="fullscreen bg-blue">
<div class="embed dark">
<video autoplay muted loop poster="image.jpg">
<source src="video.mp4" type="video/mp4">
</video>
</div>
</section>
.fullscreen.bg-blue > .embed.dark (or .light) > video
Muted
Overlay: section.fullscreen.bg-blue > embed.dark or .light
Responsive Videos
Just copy and paste the code from YouTube to your slide.
<div class="embed"> <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"> </iframe> </div>
.embed (responsive)
Fullscreen YouTube Video
<section class="fullscreen">
<div class="embed">
<iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
</iframe>
</div>
</section>
.fullscreen > .embed (responsive)
YouTube API
Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.
You should use a local or a remote server since the YouTube API doesn't seem to work nicely when using the file directly on the browser.
YouTube API Parameters
Syntax: data-autoplay, data-loop, data-no-controls, data-mute.
<div class="embed"> <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop> </div> </div>
autoplay + loop
<div class="embed"> <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls> </div> </div>
autoplay + mute + no controls.
YouTube API
autoplay + loop
<div class="embed"> <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop> </div> </div>
Autoplay Feature
Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.
Let's make some magic with the YouTube API
How to make a fullscreen YouTube video? .fullscreen > .embed
<section class="fullscreen">
<div class="embed">
<div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls</div>
</div>
</section>
The video will automatically play when the slide is loaded.
Fullscreen YouTube video background
Overlaying a transparent background on an embedded Youtube video:
<section class="fullscreen bg-black">
<div class="embed dark">
<div data-youtube data-youtube-id="c9psfOxJysw" data-autoplay data-loop data-mute data-no-controls</div>
</div>
</section>
.fullscreen[class*="bg-"] > .embed.dark or .light
Overlay
.fullscreen[class*="bg-"] > .embed.dark or .light
Maps & Charts
Status of Net Neutrality around the world.
Discover Seville
.card-50.bg-white
- Density: 140/km2
- Population: 703,021
- Website: visitasevilla.es
There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies.
