-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (116 loc) · 4.37 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
<!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>