mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-14 00:54:09 +02:00
Code Issues Releases Wiki Activity

longform elements, bg with a frame

Browse Source 
[class*="background"].frame
This commit is contained in:
José Luis Antúnez
2017-04-20 11:46:18 +02:00
committed by GitHub
parent 0db6e051de
commit d0ec93d7e4
6 changed files with 108 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
demos/components.html
View File

@@ -2663,10 +2663,10 @@
</h3> </h3>
<p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p> <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
<pre>&lt;section&gt; <pre>&lt;section&gt;
&lt;span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"&gt;&lt;/span&gt; &lt;span class="background" style="background-image:url('https://source.unsplash.com/LcDPAqX8dt8/')"&gt;&lt;/span&gt;
&lt;div class="wrap"&gt; &lt;div class="wrap"&gt;
&lt;h1&gt;Slide&lt;/h1&gt; &lt;h1&gt;Slide&lt;/h1&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt;</pre> &lt;/section&gt;</pre>
<p> <p>
<svg class="fa-info"> <svg class="fa-info">
@@ -2682,11 +2682,11 @@
<div class="wrap size-50"> <div class="wrap size-50">
<h1 class="text-landing text-shadow">Opacity</h1> <h1 class="text-landing text-shadow">Opacity</h1>
<p><code>[class*="bg-"] > .background.light</code></p> <p><code>[class*="bg-"] > .background.light</code></p>
<pre>&lt;section class="bg-black"&gt; <pre>&lt;section&gt;
&lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt; &lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
&lt;div class="wrap"&gt; &lt;div class="wrap"&gt;
&lt;h1&gt;Slide&lt;/h1&gt; &lt;h1&gt;Slide&lt;/h1&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt;</pre> &lt;/section&gt;</pre>
</div> </div>
</section> </section>
@@ -2695,11 +2695,11 @@
<div class="wrap size-50"> <div class="wrap size-50">
<h1 class="text-landing text-shadow">Opacity</h1> <h1 class="text-landing text-shadow">Opacity</h1>
<p><code>[class*="bg-"] > .background.dark</code></p> <p><code>[class*="bg-"] > .background.dark</code></p>
<pre>&lt;section class="bg-black"&gt; <pre>&lt;section&gt;
&lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt; &lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
&lt;div class="wrap"&gt; &lt;div class="wrap"&gt;
&lt;h1&gt;Slide&lt;/h1&gt; &lt;h1&gt;Slide&lt;/h1&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/section&gt;</pre> &lt;/section&gt;</pre>
</div> </div>
</section> </section>
@@ -2804,6 +2804,8 @@
</section> </section>
<section class="bg-black aligncenter"> <section class="bg-black aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/MDGpwpMY2Ws/')"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/MDGpwpMY2Ws/')"></span>
<!-- background with a frame frame -->
<span class="background frame"></span>
<div class="wrap"> <div class="wrap">
<h2>Embedding Media</h2> <h2>Embedding Media</h2>
<p>Videos, charts, maps...</p> <p>Videos, charts, maps...</p>

24
demos/interviews.html
View File

@@ -294,27 +294,27 @@
<div class="column"> <div class="column">
<h3>Company</h3> <h3>Company</h3>
<ul> <ul>
<li><a href="">About</a></li> <li><a href="#">About</a></li>
<li><a href="">Team</a></li> <li><a href="#">Team</a></li>
<li><a href="">Blog</a></li> <li><a href="#">Blog</a></li>
</ul> </ul>
</div> </div>
<!-- .end .column --> <!-- .end .column -->
<div class="column"> <div class="column">
<h3>Support</h3> <h3>Support</h3>
<ul> <ul>
<li><a href="">Shipping &amp; Returns</a></li> <li><a href="#">Shipping &amp; Returns</a></li>
<li><a href="">FAQ</a></li> <li><a href="#">FAQ</a></li>
<li><a href="">Contact</a></li> <li><a href="#">Contact</a></li>
</ul> </ul>
</div> </div>
<!-- .end .column --> <!-- .end .column -->
<div class="column"> <div class="column">
<h3>Legal</h3> <h3>Legal</h3>
<ul> <ul>
<li><a href="">Terms of Service</a></li> <li><a href="#">Terms of Service</a></li>
<li><a href="">Privacy Policy</a></li> <li><a href="#">Privacy Policy</a></li>
<li><a href="">Cookies</a></li> <li><a href="#">Cookies</a></li>
</ul> </ul>
</div> </div>
<!-- .end .column --> <!-- .end .column -->
@@ -322,7 +322,7 @@
<h3>Community</h3> <h3>Community</h3>
<ul> <ul>
<li> <li>
<a href=""> <a href="#">
<svg class="fa-facebook"> <svg class="fa-facebook">
<use xlink:href="#fa-facebook"></use> <use xlink:href="#fa-facebook"></use>
</svg> </svg>
@@ -330,7 +330,7 @@
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="#">
<svg class="fa-youtube"> <svg class="fa-youtube">
<use xlink:href="#fa-youtube"></use> <use xlink:href="#fa-youtube"></use>
</svg> </svg>
@@ -338,7 +338,7 @@
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="#">
<svg class="fa-twitter"> <svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use> <use xlink:href="#fa-twitter"></use>
</svg> </svg>

