-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathui_kit.html
125 lines (107 loc) · 5.16 KB
/
ui_kit.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>
<head>
<title>UI Kit</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" type="text/css" href="styles/css-reset.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/components.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/e0912a4246.js" crossorigin="anonymous"></script>
</head>
<body>
<header><img class="logo" src="assets/logo_50.svg"></header>
<div class="grid-container">
<div class="section-buttons">
<button class="btn">Button text</button>
<button class="btn btn--outlined">Button text</button>
<button class="btn btn--inverse">Button text</button>
<button class="btn btn--outlined-inverse">Button text</button>
</div>
<div class="section-narrow-buttons">
<button class="btn btn--narrow">Button text</button>
<button class="btn btn--outlined btn--narrow">Button text</button>
<button class="btn btn--inverse btn--narrow">Button text</button>
<button class="btn btn--outlined-inverse btn--narrow">Button text</button>
</div>
<div class="section-input-icons">
<input class="input input--active" type="text" placeholder="Active input text">
<input class="input" type="text" placeholder="Input text">
<textarea class="textarea" rows="4" placeholder="Textarea"></textarea>
<h5>Icons</h5>
<div class="icon-wraper">
<div class="section-icon-1">
<i class="fas fa-paper-plane icon"></i>
<i class="fas fa-paper-plane icon icon--outlined"></i>
<i class="fas fa-paper-plane icon icon--inverse"></i>
<i class="fas fa-paper-plane icon icon--outlined icon--outlined-inverse"></i>
</div>
<div class="section-icon-2">
<i class="fab fa-facebook-f icon icon--small"></i>
<i class="fab fa-facebook-f icon icon--outlined icon--small"></i>
<i class="fas fa-hands-helping icon icon--inverse icon--small"></i>
<i class="fas fa-hands-helping icon icon--outlined icon--outlined-inverse icon--small"></i>
</div>
</div>
</div>
<div class="section-heading">
<h1>Heading 50px</h1>
<h2>Heading 40px</h2>
<h3>Heading 30px</h3>
</div>
<div class="section-text">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<small class="small-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</small>
</div>
<main class="section-main-content main-content">
<h5>January 1, 2020 / by Autor / 3 Comments</h5>
<h2>Sample blog post</h2>
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et.</p>
<button class="btn btn--outlined btn--narrow">Read more</button>
</main>
<div class="section-category-boxes">
<aside class="category-box">
<div class="img-placeholder"></div>
<div class="category-box-details">
<h4>Category</h4>
<p class="small-text category-box-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
</div>
</aside>
<aside class="category-box">
<div class="img-placeholder"></div>
<div class="category-box-details">
<h4>Category</h4>
<p class="small-text category-box-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
</div>
</aside>
</div>
<aside class="section-sidebar-card">
<div class="sidebar-card-title">
<h4 class="h4-inverse">Sidebar Card Title</h4>
</div>
<div class="sidebar-card-content sidebar-card-placeholder"></div>
<button class="btn btn--bottom">Bottom button text</button>
</aside>
<div class="section-chat">
<div class="chat-flex">
<img class="avatar" src="assets/chat/user_avatar_01.png">
<div class="chat-content">
<div class="chat-addressing">Amy, 11:37</div>
<p class="chat-message">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
</div>
</div>
<div class="chat-flex chat-flex-own">
<img class="avatar" src="assets/chat/user_avatar_07.png">
<div class="chat-content">
<div class="chat-addressing">11:40</div>
<p class="chat-message chat-massage-own">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
</div>
</div>
</div>
</div>
<footer>
<small class="copyright">© 2020 Copyright <a>Brand Name</a> / Design by <a>Robert Toth</a></small>
</footer>
</body>
</html>