forked from wentin/underlineJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (80 loc) · 5.32 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UnderlineJS - a pixel perfect javascript library for drawing underline</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://brick.a.ssl.fastly.net/EB+Garamond:400,400i/Open+Sans:400,700">
<style>
body {
/*font-family: 'Open Sans';*/
/*font-family: Georgia, Times, "Times New Roman", serif;*/
font-family: 'EB Garamond';
font-size: 18px;
color: #333333;
margin: 0 20px;
padding: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "kern=1", "liga=1", "dlig=1", "hlig=1";
-moz-font-feature-settings: "kern" on, "liga" on, "dlig" on, "hlig" on;
-webkit-font-feature-settings: "kern","liga","dlig","hlig";
-ms-font-feature-settings: "kern","liga","dlig","hlig";
font-feature-settings: "kern","liga","dlig","hlig";
}
h1 {
font-weight: 400;
font-style: italic;
font-size: 90px;
display: inline-block;
color: #fd471e;
margin: 20px;
/*line-height: 180px;*/
/*line-height: 1.3;*/
/*text-align: center;*/
}
a {
color: #fd471e;
text-decoration: none;
font-style: italic;
}
p {
font-weight: 400;
font-size: 24px;
line-height: 1.5;
width: 800px;
margin: 20px auto;
}
.social {
text-align: center;
border-bottom: solid 1px #aaaaaa;
}
.social a, .social iframe {
display: inline-block;
padding: 40px 0 30px 0;
}
.tunderline {
text-decoration: underline;
color: #a0ad39;
}
</style>
<link type="text/css" rel="stylesheet" href="css/underline.css" />
<script type="text/javascript" src="js/baseline-ratio.js"></script>
<script type="text/javascript" src="js/underline.js"></script>
<script type="text/javascript" src="js/guitar-string.js"></script>
<script type="text/javascript" src="js/class.js"></script>
</head>
<body>
<div class="social">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://github.com/wentin/underlineJS" data-text="A javascript library that sets out to do one simple job: draw the perfect underline" data-via="DesignJokes" data-size="large" data-hashtags="UnderlineJS">Tweet underline.js</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=wentin&repo=UnderlineJS&type=watch&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
</div>
<h1 class="underline"><span>parapsychologist</span></h1>
<h1 class="tunderline">parapsychologist</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id facere iste vero quia accusamus, quisquam inventore aliquid non veritatis, Qodi repudiandae dolore. Numquam, odit, quas. Provident doloribus sapiente dolor quia porro similique pariatur sunt rem tempore nihil, quidem blanditiis unde odit officiis aspernatur mollitia, tempora atque eius optio, harum reiciendis. Ullam veniam veritatis id cum saepe et ratione exercitationem at quasi ab temporibus, nobis omnis atque, dolorem quis libero laudantium nostrum beatae ad fuga quia dolores eum dolore! <a href="#" class="underline">Qeicigndis tempore, neque aut numquam fugit pariatur quidem voluptatum eligendi minus, necessitatibus mollitija? Qumquam provident rem eius non accusantium magnamsolu-taiste-praesentium, ipsjam magni veniam placjeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio Qeicigndis tempore,</a> neque aut numquam fugit pariatur qujidem voluptatum eligejndi minus, necessitatibus mollitia? Qumquam provident rem eius non accjusantium magnamsolu-taistepraesentium, ipsam magni veniam placeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio atque ea quod nihil. Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur a reprehenderit, deleniti consectetur <a href="#" class="underline">parapsychologiest</a> bitis suscipit <a href="#" class="tunderline">parapsychologiest</a> hic obcaecati ipsam ullam quae, atque sint. Fugiat tenetur eos asperiores totam hic accusantium <a href="#" class="underline">blanditiis beatae</a> nemo deleniti. Odio repudiandae minima eius est vero blanditiis iure quia quis molestiae tempore, <a href="#" class="tunderline">atque, fuga</a> vel nihil dolo <a href="#" class="underline">atque, fuga</a> quisquam ab praesentium nihil perferendis, commodi odit, facere consequatur illum? Vero similique vel doloremque expedita corrupti architecto eligendi laborum magni eos et, quas obcaecati sed cum accusamus earum error quia. Eum, ipsa non officia dolorem, inventore necessitatibus cupiditate voluptatum enim suscipit repudiandae totam?</p>
</body>
</html>