46
demos/longforms.html
View File

@@ -195,7 +195,25 @@
</figcaption> </figcaption>
</figure> </figure>
<p>When the sun is well above the horizon, direct scattering of sunlight (Rayleigh scattering) is the overwhelmingly dominant source of light. However, in twilight, the period of time between sunset and night and between night and sunrise, the situation is more complicated.</p> <p>When the sun is well above the horizon, direct scattering of sunlight (Rayleigh scattering) is the overwhelmingly dominant source of light. However, in twilight, the period of time between sunset and night and between night and sunrise, the situation is more complicated.</p>
<hr> </div>
</section>
<section>
<div class="wrap size-80">
<h3><strong>Building a platform for storytelling</strong></h3>
<p><code>.text-cols (2 columns)</code>.</p>
<div class="text-cols">
<p>The art of narrative is, by definition, an aesthetic enterprise, and there are a number of artistic elements that typically interact in well-developed stories.</p>
<p>Human knowledge is based on stories and the human brain consists of cognitive machinery necessary to understand, remember and tell stories.</p>
<p>Humans are storytelling organisms that both individually and socially, lead storied lives. Stories mirror human thought as humans think in narrative structures and most often remember facts in story form. </p>
<p>Facts can be understood as smaller versions of a larger story, thus storytelling can supplement analytical thinking. Because storytelling requires auditory and visual senses from listeners, one can learn to organize their mental representation of a story, recognize structure of language and express his or her thoughts.</p>
<h4><strong>Stories with karma</strong></h4>
<p>For many multi-media communication complex institutions, communicating by using storytelling techniques can be a more compelling and effective route of delivering information than that of using only dry facts. Uses include:</p>
</div>
</div>
<!-- .end .wrap -->
</section>
<section class="bg-white">
<div class="wrap longform">
<h1>Heading one</h1> <h1>Heading one</h1>
<h2>Heading two</h2> <h2>Heading two</h2>
<h3>Heading three</h3> <h3>Heading three</h3>
@@ -283,7 +301,7 @@
<p>Storytelling is increasingly used in advertising today in order to build customer loyalty. According to Giles Lury, this marketing trend echoes the deeply rooted need of all humans to be entertained. Stories are illustrative, easily memorable and allow any firm to create stronger emotional bonds with the customers.</p> <p>Storytelling is increasingly used in advertising today in order to build customer loyalty. According to Giles Lury, this marketing trend echoes the deeply rooted need of all humans to be entertained. Stories are illustrative, easily memorable and allow any firm to create stronger emotional bonds with the customers.</p>
<p>A Nielsen study shows consumers want a more personal connection in the way they gather information. Our brains are far more engaged by storytelling than by cold, hard facts. When reading straight data, only the language parts of our brains work to decode the meaning. But when we read a story, not only do the language parts of our brains light up, but any other part of the brain that we would use if we were actually experiencing what we're reading about becomes activated as well. This means it's far easier for us to remember stories than hard facts.</p> <p>A Nielsen study shows consumers want a more personal connection in the way they gather information. Our brains are far more engaged by storytelling than by cold, hard facts. When reading straight data, only the language parts of our brains work to decode the meaning. But when we read a story, not only do the language parts of our brains light up, but any other part of the brain that we would use if we were actually experiencing what we're reading about becomes activated as well. This means it's far easier for us to remember stories than hard facts.</p>
<blockquote class="text-quote"> <blockquote class="text-quote">
<p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place. </p> <p>Leadership is not bullying and leadership is not aggression. Leadership is the expectation that you can use your voice for good. That you can make the world a better place.</p>
<p><cite>Sheryl Sandberg.</cite></p> <p><cite>Sheryl Sandberg.</cite></p>
</blockquote> </blockquote>
<p>Storytelling is a means for sharing and interpreting experiences. Peter L. Berger says human life is narratively rooted, humans construct their lives and shape their world into homes in terms of these groundings and memories. <strong>Stories are universal in that they can bridge cultural, linguistic and age-related divides</strong>. Storytelling can be adaptive for all ages, leaving out the notion of age segregation. <p>Storytelling is a means for sharing and interpreting experiences. Peter L. Berger says human life is narratively rooted, humans construct their lives and shape their world into homes in terms of these groundings and memories. <strong>Stories are universal in that they can bridge cultural, linguistic and age-related divides</strong>. Storytelling can be adaptive for all ages, leaving out the notion of age segregation.
@@ -333,27 +351,27 @@
<div class="column"> <div class="column">
<h3>Company</h3> <h3>Company</h3>
<ul> <ul>
<li><a href="">About</a></li> <li><a href="#">About</a></li>
<li><a href="">Team</a></li> <li><a href="#">Team</a></li>
<li><a href="">Blog</a></li> <li><a href="#">Blog</a></li>
</ul> </ul>
</div> </div>
<!-- .end .column --> <!-- .end .column -->
<div class="column"> <div class="column">
<h3>Support</h3> <h3>Support</h3>
<ul> <ul>
<li><a href="">Shipping &amp; Returns</a></li> <li><a href="#">Shipping &amp; Returns</a></li>
<li><a href="">FAQ</a></li> <li><a href="#">FAQ</a></li>
<li><a href="">Contact</a></li> <li><a href="#">Contact</a></li>
</ul> </ul>
</div> </div>
<!-- .end .column --> <!-- .end .column -->
<div class="column"> <div class="column">
<h3>Legal</h3> <h3>Legal</h3>
<ul> <ul>
<li><a href="">Terms of Service</a></li> <li><a href="#">Terms of Service</a></li>
<li><a href="">Privacy Policy</a></li> <li><a href="#">Privacy Policy</a></li>
<li><a href="">Cookies</a></li> <li><a href="#">Cookies</a></li>
</ul> </ul>
</div> </div>
<!-- .end .column --> <!-- .end .column -->
@@ -361,7 +379,7 @@
<h3>Community</h3> <h3>Community</h3>
<ul> <ul>
<li> <li>
<a href=""> <a href="#">
<svg class="fa-facebook"> <svg class="fa-facebook">
<use xlink:href="#fa-facebook"></use> <use xlink:href="#fa-facebook"></use>
</svg> </svg>
@@ -369,7 +387,7 @@
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="#">
<svg class="fa-youtube"> <svg class="fa-youtube">
<use xlink:href="#fa-youtube"></use> <use xlink:href="#fa-youtube"></use>
</svg> </svg>
@@ -377,7 +395,7 @@
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="#">
<svg class="fa-twitter"> <svg class="fa-twitter">
<use xlink:href="#fa-twitter"></use> <use xlink:href="#fa-twitter"></use>
</svg> </svg>

