-
Notifications
You must be signed in to change notification settings - Fork 23
/
playground.html
64 lines (59 loc) · 3.67 KB
/
playground.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typer.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html, body { margin:0; width:100%; }
.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; }
a { color:white; }
.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; }
h2 { margin-top: 48px; }
.center-section { position:relative; max-width:900px; margin: 0 auto; padding:10px; width:100%; box-sizing: border-box;}
.center-section a { text-decoration: none; }
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;}
@media screen and (max-width:700px) { #git-link { display:none; }}
</style>
</head>
<body>
<div class="gradient-bg-1">
<header class="center-section">
<a href="/typerjs/">
<span style="font-size:23px;font-weight:700;vertical-align:middle;">Typer.js</span>
</a>
<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/typer-dot-js@0.1.0/typer.js" target="_blank">Download</a></li>
</ul>
<a id="git-link" 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>
<div class="center-section">
<h2>Basic example</h2>
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="straversi" data-slug-hash="yrLvmw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Typer.js Example 1">
<span>See the Pen <a href="https://codepen.io/straversi/pen/yrLvmw/">
Typer.js Example 1</a> by Steven Traversi (<a href="https://codepen.io/straversi">@straversi</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<h2>Using data-loop to stop on last word</h2>
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="straversi" data-slug-hash="BEarGM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Typer.js Example 2">
<span>See the Pen <a href="https://codepen.io/straversi/pen/BEarGM/">
Typer.js Example 2</a> by Steven Traversi (<a href="https://codepen.io/straversi">@straversi</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
</div>
<script src="typer.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</body>
</html>