-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
448 lines (444 loc) · 20.5 KB
/
Copy pathindex.html
File metadata and controls
448 lines (444 loc) · 20.5 KB
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SaaS Dashboard</title>
<link rel="stylesheet" href="style_flex.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="sidebar">
<div class="sidebar_header">
<h2 class="sidebar_header-t">SaaS Kit</h2>
</div>
<div class="sidebar_profile">
<div class="profile-img">
<img src="SVG/image 2.png" alt="" class="imagepro" />
</div>
<div class="profile-email">
<h2 class="email-name">Sierra Ferguson</h2>
<h3 class="email-email">s.ferguson@gmail.com</h3>
</div>
</div>
<div class="sidebar_menu">
<ul class="sidebar_menu_ul">
<li class="sidebar_menu_list">
<span class="sidebar-icon">
<svg
width="14"
height="14"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g
id="icon/menu/dashboard-active"
clip-path="url(#clip0_37062_109)"
>
<path
id="Vector"
d="M3.5 10.1333C3.33431 10.1333 3.2 9.99902 3.2 9.83333V3.5C3.2 3.33431 3.33431 3.2
3.5 3.2H8.16667C8.33235 3.2 8.46667 3.33431 8.46667 3.5V9.83333C8.46667 9.99902 8.33235 10.1333
8.16667 10.1333H3.5ZM3.5 16.8C3.33431 16.8 3.2 16.6657 3.2 16.5V13.5C3.2 13.3343 3.33431 13.2
3.5 13.2H8.16667C8.33235 13.2 8.46667 13.3343 8.46667 13.5V16.5C8.46667 16.6657 8.33235 16.8
8.16667 16.8H3.5ZM11.8333 16.8C11.6676 16.8 11.5333 16.6657 11.5333 16.5V10.1667C11.5333
10.001 11.6676 9.86667 11.8333 9.86667H16.5C16.6657 9.86667 16.8 10.001 16.8 10.1667V16.5C16.8 16.6657 16.6657
16.8 16.5 16.8H11.8333ZM11.5333 3.5C11.5333 3.33431 11.6676 3.2 11.8333 3.2H16.5C16.6657 3.2 16.8 3.33431 16.8
3.5V6.5C16.8 6.66569 16.6657 6.8 16.5 6.8H11.8333C11.6676 6.8 11.5333 6.66569 11.5333 6.5V3.5Z"
stroke="#109CF1"
stroke-width="1.4"
/>
</g>
<defs>
<clipPath id="clip0_37062_109">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Dashboard
</li>
<li class="sidebar_menu_list">
<span class="sidebar-icon">
<svg
width="14"
height="14"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="icon/menu/tasks" clip-path="url(#clip0_37062_103)">
<path
id="Vector"
d="M2.49996 3.2H16.6666C16.7384 3.2 16.8 3.2616 16.8 3.33333V8.33333C16.8 8.40507 16.7384 8.46667 16.6666 8.46667H2.49996C2.42823 8.46667 2.36663 8.40507 2.36663 8.33333V3.33333C2.36663 3.2616 2.42823 3.2 2.49996 3.2ZM2.49996 11.5333H16.6666C16.7384 11.5333 16.8 11.5949 16.8 11.6667V16.6667C16.8 16.7384 16.7384 16.8 16.6666 16.8H2.49996C2.42823 16.8 2.36663 16.7384 2.36663 16.6667V11.6667C2.36663 11.5949 2.42823 11.5333 2.49996 11.5333Z"
stroke="#C2CFE0"
stroke-width="1.4"
/>
</g>
<defs>
<clipPath id="clip0_37062_103">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Tasks
</li>
<li class="sidebar_menu_list">
<span class="sidebar-icon">
<svg
width="14"
height="14"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="icon/menu/email" clip-path="url(#clip0_37062_96)">
<path
id="Vector"
d="M2.37496 5.0005V4.99992C2.37496 4.46528 2.80778 4.03325 3.33329 4.03325H16.6666C17.1967 4.03325 17.6333 4.46985 17.6333 4.99992V14.9999C17.6333 15.53 17.1967 15.9666 16.6666 15.9666H3.33329C2.80331 15.9666 2.36677 15.5301 2.36663 15.0002C2.36663 15.0001 2.36663 15 2.36663 14.9999L2.37496 5.0005Z"
stroke="#C2CFE0"
stroke-width="1.4"
/>
<path
id="Vector 2"
d="M2.5 5L10 10L17.5 5"
stroke="#C2CFE0"
stroke-width="1.4"
/>
</g>
<defs>
<clipPath id="clip0_37062_96">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Email
</li>
<li class="sidebar_menu_list">
<span class="sidebar-icon">
<svg
width="14"
height="14"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="icon/menu/contacts" clip-path="url(#clip0_37062_90)">
<path
id="Vector"
d="M6.81118 6.11106C6.81118 4.34905 8.23806 2.92217 10.0001 2.92217C11.7621 2.92217 13.189 4.34904 13.189 6.11106C13.189 7.87307 11.7621 9.29995 10.0001 9.29995C8.23806 9.29995 6.81118 7.87307 6.81118 6.11106ZM2.92229 14.8611C2.92229 14.4716 3.11181 14.0787 3.54729 13.6768C3.98752 13.2705 4.63079 12.904 5.39805 12.5966C6.9337 11.9814 8.78966 11.6722 10.0001 11.6722C11.2105 11.6722 13.0664 11.9814 14.6021 12.5966C15.3693 12.904 16.0126 13.2705 16.4528 13.6768C16.8883 14.0787 17.0778 14.4716 17.0778 14.8611V17.0777H2.92229V14.8611Z"
stroke="#C2CFE0"
stroke-width="1.4"
/>
</g>
<defs>
<clipPath id="clip0_37062_90">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Contacts
</li>
<li class="sidebar_menu_list">
<span class="sidebar-icon">
<svg
width="14"
height="14"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="icon/menu/chat" clip-path="url(#clip0_37062_84)">
<path
id="Vector"
d="M4.99996 14.3001H4.71001L4.50499 14.5051L2.36663 16.6435V3.33342C2.36663 2.80335 2.80323 2.36675 3.33329 2.36675H16.6666C17.1967 2.36675 17.6333 2.80335 17.6333 3.33342V13.3334C17.6333 13.8635 17.1967 14.3001 16.6666 14.3001H4.99996Z"
stroke="#C2CFE0"
stroke-width="1.4"
/>
</g>
<defs>
<clipPath id="clip0_37062_84">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Chat
</li>
<li class="sidebar_menu_list">
<span class="sidebar-icon">
<svg
width="14"
height="14"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="icon/menu/deals" clip-path="url(#clip0_37062_76)">
<path
id="Vector"
d="M2.49996 4.03325H17.5C17.5717 4.03325 17.6333 4.09485 17.6333 4.16659V15.8333C17.6333 15.905 17.5717 15.9666 17.5 15.9666H2.49996C2.42823 15.9666 2.36663 15.905 2.36663 15.8333V4.16659C2.36663 4.09485 2.42823 4.03325 2.49996 4.03325Z"
stroke="#C2CFE0"
stroke-width="1.4"
/>
<rect
id="Rectangle"
x="6.5"
y="3.33325"
width="1.16667"
height="13.3333"
fill="#C2CFE0"
/>
<rect
id="Rectangle_2"
x="12.3334"
y="3.33325"
width="1.16667"
height="13.3333"
fill="#C2CFE0"
/>
</g>
<defs>
<clipPath id="clip0_37062_76">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Deals
</li>
<li class="sidebar_menu_list settings">
<span class="sidebar-icon">
<svg
width="14"
height="14"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="icon/menu/settings" clip-path="url(#clip0_37062_70)">
<path
id="Vector"
d="M5.00004 8.33325C4.08337 8.33325 3.33337 9.08325 3.33337 9.99992C3.33337 10.9166 4.08337 11.6666 5.00004 11.6666C5.91671 11.6666 6.66671 10.9166 6.66671 9.99992C6.66671 9.08325 5.91671 8.33325 5.00004 8.33325ZM15 8.33325C14.0834 8.33325 13.3334 9.08325 13.3334 9.99992C13.3334 10.9166 14.0834 11.6666 15 11.6666C15.9167 11.6666 16.6667 10.9166 16.6667 9.99992C16.6667 9.08325 15.9167 8.33325 15 8.33325ZM10 8.33325C9.08337 8.33325 8.33337 9.08325 8.33337 9.99992C8.33337 10.9166 9.08337 11.6666 10 11.6666C10.9167 11.6666 11.6667 10.9166 11.6667 9.99992C11.6667 9.08325 10.9167 8.33325 10 8.33325Z"
fill="#C2CFE0"
/>
</g>
<defs>
<clipPath id="clip0_37062_70">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Settings
</li>
</ul>
</div>
<div class="sidebar_toggle">
<div class="toggle-icon">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="icon/menu/toggle" clip-path="url(#clip0_37062_63)">
<path
id="Subtract"
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 0C0.895431 0 0 0.89543 0 2V12C0 13.1046 0.89543 14 2 14H12C13.1046 14 14 13.1046 14 12V2C14 0.895431 13.1046 0 12 0H2ZM5 2C4.44772 2 4 2.44772 4 3V11C4 11.5523 4.44772 12 5 12C5.55228 12 6 11.5523 6 11V3C6 2.44772 5.55228 2 5 2Z"
fill="#C2CFE0"
/>
</g>
<defs>
<clipPath id="clip0_37062_63">
<rect width="14" height="14" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="toggle-text">
<p class="toggle-p">Toggle sidebar</p>
</div>
</div>
</div>
<div class="main-content">
<div class="search-bar">
<div class="global">
<svg class="magni-icon" width="25" height="25" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon/other/search" clip-path="url(#clip0_37030_16)">
<path id="Vector" d="M12.9167 11.6667H12.2583L12.025 11.4417C12.8417 10.4917 13.3333 9.25833 13.3333 7.91667C13.3333 4.925 10.9083 2.5 7.91667 2.5C4.925 2.5 2.5 4.925 2.5 7.91667C2.5 10.9083 4.925 13.3333 7.91667 13.3333C9.25833 13.3333 10.4917 12.8417 11.4417 12.025L11.6667 12.2583V12.9167L15.8333 17.075L17.075 15.8333L12.9167 11.6667ZM7.91667 11.6667C5.84167 11.6667 4.16667 9.99167 4.16667 7.91667C4.16667 5.84167 5.84167 4.16667 7.91667 4.16667C9.99167 4.16667 11.6667 5.84167 11.6667 7.91667C11.6667 9.99167 9.99167 11.6667 7.91667 11.6667Z" fill="#C2CFE0"/>
</g>
<defs>
<clipPath id="clip0_37030_16">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
<p class="global-p">Global search</p>
</div>
<div class="bell-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon/other/notifications">
<path id="Vector" d="M19.5 18.2071V18.5H4.5V18.2071L6.35355 16.3536L6.5 16.2071V16V11C6.5 8.09437 8.02219 5.78092 10.6153 5.16653L11 5.07538V4.68V4C11 3.44614 11.4461 3 12 3C12.5539 3 13 3.44614 13 4V4.68V5.07506L13.3843 5.16644C15.9681 5.78076 17.5 8.10482 17.5 11V16V16.2071L17.6464 16.3536L19.5 18.2071ZM13.4135 20.5C13.2061 21.0806 12.6488 21.5 12 21.5C11.3443 21.5 10.7907 21.0813 10.5854 20.5H13.4135Z" fill="white" stroke="#C2CFE0"/>
<circle id="Ellipse" cx="17" cy="6" r="4.5" fill="#F7685B" stroke="white"/>
</g>
</svg>
</div>
</div>
<div class="main-data">
<div class="main-data-left">
<div class="main-data-left_completed">
<p class="outof">8 task completed out of 10</p>
<p class="show-this">Show: <span class="this-week">This week</span></p>
</div>
<div class="bar">
<div class="completed-bar-green"></div>
<div class="completed-bar"></div>
</div>
<div class="main-data-left_date">
<p>23 December, Sunday</p>
</div>
<div class="main-data-left_week">
<ul class="week">
<li class="day">Sun<span class="span-day">24</span></li>
<li class="day">Mon<span class="span-day">25</span></li>
<li class="day">Tue<span class="span-day">26</span></li>
<li class="day">Wed<span class="span-day">27</span></li>
<li class="day">Thu<span class="span-day">28</span></li>
<li class="day">Fri<span class="span-day">29</span></li>
<li class="day">Sat<span class="span-day">30</span></li>
</ul>
</div>
<div class="todos">
<div class="todos_item">
<span class="todos_item-span">Reminder</span>
<h2 class="item-title">Send benefit review by Sunday</h2>
<div class="item-duedate">
<span class="due">Due date:</span><span class="due-date">December 23, 2018</span>
</div>
<div class="item-profile">
<img src="SVG/image 3.png" alt="" /><span class="item-profile-name">George Fields</span>
</div>
<div class="todos-icons">
<button class="todos-button">Completed</button>
</div>
</div>
<div class="todos_item">
<span class="todos_item-span">Call</span>
<h2 class="item-title">Invite to office meet-up</h2>
<div class="item-duedate">
<span class="due">Due date:</span><span class="due-date">December 23, 2018</span>
</div>
<div class="item-profile">
<img src="SVG/image 4.png" alt="" /><span class="item-profile-name">Rebecca Moore</span>
</div>
<div class="todos-icons">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon/other/delete" clip-path="url(#clip0_1152_389)">
<path id="Vector" d="M3.99998 12.6667C3.99998 13.4 4.59998 14 5.33331 14H10.6666C11.4 14 12 13.4 12 12.6667V4.66667H3.99998V12.6667ZM12.6666 2.66667H10.3333L9.66665 2H6.33331L5.66665 2.66667H3.33331V4H12.6666V2.66667Z" fill="#C2CFE0"/>
</g>
<defs>
<clipPath id="clip0_1152_389">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon/other/edit" clip-path="url(#clip0_1152_388)">
<path id="Vector" d="M2 11.5V14H4.5L11.8733 6.62662L9.37333 4.12662L2 11.5ZM13.8067 4.69329C14.0667 4.43329 14.0667 4.01329 13.8067 3.75329L12.2467 2.19329C11.9867 1.93329 11.5667 1.93329 11.3067 2.19329L10.0867 3.41329L12.5867 5.91329L13.8067 4.69329Z" fill="#C2CFE0"/>
</g>
<defs>
<clipPath id="clip0_1152_388">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
<button class="todos-button" style="background-color: #F7685B;">Ended</button>
</div>
</div>
<div class="todos_item">
<span class="todos_item-span">Event</span>
<h2 class="item-title">Office meet-up</h2>
<div class="item-duedate">
<span class="due">Due date:</span><span class="due-date">December 23, 2018</span>
</div>
<div class="item-profile">
<img src="SVG/image 5.png" alt="" /><span class="item-profile-name">Lindsey Stroud</span>
</div>
<div class="todos-icons">
<button class="todos-button">Completed</button>
</div>
</div>
</div>
<div class="main-data-left_showmore">
<h2 class="h2showmore">Show more</h2>
</div>
</div>
<div class="main-data-right">
<div class="deals">
<div class="deals-title">
<p class="deals-title-p">Deals</p>
<p class="deals-show">Show: <span class="monthly">Monthly</span></p>
</div>
<div class="deals-graph">
<div class="deals-graph-legend">
<svg width="11" height="11" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle id="Ellipse 2" cx="4" cy="4" r="3" stroke="#109CF1" stroke-width="2"/>
</svg>
<p class="deals-legend-p">Closed deals</p>
</div>
<div class="deals-graph-img">
<img src="SVG/graph.png" height="267px" width="447px" alt="graph">
</div>
</div>
</div>
<div class="tasks">
<div class="tasks-title">
<p class="deals-title-p">Tasks</p>
<p class="deals-show">Show: <span class="monthly">This month</span></p>
</div>
<div class="tasks-graph">
<div class="tasks-graph-img">
<img src="SVG/tasks-img.png" alt="Tasks">
</div>
<div class="tasks-legend">
<div class="tasks-legend-legend">
<div class="legend-item">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle id="Ellipse 2" cx="4" cy="4" r="3" stroke="#FFB946" stroke-width="2"/>
</svg>
<p class="legend-item-p">Active</p>
</div>
<div class="legend-item">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle id="Ellipse 2" cx="4" cy="4" r="3" stroke="#2ED47A" stroke-width="2"/>
</svg>
<p class="legend-item-p">Completed</p>
</div>
<div class="legend-item">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle id="Ellipse 2" cx="4" cy="4" r="3" stroke="#F7685B" stroke-width="2"/>
</svg>
<p class="legend-item-p">Ended</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>