416 lines
23 KiB
HTML
416 lines
23 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 Demo: Longforms</title>
|
|||
|
|
<meta name="description" content="WebSlides is about telling stories. Create longform articles with ease.">
|
|||
|
|
|
|||
|
|
<!-- 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="https://webslides.tv/demos/why-webslides">
|
|||
|
|
|
|||
|
|
<!-- EDIT -->
|
|||
|
|
<meta property="og:type" content="article">
|
|||
|
|
<meta property="og:title" content="WebSlides Demo: Longforms" />
|
|||
|
|
|
|||
|
|
<!-- EDIT -->
|
|||
|
|
<meta property="og:description" content="Create longform articles with ease. Just the essentials.">
|
|||
|
|
|
|||
|
|
<!-- EDIT -->
|
|||
|
|
<meta property="og:updated_time" content="2017-03-28T18:24:48">
|
|||
|
|
|
|||
|
|
<!-- EDIT -->
|
|||
|
|
<meta property="og:image" content="../static/images/share-webslides.jpg" >
|
|||
|
|
|
|||
|
|
<!-- EDIT -->
|
|||
|
|
<meta property="og:image:width" content="800">
|
|||
|
|
<meta property="og:image:height" content="429">
|
|||
|
|
|
|||
|
|
<!-- 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 Demo: Longforms">
|
|||
|
|
|
|||
|
|
<!-- EDIT -->
|
|||
|
|
<meta name="twitter:description" content="Create longform articles with ease. Just the essentials.">
|
|||
|
|
|
|||
|
|
<!-- 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>
|
|||
|
|
<section>
|
|||
|
|
<!-- Overlay/Opacity: [class*="bg-"] > .background.dark or .light -->
|
|||
|
|
<span class="background-bottom" style="background-image:url('https://webslides.tv/static/images/nyc.jpg')"></span>
|
|||
|
|
<!--.wrap = container width: 90% -->
|
|||
|
|
<div class="wrap aligncenter">
|
|||
|
|
<h1 class="text-landing">
|
|||
|
|
<strong>Longform Demo</strong>
|
|||
|
|
</h1>
|
|||
|
|
<p class="text-intro">How to engage readers with longform journalism?<br> All content is for demo purposes only.
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<a href="https://webslides.tv/webslides-latest.zip" title="Download WebSlides for free" class="button zoomIn">
|
|||
|
|
<svg class="fa-cloud-download">
|
|||
|
|
<use xlink:href="#fa-cloud-download"></use>
|
|||
|
|
</svg>
|
|||
|
|
WebSlides
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- .end .wrap -->
|
|||
|
|
</section>
|
|||
|
|
<section class="bg-white">
|
|||
|
|
<!--.wrap.longform (width:72rem=720px) = Better reading experience (90-95 characters per line) -->
|
|||
|
|
<div class="wrap longform">
|
|||
|
|
<h2><strong>The Art of Storytelling</strong></h2>
|
|||
|
|
<p><a href="https://twitter.com/webslides" title="David Yang"><img class="avatar-40" src="../static/images/avatar.jpg" alt="David Yang"></a> David Yang. Nov 16th, 2032.</p>
|
|||
|
|
<p class="text-intro">
|
|||
|
|
WebSlides want to help tell stories that are meaningful. All content is for demo purposes only.
|
|||
|
|
</p>
|
|||
|
|
<p>People share content that makes them feel inspired. WebSlides is free and open source. We built it because we need a platform for beautiful storytelling. Longform journalism has grown in popularity over the past several years, with blogs and media organizations including <a href="https://medium.com">Medium</a>, <a href="http://highline.huffingtonpost.com/">The Huffington Post</a>, and <a href="http://nytimes.com">The New York Times</a> creating or expanding longform coverage and new companies such as <a href="https://atavist.com/">The Atavist</a>, <a href="https://longreads.com/">Longreads.com</a> and <a href="https://longform.com/">Longform.org</a> being founded to capitalize on the new interest.</p>
|
|||
|
|
<hr>
|
|||
|
|
<p class="aligncenter"><code>.wrap.longform</code> = 72rem (720px). <br>
|
|||
|
|
Why? Reading efficiency is highest at <a href="http://uxmovement.com/content/how-margins-and-line-lengths-affect-user-reading/">90-95 characters per line</a>.
|
|||
|
|
</p>
|
|||
|
|
<hr>
|
|||
|
|
<p>Longform journalism is a branch of journalism dedicated to longer articles with larger amounts of content. Typically this will be between 1,000 and 20,000 words.</p>
|
|||
|
|
<p>Storytelling is the social and cultural activity of sharing stories, often with improvisation, theatrics, or embellishment. Stories or narratives have been shared in every culture as a means of entertainment, education, cultural preservation and instilling moral values.</p>
|
|||
|
|
<p>Crucial elements of stories and storytelling include plot, characters and narrative point of view. The term 'storytelling' is used in a narrow sense to refer specifically to oral storytelling and also in a looser sense to refer to techniques used in other media to unfold or disclose the narrative of a story.</p>
|
|||
|
|
<p>Storytelling predates writing, with the earliest forms of storytelling usually oral combined with gestures and expressions. In addition to being part of religious rituals, some archaeologists believe rock art may have served as a form of storytelling for many ancient cultures.</p>
|
|||
|
|
<h2><strong>Alignments</strong></h2>
|
|||
|
|
<p>This is an image of a Nao (robot), aligned to the right. It also has a small caption.</p>
|
|||
|
|
<figure class="alignright">
|
|||
|
|
<img src="https://source.unsplash.com/2EJCSULRwC8/600x400" alt="Robot">
|
|||
|
|
<figcaption>
|
|||
|
|
<p><code>figure.alignright</code></p>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<p>For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text.</p>
|
|||
|
|
<p>Nao (pronounced now) is an autonomous, programmable humanoid robot developed by Aldebaran Robotics, a French robotics company headquartered in Paris. The robot's development began with the launch of Project Nao in 2004. On 15 August 2007, Nao replaced Sony's robot dog Aibo as the robot used in the RoboCup Standard Platform League (SPL), an international robot soccer competition. The Nao was used in RoboCup 2008 and 2009, and the NaoV3R was chosen as the platform for the SPL at RoboCup 2010.</p>
|
|||
|
|
<hr>
|
|||
|
|
<figure class="text-pull-left">
|
|||
|
|
<img src="https://source.unsplash.com/cr6RJblqjyo/600x400" alt="Skater">
|
|||
|
|
<figcaption>
|
|||
|
|
<p><code>.text-pull-left</code></p>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<p>This is an image of a skate, aligned to the left. It also has a small caption. For the floated image to look good, the surrounding text will need to be of a certain length. That's why I'm writing this filler text</p>
|
|||
|
|
<p>Typically one character is printed per keypress. The machine prints characters by making ink impressions of type elements similar to the sorts used in movable type letterpress printing.</p>
|
|||
|
|
<hr>
|
|||
|
|
<p>The story was then told using a combination of oral narrative, music, rock art and dance, which bring understanding and meaning of human existence through remembrance and enactment of stories. People have used the carved trunks of living trees and ephemeral media (such as sand and leaves) to record stories in pictures or with writing. Complex forms of tattooing may also represent stories, with information about genealogy, affiliation and social status.</p>
|
|||
|
|
<blockquote class="text-pull-right">
|
|||
|
|
<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." — <code>.text-pull-right</code>.</p>
|
|||
|
|
</blockquote>
|
|||
|
|
<p>With the advent of writing and the use of stable, portable media, stories were recorded, transcribed and shared over wide regions of the world. Stories have been carved, scratched, painted, printed or inked onto wood or bamboo, ivory and other bones, pottery, clay tablets, stone, palm-leaf books, skins (parchment), bark cloth, paper, silk, canvas and other textiles, recorded on film and stored electronically in digital form. Oral stories continue to be created, improvisationally by impromptu storytellers, as well as committed to memory and passed from generation to generation, despite the increasing popularity of written and televised media in much of the world.</p>
|
|||
|
|
<hr>
|
|||
|
|
<h3>Center aligned</h3>
|
|||
|
|
<figure class="aligncenter">
|
|||
|
|
<img src="https://source.unsplash.com/BnQULvE2mEA/800x600" alt="Scene from the Women’s March on Washington, DC.">
|
|||
|
|
<figcaption>
|
|||
|
|
<p><code>figure.aligncenter</code></p>
|
|||
|
|
</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
<p>This is a center aligned image. It also has a small caption. The sky (or celestial dome) is everything that lies above the surface of the Earth, including the atmosphere and outer space. The intensity of the sky varies greatly over the day, and the primary cause of that intensity differs as well. </p>
|
|||
|
|
<hr>
|
|||
|
|
<figure class="text-pull">
|
|||
|
|
<img src="https://source.unsplash.com/9bdt03k4ujw/800x400" alt="Japan">
|
|||
|
|
<figcaption>
|
|||
|
|
<p><code>figure.text-pull</code></p>
|
|||
|
|
</figcaption>
|
|||
|
|
</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>
|
|||
|
|
</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>
|
|||
|
|
<h2>Heading two</h2>
|
|||
|
|
<h3>Heading three</h3>
|
|||
|
|
<h4>Heading four</h4>
|
|||
|
|
<h5>Heading five</h5>
|
|||
|
|
<h6>Heading six</h6>
|
|||
|
|
<hr />
|
|||
|
|
<h3>Ordered List</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>Medium = Beautiful articles.</li>
|
|||
|
|
<li>Typeform = Beautiful forms.</li>
|
|||
|
|
<li>WebSlides = Beautiful presentations and longforms.</li>
|
|||
|
|
</ol>
|
|||
|
|
<h3>Unordered List</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>List Item 1</li>
|
|||
|
|
<li>List Item 2</li>
|
|||
|
|
<li>List Item 3</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3>Mixed List</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>
|
|||
|
|
List Item 1
|
|||
|
|
<ul>
|
|||
|
|
<li>List Item 1</li>
|
|||
|
|
<li>
|
|||
|
|
List Item 2
|
|||
|
|
<ol>
|
|||
|
|
<li>List Item 1</li>
|
|||
|
|
<li>
|
|||
|
|
List Item 2
|
|||
|
|
<ul>
|
|||
|
|
<li>List Item 1</li>
|
|||
|
|
<li>List Item 2</li>
|
|||
|
|
<li>List Item 3</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>List Item 3</li>
|
|||
|
|
</ol>
|
|||
|
|
</li>
|
|||
|
|
<li>List Item 3</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>List Item 2</li>
|
|||
|
|
<li>List Item 3</li>
|
|||
|
|
</ol>
|
|||
|
|
<hr />
|
|||
|
|
<h3>Table Styles</h3>
|
|||
|
|
<table>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<th>Table Header 1</th>
|
|||
|
|
<th>Table Header 2</th>
|
|||
|
|
<th>Table Header 3</th>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Division 1</td>
|
|||
|
|
<td>Division 2</td>
|
|||
|
|
<td>Division 3</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr class="even">
|
|||
|
|
<td>Division 1</td>
|
|||
|
|
<td>Division 2</td>
|
|||
|
|
<td>Division 3</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Division 1</td>
|
|||
|
|
<td>Division 2</td>
|
|||
|
|
<td>Division 3</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<hr>
|
|||
|
|
<h2>Blockquote</h2>
|
|||
|
|
<p>The blockquote tag can be used to display a quote from a person or from another site. It can be as long or as short as you like, and it is displayed like this:</p>
|
|||
|
|
<blockquote>
|
|||
|
|
<p>"Women, like men, should try to do the impossible. And when they fail, their failure should be a challenge to others."</p>
|
|||
|
|
<p><cite>Amelia Earhart.</cite></p>
|
|||
|
|
</blockquote>
|
|||
|
|
<p>Modern storytelling has a broad purview. In addition to its traditional forms (fairytales, folktales, mythology, legends, fables etc.), it has extended itself to representing history, personal narrative, political commentary and evolving cultural norms. Contemporary storytelling is also widely used to address educational objectives.</p>
|
|||
|
|
<blockquote class="text-pull">
|
|||
|
|
<p>"Without freedom of thought, there can be no such thing as wisdom - and no such thing as public liberty without freedom of speech." <code>.text-pull </code> </p>
|
|||
|
|
<p><cite>Benjamin Franklin.</cite></p>
|
|||
|
|
</blockquote>
|
|||
|
|
<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>
|
|||
|
|
<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><cite>Sheryl Sandberg.</cite></p>
|
|||
|
|
</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>
|
|||
|
|
<p>Storytelling can be used as a method to teach ethics, values and cultural norms and differences. Learning is most effective when it takes place in social environments that provide authentic social cues about how knowledge is to be applied. Stories function as a tool to pass on knowledge in a social context. So, every story has 3 parts. First, The setup (The Hero's world before the adventure starts). Second, The Confrontation (The hero's world turned upside down). Third, The Resolution (Hero conquer's villain, but it's not enough for Hero to survive. The Hero or World must be transformed). Any story can be framed in such format.</p>
|
|||
|
|
<hr>
|
|||
|
|
<h3 class="aligncenter"><strong>Stories that stay with you</strong></h3>
|
|||
|
|
<p class="aligncenter">Subscribe to our newsletter. All content is for demo purposes only.</p>
|
|||
|
|
<form action="/" class="bg-light user" method="post">
|
|||
|
|
<input type="email" name="email" tabindex="1" autocomplete="off" placeholder="your@email.com" required>
|
|||
|
|
<button type="submit" tabindex="2" title="Subscribe">Subscribe ›</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<section>
|
|||
|
|
<!-- .wrap = container width: 90% -->
|
|||
|
|
<div class="wrap aligncenter">
|
|||
|
|
<h2><strong>Ready to start?</strong> </h2>
|
|||
|
|
<p class="text-intro">Create your stories instantly.</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="Thanks :)">
|
|||
|
|
<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-->
|
|||
|
|
|
|||
|
|
<footer role="contentinfo">
|
|||
|
|
<div class="wrap">
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="column">
|
|||
|
|
<h3>Company</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#">About</a></li>
|
|||
|
|
<li><a href="#">Team</a></li>
|
|||
|
|
<li><a href="#">Blog</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<!-- .end .column -->
|
|||
|
|
<div class="column">
|
|||
|
|
<h3>Support</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#">Shipping & Returns</a></li>
|
|||
|
|
<li><a href="#">FAQ</a></li>
|
|||
|
|
<li><a href="#">Contact</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<!-- .end .column -->
|
|||
|
|
<div class="column">
|
|||
|
|
<h3>Legal</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="#">Terms of Service</a></li>
|
|||
|
|
<li><a href="#">Privacy Policy</a></li>
|
|||
|
|
<li><a href="#">Cookies</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<!-- .end .column -->
|
|||
|
|
<div class="column">
|
|||
|
|
<h3>Community</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">
|
|||
|
|
<svg class="fa-facebook">
|
|||
|
|
<use xlink:href="#fa-facebook"></use>
|
|||
|
|
</svg>
|
|||
|
|
Facebook
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">
|
|||
|
|
<svg class="fa-youtube">
|
|||
|
|
<use xlink:href="#fa-youtube"></use>
|
|||
|
|
</svg>
|
|||
|
|
YouTube
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#">
|
|||
|
|
<svg class="fa-twitter">
|
|||
|
|
<use xlink:href="#fa-twitter"></use>
|
|||
|
|
</svg>
|
|||
|
|
Twitter
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<!-- .end .column -->
|
|||
|
|
</div>
|
|||
|
|
<!-- .end .grid -->
|
|||
|
|
</div>
|
|||
|
|
<!-- .end .wrap -->
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
|||
|
|
<script defer src="../static/js/svg-icons.js"></script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|