-
Notifications
You must be signed in to change notification settings - Fork 0
/
styleguide.html
125 lines (113 loc) · 4.97 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
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Solo Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendor/css/bootstrap-grid.min.css">
<link href="https://fonts.googleapis.com/css2?family=Damion&family=Roboto:wght@100;500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="images/icons/icon-font.zip">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
</head>
<body>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h5>
<h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
<p>Lorem ipsum dolor sit amet, consectetur <strong>adipiscing elit</strong>. Maecenas blandit diam urna, eu <a href="#">dignissim</a> ex dignissim consequat. Duis porta lectus lorem, quis eleifend justo scelerisque eget. Duis ac sem et turpis tincidunt molestie in non ipsum. Maecenas ut augue erat. Phasellus eu est commodo est hendrerit tempor. Mauris dignissim ex vel magna aliquet, sit amet facilisis turpis tincidunt. Fusce quis blandit libero, sed dapibus nisl. Pellentesque vitae ligula sed tellus sagittis dapibus eu non metus. Mauris rutrum ligula ut sapien varius, pellentesque volutpat diam porta. Ut at nunc ac tortor dapibus sodales id at leo. Nunc posuere lorem non feugiat elementum. Nunc sagittis diam justo, nec malesuada sapien tristique id. Vivamus in consequat nibh. Etiam tempor id ligula a dapibus. Proin vitae arcu nulla.</p>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
<ul>
<li>Lorem ipsum dolor, consectetur <a href="#">consectetur adipiscing elit.</a>.</li>
<li>Lorem ipsum dolor <strong>sit amet</strong></li>
<li>Lorem ipsum dolor <strong>sit amet</strong>, consectetur <a href="#">consectetur adipiscing elit.</a>.</li>
</ul>
<ol>
<li>Lorem ipsum dolor, consectetur <a href="#">consectetur adipiscing elit.</a>.</li>
<li>Lorem ipsum dolor <strong>sit amet</strong></li>
<li>Lorem ipsum dolor <strong>sit amet</strong>, consectetur <a href="#">consectetur adipiscing elit.</a>.</li>
</ol>
<!-- navigation link sample -->
<li class="col nav-link-wrapper">
<a href="#">
<div class="col-3">
<img src="images/icons/general.svg" alt="icon">
</div>
<div class="col-9"><span>General</span></div>
</a>
</li>
<!-- top-bar item sample -->
<div class="col-md-1">
<a href="#"><img src="images/icons/notification.svg" alt="bell icon"></a>
</div>
<!-- page sample-->
<section class="col page-wrapper">
<div class="page">
<div class="row">
<div class="col page-title-wrapper">
<h3>Subpage title...</h3>
</div>
</div>
<div class="row">
<div class="col">
1st section content...
</div>
</div>
<div class="row">
<div class="col">
2nd section content...
</div>
</div>
</div>
</section>
<!-- general; form sample-->
<form class="form-date">
<input class="form-field" type="date" value="20-12-2020">
<input class="form-field" type="date" value="20-12-2020">
<button type="submit">
<img src="images/icons/refresh.svg" alt="icon">
</button>
</form>
<!-- general; data field sample -->
<div class="col-6">
<span>Visit Signups</span>
<span>124</span>
</div>
<!-- general; map legend sample-->
<div class="map-legend-1">
<div class="circle"></div>
<span>Signups</span>
</div>
<!-- general; map legend circle -->
<div class="circle"></div>
<!-- links; new link templete -->
<div class="col-md-10 html-link-line">
<div class="row link-wrapper">
<div class="col">
<span>Home Page</span>
</div>
<a href="#" class="col link-html">
<span>http://www.homepage.com</span>
</a>
<div class="col icons-wrapper">
<a href="#" aria-label="icon" class="icon-links"></a>
<a href="#" aria-label="icon" class="icon-trash"></a>
</div>
</div>
</div>
<!-- links; button template -->
<div class="row">
<div class="col button-wrapper">
<button type="button">+ add new</button>
</div>
</div>
<!-- personal-data; form-field -->
<div class="col personal-data-form-field">
<label class="col">Name</label>
<input class="col" type="text" name="user-name">
</div>
</body>
</html>