forked from Code-for-All/codeforall.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
styleguide.html
120 lines (115 loc) · 7.57 KB
/
styleguide.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin="" />
<link href="https://fonts.googleapis.com/css?family=Muli:300,400i,600,700,800,900" rel="stylesheet">
<title>Styleguide</title>
</head>
<body>
<div class="styleguide">
<div class="container-fluid">
<div class="row">
<div class="col-6 style-blue-text">
<h2 class="h2-desktop pd-left styleguide-mrg">Styleguide</h2>
<div class="collors pd-left">
<div class="color blue"></div>
<div class="color red"></div>
<div class="color dark-blue"></div>
<div class="color grey"></div>
<div class="color white"></div>
</div>
</div>
<div class="col-6 style-white-text mrg-bot--1px"></div>
</div>
<div class="row">
<div class="col style-blue-text">
<div class="row">
<div class="col">
<h1 class="h1-desktop pd-left mrg-h1-top-desk mrg-h-bot-20px-desk">H1 title</h1>
<h2 class="h2-desktop pd-left mrg-h-bot-20px-desk">H2 title</h2>
<h3 class="h3-desktop pd-left mrg-h-bot-20px-desk">H3 title</h3>
<h4 class="h4-desktop pd-left mrg-h-bot-20px-desk">H4 title</h4>
</div>
<div class="col">
<h1 class="h1-mobile mrg-h1-top-mob pd-right">H1 title mobile</h1>
<h2 class="h2-mobile pd-right">H2 title mobile</h2>
<h3 class="h3-mobile mrg-h3-top-mob pd-right">H3 title mobile</h3>
<h4 class="h4-mobile pd-right">H4 title mobile</h4>
</div>
</div>
<p class="p-into-text pd-left p-mrg-top pd-right">INTO TEXT Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac.</p>
<p class="p-body-text pd-left pd-right">BODY TEXT Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac.</p>
<p class="p-small-text pd-left pd-right">SMALL TEXT Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac.</p>
</div>
<div class="col style-white-text mrg-bot--1px">
<div class="row">
<div class="col">
<h1 class="h1-desktop white-text pd-left-small mrg-h1-top-desk mrg-h-bot-20px-desk">H1 title</h1>
<h2 class="h2-desktop white-text pd-left-small mrg-h-bot-20px-desk">H2 title</h2>
<h3 class="h3-desktop white-text pd-left-small mrg-h-bot-20px-desk">H3 title</h3>
<h4 class="h4-desktop white-text pd-left-small mrg-h-bot-20px-desk">H4 title</h4>
</div>
<div class="col">
<h1 class="h1-mobile white-text pd-left-small mrg-h1-top-mob">H1 title mobile</h1>
<h2 class="h2-mobile white-text pd-left-small">H2 title mobile</h2>
<h3 class="h3-mobile white-text pd-left-small mrg-h3-top-mob">H3 title mobile</h3>
<h4 class="h4-mobile white-text pd-left-small">H4 title mobile</h4>
</div>
</div>
<p class="p-into-text white-text pd-left-small p-mrg-top pd-right-big">INTO TEXT Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac.</p>
<p class="p-body-text white-text pd-left-small pd-right-big">BODY TEXT Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac.</p>
<p class="p-small-text white-text pd-left-small pd-right-big">SMALL TEXT Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac.</p>
</div>
</div>
<div class="row">
<div class="col style-blue-text">
<a class="nav-link-normal nav-pd-left-68" style="pointer-events:none;" href="#">NAV link normal</a>
<a class="nav-link-hover nav-pd-left-73" style="pointer-events:none;" href="#">NAV link hover</a>
<a class="nav-link-pressed nav-pd-left-65" style="pointer-events:none;" href="#">NAV link pressed</a>
<a class="cta-link pd-left" style="pointer-events:none;" href="#">CTA link normal</a>
</div>
<div class="col style-white-text mrg-bot--1px">
<a class="nav-link-normal white-text nav-pd-left-41" style="pointer-events:none;" href="#">NAV link normal</a>
<a class="nav-link-hover white-text nav-pd-left-46" style="pointer-events:none;" href="#">NAV link hover</a>
<a class="nav-link-pressed white-text nav-pd-left-38" style="pointer-events:none;" href="#">NAV link pressed</a>
<a class="cta-link white-text pd-left-small" style="pointer-events:none;" href="#">CTA link normal</a>
</div>
<div class="w-100"></div>
<div class="col style-blue-text">
<div class="button">
<span class="button-text">Button normal</span>
</div>
<div class="button button-hover">
<span class="button-text">Button hover</span>
</div>
<div class="button button-pressed">
<span class="button-text">Button pressed</span>
</div>
<div class="button button-disabled">
<span class="button-text">Button disabled</span>
</div>
<div class="button button-focused">
<span class="button-text">Button focused</span>
</div>
<div class="button button-disabled-focused">
<span class="button-text">Button disable focused</span>
</div>
</div>
<div class="col style-white-text"></div>
</div>
</div>
</div>
</body>
</html>