-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtypography.html
87 lines (78 loc) · 5.4 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
---
layout: null
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
<meta name="author" content="KlokanTech">
<meta name="description" content="Klokan Technologies GmbH">
<link href="http://klokantech.github.io/styles/base.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Klokan Technologies GmbH</title>
<script type="text/javascript" src="/js/index.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col12">
<p>Lorem ipsum text.</p>
<h1>Heading one</h1>
<p>This is the repository for the base cascading styles.</p>
<h2>Heading two</h2>
<p>Lorem ipsum <small>dolor sit amet</small>, consectetur <big>adipiscing elit</big>. Maecenas dignissim molestie turpis, vitae faucibus sem consectetur ut. Vestibulum vitae tellus tellus. Nullam mollis, ligula non porttitor laoreet, sem metus semper neque, nec condimentum magna velit id risus. Nam cursus laoreet luctus. Aliquam ex tortor, congue nec interdum sit amet, euismod pellentesque arcu. Vivamus mi mauris, volutpat a orci ut, sodales rhoncus magna. Pellentesque posuere vel nulla ut accumsan. Aenean at ligula odio. Pellentesque pulvinar augue neque, sed ultricies enim viverra in. Ut quis nibh orci.</p>
<p>In vel convallis massa. Duis ultrices libero id augue ullamcorper vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id felis vel metus efficitur faucibus ut at nisi. Proin eros nisl, ultricies quis porta sed, mollis a erat. Duis ex nisl, pharetra maximus lacus nec, porttitor interdum diam. Nulla mattis eu risus sed imperdiet.</p>
<h2>Heading two</h2>
<p>In vel convallis massa. <a>Duis ultrices libero</a> id augue ullamcorper vehicula. <b>Proin eros nisl</b>, ultricies quis porta sed, mollis a erat. Duis ex nisl, pharetra maximus lacus nec, porttitor interdum diam. Nulla mattis eu risus sed imperdiet.</p>
<h3>Heading three</h3>
<p>In vel convallis massa. Duis <i>ultrices libero id augue</i> ullamcorper vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id felis vel metus efficitur faucibus ut at nisi. Proin eros nisl, ultricies quis porta sed, mollis a erat. Duis ex nisl, pharetra maximus lacus nec, porttitor interdum diam. Nulla mattis eu risus sed imperdiet.</p>
<h3>Heading three</h3>
<p>Paptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id felis vel metus efficitur faucibus ut at nisi. Proin eros nisl, ultricies quis porta sed, mollis a erat. Duis ex nisl, pharetra maximus lacus nec, porttitor interdum diam. Nulla mattis eu risus sed imperdiet.</p>
<h3>Heading three</h3>
<p>Duis ultrices libero id augue ullamcorper vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id felis vel metus efficitur faucibus ut at nisi. Proin eros nisl, ultricies quis porta sed, mollis a erat. Duis ex nisl, pharetra maximus lacus nec, porttitor interdum diam. Nulla mattis eu risus sed imperdiet.</p>
<h4>Heading four</h4>
<p>Duis ultrices libero id augue ullamcorper vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id felis vel metus efficitur faucibus ut at nisi. Proin eros nisl, ultricies quis porta sed, mollis a erat. Duis ex nisl, pharetra maximus lacus nec, porttitor interdum diam. Nulla mattis eu risus sed imperdiet.</p>
<h5>Heading five</h5>
<p>Duis ultrices libero id augue ullamcorper vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id felis vel metus efficitur faucibus ut at nisi. Proin eros nisl, ultricies quis porta sed, mollis a erat. Duis ex nisl, pharetra maximus lacus nec, porttitor interdum diam. Nulla mattis eu risus sed imperdiet.</p>
</div>
</div>
<div class="row">
<div class="col3">
<p>
<span class="smaller">smaller 65%</span><br>
<span class="small">small 85%</span><br>
normal<br>
<span class="big">big 115%</span><br>
<span class="bigger">bigger 135%</span>
</p>
</div>
<div class="col3">
<p><a href="http://klokantech.com">hyperlink</a><br>
<dfn title="http://klokantech.com">defining</dfn><br>
<abbr title="http://klokantech.com">abbreviation</abbr><br>
<strong>strong</strong><br>
<b>bold</b><br>
<i>offset text typically styled in italic</i><br>
<cite>cited title of a work</cite><br>
<em>emphatic</em><br>
<ins>inserted text</ins><br>
<del>deleted text</del><br>
<mark>marked (highlighted) text</mark><br>
</div>
</div>
<div class="row">
<div class="col3">
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
</div>
<div class="col3">
<p>This is paragraph. This is paragraph. This is paragraph. This is paragraph.</p>
</div>
</div>
</div>
</body>
</html>