mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-15 17:44:43 +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

6
demos/components.html
View File

@@ -2682,7 +2682,7 @@
<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;
@@ -2695,7 +2695,7 @@
<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;
@@ -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>

44
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>
@@ -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>

4
demos/media.html
View File

@@ -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
@@ -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>

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>