80
demos/media.html
View File

@@ -3,72 +3,72 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CLEAN MARKUP = GOOD KARMA. <!-- CLEAN MARKUP = GOOD KARMA.
Hi source code lover, Hi source code lover,
you're a curious person and a fast learner ;) you're a curious person and a fast learner ;)
Let's make something beautiful together. Contribute on Github: Let's make something beautiful together. Contribute on Github:
https://github.com/webslides/webslides https://github.com/webslides/webslides
Thanks! Thanks!
--> -->
<!-- SEO --> <!-- SEO -->
<title>WebSlides Tutorial: Videos, Images, and Maps</title> <title>WebSlides Tutorial: Videos, Images, and Maps</title>
<meta name="description" content="How to embed images, videos, and maps in your presentation."> <meta name="description" content="How to embed images, videos, and maps in your presentation.">
<!-- URL CANONICAL --> <!-- URL CANONICAL -->
<!-- <link rel="canonical" href="http://your-url.com/permalink"> --> <!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
<!-- Google Fonts --> <!-- 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&amp;subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base --> <!-- CSS Base -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css"> <link rel="stylesheet" type='text/css' media='all' href="../static/css/base.css">
<!-- CSS Colors --> <!-- CSS Colors -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css"> <link rel="stylesheet" type='text/css' media='all' href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) --> <!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css"> <link rel="stylesheet" type='text/css' media='all' href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) --> <!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK --> <!-- FACEBOOK -->
<meta property="og:url" content="/" /> <meta property="og:url" content="/" />
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
<meta property="og:title" content="WebSlides Tutorial: Media" /> <meta property="og:title" content="WebSlides Tutorial: Media" />
<!-- EDIT --> <!-- EDIT -->
<meta property="og:description" content="How to embed images, videos, and maps in your presentation."> <meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T17:25:31"> <meta property="og:updated_time" content="2017-01-04T17:25:31">
<!-- EDIT --> <!-- EDIT -->
<meta property="og:image" content="../static/images/share-webslides.jpg" > <meta property="og:image" content="../static/images/share-webslides.jpg" >
<!-- EDIT --> <!-- EDIT -->
<!-- TWITTER --> <!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@webslides"> <meta name="twitter:site" content="@webslides">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:creator" content="@jlantunez"> <meta name="twitter:creator" content="@jlantunez">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:title" content="WebSlides Tutorial: Media"> <meta name="twitter:title" content="WebSlides Tutorial: Media">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:description" content="How to embed images, videos, and maps in your presentation."> <meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
<!-- EDIT --> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <meta name="twitter:image" content="../static/images/share-webslides.jpg">
<!-- EDIT --> <!-- EDIT -->
<!-- FAVICONS --> <!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png"> <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="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -77,11 +77,11 @@
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.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="180x180" href="../static/images/favicons/favicon-180.png">
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png"> <link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
<!-- Android --> <!-- Android -->
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333"> <meta name="theme-color" content="#333333">
</head> </head>
<body> <body>
<header role="banner"> <header role="banner">
@@ -108,16 +108,16 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main role="main"> <main role="main">
<article id="webslides"> <article id="webslides">
<!-- Quick Guide <!-- Quick Guide
- Each parent <section> in the <article id="webslides"> element is an individual slide. - Each parent <section> in the <article id="webslides"> element is an individual slide.
- Vertical sliding = <article id="webslides" class="vertical"> - Vertical sliding = <article id="webslides" class="vertical">
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%; - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
--> -->
<section class="bg-black-blue aligncenter"> <section class="bg-black-blue aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
<!--.wrap = container (width: 90%) --> <!--.wrap = container (width: 90%) -->
@@ -577,6 +577,8 @@
</section> </section>
<section class="bg-blue"> <section class="bg-blue">
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span> <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
<!-- background with a frame frame -->
<span class="background frame"></span>
<div class="wrap aligncenter"> <div class="wrap aligncenter">
<h2> <h2>
Videos Videos
@@ -722,7 +724,7 @@
<div class="grid"> <div class="grid">
<div class="column"> <div class="column">
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
<strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt; <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt;
&lt;/div&gt;</strong> &lt;/div&gt;</strong>
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p>autoplay + loop</p> <p>autoplay + loop</p>
@@ -730,7 +732,7 @@
<!-- .end .column --> <!-- .end .column -->
<div class="column"> <div class="column">
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
<strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt; <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt;
&lt;/div&gt;</strong> &lt;/div&gt;</strong>
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p>autoplay + mute + no controls.</p> <p>autoplay + mute + no controls.</p>
@@ -747,7 +749,7 @@
<h3>YouTube API</h3> <h3>YouTube API</h3>
<p><code>autoplay + loop</code></p> <p><code>autoplay + loop</code></p>
<pre>&lt;div class="embed"&gt; <pre>&lt;div class="embed"&gt;
&lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt; &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
</div> </div>
@@ -782,7 +784,7 @@
<hr> <hr>
<pre><strong>&lt;section class="fullscreen"&gt;</strong> <pre><strong>&lt;section class="fullscreen"&gt;</strong>
&lt;div class="embed"&gt; &lt;div class="embed"&gt;
&lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&gt;&lt;/div&gt; &lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
<strong>&lt;/section&gt;</strong> <strong>&lt;/section&gt;</strong>
</pre> </pre>
@@ -874,7 +876,7 @@
<li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li> <li><strong class="text-label" title="Website">Website:</strong> <a href="http://www.visitasevilla.es/en">visitasevilla.es</a></li>
</ul> </ul>
<p> <p>
There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies. There are many reasons to visit Seville. Its Old Town contains three UNESCO World Heritage Sites: the Alcazar palace complex, the Cathedral and the General Archive of the Indies.
</p> </p>
</div> </div>
<!-- end .flex-content--> <!-- end .flex-content-->
@@ -885,7 +887,7 @@
</section> </section>
<section class="fullscreen"> <section class="fullscreen">
<div class="embed"> <div class="embed">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="800" height="600" allowfullscreen></iframe>
</div> </div>
<!-- .end .embed --> <!-- .end .embed -->
</section> </section>
@@ -930,20 +932,20 @@
<h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2> <h2 class="text-emoji zoomIn"><strong><a href="https://webslides.tv" title="WebSlides">😎</a></strong></h2>
<h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3> <h3><a href="https://twitter.com/webslides" title="WebSlides on Twitter">@WebSlides</a></h3>
</section> </section>
</article> </article>
</main> </main>
<!--main--> <!--main-->
<!-- Required --> <!-- Required -->
<script src="../static/js/webslides.js"></script> <script src="../static/js/webslides.js"></script>
<script> <script>
window.ws = new WebSlides(); window.ws = new WebSlides();
</script> </script>
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) --> <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script> <script defer src="../static/js/svg-icons.js"></script>
</body> </body>
</html> </html>

