-
Notifications
You must be signed in to change notification settings - Fork 0
/
typography.html
121 lines (118 loc) · 6.83 KB
/
typography.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
<html lang="en">
<head>
<meta charset="utf-8">
<title>Typography / HTML-Boilerplate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="static/css/pure-min.css">
<link rel="stylesheet" href="static/css/grids-responsive-min.css">
<link rel="stylesheet" href="static/css/styles.css">
</head>
<body>
<div class="container">
<div class="pure-g custom-wrapper header" id="menu">
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu">
<a class="pure-menu-heading custom-brand" href="./index.html">HTML<span>Boilerplate</span></a>
<a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
</div>
</div>
<div class="pure-u-1 pure-u-md-2-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a class="pure-menu-link" href="./about.html">About</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="./imprint.html">Imprint</a></li>
<li class="pure-menu-item pure-menu-selected"><a class="pure-menu-link"
href="./typography.html">Typography</a></li>
</ul>
</div>
</div>
</div>
<div class="container-inner">
<hr class="header-ruler">
</div>
</div>
<div class="container content">
<div class="container-inner">
<div class="pure-g">
<div class="pure-u-1">
<h2>Typography</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>Subheading</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<ul>
<li>Lorem ipsum dolor sit amet 1</li>
<li>Lorem ipsum dolor sit amet 2</li>
<li>Lorem ipsum dolor sit amet 3</li>
<li>Lorem ipsum dolor sit amet 4</li>
<li>Lorem ipsum dolor sit amet 5</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et <a href="#">dolore magna aliqua</a>. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ol>
<li>Lorem ipsum dolor sit amet 1</li>
<li>Lorem ipsum dolor sit amet 2</li>
<li>Lorem ipsum dolor sit amet 3</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3>Subheading</h3>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h4>Subheading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="container-inner">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-3-5">
<h3 class="footer-heading footer-heading-first">About HTML-Boilerplate</h3>
<p class="footer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-5">
<h3 class="footer-heading">Links</h3>
<ul class="footer-list">
<li><a class="footer-link" target="_blank"
href="https://github.com/tbreuss/html-boilerplate">GitHub Repository</a></li>
</ul>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-5">
<h3 class="footer-heading">Toolset</h3>
<ul class="footer-list">
<li><a class="footer-link" target="_blank" href="http://purecss.io">Pure.css</a></li>
<li><a class="footer-link" target="_blank" href="https://www.w3.org/">HTML5</a></li>
</ul>
</div>
</div>
<hr class="footer-ruler">
<div class="pure-g">
<div class="pure-u-1">
A tiny <a class="footer-link" target="_blank" href="https://www.tebe.ch">tebe.ch</a> project
</div>
</div>
</div>
</div>
</div>
<script src="static/js/main.js"></script>
</body>
</html>