Skip to content

Commit 0999836

Browse files
plonglamoureuxplonglamoureux
authored
Add files via upload
1 parent 5ba9157 commit 0999836

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+18784
-0
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Preston Long-Lamoureux
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎demos/classes.html

+1,944
Large diffs are not rendered by default.

‎demos/components.html

+3,137
Large diffs are not rendered by default.

‎demos/index.html

+233
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<!doctype html>
2+
<html lang="en" prefix="og: http://ogp.me/ns#">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<!-- CLEAN MARKUP = GOOD KARMA.
8+
Hi source code lover,
9+
10+
you're a curious person and a fast learner ;)
11+
Let's make something beautiful together. Contribute on Github:
12+
https://github.com/jlantunez/webslides
13+
14+
Thanks,
15+
@jlantunez.
16+
-->
17+
18+
<!-- SEO -->
19+
<title>WebSlides Demos</title>
20+
<meta name="description" content="Beautiful HTML presentations and websites made with WebSlides.">
21+
22+
<!-- URL CANONICAL -->
23+
<!-- <link rel="canonical" href="http://your-url.com/permalink"> -->
24+
25+
<!-- Google Fonts -->
26+
<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">
27+
28+
<!-- CSS Base -->
29+
<link rel="stylesheet" type="text/css" media="all" href="../static/css/base.css">
30+
31+
<!-- CSS Colors -->
32+
<link rel="stylesheet" type="text/css" media="all" href="../static/css/colors.css">
33+
34+
<!-- Optional - CSS SVG Icons (Font Awesome) -->
35+
<link rel="stylesheet" type="text/css" media="all" href="../static/css/svg-icons.css">
36+
37+
<!-- SOCIAL CARDS (ADD YOUR INFO) -->
38+
39+
<!-- FACEBOOK -->
40+
<meta property="og:url" content="http://your-url.com/permalink"> <!-- EDIT -->
41+
<meta property="og:type" content="article">
42+
<meta property="og:title" content="WebSlides Demos"> <!-- EDIT -->
43+
<meta property="og:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
44+
<meta property="og:updated_time" content="2017-01-04T17:22:34"> <!-- EDIT -->
45+
<meta property="og:image" content="../static/images/share-webslides.jpg" > <!-- EDIT -->
46+
47+
<!-- TWITTER -->
48+
<meta name="twitter:card" content="summary_large_image">
49+
<meta name="twitter:site" content="@webslides"> <!-- EDIT -->
50+
<meta name="twitter:creator" content="@jlantunez"> <!-- EDIT -->
51+
<meta name="twitter:title" content="WebSlides Demos"> <!-- EDIT -->
52+
<meta name="twitter:description" content="Beautiful HTML presentations and websites made with WebSlides."> <!-- EDIT -->
53+
<meta name="twitter:image" content="../static/images/share-webslides.jpg"> <!-- EDIT -->
54+
55+
<!-- FAVICONS -->
56+
<link rel="shortcut icon" sizes="16x16" href="../static/images/favicons/favicon.png">
57+
<link rel="shortcut icon" sizes="32x32" href="../static/images/favicons/favicon-32.png">
58+
<link rel="apple-touch-icon icon" sizes="76x76" href="../static/images/favicons/favicon-76.png">
59+
<link rel="apple-touch-icon icon" sizes="120x120" href="../static/images/favicons/favicon-120.png">
60+
<link rel="apple-touch-icon icon" sizes="152x152" href="../static/images/favicons/favicon-152.png">
61+
<link rel="apple-touch-icon icon" sizes="180x180" href="../static/images/favicons/favicon-180.png">
62+
<link rel="apple-touch-icon icon" sizes="192x192" href="../static/images/favicons/favicon-192.png">
63+
64+
<!-- Android -->
65+
<meta name="mobile-web-app-capable" content="yes">
66+
<meta name="theme-color" content="#333333">
67+
</head>
68+
<body>
69+
<header role="banner">
70+
<nav role="navigation">
71+
<p class="logo"><a href="../index.html" title="WebSlides">WebSlides</a></p>
72+
<ul>
73+
<li class="github">
74+
<a rel="external" href="https://github.com/jlantunez/webslides" title="Github">
75+
<svg class="fa-github">
76+
<use xlink:href="#fa-github"></use>
77+
</svg>
78+
<em>WebSlides</em>
79+
</a>
80+
</li>
81+
<li class="twitter">
82+
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
83+
<svg class="fa-twitter">
84+
<use xlink:href="#fa-twitter"></use>
85+
</svg>
86+
<em>@WebSlides</em>
87+
</a>
88+
</li>
89+
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/jlantunez" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>jlantunez</em></a></li> -->
90+
</ul>
91+
</nav>
92+
</header>
93+
94+
<main role="main">
95+
<article> <!-- Slideshow? id="webslides" -->
96+
97+
<!-- Quick Guide
98+
- Each parent <section> in the <article id="webslides"> element is an individual slide.
99+
- Vertical sliding = <article id="webslides" class="vertical">
100+
- <div class="wrap"> = container 1200px
101+
-->
102+
103+
<section>
104+
<span class="background-right" style="background-image:url('https://webslides.tv/static/images/architecture.png')"></span>
105+
<!--.wrap = container 1200px -->
106+
<div class="wrap">
107+
<h1><strong>WebSlides Demos</strong></h1>
108+
<p class="text-intro">All of these presentations are free and responsive.<br>
109+
40+ <a href="../demos/components.html" title="WebSlides Components">components</a> with a solid <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
110+
<p>Share your slides using <a href="https://twitter.com/search?q=%23webslides&amp;src=typd" title="#WebSlides on Twitter">#WebSlides</a>.</p>
111+
</div>
112+
<!-- .end .wrap -->
113+
</section>
114+
<section class="bg-white">
115+
<!-- .wrap = container 1200px -->
116+
<div class="wrap">
117+
<ul class="flexblock gallery">
118+
<li>
119+
<a href="../demos/why-webslides.html" title="Why WebSlides?">
120+
<figure>
121+
<img alt="Thumbnail Why WebSlides?" src="https://webslides.tv/static/images/demos-why.png">
122+
<figcaption>
123+
<h2>Why WebSlides?</h2>
124+
<time datetime="2017-12-08T21:21:44-05:00">Jan 08, 2017</time>
125+
</figcaption>
126+
</figure>
127+
</a>
128+
</li>
129+
<li>
130+
<a href="../demos/landings.html" title="Landings">
131+
<figure>
132+
<img alt="Thumbnail Landings" src="https://webslides.tv/static/images/demos-landings.png">
133+
<figcaption>
134+
<h2>Landings</h2>
135+
<time datetime="2017-01-07T19:21:26-05:00">Jan 07, 2017</time>
136+
</figcaption>
137+
</figure>
138+
</a>
139+
</li>
140+
<li>
141+
<a href="../demos/portfolios.html" title="Portfolios">
142+
<figure>
143+
<img alt="Thumbnail Portfolios" src="https://webslides.tv/static/images/demos-portfolios.png">
144+
<figcaption>
145+
<h2>Portfolios</h2>
146+
<time datetime="2017-01-06T21:22:21-05:00">Jan 06, 2017</time>
147+
</figcaption>
148+
</figure>
149+
</a>
150+
</li>
151+
<li>
152+
<a href="../demos/keynote.html" title="Apple Keynote">
153+
<figure>
154+
<img alt="Thumbnail Apple Keynote" src="https://webslides.tv/static/images/demos-apple.png">
155+
<figcaption>
156+
<h2>Apple Keynote</h2>
157+
<time datetime="2017-01-05T20:13:48-05:00">Jan 05, 2017</time>
158+
</figcaption>
159+
</figure>
160+
</a>
161+
</li>
162+
</ul>
163+
</div>
164+
<!-- .end .wrap -->
165+
</section>
166+
<section>
167+
<!--.wrap = container 1200px with fadein animation -->
168+
<div class="wrap">
169+
<h2 class="aligncenter">General Questions</h2>
170+
<p class="aligncenter">WebSlides Documentation: <a href="../demos/components.html" title="WebSlides Components">Components</a> &middot; <a href="../demos/classes.html" title="WebSlides Classes">Classes</a>.</p>
171+
<div class="grid">
172+
<div class="column">
173+
<h6>Why WebSlides? Good karma</h6>
174+
<p>There're excellent presentation tools out there. WebSlides is about telling and sharing stories. Hypertext, clean code, and beauty as narrative elements.</p>
175+
<h6>Is WebSlides a framework?</h6>
176+
<p>We're all tired of heavy CSS frameworks. WebSlides is a starting point that provides basic <a href="../demos/components.html" title="WebSlides Components">structural components</a> and a scalable <a href="../demos/classes.html" title="WebSlides Classes">CSS architecture</a>.</p>
177+
</div>
178+
<!-- end .column -->
179+
<div class="column">
180+
<figure><img src="../static/images/setup.png" alt="WebSlides Files"></figure>
181+
</div>
182+
<!-- end .column -->
183+
<div class="column">
184+
<h6>What can you do with WebSlides?</h6>
185+
<p>WebSlides is a cute solution for making HTML presentations, landings, and portfolios. <a href="../demos/components.html#slide=15">Put content wherever you want</a>, add <a href="../demos/components.html#slide=98">background images</a>, <a href="../demos/components.html#slide=101">videos</a>...
186+
</p>
187+
<h6>How easy is WebSlides?</h6>
188+
<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>
189+
</div>
190+
<!-- end .column -->
191+
</div>
192+
<!-- end .grid -->
193+
</div>
194+
<!-- end .wrap -->
195+
</section>
196+
<section class="bg-white aligncenter">
197+
<!-- .wrap = container 1200px -->
198+
<div class="wrap">
199+
<h2><strong>Start in seconds</strong> </h2>
200+
<p class="text-intro">Create your own presentation instantly. <br>120+ premium slides ready to use.</p>
201+
<p>
202+
<a href="https://github.com/jlantunez/webslides/archive/master.zip" class="button" title="Download WebSlides">
203+
<svg class="fa-cloud-download">
204+
<use xlink:href="#fa-cloud-download"></use>
205+
</svg>
206+
Free Download
207+
</a>
208+
<span class="try">
209+
<a href="https://www.paypal.me/jlantunez/8" title="Good karma :)">
210+
<svg class="fa-paypal">
211+
<use xlink:href="#fa-paypal"></use>
212+
</svg>
213+
Pay what you want.
214+
</a>
215+
</span>
216+
</p>
217+
</div>
218+
<!-- .end .wrap -->
219+
</section>
220+
221+
</article>
222+
</main>
223+
<!-- end main -->
224+
225+
<!-- jQuery (required for slides to work) -->
226+
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
227+
<script src="../static/js/webslides.js"></script>
228+
229+
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
230+
<script defer src="../static/js/svg-icons.js"></script>
231+
232+
</body>
233+
</html>

0 commit comments

Comments
 (0)