10
demos/netflix-culture.html
View File

@@ -138,7 +138,7 @@
<svg class="fa-info-circle large"> <svg class="fa-info-circle large">
<use xlink:href="#fa-info-circle"></use> <use xlink:href="#fa-info-circle"></use>
</svg> </svg>
<strong>A Bit of Context</strong> <strong>A bit of context</strong>
</h2> </h2>
<hr> <hr>
<p><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> created <a href="https://jobs.netflix.com/life-at-netflix">Netflix's culture</a>. She wrote the document called <strong>"Netflix Culture: Freedom & Responsibility."</strong> (2009). So far, it's been shared over 16 million times on <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.</p> <p><a href="http://firstround.com/review/The-woman-behind-the-Netflix-Culture-doc/">Patty McCord</a> created <a href="https://jobs.netflix.com/life-at-netflix">Netflix's culture</a>. She wrote the document called <strong>"Netflix Culture: Freedom & Responsibility."</strong> (2009). So far, it's been shared over 16 million times on <a href="https://www.slideshare.net/reed2001/culture-1798664">Slideshare</a> and has been called "the most important document ever to come out of the Valley" by Sheryl Sandberg.</p>
@@ -150,7 +150,7 @@
<div class="wrap"> <div class="wrap">
<div class="grid vertical-align"> <div class="grid vertical-align">
<div class="column"> <div class="column">
<h3><strong>We Seek Excellence</strong></h3> <h3><strong>We seek excellence</strong></h3>
</div> </div>
<div class="column"> <div class="column">
<p class="text-intro">We value candor, transparency, and courage. <strong>We embrace context and avoid control</strong>, seeking insight and understanding to make sound decisions. <p class="text-intro">We value candor, transparency, and courage. <strong>We embrace context and avoid control</strong>, seeking insight and understanding to make sound decisions.
@@ -198,7 +198,7 @@
<section> <section>
<!--.wrap = container (width: 90%) --> <!--.wrap = container (width: 90%) -->
<div class="wrap size-50"> <div class="wrap size-50">
<h2><strong>9 behaviors</strong></h2> <h2><strong>9 Behaviors</strong></h2>
<p class="text-intro">At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.</p> <p class="text-intro">At Netflix, we particularly value the following nine behaviors and skills. We hire and promote people who demonstrate these nine.</p>
<hr> <hr>
<ol class="text-cols"> <ol class="text-cols">
@@ -304,13 +304,13 @@
<h3><strong>3/7 Freedom & Responsibility</strong></h3> <h3><strong>3/7 Freedom & Responsibility</strong></h3>
<p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p> <p class="text-intro">Most companies have complex policies around what you can expense, how you travel, what gifts you can accept, etc.</p>
<hr> <hr>
<p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's Best Interest" (5 words long).</p> <p class="text-intro"><strong>Netflix's Policy</strong>: "Act in Netflix's best interest" (5 words long).</p>
</div> </div>
<!-- .end .wrap --> <!-- .end .wrap -->
</section> </section>
<section> <section>
<div class="wrap"> <div class="wrap">
<h3><strong>"Act in Netflix's Best Interest"</strong> Generally Means...</h3> <h3><strong>"Act in Netflix's best interest"</strong> generally means...</h3>
<ul class="flexblock border"> <ul class="flexblock border">
<li> <li>
Expense only what you would otherwise not spend. Expense only what you would otherwise not spend.

2
demos/why-webslides.html
View File

@@ -122,6 +122,8 @@
<section class="bg-black aligncenter"> <section class="bg-black aligncenter">
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light --> <!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
<span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span> <span class="background" style="background-image:url('https://source.unsplash.com/OkAAx4mI2Hc/')"></span>
<!-- background with a frame frame -->
<span class="background frame"></span>
<!--.wrap = container (width: 90%) --> <!--.wrap = container (width: 90%) -->
<div class="wrap fadeInUp"> <div class="wrap fadeInUp">
<h1> <h1>