-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (63 loc) · 3.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" width="device-width", intial-scale="1.0", maximum-scale="1.0">
<title>| View |</title>
<link rel="stylesheet" href="src/css/view.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="src/css/content.css" type="text/css" media="screen"></link>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'><!--web fonts -->
</head>
<body>
<div class="presentation">
<div class="slide">
<h1>View</h1>
<strong>Lightweight HTML5 & JavaScript web presentation plugin</strong>
<br/><br/>
<strong>Created by - <a href="https://github.com/0xAX" target="_blank">0xAX</a>/<a href="https://twitter.com/0xAX" target="_blank">@0xAX</a></strong><br>
<strong>Co-Creator - <a href="https://github.com/voidpirate" target="_black">voidpirate</a>/<a href="https://twitter.com/_voidPirate" target="_blank">@_voidpirate</a></strong><br> <br>
<small>Press UP or Down on your keyboard to move slide into view. Double click anywhere to toggle fullscreen on or off.</small>
</div>
<div class="slide">
<h1>What is View you say?</h1>
<section>View - Lightweight HTML5 & JavaScript web presentation plugin. Lightweight and simplicity is the main point of View. Just include the<code>view.min.js</code> file at the bottom of your HTML file. The JS code looks for all <code>class="slide"</code> instances and creates slides for each.
</section>
</div>
<div class="slide">
<h1>What do I get?</h1>
<ul>
<li><code>css/content.css</code> - content style (change it to your needs of your design)</li>
<li><code>css/layout.css</code> - include layout.css into your HTML</li>
<li><code>js/view.min.js</code> - all the magic happens here</li>
</ul>
</div>
<div id="slide4" class="slide">
<h1>How do I use this bad boy?</h1>
<ol>
<li>Create an HTML file and include the following in the <code>head</code> section:<code> css/layout.css</code>. Next add <code>css/content.css</code> for your own styling. </li>
<li>Create a script tag right above the closing <code>body</code> tag, like so: <code>script src="js/view.min.js"</code>.</li>
<li>Mark up the HTML file with your content you want to be displayed in the presentation. Slides are created using the class slide, like so: <code>div class="slide"</code>.
</ol>
</div>
<div id="slide5" class="slide">
<h1>support | bugs | features</h1>
<p>Find some bugs, need support, or just want to request some new features?</p>
<ul>
<li><strong>Support</strong> - send tweet to either <a href="https://twitter.com/_voidpirate">@_voidpirate</a> or <a href="https://twitter.com/0xAX">@0xAX</a>, and let us know what your running into.</a></li>
<li><strong>Bugs & Features</strong> - add this to the issues section here, and assign to either one of us and we will take care of it :)</strong>
</div>
<div class="slide">
<h1>THE END</h1>
<strong>Twitter:<a href="https://twitter.com/0xAX">@0xAX</a></strong>
<br/>
<strong>Github:<a href="https://github.com/0xAX">0xAX</a></strong>
<br/>
<strong>Twitter:<a href="https://twitter.com/_voidpirate">@_voidpirate</a></strong>
<br/>
<strong>Github:<a href="https://github.com/voidpirate">voidpirate</a></strong>
</div>
</div>
<!-- view.s -->
<script src="src/js/view.js"></script>
</body>
</html>