-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtypography.html
92 lines (81 loc) · 2.73 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
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css" >
<h1>Typography</h1>
<h2>Global Styles</h2>
<dl>
<dt>Font family:</dt>
<dd>'Poppins', sans-serif</dd>
</dl>
<hr />
<h1>Headings:</h1>
<dl>
<dt>Font family:<dt>
<dd>'Poppins', sans-serif;</dd>
<dt>Colors:</dt>
<dd>#FFFFFF (white)</dd>
<dd>#424242 <span style="color:#424242">example</span</dd>
</dl>
<hr />
<h1>Heading one</h1>
<dl>
<dt>font-size:</dt>
<dd>48px</dd>
<dt>letter-spacing:</dt>
<dd>0.5px</dd>
<dt>line-height</dt>
<dd>56px</dd>
</dl>
<h2>Heading two</h2>
<dl>
<dt>font-size:</dt>
<dd>20px</dd>
<dt>letter-spacing:</dt>
<dd>??</dd>
<dt>line-height</dt>
<dd>28px</dd>
</dl>
<h3>Heading three</h3>
<p>Not used.</p>
<h1>Paragraphs</h1>
<h2>Standard paragraph</h2>
<p>
Praesent ultrices urna varius ex dapibus, quis congue quam accumsan. Mauris nec
feugiat eros, eu eleifend elit. Nullam sodales ligula eget dolor pellentesque,
eget posuere libero lacinia. Integer congue aliquet felis ac hendrerit. Integer
pharetra, neque et dictum sagittis, nunc elit finibus quam, ullamcorper
tristique elit urna eu turpis. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Ut hendrerit lectus non ligula
eleifend commodo. Aliquam sed egestas risus, a laoreet diam. Aliquam bibendum
vestibulum nulla nec pellentesque.
</p>
<h2>Subtext paragraph</h2>
<dl>
<dt>Color:</dt>
<dd>#7D7D7D<span style="color:#7D7D7D"> example</span</dd>
</dl>
<p class="subtext">
Praesent ultrices urna varius ex dapibus, quis congue quam accumsan. Mauris nec
feugiat eros, eu eleifend elit. Nullam sodales ligula eget dolor pellentesque,
eget posuere libero lacinia. Integer congue aliquet felis ac hendrerit. Integer
pharetra, neque et dictum sagittis, nunc elit finibus quam, ullamcorper
tristique elit urna eu turpis. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Ut hendrerit lectus non ligula
eleifend commodo. Aliquam sed egestas risus, a laoreet diam. Aliquam bibendum
vestibulum nulla nec pellentesque.
</p>
<h1>Links</h1>
<dl>
<dt>Un-visited Color:</dt>
<dd>#42A8CD <span style="color:#42A8CD">Example</dd>
<dt>Visited Color:</dt>
<dd>#??? Default: #551a8b <span style="color:#551a8b">Example</span></dd>
<dt>Active Color:</dt>
<dd>#??? Default: #ff0000 <span style="color:#ff0000">Example</span></dd>
<dt>Hover Color:</dt>
<dd>#??? Default: #0000EE <span style="color:#0000EE">Example</span></dd>
</dl>
<h2>Contextual Link Example</h2>
<p>Within a paragraph, there may be a link to <a href="">useful resources</a>
for the user.</p>
</html>