1944 lines
77 KiB
HTML
1944 lines
77 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 Tutorial: Classes</title>
|
||
|
|
<meta name="description" content="WebSlides Cheat Sheet. A quick reference guide for beginners. This tutorial contains hundreds of HTML/CSS examples.">
|
||
|
|
|
||
|
|
<!-- 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" /> <!-- YOUR URL/PERMALINK -->
|
||
|
|
<meta property="og:type" content="article" />
|
||
|
|
<meta property="og:title" content="WebSlides Documentation: Classes" /> <!-- EDIT -->
|
||
|
|
<meta property="og:description" content="A quick reference guide. This tutorial contains hundreds of HTML/CSS examples."> <!-- EDIT -->
|
||
|
|
<meta property="og:updated_time" content="2017-01-04T17:23:46"> <!-- 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="WebSlides Documentation: Classes"> <!-- EDIT -->
|
||
|
|
<meta name="twitter:description" content="WebSlides Cheat Sheet.This tutorial contains hundreds of HTML/CSS examples."> <!-- 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-black-blue aligncenter">
|
||
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/6njoEbtarec/')"></span>
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<p class="text-subtitle">WebSlides Tutorial</p>
|
||
|
|
<h1 class="text-landing">Classes</h1>
|
||
|
|
<p class="text-symbols">* * * </p>
|
||
|
|
<p>
|
||
|
|
<a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
|
||
|
|
<svg class="fa-github">
|
||
|
|
<use xlink:href="#fa-github"></use>
|
||
|
|
</svg>
|
||
|
|
Free Download
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2><strong>WebSlides Classes</strong></h2>
|
||
|
|
<p class="text-intro">Friendly naming conventions.</p>
|
||
|
|
<ul class="flexblock border">
|
||
|
|
<li>
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<h3><a target=_blank href="#slide=3">Layout</a></h3>
|
||
|
|
<ol>
|
||
|
|
<li><a target="_blank" href="#slide=4">CSS Syntax</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=6">.alignleft</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=7">.alignright</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=8">.aligncenter</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=9">.slide-top</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=12">.content- (left, center, right)</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=15">.slide-bottom</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=18">.grid > .column</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=19">.grid.vertical-align</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=23">.card- (50,60,70...)</a></li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<h3><a target="_blank" href="#slide=26">Backgrounds</a></h3>
|
||
|
|
<ol>
|
||
|
|
<li><a target="_blank" href="#slide=27">.bg-primary...(Corp Colors)</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=28">.bg-black...(General Colors)</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=29">.bg-gradient-(position)</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=33">.background-video</a></li>
|
||
|
|
<li>
|
||
|
|
<a target="_blank" href="#slide=36">Background Images:</a>
|
||
|
|
<ol>
|
||
|
|
<li><a target="_blank" href="#slide=36">.background (fullscreen)</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=37">.background-(position)</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=38">.background.dark</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=39">.background.light</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=40">.background.anim</a></li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<h3><a target="_blank" href="#slide=41">Flexible Blocks</a></h3>
|
||
|
|
<ol>
|
||
|
|
<li><a target="_blank" href="#slide=42">.flexblock </a></li>
|
||
|
|
<li><a target="_blank" href="#slide=45">.flexblock.clients</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=47">.flexblock.features</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=48">.flexblock.gallery</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=50">.flexblock.metrics</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=52">.flexblock.plans</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=54">.flexblock.specs</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=55">.flexblock.reasons</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=56">.flexblock.steps</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=57">.flexblock.activity</a></li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<!--div required = padding li or li>a-->
|
||
|
|
<div>
|
||
|
|
<h3><a target="_blank" href="#slide=58">Typography (Roboto)</a></h3>
|
||
|
|
<ol>
|
||
|
|
<li><a target="_blank" href="#slide=59">.text-landing</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=60">.text-intro</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=61">.text-subtitle</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=62">.text-shadow</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=63">.text-data</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=64">.text-context</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=65">.text-cols</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=66">.text-label</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=67">.text-serif (Maitree)</a></li>
|
||
|
|
<li><a target="_blank" href="#slide=69">.text-pull (-right/-left)</a></li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-heart-o">
|
||
|
|
<use xlink:href="#fa-heart-o"></use>
|
||
|
|
</svg>
|
||
|
|
CSS Syntax
|
||
|
|
</h2>
|
||
|
|
<p class="text-intro">WebSlides is so easy to understand and love. Baseline: 8.</p>
|
||
|
|
<hr>
|
||
|
|
<ul class="description">
|
||
|
|
<li><span class="text-label">Typography:</span> .text-landing, .text-subtitle, .text-data, .text-intro...</li>
|
||
|
|
<li><span class="text-label">BG Colors:</span> .bg-primary, .bg-blue,.bg-apple...</li>
|
||
|
|
<li><span class="text-label">BG Images:</span> .background, .background-center-bottom...</li>
|
||
|
|
<li><span class="text-label">Cards:</span> .card-60, .card-50, .card-40...</li>
|
||
|
|
<li><span class="text-label">Sizes:</span> .size-50, .size-40...</li>
|
||
|
|
<li><span class="text-label">Flex Blocks:</span> .flexblock.clients, .flexblock.gallery, .flexblock.metrics...</li>
|
||
|
|
</ul>
|
||
|
|
</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 is neat, scalable, and well documented. It uses <strong>intuitive markup with popular naming conventions</strong>. There's no need to overuse classes or nesting. <strong>Based on <a href="https://github.com/jennschiffer/SimpleSlides">SimpleSlides</a>, by <a href="http://jennmoney.biz">Jenn Schiffer</a></strong> :)</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%) with fadein</h2>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</article>
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
<!-- .end .column -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .grid -->
|
||
|
|
<hr>
|
||
|
|
<p class="aligncenter">Vertical sliding? <code><article id="webslides" class="vertical"></code></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<header>
|
||
|
|
<!--.wrap or <nav> = container 1200px -->
|
||
|
|
<div class="wrap">
|
||
|
|
<p>Header (logo) <span class="alignright">.alignright</span></p>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="aligncenter">
|
||
|
|
<h2>Simple CSS Alignments</h2>
|
||
|
|
<p>Put content wherever you want.</p>
|
||
|
|
</div>
|
||
|
|
<footer>
|
||
|
|
<div class="wrap">
|
||
|
|
<p>
|
||
|
|
<span class="alignleft">
|
||
|
|
Footer: logo, credits... (.alignleft)
|
||
|
|
</span>
|
||
|
|
<span class="alignright">
|
||
|
|
<a href="#" title="Twitter">
|
||
|
|
<svg class="fa-twitter">
|
||
|
|
<use xlink:href="#fa-twitter"></use>
|
||
|
|
</svg>
|
||
|
|
@username .alignright
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<img class="alignleft size-50" src="../static/images/iphone.png" alt="iPhone">
|
||
|
|
<h2>img.alignleft</h2>
|
||
|
|
<p><code>img.alignleft.size-50</code></p>
|
||
|
|
<p>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.</p>
|
||
|
|
<p><strong>Image size recommended</strong>:<br> 800x600px / 600x450px.</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<img class="alignright size-50" src="../static/images/iphone.png" alt="iPhone">
|
||
|
|
<h2>img.alignright</h2>
|
||
|
|
<p><code>img.alignright.size-50</code></p>
|
||
|
|
<p>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.</p>
|
||
|
|
<p><strong>Image size recommended</strong>:<br> 800x600px / 600x450px.</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<img class="aligncenter size-40" src="../static/images/iphone.png" alt="iPhone">
|
||
|
|
<p class="aligncenter"><code>img.aligncenter.size-40</code></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</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>In a village of La Mancha, the name of which I have no desire to call to mind,</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>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.</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>An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,</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>lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.</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>he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,</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>while on week-days he made a brave figure in his best homespun.</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>He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,</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>who used to saddle the hack as well as handle the bill-hook.</p>
|
||
|
|
<p><code>.slide-bottom</code> and <code>.content-right</code></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>.grid + .column</h2>
|
||
|
|
<p class="text-intro">Basic Grid (auto-fill and equal height).</p>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="column">
|
||
|
|
<h6>Why WebSlides?</h6>
|
||
|
|
<p>There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.</p>
|
||
|
|
<p class="text-symbols">* * *</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
<div class="column">
|
||
|
|
<figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
<div class="column">
|
||
|
|
<h6>How easy is WebSlides?</h6>
|
||
|
|
<p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
|
||
|
|
<p class="text-symbols">* * *</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
</div>
|
||
|
|
<!-- end .grid -->
|
||
|
|
</div>
|
||
|
|
<!-- end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>.grid.<strong>vertical-align</strong> + .column</h2>
|
||
|
|
<p class="text-intro">Basic Grid (auto-fill and equal height).</p>
|
||
|
|
<div class="grid vertical-align">
|
||
|
|
<div class="column">
|
||
|
|
<h6>Why WebSlides?</h6>
|
||
|
|
<p>There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.</p>
|
||
|
|
<p class="text-symbols">* * *</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
<div class="column">
|
||
|
|
<figure><img class="aligncenter" src="../static/images/setup.png" alt="WebSlides Files"></figure>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
<div class="column">
|
||
|
|
<h6>How easy is WebSlides?</h6>
|
||
|
|
<p>You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.</p>
|
||
|
|
<p class="text-symbols">* * *</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .column -->
|
||
|
|
</div>
|
||
|
|
<!-- end .grid -->
|
||
|
|
</div>
|
||
|
|
<!-- end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>.grid.<strong>sm</strong> (sidebar + main)</h2>
|
||
|
|
<hr>
|
||
|
|
<div class="grid sm">
|
||
|
|
<div class="column">
|
||
|
|
<h3>.column 1</h3>
|
||
|
|
<p>Stendhal syndrome is a psychosomatic disorder that causes rapid heartbeat, dizziness, fainting, confusion and even hallucinations when an individual is exposed to an experience of great personal significance, particularly viewing art.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<h3>.column 2</h3>
|
||
|
|
<p>The illness is named after the 19th-century French author Stendhal (pseudonym of Marie-Henri Beyle), who described his experience with the phenomenon during his 1817 visit to Florence in his book Naples and Florence: A Journey from Milan to Reggio.</p>
|
||
|
|
<p>When he visited the Basilica of Santa Croce, where Niccolò Machiavelli, Michelangelo and Galileo Galilei are buried, he saw Giotto's frescoes for the first time and was overcome with emotion. </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--end .grid -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>.grid.<strong>ms</strong> (main + sidebar)</h2>
|
||
|
|
<hr>
|
||
|
|
<div class="grid ms">
|
||
|
|
<div class="column">
|
||
|
|
<h3>.column 1</h3>
|
||
|
|
<p>Beauty is a characteristic of an animal, idea, object, person or place that provides a perceptual experience of pleasure or satisfaction. Beauty is studied as part of aesthetics, culture, social psychology and sociology. </p>
|
||
|
|
<p>An "ideal beauty" is an entity which is admired, or possesses features widely attributed to beauty in a particular culture, for perfection.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<h3>.column 2</h3>
|
||
|
|
<p>The experience of "beauty" often involves an interpretation of some entity as being in balance and harmony with nature, which may lead to feelings of attraction and emotional well-being.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--end .grid -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>.grid.<strong>sms</strong> (sidebar + main + sidebar)</h2>
|
||
|
|
<hr>
|
||
|
|
<div class="grid sms">
|
||
|
|
<div class="column">
|
||
|
|
<h3>.column 1</h3>
|
||
|
|
<p>Information architecture is considered to have been founded by Richard Saul Wurman.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<h3>.column 2</h3>
|
||
|
|
<p>Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.</p>
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<h3>.column 3</h3>
|
||
|
|
<p>The difficulty in establishing a common definition for "information architecture" arises partly from the term's existence in multiple fields. </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--end .grid -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="card-50 bg-white">
|
||
|
|
<div class="flex-content">
|
||
|
|
<h2>Unsplash
|
||
|
|
</h2>
|
||
|
|
<p>.card-50.bg-white</p>
|
||
|
|
<p class="text-intro"><a href="http://unsplash.com">Unsplash</a> is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great.
|
||
|
|
</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-->
|
||
|
|
<figure>
|
||
|
|
<img src="https://source.unsplash.com/rCOWMC8qf8A/" alt="Apple Watch">
|
||
|
|
<figcaption>
|
||
|
|
<a href="https://unsplash.com/@crew" title="Crew">
|
||
|
|
<svg class="fa-camera">
|
||
|
|
<use xlink:href="#fa-camera"></use>
|
||
|
|
</svg>
|
||
|
|
Crew (Unsplash)
|
||
|
|
</a>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
<!-- end figure-->
|
||
|
|
</div>
|
||
|
|
<!-- .end .card-50 -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="card-50 bg-white">
|
||
|
|
<figure>
|
||
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1241.8442158987712!2d-0.1268272!3d51.5005848!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa9!2sBig+Ben!5e0!3m2!1ses!2ses!4v1491497625579" width="800" height="600" allowfullscreen></iframe>
|
||
|
|
<figcaption>
|
||
|
|
<a href="https://maps.google.com" title="Google Maps">
|
||
|
|
<svg class="fa-maps">
|
||
|
|
<use xlink:href="#fa-maps"></use>
|
||
|
|
</svg>
|
||
|
|
Google Maps
|
||
|
|
</a>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
<!-- end figure-->
|
||
|
|
<div class="flex-content">
|
||
|
|
<h2>
|
||
|
|
Discover London
|
||
|
|
</h2>
|
||
|
|
<p>.card-50.bg-white</p>
|
||
|
|
<ul class="description">
|
||
|
|
<li>
|
||
|
|
<strong title="Density">Density:</strong> 5,518/km<sup>2</sup>
|
||
|
|
</li>
|
||
|
|
<li><strong title="Population">Population:</strong> 8,673,713</li>
|
||
|
|
<li><strong title="Website">Website:</strong> <a href="http://www.visitlondon.com/">visitlondon.com</a></li>
|
||
|
|
</ul>
|
||
|
|
<p>
|
||
|
|
There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .flex-content-->
|
||
|
|
</div>
|
||
|
|
<!-- end .card-50-->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="fullscreen">
|
||
|
|
<div class="card-50">
|
||
|
|
<figure>
|
||
|
|
<img src="https://source.unsplash.com/8lODM_TYmkI/800x600" alt="Yosemite National Park">
|
||
|
|
<figcaption>
|
||
|
|
<a href="https://unsplash.com/@chadmadden" title="Chad Madden">
|
||
|
|
<svg class="fa-camera">
|
||
|
|
<use xlink:href="#fa-camera"></use>
|
||
|
|
</svg>
|
||
|
|
Chad Madden (Unsplash)
|
||
|
|
</a>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
<!-- end figure-->
|
||
|
|
<div class="flex-content">
|
||
|
|
<h2>
|
||
|
|
What is inspiration?
|
||
|
|
</h2>
|
||
|
|
<p>
|
||
|
|
In Greek thought, inspiration meant that the poet or artist would go into ecstasy or furor poeticus, the divine frenzy or poetic madness. The Muses are the inspirational goddesses of literature, science, and the arts in Greek mythology.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- end .flex-content-->
|
||
|
|
</div>
|
||
|
|
<!-- end .card-50-->
|
||
|
|
</section>
|
||
|
|
<section class="bg-apple aligncenter">
|
||
|
|
<h1>Backgrounds</h1>
|
||
|
|
<p><section class="bg-apple"></p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>Corporate Backgrounds</h3>
|
||
|
|
<ul class="flexblock">
|
||
|
|
<li class="bg-primary">
|
||
|
|
<h2>.bg-primary</h2>
|
||
|
|
#44d
|
||
|
|
</li>
|
||
|
|
<li class="bg-secondary">
|
||
|
|
<h2>.bg-secondary</h2>
|
||
|
|
#67d
|
||
|
|
</li>
|
||
|
|
<li class="bg-light">
|
||
|
|
<h2>.bg-light</h2>
|
||
|
|
#edf2f7
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2>body</h2>
|
||
|
|
#f7f9fb
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<h3>General Colors</h3>
|
||
|
|
<ul class="flexblock">
|
||
|
|
<li class="bg-black">
|
||
|
|
<h2>.bg-black</h2>
|
||
|
|
#111
|
||
|
|
</li>
|
||
|
|
<li class="bg-black-blue">
|
||
|
|
<h2>.bg-black-blue</h2>
|
||
|
|
#123
|
||
|
|
</li>
|
||
|
|
<li class="bg-gray">
|
||
|
|
<h2>.bg-gray</h2>
|
||
|
|
#d5d9e2
|
||
|
|
</li>
|
||
|
|
<li class="bg-white">
|
||
|
|
<h2>.bg-white</h2>
|
||
|
|
#fff
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<ul class="flexblock">
|
||
|
|
<li class="bg-red">
|
||
|
|
<h2>.bg-red</h2>
|
||
|
|
#c23
|
||
|
|
</li>
|
||
|
|
<li class="bg-green">
|
||
|
|
<h2>.bg-green</h2>
|
||
|
|
#077
|
||
|
|
</li>
|
||
|
|
<li class="bg-blue">
|
||
|
|
<h2>.bg-blue</h2>
|
||
|
|
#346
|
||
|
|
</li>
|
||
|
|
<li class="bg-purple">
|
||
|
|
<h2>.bg-purple</h2>
|
||
|
|
#b6d
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<h3>Transparent Backgrounds</h3>
|
||
|
|
<ul class="flexblock">
|
||
|
|
<li class="bg-trans-dark">
|
||
|
|
<h2>.bg-trans-dark</h2>
|
||
|
|
rgba(0,0,0 , 0.5)
|
||
|
|
</li>
|
||
|
|
<li class="bg-trans-light">
|
||
|
|
<h2>.bg-trans-light</h2>
|
||
|
|
rgba(255,255,255 , 0.2)
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-gradient-h">
|
||
|
|
<div class="wrap">
|
||
|
|
<h1>Gradients</h1>
|
||
|
|
<ul class="flexblock border">
|
||
|
|
<li>Horizontal <code>.bg-gradient-h</code></li>
|
||
|
|
<li>Radial <code>.bg-gradient-r</code></li>
|
||
|
|
<li>Vertical <code>.bg-gradient-v</code></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-gradient-h aligncenter">
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h1>Horizontal Gradient</h1>
|
||
|
|
<p><code>section.bg-gradient-h</code></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-gradient-r aligncenter">
|
||
|
|
<div class="wrap">
|
||
|
|
<h1>Radial Gradient</h1>
|
||
|
|
<p><code>section.bg-gradient-r</code></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-gradient-v aligncenter">
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h1>Vertical Gradient</h1>
|
||
|
|
<p><code>section.bg-gradient-v</code></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-60">
|
||
|
|
<h3>Background Videos</h3>
|
||
|
|
<pre><video class="background-video" autoplay muted loop poster="image.jpg">
|
||
|
|
<source src="video.mp4" type="video/mp4">
|
||
|
|
</video></pre>
|
||
|
|
<p><code>.background-video</code></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black">
|
||
|
|
<video class="background-video" autoplay muted loop poster="https://webslides.tv/static/images/working.jpg">
|
||
|
|
<source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
<div class="wrap">
|
||
|
|
<p><code>.background-video</code></p>
|
||
|
|
<h2><strong>WebSlides is the easiest way to make HTML presentations. Inspire and engage.</strong></h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-blue aligncenter">
|
||
|
|
<video class="background-video dark" autoplay muted loop poster="https://webslides.tv/static/images/working.jpg">
|
||
|
|
<source src="https://webslides.tv/static/videos/working.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2 class="text-landing">BG Video with Overlay</h2>
|
||
|
|
<p><code>section.bg-blue > .background-video.dark</code> or .light</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h3>Fullscreen Background Images</h3>
|
||
|
|
<pre><section>
|
||
|
|
<span <strong>class="background"</strong> style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h1>Slide</h1>
|
||
|
|
</div>
|
||
|
|
</section></pre>
|
||
|
|
<p>How to <a href="https://source.unsplash.com/">embed Unsplash photos</a>?</p>
|
||
|
|
</div>
|
||
|
|
<div class="content-left">
|
||
|
|
<h3>16 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 (opacity)</li>
|
||
|
|
<li>.background.dark (opacity)</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 (animated)</li>
|
||
|
|
<li>.<strong>background-video</strong> (fullscreen)</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<span class="background-right-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h3>.background-(position)</h3>
|
||
|
|
<p><code>.background-right-bottom</code></p>
|
||
|
|
<ul class="flexblock specs">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-wifi">
|
||
|
|
<use xlink:href="#fa-wifi"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>Ultra-Fast WiFi</h2>
|
||
|
|
Simple and secure file sharing.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-battery-full">
|
||
|
|
<use xlink:href="#fa-battery-full"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>All day battery life</h2>
|
||
|
|
Your battery worries may be over.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-life-ring">
|
||
|
|
<use xlink:href="#fa-life-ring"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>Lifetime Warranty </h2>
|
||
|
|
We'll fix it or if we can't, we'll replace it.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black aligncenter">
|
||
|
|
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
||
|
|
<span class="background dark" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h1 class="text-landing text-shadow">Iceland</h1>
|
||
|
|
<p><code>section[class*="bg-"] > .background.dark</code></p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="bg-black aligncenter">
|
||
|
|
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
||
|
|
<span class="background light" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h1 class="text-landing text-shadow">Iceland</h1>
|
||
|
|
<p><code>section[class*="bg-"] > .background.light</code></p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter bg-black">
|
||
|
|
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2>.background.anim</h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<div class="wrap">
|
||
|
|
<h2><strong>Flexible blocks</strong></h2>
|
||
|
|
<p><code>ul.flexblock</code> = Flexible blocks with auto-fill and equal height.</p>
|
||
|
|
<hr>
|
||
|
|
<ul class="flexblock">
|
||
|
|
<li>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-bar-chart">
|
||
|
|
<use xlink:href="#fa-bar-chart"></use>
|
||
|
|
</svg>
|
||
|
|
.flexblock li 1
|
||
|
|
</h2>
|
||
|
|
Multipurpose: services, features, specs...
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-balance-scale">
|
||
|
|
<use xlink:href="#fa-balance-scale"></use>
|
||
|
|
</svg>
|
||
|
|
.flexblock li 2
|
||
|
|
</h2>
|
||
|
|
Multipurpose: benefits, clients, work...
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-cog">
|
||
|
|
<use xlink:href="#fa-cog"></use>
|
||
|
|
</svg>
|
||
|
|
.flexblock li 3
|
||
|
|
</h2>
|
||
|
|
Multipurpose: news, metrics, plans...
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h3>Flexible Block = <strong>.flexblock</strong></h3>
|
||
|
|
<p>Auto-fill & Equal height columns:</p>
|
||
|
|
<pre><ul class="flexblock">
|
||
|
|
<li>
|
||
|
|
Item 1
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Item 2
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Item 3
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Item 4
|
||
|
|
</li>
|
||
|
|
</ul></pre>
|
||
|
|
</div>
|
||
|
|
<div class="content-left">
|
||
|
|
<h3>Block Link = .flexblock.<strong>blink</strong></h3>
|
||
|
|
<p>Make the whole block clickable:</p>
|
||
|
|
<pre><ul class="flexblock blink">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
Item 1
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="">
|
||
|
|
Item 2
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock</h3>
|
||
|
|
<ul class="flexblock">
|
||
|
|
<li>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-bar-chart">
|
||
|
|
<use xlink:href="#fa-bar-chart"></use>
|
||
|
|
</svg>
|
||
|
|
Purpose
|
||
|
|
</h2>
|
||
|
|
Businesses that people love
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-balance-scale">
|
||
|
|
<use xlink:href="#fa-balance-scale"></use>
|
||
|
|
</svg>
|
||
|
|
Principles
|
||
|
|
</h2>
|
||
|
|
Ethics of openness and good taste
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-cog">
|
||
|
|
<use xlink:href="#fa-cog"></use>
|
||
|
|
</svg>
|
||
|
|
Process
|
||
|
|
</h2>
|
||
|
|
Useful → Easy → Fast → Beautiful
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<h3>ul.flexblock.blink</h3>
|
||
|
|
<ul class="flexblock blink">
|
||
|
|
<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>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.blink.border</h3>
|
||
|
|
<ul class="flexblock border blink">
|
||
|
|
<li>
|
||
|
|
<a href="">
|
||
|
|
<h3>Google</h3>
|
||
|
|
2016.- Google Drive
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li><a href=""><strong>Facebook</strong> 2016.- F8 Conference</a></li>
|
||
|
|
<li><a href=""><strong>Airbnb</strong>2015.- Creative Direction</a></li>
|
||
|
|
<li><a href=""><strong>Microsoft</strong> 2015.- Content Strategy</a></li>
|
||
|
|
<li><a href=""><strong>The New York Times</strong>2015.- Recruitment</a></li>
|
||
|
|
<li><a href=""><strong>Netflix</strong> 2014.- Mobile Apps</a></li>
|
||
|
|
<li><a href=""><strong>Instagram</strong>2014.- Identity</a></li>
|
||
|
|
<li><a href=""><strong>Spotify</strong> 2013.- TV Commercials</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/microsoft.svg" alt="Microsoft">
|
||
|
|
<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/instagram.svg" alt="Instagram">
|
||
|
|
<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>Interfaces</h3>
|
||
|
|
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></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/microsoft.svg" alt="Microsoft">
|
||
|
|
<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/instagram.svg" alt="Instagram">
|
||
|
|
<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>Interfaces</h3>
|
||
|
|
<p>Collaboration with the Acme team to design their mobile apps. <code>img.blacklogo</code></p>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.features</h3>
|
||
|
|
<ul class="flexblock features">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2> <span>100<sup>%</sup></span> customizable</h2>
|
||
|
|
Well documented.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<span><sup>$</sup>48</span>
|
||
|
|
<h2>Extra virgin olive oil</h2>
|
||
|
|
The Spanish caviar.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-wifi">
|
||
|
|
<use xlink:href="#fa-wifi"></use>
|
||
|
|
</svg>
|
||
|
|
Ultra-fast Wifi
|
||
|
|
</h2>
|
||
|
|
Simple file sharing.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
<h3>ul.flexblock.features.blink</h3>
|
||
|
|
<ul class="flexblock features blink">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div>
|
||
|
|
<span><sup>$</sup>48</span>
|
||
|
|
<h2>Extra virgin olive oil</h2>
|
||
|
|
The Spanish caviar.
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div>
|
||
|
|
<h2>
|
||
|
|
<svg class="fa-wifi">
|
||
|
|
<use xlink:href="#fa-wifi"></use>
|
||
|
|
</svg>
|
||
|
|
Ultra-fast Wifi
|
||
|
|
</h2>
|
||
|
|
Simple and secure file sharing.
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-primary">
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.gallery</h3>
|
||
|
|
<ul class="flexblock gallery">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||
|
|
<figcaption>
|
||
|
|
<h2>uWatch</h2>
|
||
|
|
<p>By Jane Doe</p>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail " src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||
|
|
<figcaption>
|
||
|
|
<h2>Ellen Daniels</h2>
|
||
|
|
<p>CEO</p>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<figure>
|
||
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||
|
|
<figcaption>
|
||
|
|
<h2>New York</h2>
|
||
|
|
<p>3,456 rooms</p>
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.gallery + .overlay</h3>
|
||
|
|
<ul class="flexblock gallery">
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="overlay">
|
||
|
|
<h2>New York</h2>
|
||
|
|
<p>1,234 rooms</p>
|
||
|
|
</div>
|
||
|
|
<img alt="Thumbnail " src="https://source.unsplash.com/-sQ4FsomXEs/800x600">
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="overlay">
|
||
|
|
<h2>uWatch</h2>
|
||
|
|
<time datetime="2017-12-17T21:23:34-05:00">December 2017</time>
|
||
|
|
</div>
|
||
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/vCF5sB7QecM/800x600">
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#">
|
||
|
|
<div class="overlay">
|
||
|
|
<h2>Ellen Daniels</h2>
|
||
|
|
<p>CEO</p>
|
||
|
|
</div>
|
||
|
|
<img alt="Thumbnail" src="https://source.unsplash.com/yvx7LSZSzeo/800x600">
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.metrics</h3>
|
||
|
|
<!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
|
||
|
|
<ul class="flexblock metrics">
|
||
|
|
<li> Founded
|
||
|
|
<span>2016</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>
|
||
|
|
Benefits: $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>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.metrics.border</h3>
|
||
|
|
<!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
|
||
|
|
<ul class="flexblock metrics border">
|
||
|
|
<li> Founded
|
||
|
|
<span>2016</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>
|
||
|
|
Benefits: $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>
|
||
|
|
<div class="wrap">
|
||
|
|
<h2 class="aligncenter">.flexblock.plans.blink </h2>
|
||
|
|
<p class="aligncenter">All content is for demo purposes only.</p>
|
||
|
|
<ul class="flexblock plans blink">
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Purchase">
|
||
|
|
<h2>Basic</h2>
|
||
|
|
<div>
|
||
|
|
<span class="price">Free</span>
|
||
|
|
<p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
|
||
|
|
<span class="button">Select</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Purchase">
|
||
|
|
<h2>Medium</h2>
|
||
|
|
<div>
|
||
|
|
<span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
|
||
|
|
<p>Clean markup with popular naming conventions. Minimum effort.</p>
|
||
|
|
<span class="button">Buy Now</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Purchase">
|
||
|
|
<h2>Premium <sup>(save 20%)</sup></h2>
|
||
|
|
<div>
|
||
|
|
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
|
||
|
|
<p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
|
||
|
|
<span class="button">Select</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-purple">
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<ul class="flexblock plans blink">
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Register">
|
||
|
|
<h2>Basic</h2>
|
||
|
|
<div>
|
||
|
|
<span class="price">Free</span>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Free</strong> forever
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Eternal</strong> sunshine
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Ads</strong>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<span class="button ghost">Select</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Purchase">
|
||
|
|
<h2>Good Karma</h2>
|
||
|
|
<div>
|
||
|
|
<span class="price"><sup>$</sup>40 <sup>/year</sup></span>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Exclusive</strong> content
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Unlimited</strong> projects
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<svg class="fa-check">
|
||
|
|
<use xlink:href="#fa-check"></use>
|
||
|
|
</svg>
|
||
|
|
<strong>Unlimited</strong> users
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<span class="button">Select</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="card-50">
|
||
|
|
<div class="flex-content">
|
||
|
|
<h3>ul.flexblock.specs</h3>
|
||
|
|
<ul class="flexblock specs">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-wifi">
|
||
|
|
<use xlink:href="#fa-wifi"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>Ultra-Fast WiFi</h2>
|
||
|
|
Simple and secure file sharing.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-battery-full">
|
||
|
|
<use xlink:href="#fa-battery-full"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>All day battery life</h2>
|
||
|
|
Your battery worries may be over.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-life-ring">
|
||
|
|
<use xlink:href="#fa-life-ring"></use>
|
||
|
|
</svg>
|
||
|
|
<h2>Lifetime Warranty </h2>
|
||
|
|
We'll fix it or if we can't, we'll replace it.
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- end .flex-content-->
|
||
|
|
<figure>
|
||
|
|
<img class="aligncenter" src="../static/images/android.png" alt="Pixel Phone">
|
||
|
|
</figure>
|
||
|
|
</div>
|
||
|
|
<!-- .end card-50 -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-gradient-gray">
|
||
|
|
<!--.wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<h3>.flexblock.reasons</h3>
|
||
|
|
<hr>
|
||
|
|
<div class="bg-white shadow">
|
||
|
|
<ul class="flexblock reasons">
|
||
|
|
<li>
|
||
|
|
<h2>Why WebSlides? Work better, faster.</h2>
|
||
|
|
<p>Designers and marketers can now focus on the content. Simply <a href="../demos" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<h2> Good karma. Just the essentials and using lovely CSS.</h2>
|
||
|
|
<p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- .end bg-white.shadow -->
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.steps</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 usefulness, openness, empathy, 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>
|
||
|
|
<div class="wrap">
|
||
|
|
<h3>ul.flexblock.activity</h3>
|
||
|
|
<ul class="flexblock activity">
|
||
|
|
<li>
|
||
|
|
<a href="#" title="UX Designer at ACME">
|
||
|
|
<div>
|
||
|
|
<p class="year">
|
||
|
|
2016
|
||
|
|
</p>
|
||
|
|
<p class="title">
|
||
|
|
UX Designer at ACME
|
||
|
|
</p>
|
||
|
|
<p class="summary">
|
||
|
|
This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="14 world famous buildings to inspire you">
|
||
|
|
<p class="year">
|
||
|
|
2 mins ago
|
||
|
|
</p>
|
||
|
|
<p class="title">
|
||
|
|
14 world famous buildings to inspire you
|
||
|
|
</p>
|
||
|
|
<p class="summary">
|
||
|
|
From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
|
||
|
|
</p>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="#" title="Co-Founder of GAMMA">
|
||
|
|
<p class="year">
|
||
|
|
2013
|
||
|
|
</p>
|
||
|
|
<p class="title">
|
||
|
|
Co-Founder of GAMMA
|
||
|
|
</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>
|
||
|
|
</ul>
|
||
|
|
</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 target="_blank" 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 class="aligncenter">
|
||
|
|
<div class="wrap">
|
||
|
|
<h1 class="text-landing">Landings</h1>
|
||
|
|
<p><code>.text-landing</code></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<div class="wrap">
|
||
|
|
<h1 class="text-landing">Landings</h1>
|
||
|
|
<p class="text-intro">Create a simple web presence.</p>
|
||
|
|
<p><code>.text-intro</code> </p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<div class="wrap">
|
||
|
|
<p class="text-subtitle">Powered by <a href="https://twitter.com/search?f=tweets&vertical=default&q=%23WebSlides&src=typd">#WebSlides</a> <code>.text-subtitle</code></p>
|
||
|
|
<h1 class="text-landing">Landings</h1>
|
||
|
|
<p class="text-intro">Create a simple web presence.</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-black aligncenter">
|
||
|
|
<span class="background" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
|
||
|
|
<div class="wrap">
|
||
|
|
<h1 class="text-landing text-shadow"><strong>Landings</strong></h1>
|
||
|
|
<p class="text-intro"><code>.text-shadow</code></p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-apple aligncenter">
|
||
|
|
<h2 class="text-data">4,235,678</h2>
|
||
|
|
<p><code>.text-data</code></p>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<p class="text-context">Why WebSlides? .text-context</p>
|
||
|
|
<h2>WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.</h2>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap">
|
||
|
|
<p><code>.text-cols (2 columns)</code></p>
|
||
|
|
<div class="text-cols">
|
||
|
|
<p><strong>Why WebSlides?</strong> There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. <strong>Each parent <section></strong> in the #webslides element is an individual slide. </p>
|
||
|
|
<p><strong>WebSlides help you build a culture of innovation and excellence</strong>. 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.</p>
|
||
|
|
</div>
|
||
|
|
<ul class="flexblock metrics">
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-phone">
|
||
|
|
<use xlink:href="#fa-phone"></use>
|
||
|
|
</svg>
|
||
|
|
Call us at 555.345.6789
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-twitter">
|
||
|
|
<use xlink:href="#fa-twitter"></use>
|
||
|
|
</svg>
|
||
|
|
@username
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div>
|
||
|
|
<svg class="fa-envelope">
|
||
|
|
<use xlink:href="#fa-envelope"></use>
|
||
|
|
</svg>
|
||
|
|
Send us an email
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</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">Pixel's camera lets you take brilliant photos in low light, bright light or any light.</p>
|
||
|
|
<ul class="description">
|
||
|
|
<li>
|
||
|
|
<span class="text-label">
|
||
|
|
.text-label:
|
||
|
|
</span>
|
||
|
|
Google (2016).
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span class="text-label">
|
||
|
|
Services:
|
||
|
|
</span>
|
||
|
|
Industrial 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>
|
||
|
|
<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 target="_blank" 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="aligncenter text-serif">
|
||
|
|
<!--.wrap = container (width: 90%) with fadein animation -->
|
||
|
|
<div class="wrap">
|
||
|
|
<div class="content-left">
|
||
|
|
<h2>WebSlides is incredibly easy and versatile.</h2>
|
||
|
|
<p><code>.text-serif</code> (Maitree)</p>
|
||
|
|
</div>
|
||
|
|
<div class="content-left">
|
||
|
|
<p>Each parent <section> in the #webslides element is an individual slide.</p>
|
||
|
|
<p>Clean markup with popular naming conventions. Minimum effort. Just focus on your content.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div class="wrap size-50">
|
||
|
|
<h3><strong>What is Stendhal Syndrome?</strong></h3>
|
||
|
|
<p class="text-intro">Beauty overdose. <code>.text-pull-right</code></p>
|
||
|
|
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
|
||
|
|
<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
|
||
|
|
<p>The syndrome is not only associated with viewing a beautiful place, but also good art. </p>
|
||
|
|
<p>The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.</p>
|
||
|
|
<p class="text-symbols">* * *</p>
|
||
|
|
</div>
|
||
|
|
<!-- .end .wrap -->
|
||
|
|
</section>
|
||
|
|
<section class="bg-apple aligncenter">
|
||
|
|
<h2>One more thing...</h2>
|
||
|
|
<p><code>.text-apple / .bg-apple</code></p>
|
||
|
|
</section>
|
||
|
|
<section class="aligncenter">
|
||
|
|
<div class="wrap">
|
||
|
|
<ul class="flexblock gallery">
|
||
|
|
<li>
|
||
|
|
<a target="_blank" 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 target="_blank" 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 target="_blank" 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 target="_blank" 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 class="aligncenter">
|
||
|
|
<!-- .wrap = container (width: 90%) -->
|
||
|
|
<div class="wrap">
|
||
|
|
<h2><strong>Start in seconds</strong> </h2>
|
||
|
|
<p class="text-intro">Create your own presentation instantly. <br>120+ prebuilt slides ready to use.</p>
|
||
|
|
<p>
|
||
|
|
<a href="https://webslides.tv/webslides-latest.zip" class="button" title="Download WebSlides">
|
||
|
|
<svg class="fa-cloud-download">
|
||
|
|
<use xlink:href="#fa-cloud-download"></use>
|
||
|
|
</svg>
|
||
|
|
Free Download
|
||
|
|
</a>
|
||
|
|
<span class="try">
|
||
|
|
<a href="https://www.paypal.me/jlantunez/8" title="Good karma :)">
|
||
|
|
<svg class="fa-paypal">
|
||
|
|
<use xlink:href="#fa-paypal"></use>
|
||
|
|
</svg>
|
||
|
|
Pay what you want.
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</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>
|