-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
97 lines (92 loc) · 7.45 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/clipboard.css">
<link rel="stylesheet" href="css/buttons.css">
<title>Clipboard CSS Demo</title>
</head>
<body>
<header>
<h1>Clipboard CSS Demo</h1>
<nav>
<ul class="nav">
<li><a href="https://github.com/benlk/clipboard/">On GitHub</a></li>
<li><a href="demo.html">Demo</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li class="back"><a href="index.html">Home</a></li>
</ul>
</nav>
</header>
<h2>A demonstration of classes, beginning with H1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et faucibus augue. Proin sollicitudin at leo nec laoreet. Donec semper molestie dolor, id ullamcorper lectus gravida sit amet.</p>
<p>Proin cursus odio purus, et scelerisque velit semper nec. Maecenas sit amet lectus sed quam bibendum vehicula. Maecenas a neque massa. Vivamus eget rhoncus sapien, iaculis tempor massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti.</p>
<h2>And now an H2</h2>
<p>Morbi aliquet risus vel nibh sagittis fermentum. In luctus congue purus, vel dignissim justo adipiscing a. Nulla vitae tincidunt massa, vitae sodales leo. Nam vel nibh elementum, placerat turpis vel, mattis justo. Maecenas sit amet velit quis lacus pharetra mattis ut in eros. Vivamus accumsan congue justo quis hendrerit.</p>
<blockquote><p>Blockquotes are interesting. Mauris id orci vel arcu interdum ullamcorper. Maecenas tempus interdum interdum. Donec posuere augue non mattis pretium. Phasellus rhoncus nulla sem, et rhoncus neque congue et. Nulla dapibus risus a vulputate condimentum. Duis rutrum tortor vel odio tincidunt, quis ultrices neque varius.</p><cite>- Ovid</cite></blockquote>
<p>Suspendisse et lacus leo.</p>
<h3>H3 is in fashion this year</h3>
<p>Nam suscipit pharetra gravida. Maecenas vitae eleifend lacus, <code>p, li { margin-top: 10px; }</code> vel lacinia orci. Quisque ut orci eu sapien placerat luctus ac eget nulla. Vivamus ut turpis et quam cursus mattis. Donec semper eget justo sed blandit. Proin semper purus sed eros imperdiet ornare. Vestibulum porttitor ultricies augue, in vehicula nunc tempor eu.</p>
<pre><code>.author, .date {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
display: inline-block;
color: #777;
margin-bottom: 30px;
} </code></pre>
<h4>H4 is so '90s</h4>
<p>Integer consectetur facilisis molestie. Sed lorem arcu, molestie quis nulla ut, vehicula gravida turpis. Nam vitae neque porttitor, pulvinar nisl nec, condimentum diam. In rutrum dignissim nulla, nec auctor enim feugiat a.</p>
<p><i>Mostly</i> text. Clipboard CSS has rules for images, and can shove them left or right as you wish. The default is centered. On wider viewports, images will slide to the right and left. On viewports narrower than the standard body width of 660px, all images will be centered.</p>
<img src="http://placehold.it/700x300&text=700x300">
<p>Pellentesque luctus, libero at aliquet blandit, eros quam convallis sem, ullamcorper cursus justo massa vel augue. Etiam velit ligula, fringilla vel dolor ut, pharetra aliquet felis. Aliquam erat volutpat. Donec euismod egestas accumsan. Maecenas sit amet lacus elementum, suscipit nunc nec, iaculis lectus.</p>
<img src="http://placehold.it/200x300&text=centered+by+default">
<p>Aenean sollicitudin sagittis tellus, sit amet feugiat urna ultricies sit amet. Aenean risus justo, tristique non condimentum eget, cursus a mauris. Sed pulvinar volutpat tempor. Nulla vitae molestie arcu. Pellentesque pharetra, ligula quis commodo luctus, neque mauris blandit sapien, sed dignissim tortor augue id magna. Ut ac varius erat.</p>
<img src="http://placehold.it/200x300&text=.float-right" class="float-right">
<p>Praesent orci nisi, laoreet vitae tempor id, consectetur non mi. Donec eu hendrerit diam. Aliquam erat volutpat. Fusce auctor lobortis semper. Fusce ut dignissim nisi. Aenean sit amet augue nec justo fringilla laoreet nec vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eget condimentum nisi. Phasellus fermentum quam faucibus elementum facilisis. </p>
<img src="http://placehold.it/300x200&text=.float-left" class="float-left">
<p>Fusce in erat est. Sed in arcu iaculis erat tristique pulvinar vitae quis orci. Integer lobortis nulla id nulla dictum blandit. Ut lectus orci, dictum in porta ac, porta ut risus. Nunc placerat dapibus consequat. Nulla cursus in nulla quis congue. Phasellus vel ullamcorper metus. Sed laoreet ante in sapien accumsan aliquet. Donec egestas at ipsum at facilisis. Nullam non ipsum porta, convallis lorem vitae, tristique risus. Pellentesque fermentum vulputate felis id bibendum. Sed neque lectus, viverra at enim eget, congue tempus tortor. Etiam elit urna, consectetur a tortor in, sollicitudin rutrum dolor. Pellentesque ornare rhoncus vulputate. Vivamus eget lorem convallis, dignissim nisl et, rhoncus leo.</p>
<h5>Kids and their H5</h5>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce tempus feugiat dui, ut convallis dolor pulvinar id. Nam sapien risus, egestas at sem a, eleifend congue turpis. Donec mollis hendrerit enim. Sed sed porttitor urna. Quisque ac blandit elit. Cras gravida facilisis dapibus. Ut sed nunc metus. </p>
<ul>
<li>Let’s teke-a a typeecel seetooeshun</li>
<li>A boottun hes beee deseegned veet zee stunderd und trendy gluss/refflecshun iffffect, vhere-a zee boottun gues frum oone-a culuoor tu a leeghter/derker ferseeun ooff thet culuoor. </li>
<li>Hurty flurty schnipp schnipp! </li>
<li>Bork bork bork! Zeey veell meke-a yuoor leeffe-a ieseeer vhee booeelding und meeenteining vebseetes. Um gesh dee bork, bork!</li>
</ul>
<p>Cras at dolor libero. Pellentesque at dolor lacus. Nunc elementum sollicitudin bibendum.</p>
<h6>Does anyone actually use H6?</h6>
<p>I've never seen it used in the wild.</p>
<p>Donec ac laoreet leo. Aliquam nec elit purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris lectus urna, dictum sed sem at, ornare vulputate dolor. Sed consectetur eleifend est at interdum. Morbi congue dictum dui sed euismod. Proin elementum justo quis lectus malesuada, sit amet ullamcorper elit adipiscing. Sed dignissim fringilla suscipit.</p>
<ol>
<li>Here we have a list of Chinese restaurants:</li>
<li>Foo Chin Duck</li>
<li>Paradise Rainbow Confucius
<ol>
<li>Schezuan Seal with Cherry Coke Broth</li>
<li>Flash Baked Dromedary with Wilted Casserole
<ol>
<li>Camel</li>
<li>Spinach
<ol>
<li>Green bits</li>
<li>Bits that aren't green</li>
</ol>
</li>
</ol>
</li>
<li>Braised Yak with Prune Spinach</li>
<li>Tempura Coyote with Liquified Grits</li>
<li>Spit-Cooked Whale with Hazelnut Foam</li>
</ol>
</li>
<li>Beijing Lotus Dynasty</li>
<li>Panda Dragon Imperial</li>
<li>Chin Terrace Great</li>
</ol>
<p> Integer congue, leo et dapibus lacinia, urna lacus viverra elit, non consequat arcu tellus in mauris. Donec ut erat laoreet, condimentum sem a, facilisis enim. Cras et tempor urna, vel lacinia arcu. Sed id felis fermentum, luctus felis volutpat, tincidunt lorem. Nam sed dolor pretium, pretium purus eu, aliquam nisl. Nulla pharetra venenatis tristique.</p>
<footer>
<p>Clipboard CSS by <a href="https://twitter.com/benlkeith">@benlkeith</a></p>
</footer>
</body>
</html>