-
Notifications
You must be signed in to change notification settings - Fork 20
/
Copy pathindex.html
54 lines (38 loc) · 1.38 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="author" content="Nathan Ford" />
<meta name="description" content="Add an href to link any element in your HTML to a URL." />
<title>data-href - Put an href on it.</title>
<style>
body {
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 16px;
background-color: #f6f6f6;
padding: 10% 20%;
}
h1 {
font-size: 24px;
margin: 0 0 1em;
}
code {
font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace
}
.article {
background-color: #fff;
padding: 2em;
border: 1px solid #e6e6e6;
cursor: pointer;
}
</style>
</head>
<body>
<div class="article" data-href="https://github.com/nathanford/data-href/">
<h1><a href="https://github.com/nathanford/data-href/#readme">Learn more about data-href on github</a></h1>
<p><code>data-ref</code> is a quick bit of JavaScript to let you define an href on any element. This vanilla JS is library agnostic, and will degrade gracefully so long as your content also has a link to the desired URL.</p>
<small>More info: <a title="Learn about data attributes" href="http://html5doctor.com/html5-custom-data-attributes/">Learn about data attributes</a></small>
</div>
<script src="./data-href.js" type="text/javascript"></script>
</body>
</html>