-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (133 loc) · 4.8 KB
/
index.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Circles UI Kit</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body class="container">
<header class="row">
<div class="col-3">
<a class="link" href="/">
<img class="img img-logo" alt="circles logo" src="images/logo.png" />
</a>
</div>
<div class="col-9">
<nav class="nav">
<a class="nav-link" href="#type">Typography</a>
<a class="nav-link" href="#buttons">Buttons</a>
<a class="nav-link" href="#forms">Form</a>
<a class="nav-link" href="#images">Images</a>
<a class="nav-link" href="#grid">Grid</a>
</nav>
</div>
</header>
<div class="row">
<div class="col-12">
<div class="card">
<p>
This is what the navigation menu looks like when the screen is at
768px or higher. When the screen is less than 768px, the menu will
be displayed vertically.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="card">
<h4 id="type" class="headline-secondary">Typography</h4>
<h1 class="headline-primary">Take a look at this amazing headline</h1>
<p>
This is a typical paragraph for the UI Kit.
<a href="#" class="link">Here is what a link might look like</a>.
The typical font family for this kit is Lato. This kit is intended
for clean and refreshing web layouts. No jazz hands here, just the
essentials to make dreams come true, with minimal clean web design.
The kit comes fully equipped with everything from full responsive
media styling to buttons to form fields.
<em>I enjoy using italics as well from time to time</em>. Feel free
to create the most amazing designs ever with this kit. I truly hope
you enjoy not only the kit but this amazing paragraph as well. :)
</p>
<blockquote class="blockquote">
You know what really gets me going? A really nice set of block
quotes. That's right, block quotes that say, "Hey, I'm an article
you want to read and nurture."
</blockquote>
</div>
</div>
<div class="col-4">
<form class="form">
<legend id="forms" class="headline-secondary">Form Elements</legend>
<img class="img-avatar" src="images/avatar.png" alt="Avatar" />
<label class="hidden" for="username">Username:</label>
<input
class="input"
type="text"
id="username"
placeholder="Username"
/>
<label class="hidden" for="password">Password:</label>
<input
class="input"
type="password"
id="password"
placeholder="Password"
/>
<button class="btn default" type="submit" value="Login">Login</button>
</form>
</div>
</div>
<h4 id="images" class="headline-secondary">Images</h4>
<div class="row">
<div class="col-6">
<img class="img img-frame" src="images/image.png" alt="sample image" />
</div>
<div class="col-6">
<img class="img img-avatar" src="images/avatar.png" alt="Avatar" />
</div>
</div>
<h4 id="buttons" class="headline-secondary">Buttons</h4>
<div class="row">
<div class="col-12">
<button class="btn default">default</button>
<button class="btn success">success</button>
<button class="btn error">error</button>
<button class="btn warning">warning</button>
<button class="btn info">info</button>
</div>
</div>
<h4 id="grid" class="headline-secondary">Grid System</h4>
<div class="row">
<div class="col-12 theme">.col-12</div>
</div>
<div class="row">
<div class="col-6 theme">.col-6</div>
<div class="col-6 theme">.col-6</div>
</div>
<div class="row">
<div class="col-4 theme">.col-4</div>
<div class="col-4 theme">.col-4</div>
<div class="col-4 theme">.col-4</div>
</div>
<div class="row">
<div class="col-3 theme">.col-3</div>
<div class="col-3 theme">.col-3</div>
<div class="col-3 theme">.col-3</div>
<div class="col-3 theme">.col-3</div>
</div>
<div class="row">
<div class="col-5 theme">.col-5</div>
<div class="col-7 theme">.col-7</div>
</div>
<div class="row">
<div class="col-8 theme">.col-8</div>
<div class="col-4 theme">.col-4</div>
</div>
<div class="row">
<div class="col-7 theme centered">.centered .col-7</div>
</div>
</body>
</html>