-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
150 lines (146 loc) · 7.71 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typer.js</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|PT+Sans:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./assets/desert.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html, body { margin:0; width:100%; color:white; }
a { color:white; }
.gradient-bg-1 { background-image:linear-gradient(200deg, rgb(74, 174, 179) 10%, rgb(42, 80, 167) 100%); background-repeat:no-repeat; background-size:cover; }
.darkened { background-color:rgba(21, 21, 23, 0.4); }
body { margin:0; width:100%; font-size:17px; }
p { font-family:'Source Sans Pro',sans-serif; }
h1,h2,h3,h4,h5,h6 { font-family:'PT Sans',sans-serif; }
.information { margin:0 auto; max-width:800px; }
.information td { padding:10px; vertical-align:middle; }
.information img { width:40px; }
.title-area { height:50vh; max-height:400px; min-height:220px; position:relative; }
.titles { width:calc(100% - 0px); margin:0px; position:absolute; top:50%; -webkit-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); }
.titles h1 { white-space:pre-line; }
.titles h1,.titles p { text-align:center; position:relative; }
.shadow { -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 7px 0px; }
.center-section { position:relative; max-width:900px; margin: 0 auto; padding:10px; box-sizing: border-box; }
header { font-family:'PT Sans',sans-serif; text-align:left; vertical-align:middle;}
header ul { margin:0; padding:0; display:inline-block; }
header ul > li { display:inline; }
.button { background-color:rgb(207, 145, 17); border:none; border-bottom: 3px solid rgb(163, 111, 3); border-radius:3px; font-family:'PT Sans',sans-serif; font-size:14px; padding:5px; height:17px; font-weight:bold; margin:0px 0px 0px 5px; vertical-align:middle; text-decoration:none; display:inline-block;}
.button:hover:active { border-bottom-width:0; margin-top:3px;}
.button:hover { border-bottom-width:2px; margin-top:1px; cursor:pointer; height:17px;}
.reviews { position:relative; font-size:0; padding:20px; background-color:rgba(255, 255, 255, 1.0); text-align:center; border:1px solid rgb(230,230,230); border-width:1px 0 1px 0; }
.review { text-align:left; color:black; padding:10px; display:inline-block; width:calc(50% - 20px); max-height:120px; overflow:hidden; vertical-align:top; max-width:450px; }
@media screen and (max-width:700px) { .review { width:calc(100% - 20px); } .special-break::after { content:'\00000a'; } .top-space { height:15vh; } .review { max-width:none; } #gitLink { display:none; }}
.review .picture { width:100px; height:100px; float:left; border-radius:50px; border:1px solid rgb(49, 49, 52); margin-right:10px; }
.review h3 { margin-bottom:0; font-size:initial; }
.review p { color:rgb(60, 60, 60); margin-top:0; font-size:initial; }
.information-area { color:black; background-color:rgba(244, 244, 249, 1.0); padding:20px; }
.information-area h3 { margin: 0; }
.information-area p { color:rgb(60, 60, 60); }
.section { margin:0; padding:20px; text-align:center; font-size:0; }
.section h2 { font-size:25px; }
.section .infoblock { display:inline-block; font-size:17px; max-width:225px; width:calc(25%); background-color: green; margin:0; }
/* important!s override fetched prettyprint */
pre { overflow-x:scroll; padding: 10px !important; border: none !important; border-radius: 3px; }
</style>
</head>
<body>
<div class="title-area gradient-bg-1">
<header class="center-section">
<span style="font-size:23px;font-weight:700;vertical-align:middle;">Typer.js</span>
<ul>
<li><a class="button" href="docs/index.html">Docs</a></li>
<li><a class="button" href="playground.html">Examples</a></li>
<li><a class="button" href="https://unpkg.com/[email protected]/typer.js" target="_blank">Download</a></li>
</ul>
<a id="gitLink" href="https://github.com/straversi/Typer.js"><img style="display:inline-block;float:right;height:30px;" src="assets/github.png" alt="github"></a>
</header>
<div class="titles">
<h1>Typer.js is <span class="special-break"></span><span class="typer" id="main" data-words="great,fun,lightweight,easy" data-colors="white" data-delay="100" data-deleteDelay="1000"></span><span class="cursor" data-owner="main"></span></h1>
<script async src="https://unpkg.com/[email protected]/typer.js"></script>
<p>the typing effect with a pure HTML interface</p>
</div>
</div>
<div class="information-area">
<div class="center-section">
<h2>Quick Start</h2>
<p>1. Place a typer and cursor into your html file, like this:</p>
<pre class="prettyprint">
<h1>Typer.js is
<span class="typer" id="main" data-words="great,fun,lightweight,easy" data-delay="100" data-deleteDelay="1000"></span>
<span class="cursor" data-owner="main"></span>
</h1>
<p>the typing effect with a pure HTML interface</p></pre>
<p>2. Link to the Typer.js script immediately <em>after</em> your typer and cursor usage.</p>
<pre class="prettyprint"><script async src="https://unpkg.com/[email protected]/typer.js"></script></pre>
<p>That's it! Now you have an simple visual hook for your site.</p>
</div>
</div>
<div class="reviews" id="reviews">
<div class="review">
<div class="picture shadow" style="background-image:url('assets/CarlosFlores.jpg');background-size:100%;"></div>
<h3>Carlos Flores</h3>
<p>"My life is 1,000 times better now that I have Typer.js-- Thank you!"</p>
</div>
<div class="review">
<div class="picture shadow" style="background-image:url('assets/BigDaddyKane.jpg');background-size:auto 100%;"></div>
<h3>Big Daddy Kane</h3>
<p>"I'm the authentic poet to get lyrical; For you to beat me, it's gonna take Typer.js"</p>
</div>
<br>
<div class="review">
<div class="picture shadow" style="background-image:url('assets/BarackObama.jpg');background-size:auto 100%;"></div>
<h3>Barack Obama</h3>
<p>"Typer.js has allowed access to health care for over 7 million Americans."</p>
</div>
<div class="review">
<div class="picture shadow" style="background-image:url('assets/DwightSchrute.jpg');background-size:auto 100%;"></div>
<h3>Dwight Schrute</h3>
<p>"Fact. Schrute Farms beet production is at a record high now that we use Typer.js."</p>
</div>
</div>
<div class="information-area">
<table class="information">
<tr>
<td>
<img src="assets/document_ok.svg" alt="a document with a check">
</td>
<td>
<h3>Easy to Use</h3>
<p>
Using Typer.js is easy. Include the small javascript file by placing
<code><script async src="https://unpkg.com/[email protected]/typer.js"></script></code>
at the bottom of your HTML file.
</p>
</td>
</tr>
<tr>
<td>
<img src="assets/book_2.svg" alt="a book">
</td>
<td>
<h3>It's Good Style</h3>
<p>
A pure HTML interface is important for readability. With Typer.js, you'll never
have to open a javascript file to change the attributes or words of the typing effect.
The words used appear right along the rest of your HTML, like they should.
</p>
</td>
</tr>
</table>
</div>
<!-- <div class="section gradient-bg-1">
<h2>Full Control</h2>
<div class="infoblock">
</div>
<div class="infoblock">
</div>
<div class="infoblock">
</div>
<div class="infoblock">
</div>
</div> -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</body>
</html>