1875 lines
70 KiB
HTML
1875 lines
70 KiB
HTML
<!doctype html>
|
|
<html lang="en" prefix="og: http://ogp.me/ns#">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- CLEAN MARKUP = GOOD KARMA.
|
|
Hi source code lover,
|
|
|
|
you're a curious person and a fast learner ;)
|
|
Let's make something beautiful together. Contribute on Github:
|
|
https://github.com/webslides/webslides
|
|
|
|
Thanks!
|
|
-->
|
|
|
|
<!-- SEO -->
|
|
<title>WebSlides Portfolios: Showcase your work</title>
|
|
<meta name="description" content="WebSlides is the easiest way to make HTML presentations and portfolios. It's simple, fast, and free.">
|
|
|
|
<!-- URL CANONICAL -->
|
|
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
|
|
|
<!-- CSS Base -->
|
|
<link rel="stylesheet" type='text/css' media='all' href="../static/css/webslides.css">
|
|
|
|
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
|
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
|
|
|
|
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
|
|
|
|
<!-- FACEBOOK -->
|
|
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:title" content="WebSlides is the easiest way to create a portfolio website. It is free, fast, and fun"> <!-- EDIT -->
|
|
<meta property="og:description" content="The easiest way to create a portfolio website. It is free, fast, and fun."> <!-- EDIT -->
|
|
<meta property="og:updated_time" content="2017-01-04T17:26:50"> <!-- EDIT -->
|
|
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
|
|
|
|
<!-- TWITTER -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
|
|
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
|
|
<meta name="twitter:title" content="Create your portfolio with WebSlides"> <!-- EDIT -->
|
|
<meta name="twitter:description" content="WebSlides is the easiest way to create a portfolio website. 120+ slides ready to use."> <!-- EDIT -->
|
|
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
|
|
|
|
<!-- FAVICONS -->
|
|
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
|
|
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
|
|
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
|
|
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
|
|
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
|
|
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
|
|
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
|
|
|
|
<!-- Android -->
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="theme-color" content="#333333">
|
|
</head>
|
|
<body>
|
|
<header role="banner">
|
|
<nav role="navigation">
|
|
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
|
|
<ul>
|
|
<li class="github">
|
|
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
|
|
<svg class="fa-github">
|
|
<use xlink:href="#fa-github"></use>
|
|
</svg>
|
|
<em>WebSlides</em>
|
|
</a>
|
|
</li>
|
|
<li class="twitter">
|
|
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
|
<svg class="fa-twitter">
|
|
<use xlink:href="#fa-twitter"></use>
|
|
</svg>
|
|
<em>@WebSlides</em>
|
|
</a>
|
|
</li>
|
|
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main role="main">
|
|
<article id="webslides">
|
|
|
|
<!-- Quick Guide
|
|
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
|
- Vertical sliding = <article id="webslides" class="vertical">
|
|
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
|
|
-->
|
|
|
|
<section class="bg-primary">
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/oHrodCLNnU8/')"></span>
|
|
<div class="wrap aligncenter">
|
|
<h1 class="text-landing">Portfolios</h1>
|
|
<p class="text-symbols">* * * </p>
|
|
<p><a class="button ghost" href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free"><svg class="fa-cloud-download">
|
|
<use xlink:href="#fa-cloud-download"></use>
|
|
</svg> WebSlides</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap aligncenter">
|
|
<p class="text-subtitle">Design faster, better.</p>
|
|
<h2>Create a beautiful portfolio for your work</h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap">
|
|
<div class="grid vertical-align">
|
|
<div class="column">
|
|
<h3><strong>WebSlides is really easy</strong></h3>
|
|
<p class="text-intro">Each parent <code><section></code> in the #webslides element is an individual slide. </p>
|
|
<p>Code looks superb. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a>. <strong>Tutorials</strong>: <a href="../demos/components.html" title="WebSlides Components">Components</a> · <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p>
|
|
</div>
|
|
<!-- .end .column -->
|
|
<div class="column">
|
|
<pre><article id="webslides">
|
|
<span class="code-comment"><!-- Slide 1 --></span>
|
|
<section>
|
|
<h1>Design for trust</h1>
|
|
</section>
|
|
<span class="code-comment"><!-- Slide 2 --></span>
|
|
<section class="bg-primary">
|
|
<div class="wrap">
|
|
<h2>.wrap = container (width: 90%)</h2>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</pre>
|
|
</div>
|
|
<!-- .end .column -->
|
|
</div>
|
|
<!-- .end .grid -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-50">
|
|
<h3>Examples</h3>
|
|
<p>All content is for demo purposes only.</p>
|
|
<hr>
|
|
<ol class="text-cols">
|
|
<li><a target="_blank" href="#slide=5">Welcomes & Abouts</a></li>
|
|
<li><a target="_blank" href="#slide=9">Covers & Case Studies</a></li>
|
|
<li><a target="_blank" href="#slide=16">Metrics & Data</a></li>
|
|
<li><a target="_blank" href="#slide=22">Services & Clients</a></li>
|
|
<li><a target="_blank" href="#slide=28">Galleries</a></li>
|
|
<li><a target="_blank" href="#slide=33">Cards</a></li>
|
|
<li><a target="_blank" href="#slide=36">Features & Benefits</a></li>
|
|
<li><a target="_blank" href="#slide=41">CV/Resumé</a></li>
|
|
<li><a target="_blank" href="#slide=45">Quotes</a></li>
|
|
<li><a target="_blank" href="#slide=49">SVG Icons</a></li>
|
|
<li><a target="_blank" href="#slide=50">Logos</a></li>
|
|
<li><a target="_blank" href="#slide=51">CSS Alignments</a></li>
|
|
<li><a target="_blank" href="#slide=62">CSS Animations</a></li>
|
|
<li><a target="_blank" href="#slide=67">Background images</a></li>
|
|
<li><a target="_blank" href="#slide=70">Embedding videos, maps, charts...</a></li>
|
|
<li><a target="_blank" href="#slide=76">Typography</a></li>
|
|
</ol>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h1>Design <span>for</span> trust</h1>
|
|
<ul class="flexblock blink border">
|
|
<li>
|
|
<a href="#">
|
|
<h2>
|
|
<svg class="fa-bar-chart">
|
|
<use xlink:href="#fa-bar-chart"></use>
|
|
</svg>
|
|
Purpose
|
|
</h2>
|
|
Businesses that people love
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="">
|
|
<h2>
|
|
<svg class="fa-balance-scale">
|
|
<use xlink:href="#fa-balance-scale"></use>
|
|
</svg>
|
|
Principles
|
|
</h2>
|
|
Ethics of openness and good taste
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<h2>
|
|
<svg class="fa-cog">
|
|
<use xlink:href="#fa-cog"></use>
|
|
</svg>
|
|
Process
|
|
</h2>
|
|
Useful → Easy → Fast → Beautiful
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-primary">
|
|
<div class="wrap">
|
|
<h1>Design <span>for</span> understanding</h1>
|
|
<ul class="flexblock features fadeInUp">
|
|
<li>
|
|
<div>
|
|
<h2><span>100<sup>%</sup></span> purpose</h2>
|
|
Businesses that people love
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<svg class="fa-heart-o">
|
|
<use xlink:href="#fa-heart-o"></use>
|
|
</svg>
|
|
Principles
|
|
</h2>
|
|
Useful → Easy → Fast → Beautiful
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<h2>We make interfaces and content strategy.</h2>
|
|
</div>
|
|
<!-- end .content-left -->
|
|
<div class="content-left">
|
|
<p>We are digital people by nature. When we develop a vision, it is based on knowledge, research and experience. Those images are for demo purposes only.</p>
|
|
</div>
|
|
<!-- end .content-left -->
|
|
<ul class="flexblock zoomIn">
|
|
<li>
|
|
<div>
|
|
<img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<img class="blacklogo" src="../static/images/logos/instagram.svg" alt="Instagram">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h3>How we work?</h3>
|
|
<ul class="flexblock steps">
|
|
<!-- li>a? Add blink = <ul class="flexblock steps blink">-->
|
|
<li>
|
|
<span>
|
|
<svg class="fa-heartbeat">
|
|
<use xlink:href="#fa-heartbeat"></use>
|
|
</svg>
|
|
</span>
|
|
<h2>01. Passion</h2>
|
|
<p>When you're really passionate about your job, you can change the world.</p>
|
|
</li>
|
|
<li>
|
|
<div class="process step-2"></div>
|
|
<span>
|
|
<svg class="fa-magic">
|
|
<use xlink:href="#fa-magic"></use>
|
|
</svg>
|
|
</span>
|
|
<h2>02. Purpose</h2>
|
|
<p>Why does this business exist? How are you different? Why matters?</p>
|
|
</li>
|
|
<li>
|
|
<div class="process step-3"></div>
|
|
<span>
|
|
<svg class="fa-balance-scale">
|
|
<use xlink:href="#fa-balance-scale"></use>
|
|
</svg>
|
|
</span>
|
|
<h2>03. Principles</h2>
|
|
<p>Leadership through openness, empathy, usefulness, and good taste.</p>
|
|
</li>
|
|
<li>
|
|
<div class="process step-4"></div>
|
|
<span>
|
|
<svg class="fa-cog">
|
|
<use xlink:href="#fa-cog"></use>
|
|
</svg>
|
|
</span>
|
|
<h2>04. Process</h2>
|
|
<ul>
|
|
<li>Useful</li>
|
|
<li>Easy</li>
|
|
<li>Fast</li>
|
|
<li>Beautiful</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="aligncenter">
|
|
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/xxeAftHHq6E/')"></span>
|
|
<div class="wrap">
|
|
<h2 class="text-landing"><strong>Covers</strong></h2>
|
|
</div>
|
|
</section>
|
|
<section class="bg-black-blue">
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/LW3FskrgQ9M/')"></span>
|
|
<div class="wrap size-50">
|
|
<p class="text-subtitle">Mercedes-Benz</p>
|
|
<h2>Defining a new platform for the connected car</h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/yssUhIxbUZA/')"></span>
|
|
<div class="wrap">
|
|
<div class="content-left bg-trans-dark fadeInUp">
|
|
<img class="whitelogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
|
|
<hr>
|
|
<h2><strong>Designing Experiences</strong></h2>
|
|
<p>Meet locals who share your interests.</p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-apple">
|
|
<span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
|
<div class="wrap">
|
|
<div class="content-right">
|
|
<h2>
|
|
Redesigning
|
|
<svg class="fa-apple">
|
|
<use xlink:href="#fa-apple"></use>
|
|
</svg>
|
|
Pay
|
|
</h2>
|
|
<p>Content demo. We've been working with the Acme team over the last three months to build a new app.</p>
|
|
<p>
|
|
<a href="#" class="button" title="Case study">Case study ›</a>
|
|
<a href="https://www.apple.com/apple-pay/" class="button ghost" title="Apple Website">Open site ›</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-gradient-white">
|
|
<span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<p class="text-subtitle">Christmas Campaign 2016</p>
|
|
<h2>A new home for Apple
|
|
</h2>
|
|
<p>We established visual branding and photography direction. All content is for demo purposes only. </p>
|
|
<p>
|
|
<a href="#" class="button" title="Case study">Case study ›</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="grid vertical-align">
|
|
<div class="column">
|
|
<h2>
|
|
A Phone by Google
|
|
</h2>
|
|
<p class="text-intro">We worked closely with the very talented people at Acme and created a new website. Content demo. </p>
|
|
<ul class="description">
|
|
<li>
|
|
<span class="text-label">
|
|
Client:
|
|
</span>
|
|
Google (2016)
|
|
</li>
|
|
<li>
|
|
<span class="text-label">
|
|
Services:
|
|
</span>
|
|
Web Design
|
|
</li>
|
|
<li>
|
|
<span class="text-label">
|
|
Website:
|
|
</span>
|
|
<a href="https://madeby.google.com/phone/">madeby.google.com/phone</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- end .column-->
|
|
<div class="column">
|
|
<figure>
|
|
<img src="../static/images/android.png" alt="Pixel Phone">
|
|
</figure>
|
|
</div>
|
|
<!-- end figure-->
|
|
</div>
|
|
<!-- end .grid-->
|
|
</div>
|
|
<!-- end .wrap-->
|
|
</section>
|
|
<section class="aligncenter">
|
|
<div class="wrap size-50">
|
|
<figure class="browser">
|
|
<a href="#" title="Title"><img src="https://webslides.tv/static/images/cover-apple.jpg" alt="Screenshot"></a>
|
|
</figure>
|
|
<p>HTML/CSS Browser: <code>.browser</code></p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Metrics & Data</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<h2>WebSlides help you build a culture of innovation.</h2>
|
|
</div>
|
|
<!-- end .content-left -->
|
|
<div class="content-left">
|
|
<p>Everyone loves stories. WebSlides is about good karma. Hypertext, clean code, and beauty as narrative elements. All content is for demo purposes only.</p>
|
|
</div>
|
|
<!-- end .content-left -->
|
|
<ul class="flexblock metrics">
|
|
<li> Founded
|
|
<span>1976</span>
|
|
</li>
|
|
<li>
|
|
<span>120+</span>
|
|
Prebuilt Slides
|
|
</li>
|
|
<li>
|
|
<span>
|
|
<svg class="fa-users">
|
|
<use xlink:href="#fa-users"></use>
|
|
</svg>
|
|
</span>
|
|
24M Downloads
|
|
</li>
|
|
<li>
|
|
<span>
|
|
<svg class="fa-line-chart">
|
|
<use xlink:href="#fa-line-chart"></use>
|
|
</svg>
|
|
</span>
|
|
Revenue: $16M
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-green">
|
|
<div class="wrap">
|
|
<!-- li>a? Add blink (block link) = <ul class="flexblock metrics blink">-->
|
|
<ul class="flexblock metrics border">
|
|
<li> Founded
|
|
<span>2032</span>
|
|
</li>
|
|
<li>
|
|
<span>
|
|
<svg class="fa-users">
|
|
<use xlink:href="#fa-users"></use>
|
|
</svg>
|
|
</span>
|
|
24M Subscribers
|
|
</li>
|
|
<li>
|
|
<span>
|
|
<svg class="fa-line-chart">
|
|
<use xlink:href="#fa-line-chart"></use>
|
|
</svg>
|
|
</span>
|
|
Revenue: $16M
|
|
</li>
|
|
<li>
|
|
Monthly Growth
|
|
<span>64%</span>
|
|
</li>
|
|
<li>
|
|
<span>
|
|
<svg class="fa-building-o">
|
|
<use xlink:href="#fa-building-o"></use>
|
|
</svg>
|
|
</span>
|
|
8 Offices
|
|
</li>
|
|
<li>
|
|
<span>
|
|
<svg class="fa-smile-o">
|
|
<use xlink:href="#fa-smile-o"></use>
|
|
</svg>
|
|
</span>
|
|
48 Employees
|
|
</li>
|
|
<li>
|
|
<span>
|
|
<svg class="fa-usd">
|
|
<use xlink:href="#fa-usd"></use>
|
|
</svg>
|
|
</span>
|
|
EBITDA: $2,4M
|
|
</li>
|
|
<li>
|
|
<span>
|
|
<svg class="fa-university">
|
|
<use xlink:href="#fa-university"></use>
|
|
</svg>
|
|
</span>
|
|
Bank: $32M
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-black aligncenter">
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/rCOWMC8qf8A/')"></span>
|
|
<div class="wrap">
|
|
<h2 class="text-data">3,456,789</h2>
|
|
<h3>downloads in first 48 hours </h3>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-black slide-bottom">
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/RSOxw9X-suY/')"></span>
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<p>
|
|
<svg class="large fa-tree">
|
|
<use xlink:href="#fa-tree"></use>
|
|
</svg>
|
|
</p>
|
|
<h2>1,000,000</h2>
|
|
<h3>We're working to protect up to a million acres of sustainable forest.</h3>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-apple aligncenter">
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap">
|
|
<h2 class="text-data">$48 Billion</h2>
|
|
<h3>Revenue in Q2 2019</h3>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Services & Clients</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-black-blue">
|
|
<div class="wrap">
|
|
<div class="grid">
|
|
<div class="column">
|
|
<h3>
|
|
<strong>
|
|
<svg class="fa-line-chart">
|
|
<use xlink:href="#fa-line-chart"></use>
|
|
</svg>
|
|
Interfaces
|
|
</strong>
|
|
</h3>
|
|
<p>Design for growth. We've built a team of world-class designers, developers, and managers.</p>
|
|
</div>
|
|
<div class="column">
|
|
<h3>
|
|
<svg class="fa-film">
|
|
<use xlink:href="#fa-film"></use>
|
|
</svg>
|
|
Videos
|
|
</h3>
|
|
<p>We connect your audience needs, business goals, and brand values into a strategy. </p>
|
|
</div>
|
|
<div class="column">
|
|
<h3>
|
|
<strong>
|
|
<svg class="fa-users">
|
|
<use xlink:href="#fa-users"></use>
|
|
</svg>
|
|
Recruiting
|
|
</strong>
|
|
</h3>
|
|
<p>We offer personalized services with deep expertise in design and technology.</p>
|
|
</div>
|
|
<div class="column">
|
|
<h3>
|
|
<svg class="fa-graduation-cap">
|
|
<use xlink:href="#fa-graduation-cap"></use>
|
|
</svg>
|
|
Formation
|
|
</h3>
|
|
<p>We train teams to help organizations succeed in the digital age.</p>
|
|
</div>
|
|
</div>
|
|
<!-- end .grid-->
|
|
<hr>
|
|
<p><code>.grid > .column</code></p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h3>Services</h3>
|
|
<p><code>ul.flexblock</code> (flexible blocks).</p>
|
|
<ul class="flexblock">
|
|
<li>
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<h3>Interfaces</h3>
|
|
<ol>
|
|
<li>Architecture</li>
|
|
<li>Design</li>
|
|
<li>Development</li>
|
|
</ol>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<h3>Content Strategy</h3>
|
|
Beautiful and engaging stories that inspires consumers to take action.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<h3>Customer Experience</h3>
|
|
Attitude. Little details. People always remember how you made them feel.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<h3>Recruitment</h3>
|
|
We like to help startups by working with them since the beginning.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h3>Services</h3>
|
|
<p><code>ul.flexblock.border.blink</code> (.blink = block link)</p>
|
|
<ul class="flexblock blink border">
|
|
<li>
|
|
<a href="#" title="Block Link = .blink">
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<h3>Interfaces</h3>
|
|
<ol>
|
|
<li>Architecture</li>
|
|
<li>Design</li>
|
|
<li>Development</li>
|
|
</ol>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Block Link = .blink">
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<h3>Content Strategy</h3>
|
|
Beautiful and engaging stories that inspires consumers to take action.
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Block Link = .blink">
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<h3>Customer Experience</h3>
|
|
Attitude. Little details. People always remember how you made them feel.
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="">
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<h3>Recruitment</h3>
|
|
We like to help startups by working with them since the beginning.
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Block Link = .blink">
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<img class="aligncenter" src="../static/images/logos/google.svg" alt="Google"> Collaboration with the Acme team to design their mobile apps.
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Block Link = .blink">
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<img class="aligncenter blacklogo" src="../static/images/logos/google.svg" alt="Google"> We worked closely with the UX team on photography for the site. <code>img.blacklogo</code>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Block Link = .blink">
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<img class="aligncenter graylogo" src="../static/images/logos/google.svg" alt="Google"> Acme hired us to help make the reading experience totally engaging. <code>img.graylogo</code>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="bg-blue">
|
|
<a href="#" title="Block Link = .blink">
|
|
<!--div required = padding li or li>a-->
|
|
<div>
|
|
<img class="aligncenter whitelogo" src="../static/images/logos/google.svg" alt="Google"> We worked with Acme to develop recruiting processes. <code>img.whitelogo</code>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h2>Clients</h2>
|
|
<p><code>ul.flexblock.clients</code></p>
|
|
<ul class="flexblock clients">
|
|
<li>
|
|
<a href="#" title="Client">
|
|
<figure>
|
|
<img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
|
|
<figcaption>
|
|
<h3>Interfaces</h3>
|
|
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Client">
|
|
<figure>
|
|
<img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
|
|
<figcaption>
|
|
<h3>Brand</h3>
|
|
<p>We worked with the UX team on photography for the site <code>img.blacklogo</code></p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Client">
|
|
<figure>
|
|
<img class="blacklogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
|
|
<figcaption>
|
|
<h3>Recruiting</h3>
|
|
<p>We worked with the design team to develop recruiting processes. <code>img.blacklogo</code></p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Client">
|
|
<figure>
|
|
<img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
|
|
<figcaption>
|
|
<h3>Interfaces</h3>
|
|
<p>We partnered with various Airbnb divisions to create a campaign for Airbnb Trips.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h2>Clients</h2>
|
|
<p><code>ul.flexblock.clients.border</code></p>
|
|
<ul class="flexblock clients border">
|
|
<li>
|
|
<a href="#" title="Client">
|
|
<figure>
|
|
<img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
|
|
<figcaption>
|
|
<h3>Interfaces</h3>
|
|
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Client">
|
|
<figure>
|
|
<img class="blacklogo" src="../static/images/logos/netflix.svg" alt="Netflix">
|
|
<figcaption>
|
|
<h3>Brand</h3>
|
|
<p>We worked with the UX team on photography for the site <code>img.blacklogo</code></p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Client">
|
|
<figure>
|
|
<img class="blacklogo" src="../static/images/logos/microsoft.svg" alt="Microsoft">
|
|
<figcaption>
|
|
<h3>Recruiting</h3>
|
|
<p>We worked with the design team to develop recruiting processes. <code>img.blacklogo</code></p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Client">
|
|
<figure>
|
|
<img class="blacklogo" src="../static/images/logos/airbnb.svg" alt="Airbnb">
|
|
<figcaption>
|
|
<h3>Interfaces</h3>
|
|
<p>We partnered with various Airbnb divisions to create a campaign for Airbnb Trips.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Galleries</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<p><code>.flexblock.gallery</code></p>
|
|
<hr>
|
|
<ul class="flexblock gallery">
|
|
<li>
|
|
<a href="../demos/why-webslides.html" title="Why WebSlides?">
|
|
<figure>
|
|
<img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
|
|
<figcaption>
|
|
<h2>Why WebSlides?</h2>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="../demos/landings.html" title="Landings">
|
|
<figure>
|
|
<img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
|
|
<figcaption>
|
|
<h2>Landings</h2>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="../demos/portfolios.html" title="Portfolios">
|
|
<figure>
|
|
<img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
|
|
<figcaption>
|
|
<h2>Portfolios</h2>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="../demos/keynote.html" title="Apple Keynote">
|
|
<figure>
|
|
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
|
|
<figcaption>
|
|
<h2>Apple Keynote</h2>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h3>Team</h3>
|
|
<p><code>.flexblock.gallery</code></p>
|
|
<ul class="flexblock gallery">
|
|
<li>
|
|
<a href="#">
|
|
<figure>
|
|
<img alt="Thumbnail " src="https://source.unsplash.com/E6MWxCjNhYs/800x600">
|
|
<figcaption>
|
|
<h2>Alicia Jiménez</h2>
|
|
<p>Founder & CEO</p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<figure>
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/6anudmpILw4/800x600">
|
|
<figcaption>
|
|
<h2>Sam Trololovitz</h2>
|
|
<p>Master of nothing</p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<figure>
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/IFxjDdqK_0U/800x600">
|
|
<figcaption>
|
|
<h2>Erin Gustafson</h2>
|
|
<p>VP of Design</p>
|
|
</figcaption>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h3>Team</h3>
|
|
<p><code>.flexblock.gallery</code></p>
|
|
<ul class="flexblock gallery">
|
|
<li>
|
|
<a href="#">
|
|
<figure>
|
|
<img alt="Thumbnail " src="https://source.unsplash.com/IFxjDdqK_0U/800x600">
|
|
<div class="overlay">
|
|
<h2>Mila Yang</h2>
|
|
<p>The Boss</p>
|
|
</div>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<figure>
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/zhkTCCmD4xI/800x600">
|
|
<div class="overlay">
|
|
<h2>Shin Ahmed</h2>
|
|
<p>CTO</p>
|
|
</div>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<figure>
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/uPGOEbjbVGA/800x600">
|
|
<div class="overlay">
|
|
<h2>Julia Porter</h2>
|
|
<p>Digital Designer</p>
|
|
</div>
|
|
</figure>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<p><code>.flexblock.gallery</code></p>
|
|
<ul class="flexblock gallery">
|
|
<li>
|
|
<a href="#">
|
|
<div class="overlay">
|
|
<h2>Watchly</h2>
|
|
<p>Dec 12, 2018</p>
|
|
</div>
|
|
<img alt="Thumbnail " src="https://source.unsplash.com/A5-Xr7WyktQ/800x600">
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="overlay">
|
|
<h2>Camour</h2>
|
|
<p>Nov 18, 2017</p>
|
|
</div>
|
|
<img alt="Thumbnail " src="https://source.unsplash.com/kt_s46DVgJA/800x600">
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Cards</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="card-50 bg-white">
|
|
<figure>
|
|
<img src="https://source.unsplash.com/BoBmrZ8epMA/800x600" alt="Mobile Screenshot">
|
|
<figcaption>
|
|
<a href="https://unsplash.com/@anniespratt">
|
|
<svg class="fa-camera">
|
|
<use xlink:href="#fa-camera"></use>
|
|
</svg>
|
|
Annie Spratt (Unsplash)
|
|
</a>
|
|
</figcaption>
|
|
</figure>
|
|
<!-- end figure-->
|
|
<div class="flex-content">
|
|
<h2>
|
|
Travis
|
|
</h2>
|
|
<p>.card-50.bg-white</p>
|
|
<p>
|
|
Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro.
|
|
</p>
|
|
<ul class="description">
|
|
<li>
|
|
<strong class="text-label">Role:</strong> Content Strategy
|
|
</li>
|
|
<li><strong class="text-label">Client:</strong> Travis</li>
|
|
<li><strong class="text-label">Year:</strong> 2017</li>
|
|
</ul>
|
|
</div>
|
|
<!-- end .flex-content-->
|
|
</div>
|
|
<!-- end .card-60-->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="fullscreen">
|
|
<div class="card-50">
|
|
<figure>
|
|
<img src="https://source.unsplash.com/vCF5sB7QecM/" alt="iWatch">
|
|
<figcaption>
|
|
<a href="https://unsplash.com/@crew" title="By Crew">
|
|
<svg class="fa-camera">
|
|
<use xlink:href="#fa-camera"></use>
|
|
</svg>
|
|
Crew (Unsplash)
|
|
</a>
|
|
</figcaption>
|
|
</figure>
|
|
<!-- end figure-->
|
|
<div class="flex-content">
|
|
<h2>Watchly
|
|
</h2>
|
|
<p>.fullscreen > .card-50</p>
|
|
<p class="text-intro">These days it's easy to make interfaces. There are a lot of
|
|
frameworks out there, but it's still really hard to make a great interface.
|
|
</p>
|
|
<ul class="description">
|
|
<li>
|
|
<strong class="text-label">Role:</strong> Frontend
|
|
</li>
|
|
<li><strong class="text-label">Client:</strong> Acme</li>
|
|
<li><strong class="text-label">Year:</strong> 2018</li>
|
|
</ul>
|
|
</div>
|
|
<!-- end .flex-content-->
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Features & Benefits</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h2>Features</h2>
|
|
<ul class="flexblock features">
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<span>→</span>
|
|
Simple Navigation
|
|
</h2>
|
|
with arrow keys and swipe.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<svg class="fa-link">
|
|
<use xlink:href="#fa-link"></use>
|
|
</svg>
|
|
Permalinks
|
|
</h2>
|
|
Go to a specific slide.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<svg class="fa-clock-o">
|
|
<use xlink:href="#fa-clock-o"></use>
|
|
</svg>
|
|
Slide Counter
|
|
</h2>
|
|
Current/Total number
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<span>40<sup>+</sup></span>
|
|
Beautiful Components
|
|
</h2>
|
|
Covers, cards, quotes...
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<svg class="fa-text-height">
|
|
<use xlink:href="#fa-text-height"></use>
|
|
</svg>
|
|
Vertical Rhythm
|
|
</h2>
|
|
Use multiples of 8.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<h2>
|
|
<span>500<sup>+</sup></span>
|
|
SVG Icons
|
|
</h2>
|
|
Font Awesome Kit.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
|
<div class="wrap">
|
|
<div class="content-right">
|
|
<ul class="flexblock specs">
|
|
<li>
|
|
<div>
|
|
<svg class="fa-bolt">
|
|
<use xlink:href="#fa-bolt"></use>
|
|
</svg>
|
|
<h2>Incredibly fast</h2>
|
|
Just hold your iPhone near the reader.
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<svg class="fa-globe">
|
|
<use xlink:href="#fa-globe"></use>
|
|
</svg>
|
|
<h2>Works with all major banks</h2>
|
|
Apple Pay is accepted in restaurants, hotels...
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<svg class="fa-lock">
|
|
<use xlink:href="#fa-lock"></use>
|
|
</svg>
|
|
<h2>The safer way to pay</h2>
|
|
Your card number is never stored.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<span class="background-right" style="background-image:url('../static/images/iphone.png')"></span>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<h2>Call to action</h2>
|
|
<p>WebSlides help you build a culture of innovation. Leadership through openness and good taste.</p>
|
|
<div class="content-left">
|
|
<h3>Benefit 1</h3>
|
|
<p>The easiest way to make HTML presentations. Incredibly versatile. 120+ slides.</p>
|
|
</div>
|
|
<!-- .end .content-left -->
|
|
<div class="content-left">
|
|
<h3>Benefit 2</h3>
|
|
<p>The art of storytelling. Inspire teams, fascinate customers, and gain attention from investors.</p>
|
|
</div>
|
|
<!-- .end .content-left -->
|
|
</div>
|
|
<!-- .end .content-left -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h2>.grid > .column</h2>
|
|
<hr>
|
|
<div class="grid">
|
|
<div class="column">
|
|
<svg class="fa-desktop large">
|
|
<use xlink:href="#fa-desktop"></use>
|
|
</svg>
|
|
<h3>Service</h3>
|
|
<p>We make interfaces and help organizations connect with their audience.</p>
|
|
</div>
|
|
<div class="column">
|
|
<svg class="fa-globe large">
|
|
<use xlink:href="#fa-globe"></use>
|
|
</svg>
|
|
<h3>Benefit 2</h3>
|
|
<p>We are specialists in branding for organizations with a global market in mind.</p>
|
|
</div>
|
|
<div class="column">
|
|
<h3>
|
|
<svg class="fa-line-chart">
|
|
<use xlink:href="#fa-line-chart"></use>
|
|
</svg>
|
|
About 3
|
|
</h3>
|
|
<p>Over the years we've been fortunate to work with some of the most respected brands in the world.</p>
|
|
</div>
|
|
<div class="column">
|
|
<h3>
|
|
<svg class="fa-magic">
|
|
<use xlink:href="#fa-magic"></use>
|
|
</svg>
|
|
Feature 4
|
|
</h3>
|
|
<p>Finally, everything you need to make HTML presentations in a simple way.</p>
|
|
</div>
|
|
</div>
|
|
<!-- end .grid-->
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>CV/Resumé</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h2>Worked with</h2>
|
|
<ul class="flexblock border blink">
|
|
<li>
|
|
<a href="">
|
|
<h3>Google</h3>
|
|
2020.- Google Drive
|
|
</a>
|
|
</li>
|
|
<li><a href=""><strong>Facebook</strong> 2019.- F8 Conference</a></li>
|
|
<li><a href=""><strong>The New York Times</strong>2017.- Recruitment</a></li>
|
|
<li><a href=""><strong>Netflix</strong> 2016.- Mobile Apps</a></li>
|
|
<li><a href=""><strong>Airbnb</strong>2016.- Creative Direction</a></li>
|
|
<li><a href=""><strong>Microsoft</strong> 2016.- Content Strategy</a></li>
|
|
<li><a href=""><strong>Instagram</strong>2015.- Identity</a></li>
|
|
<li><a href=""><strong>Spotify</strong> 2014.- TV Commercials</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<ul class="work">
|
|
<li class="work-label">
|
|
<p class="work-work">Work</p>
|
|
<p class="work-client">Client</p>
|
|
<p class="work-services">Services</p>
|
|
<p class="work-date">Year</p>
|
|
</li>
|
|
<li>
|
|
<a href="#" rel="external">
|
|
<p class="work-work"><span>Redesign of Netflix</span></p>
|
|
<p class="work-client"><span>Netflix</span></p>
|
|
<p class="work-services"><span>Frontend</span></p>
|
|
<p class="work-date"><span>2015-2016</span></p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" rel="external">
|
|
<p class="work-work"><span>Airbnb TV Commercials</span></p>
|
|
<p class="work-client"><span>Airbnb</span></p>
|
|
<p class="work-services"><span>Video, Storytelling</span></p>
|
|
<p class="work-date"><span>2015</span></p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" rel="external">
|
|
<p class="work-work"><span>Tesla Software</span></p>
|
|
<p class="work-client"><span>Tesla Motors</span></p>
|
|
<p class="work-services"><span>Visual Design</span></p>
|
|
<p class="work-date"><span>2014</span></p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<ul class="flexblock activity">
|
|
<li>
|
|
<a href="#" title="VP of Designer at ACME">
|
|
<p class="year">
|
|
2016
|
|
</p>
|
|
<p class="title">
|
|
VP of Designer at ACME
|
|
</p>
|
|
<p class="summary">
|
|
This is a job description for the VP of Design role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Co-Founder of Delta">
|
|
<p class="year">
|
|
2015
|
|
</p>
|
|
<p class="title">
|
|
Co-Founder of Delta
|
|
</p>
|
|
<p class="summary">
|
|
The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" title="Co-Founder of GAMMA">
|
|
<p class="year">
|
|
2013
|
|
</p>
|
|
<p class="title">
|
|
Interaction Designer at GAMMA
|
|
</p>
|
|
<p class="summary">
|
|
Authority is distributed, though not evenly or permanently. Keep it simple. Be concise. 2-3 lines recommended.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Quotes</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap size-50 aligncenter">
|
|
<h2><strong>Why WebSlides?</strong></h2>
|
|
<blockquote>
|
|
<p>"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides."</p>
|
|
<p><cite> <img class="avatar-40" src="../static/images/avatar.jpg" alt="Avatar"> <a href="http://twitter.com/jlantunez/">@jlantunez</a></cite></p>
|
|
</blockquote>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-black-blue">
|
|
<!--.wrap = container (width: 90%) -->
|
|
<div class="wrap">
|
|
<blockquote class="text-quote">
|
|
<p>When I'm working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful, I know it is wrong.</p>
|
|
<p><cite><a href="https://en.wikipedia.org/wiki/Buckminster_Fuller">R. Buckminster Fuller</a>.</cite></p>
|
|
</blockquote>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<span class="background-left-bottom" style="background-image:url('https://webslides.tv/static/images/satya.png')"></span>
|
|
<div class="wrap">
|
|
<div class="content-right">
|
|
<blockquote>
|
|
<p>"There is something only a CEO uniquely can do, which is set that tone, which can then capture the soul of the collective."</p>
|
|
<p><cite>Satya Nadella, CEO of Microsoft.</cite></p>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-50">
|
|
<p class="text-subtitle">Optional · 500+ icons</p>
|
|
<h2>
|
|
<a href="http://fontawesome.io/icons/">
|
|
<svg class="fa-flag">
|
|
<use xlink:href="#fa-flag"></use>
|
|
</svg>
|
|
Font Awesome
|
|
</a>
|
|
as SVG icons
|
|
</h2>
|
|
<pre><svg class="fa-flag">
|
|
<use xlink:href="#fa-flag"></use>
|
|
</svg></pre>
|
|
<p>How to change icons?</p>
|
|
<ol class="text-cols">
|
|
<li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
|
|
<li>Create a free account.</li>
|
|
<li>Select new icons.</li>
|
|
<li>Publish as SVG sprite.</li>
|
|
<li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
|
|
</ol>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h2>Transparent Logos</h2>
|
|
<p>
|
|
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
|
|
</p>
|
|
<hr>
|
|
<ul class="flexblock">
|
|
<li>
|
|
<div>
|
|
<img src="../static/images/logos/google.svg" alt="Google">
|
|
<p><strong>Height recommended</strong>: 48px</p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<img class="blacklogo" src="../static/images/logos/google.svg" alt="Google">
|
|
<code>img.blacklogo</code>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div>
|
|
<img class="graylogo" src="../static/images/logos/google.svg" alt="Google">
|
|
<code>img.graylogo</code>
|
|
</div>
|
|
</li>
|
|
<li class="bg-green">
|
|
<div>
|
|
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
|
|
<code>img.whitelogo</code>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>CSS Alignments</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<header>
|
|
<!--.wrap o <nav> = container 1200px -->
|
|
<div class="wrap">
|
|
<p class="logo"><a href="#" title="Logo">Logo</a> <span class="alignright">.alignright</span></p>
|
|
</div>
|
|
</header>
|
|
<div class="aligncenter fadeInUp">
|
|
<h2>Simple CSS Alignments</h2>
|
|
<p>Put content wherever you want.</p>
|
|
</div>
|
|
<footer>
|
|
<div class="wrap">
|
|
<p>
|
|
<span class="alignleft">
|
|
Footer
|
|
</span>
|
|
<span class="alignright">
|
|
<a href="#" title="Twitter">
|
|
<svg class="fa-twitter">
|
|
<use xlink:href="#fa-twitter"></use>
|
|
</svg>
|
|
@username
|
|
</a>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
<section class="slide-top">
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<h3>1/9 left top</h3>
|
|
<p>Put content wherever you want. Have less. Do more. Create beautiful solutions.</p>
|
|
<p><code>.slide-top and .content-left</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="slide-top">
|
|
<div class="wrap">
|
|
<div class="content-center">
|
|
<h3>2/9 center top</h3>
|
|
<p>Beauty is a concept based on aesthetics which is quite subjective and cultural.</p>
|
|
<p><code>.slide-top and .content-center</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="slide-top">
|
|
<div class="wrap">
|
|
<div class="content-right">
|
|
<h3>3/9 right top</h3>
|
|
<p>Harmony and admiration are two universal elements which guide us in order to consider something beautiful.</p>
|
|
<p><code>.slide-top and .content-right</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<h3>4/9 left center</h3>
|
|
<p>The term interaction design was first coined by Bill Moggridge and Bill Verplank in the mid-1980s.</p>
|
|
<p><code>.content-left</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="content-center">
|
|
<h3>5/9 center</h3>
|
|
<p>Emotional and pleasure theories exist to explain people's responses to the use of interactive products.</p>
|
|
<p><code>.content-center</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="content-right">
|
|
<h3>6/9 right center</h3>
|
|
<p>Simplicity is a major concern in interaction design. The aim is clarity.</p>
|
|
<p><code>.content-right</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="slide-bottom">
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<h3>7/9 left bottom</h3>
|
|
<p>Information architecture is the structural design of shared information environments.</p>
|
|
<p><code>.slide-bottom</code> and <code>.content-left</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="slide-bottom">
|
|
<div class="wrap">
|
|
<div class="content-center">
|
|
<h3>8/9 center bottom</h3>
|
|
<p>The "a-ha moment" is the moment where there is suddenly a clear forward path.</p>
|
|
<p><code>.slide-bottom</code> and <code>.content-center</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="slide-bottom">
|
|
<div class="wrap">
|
|
<div class="content-right">
|
|
<h3>9/9 right bottom</h3>
|
|
<p>Philosophy of language seeks to understand the relationship between language and reality.</p>
|
|
<p><code>.slide-bottom</code> and <code>.content-right</code></p>
|
|
</div>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-50">
|
|
<h2>CSS Animations</h2>
|
|
<p>Fadein transition to all slides.</p>
|
|
<pre><article id="webslides">
|
|
<section>
|
|
<div class="wrap fadeInUp">
|
|
<h1>Slide</h1>
|
|
</div>
|
|
</section>
|
|
</article></pre>
|
|
<p>Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter fadeInUp">
|
|
<h2>Slide</h2>
|
|
<p>.fadeInUp</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-40 zoomIn aligncenter">
|
|
<figure>
|
|
<img src="../static/images/android.png" alt="Pixel Phone">
|
|
</figure>
|
|
<p>.zoomIn</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-50">
|
|
<h3>.slow (animation duration)</h3>
|
|
<pre><section>
|
|
<div class="wrap">
|
|
<h2 class="fadeIn slow">Slide 1</h2>
|
|
</div>
|
|
</section></pre>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2 class="fadeIn slow">h2.fadeIn.slow</h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Background Images</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/)"></span>
|
|
<div class="wrap size-50">
|
|
<h3>
|
|
<svg class="fa-camera">
|
|
<use xlink:href="#fa-camera"></use>
|
|
</svg>
|
|
Unsplash = Fullscreen Backgrounds
|
|
</h3>
|
|
<p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? →</a></p>
|
|
<pre><section>
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"></span>
|
|
<div class="wrap">
|
|
<h1>Slide</h1>
|
|
</div>
|
|
</section></pre>
|
|
<p>
|
|
<svg class="fa-info">
|
|
<use xlink:href="#fa-info"></use>
|
|
</svg>
|
|
Position .background outside of .wrap container.
|
|
</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<h3>15 Different Backgrounds</h3>
|
|
<ul class="text-cols">
|
|
<li><strong>.background</strong> (cover)</li>
|
|
<li>.background-top (cover)</li>
|
|
<li>.background-bottom (cover)</li>
|
|
<li>.background.light</li>
|
|
<li>.background.dark</li>
|
|
<li>.background-center</li>
|
|
<li>.background-center-top</li>
|
|
<li>.background-center-bottom</li>
|
|
<li>.background-left</li>
|
|
<li>.background-left-top</li>
|
|
<li>.background-left-bottom</li>
|
|
<li>.background-right</li>
|
|
<li>.background-right-top</li>
|
|
<li>.background-right-bottom</li>
|
|
<li>.background-anim</li>
|
|
</ul>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Embedding Media</strong></h2>
|
|
<p>Videos, charts, maps...</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="content-left">
|
|
<h3><a href="https://webslides.tv/demos/media#slide=2">YouTube API</a></h3>
|
|
<p>Embed videos with loop, autoplay, and muted attributes.</p>
|
|
<pre><div class="embed">
|
|
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
|
</iframe>
|
|
</div></pre>
|
|
<p><code>.embed</code> (responsive)</p>
|
|
</div>
|
|
<!-- end .content-left -->
|
|
<div class="content-left">
|
|
<!-- <div class="embed"> = Responsive -->
|
|
<div class="embed">
|
|
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
|
|
</div>
|
|
<!-- end .embed -->
|
|
</div>
|
|
<!-- end .content-left -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap size-60">
|
|
<!-- Responsive video/iframe... Add <div class="embed"> -->
|
|
<div class="embed">
|
|
<div data-youtube data-youtube-id="vXeF6Uot8pk" data-autoplay></div>
|
|
</div>
|
|
<!-- .end .embed -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="fullscreen">
|
|
<!-- Fullscreen Video -->
|
|
<div class="embed">
|
|
<div data-youtube data-youtube-id="b4LrTkWq9jU" data-autoplay></div>
|
|
</div>
|
|
<!-- .end .embed -->
|
|
</section>
|
|
<section class="fullscreen bg-black aligncenter">
|
|
<div class="embed">
|
|
<video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
|
|
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
|
</video>
|
|
</div><!-- .end .embed -->
|
|
<!-- .wrap = container (width: 90%) -->
|
|
<div class="wrap size-50">
|
|
<h2><strong>We build brands with integrity and substance</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="fullscreen bg-blue">
|
|
<div class="embed dark">
|
|
<video autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
|
|
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
<!-- .embed -->
|
|
<!-- .wrap = container (width: 90%) -->
|
|
<div class="wrap size-50">
|
|
<h2><strong>We help with design direction</strong></h2>
|
|
<p>0verlay: <code>section.fullscreen.bg-blue > .embed.dark</code> or .light</p>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-primary">
|
|
<div class="wrap size-50">
|
|
<p class="text-context">Status of Net Neutrality around the world.</p>
|
|
<div class="embed">
|
|
<iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
|
|
</div>
|
|
<!-- .end .embed -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap aligncenter">
|
|
<h2><strong>Typography</strong></h2>
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="cta">
|
|
<div class="number">
|
|
<p><span>Ag</span></p>
|
|
</div>
|
|
<!--end .number -->
|
|
<div class="benefit">
|
|
<p class="text-subtitle">Roboto in <a href="https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Roboto:400,700,700italic,400italic,300,300italic">Google Fonts</a>.</p>
|
|
<h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
|
|
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
|
|
<p>abcdefghijklmnopqrstuvwxyz</p>
|
|
<p>1234567890(,.;:?!$&*)</p>
|
|
</div>
|
|
<!--end .benefit -->
|
|
</div>
|
|
<!--end .cta -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section>
|
|
<div class="wrap">
|
|
<div class="cta text-serif">
|
|
<div class="number">
|
|
<p><span>Ag</span></p>
|
|
</div>
|
|
<!--end .number -->
|
|
<div class="benefit">
|
|
<p class="text-subtitle">Maitree in <a href="https://fonts.google.com/specimen/Maitree">Google Fonts</a>.</p>
|
|
<h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
|
|
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
|
|
<p>abcdefghijklmnopqrstuvwxyz</p>
|
|
<p>1234567890(,.;:?!$&*)</p>
|
|
</div>
|
|
<!--end .benefit -->
|
|
</div>
|
|
<!--end .cta -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
<section class="bg-apple aligncenter">
|
|
<div class="wrap">
|
|
<div class="cta">
|
|
<div class="number">
|
|
<p><span>Ag</span></p>
|
|
</div>
|
|
<!--end .number -->
|
|
<div class="benefit">
|
|
<p>.text-apple, .bg-apple {font-family: "San Francisco";}</p>
|
|
<h3><strong>The quick brown fox jumps over the lazy dog</strong>.</h3>
|
|
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
|
|
<p>abcdefghijklmnopqrstuvwxyz</p>
|
|
<p>1234567890(,.;:?!$&*)</p>
|
|
</div>
|
|
<!--end .benefit -->
|
|
</div>
|
|
<!--end .cta -->
|
|
</div>
|
|
<!-- .end .wrap -->
|
|
</section>
|
|
|
|
</article>
|
|
</main>
|
|
<!--main-->
|
|
|
|
<!-- Required -->
|
|
<script src="../static/js/webslides.js"></script>
|
|
|
|
<script>
|
|
window.ws = new WebSlides();
|
|
</script>
|
|
|
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
|
<script defer src="../static/js/svg-icons.js"></script>
|
|
|
|
</body>
|
|
</html>
|