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

Updating templates and releasing the dist

Browse Source
This commit is contained in:
Antonio Laguna
2017-01-30 15:59:20 +01:00
parent 62ffaf95d6
commit 585ab60b43
14 changed files with 4651 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
demos/landings.html
View File

@@ -3,39 +3,39 @@
<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/jlantunez/webslides
Thanks,
@jlantunez.
-->
<!-- SEO -->
<title>WebSlides Landings: Create your web presence easily</title>
<meta name="description" content="WebSlides is the easiest way to create HTML presentations and landings. 120+ free slides ready to use.">
<!-- 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&amp;subset=latin-ext" rel="stylesheet">
<!-- CSS Base -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
<!-- CSS Colors -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
<!-- FACEBOOK -->
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
<meta property="og:type" content="article">
@@ -43,7 +43,7 @@
<meta property="og:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT -->
<meta property="og:updated_time" content="2017-01-04T16:54:27"> <!-- 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 -->
@@ -51,7 +51,7 @@
<meta name="twitter:title" content="WebSlides Landings: Create your web presence easily"> <!-- EDIT -->
<meta name="twitter:description" content="Create simple, beautiful landing pages with WebSlides. 120+ free slides ready to use."> <!-- EDIT -->
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
<!-- FAVICONS -->
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
@@ -60,7 +60,7 @@
<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">
@@ -92,13 +92,13 @@
</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 1200px / <div class="wrap size-50"> = 600px;
-->
<section class="bg-purple aligncenter">
<span class="background dark" style="background-image:url('https://source.unsplash.com/C1HhAQrbykQ/')"></span>
<!--.wrap = container 1200px -->
@@ -371,7 +371,7 @@
<div class="alignright size-50 bg-trans-dark">
<p class="text-subtitle text-serif">New in London</p>
<h3><strong>Hotel Daenerys</strong></h3>
<p>The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.</p>
<p>The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.</p>
<p class="aligncenter"><a class="button" href="#">More info</a></p>
</div>
</div>
@@ -1144,7 +1144,7 @@
<li> Founded
<span>1986</span>
</li>
<li>
<li>
<span>120+</span>
Prebuilt Slides
</li>
@@ -1518,7 +1518,7 @@
<h2>Buttons</h2>
<p>
<a href="#" class="button" title="Button">
.button</a>
.button</a>
<a href="#" class="button" title="Button">
<svg class="fa-github">
<use xlink:href="#fa-github"></use>
@@ -1537,7 +1537,7 @@
<p><code>a.badge-ios</code> and <code>a.badge-android</code></p>
<p>
<a href="#" class="badge-ios" title="Download iOS App">
iOS App</a>
iOS App</a>
<a href="#" class="badge-android" title="Download Android App">
Android App</a>
</p>
@@ -1694,7 +1694,7 @@
<div class="wrap">
<h2>Transparent Logos</h2>
<p>
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
</p>
<hr>
<ul class="flexblock">
@@ -1718,7 +1718,7 @@
</li>
<li class="bg-green">
<div>
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<img class="whitelogo" src="../static/images/logos/google.svg" alt="Google">
<p><code>img.whitelogo</code></p>
</div>
</li>
@@ -1811,7 +1811,7 @@
<div class="content-left">
<h3>Responsive Videos</h3>
<pre>&lt;div class="embed"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
&lt;/iframe&gt;
&lt;/div&gt;</pre>
<p><code>.embed</code></p>
@@ -1836,7 +1836,7 @@
</div>
<!-- .end .embed -->
</div>
<!-- .end .wrap -->
<!-- .end .wrap -->
</section>
<section class="fullscreen">
<!-- Fullscreen Video -->
@@ -1913,15 +1913,16 @@
</div>
<!-- .end .wrap -->
</section>
</article>
</main>
<!--main-->
<!-- jQuery (required for slides to work) -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/js/webslides.js"></script>
<script src="../dist/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>