-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (128 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Upwork test." />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href=" https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="styles/dist/style.css" />
<title>Upwork Test</title>
</head>
<body>
<header>
<div class="header-top"></div>
<div class="header-bottom"></div>
</header>
<div class="container">
<div class="row">
<div class="col-8"></div>
<div class="col-4">
<div class="card">
<div class="card-body">
<ul class="list-group">
<li class="list-group-item profile">
<div class="profile-icon">
<img src="https://via.placeholder.com/150" />
</div>
<div class="icon-title refer">
<div class="profile-title">Ivan Avramenko</div>
<div class="profile-tag-line">Manage your account</div>
</div>
</li>
<li class="list-group-item">
<div class="icon-div active-notification">
<span class="button-badge">1</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.2 4H12.96C13.36 3.6 13.6 3.04 13.6 2.4C13.6 1.04 12.56 0 11.2 0C10.4 0 8.96 0.72 8 1.68C7.04 0.72 5.6 0 4.8 0C3.44 0 2.4 1.04 2.4 2.4C2.4 3.04 2.64 3.6 3.04 4H0.8C0.32 4 0 4.32 0 4.8V7.04C0 7.12 0.08 7.2 0.16 7.2H6.88C7.04 7.2 7.2 7.04 7.2 6.88V4.32C7.2 4.16 7.36 4 7.52 4H8.48C8.64 4 8.8 4.16 8.8 4.32V6.88C8.8 7.04 8.96 7.2 9.12 7.2H15.84C15.92 7.2 16 7.12 16 7.04V4.8C16 4.32 15.68 4 15.2 4ZM4.8 3.2C4.32 3.2 4 2.88 4 2.4C4 1.92 4.32 1.6 4.8 1.6C5.28 1.6 6.72 2.56 7.12 3.04C6.88 3.12 4.8 3.2 4.8 3.2ZM11.2 3.2C11.2 3.2 9.12 3.12 8.88 3.04C9.36 2.48 10.72 1.6 11.2 1.6C11.68 1.6 12 1.92 12 2.4C12 2.88 11.68 3.2 11.2 3.2Z"
fill="#74869C"
/>
<path
d="M6.87993 8.80002H0.959927C0.879927 8.80002 0.799927 8.88002 0.799927 8.96002V15.2C0.799927 15.68 1.11993 16 1.59993 16H6.87993C7.03993 16 7.19993 15.84 7.19993 15.68V9.12002C7.19993 8.96002 7.03993 8.80002 6.87993 8.80002Z"
fill="#74869C"
/>
<path
d="M15.0399 8.80002H9.11993C8.95993 8.80002 8.79993 8.96002 8.79993 9.12002V15.68C8.79993 15.84 8.95993 16 9.11993 16H14.3999C14.8799 16 15.1999 15.68 15.1999 15.2V8.96002C15.1999 8.88002 15.1199 8.80002 15.0399 8.80002Z"
fill="#74869C"
/>
</svg>
</div>
<div class="icon-title refer">
<div class="ref-title">Refer a friend</div>
<div class="ref-tag-line">Get a free month of Trendy PRO</div>
</div>
</li>
<li class="list-group-item active">
<div class="icon-div">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.0957 7.16522L8.13913 0.208696C7.86087 -0.0695652 7.44348 -0.0695652 7.16522 0.208696L0.208696 7.16522C-0.0695652 7.44348 -0.0695652 7.86087 0.208696 8.13913C0.347826 8.27826 0.486956 8.34783 0.626087 8.34783H1.46087V15.3043C1.46087 15.7217 1.73913 16 2.15652 16H6.05217V11.3391C6.05217 10.9217 6.33043 10.6435 6.74783 10.6435H8.41739C8.83478 10.6435 9.11304 10.9217 9.11304 11.3391V16H13.0087C13.4261 16 13.7043 15.7217 13.7043 15.3043V8.34783H14.6087C14.9565 8.27826 15.2348 7.93043 15.2348 7.58261C15.3043 7.44348 15.2348 7.30435 15.0957 7.16522Z"
fill="#74869C"
/>
</svg>
</div>
<div class="icon-title">Home</div>
</li>
<li class="list-group-item">
<div class="icon-div">
<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.7036 1.77928C13.8291 -0.489947 10.4746 -0.588609 8.40265 1.48329C6.33075 -0.588609 2.97624 -0.489947 1.10166 1.77928C-0.575596 3.75252 -0.27961 6.71239 1.59497 8.58696L7.71202 14.704C8.10667 15.0987 8.69864 15.0987 9.09329 14.704L15.2103 8.58696C17.0849 6.71239 17.3809 3.75252 15.7036 1.77928Z"
fill="#74869C"
/>
</svg>
</div>
<div class="icon-title">Saved products</div>
</li>
<li class="list-group-item">
<div class="icon-div">
<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.1857 0H6.84386C3.05398 0 0 3.05398 0 6.82546C0 6.82546 0 6.82546 0 6.84386C0 10.229 2.48366 13.099 5.85039 13.5957C5.99757 14.4972 5.94238 15.4171 5.68482 16.3001C5.61123 16.5945 5.7768 16.8889 6.07116 16.9809C6.19994 17.0177 6.32873 16.9993 6.45751 16.9441C7.59815 16.3737 9.21713 15.3067 10.0634 13.6693H11.2041C14.9571 13.6693 18.0295 10.6153 18.0295 6.84386C18.0295 3.07238 14.9755 0 11.1857 0C11.2041 0 11.2041 0 11.1857 0ZM9.49309 10.321V10.9281C9.49309 11.2408 9.23553 11.48 8.94117 11.48C8.64681 11.48 8.38924 11.2225 8.38924 10.9281V10.413C7.92931 10.3946 7.46937 10.321 7.02783 10.1738C6.69668 10.0634 6.5127 9.71386 6.58629 9.3827L6.60469 9.32751C6.67828 9.03315 6.93584 8.84918 7.2302 8.84918C7.30379 8.84918 7.37738 8.86758 7.45097 8.88597C7.85572 9.01476 8.26046 9.08835 8.6836 9.10674C9.32751 9.10674 9.78745 8.84918 9.78745 8.40764C9.78745 7.9661 9.4195 7.70854 8.57322 7.41418C7.35898 7.00943 6.5311 6.43911 6.5311 5.33526C6.5311 4.3234 7.2302 3.55071 8.46283 3.31154V2.77802C8.46283 2.46526 8.7204 2.22609 9.01476 2.22609C9.30912 2.22609 9.56668 2.48366 9.56668 2.77802V3.21956C9.91623 3.23795 10.2658 3.27475 10.6153 3.36674C10.9649 3.45872 11.1673 3.82667 11.0753 4.17622C11.0017 4.45219 10.7441 4.65456 10.4498 4.65456C10.3946 4.65456 10.321 4.65456 10.2658 4.63616C9.91623 4.50738 9.56668 4.45219 9.23553 4.45219C8.49963 4.45219 8.26046 4.76494 8.26046 5.0961C8.26046 5.46405 8.66521 5.72161 9.62187 6.07116C10.9833 6.5495 11.5168 7.17501 11.5168 8.20527C11.5168 9.23553 10.7993 10.0818 9.49309 10.321Z"
fill="#74869C"
/>
</svg>
</div>
<div class="icon-title">Affiliates</div>
</li>
<li class="list-group-item">
<div class="icon-div">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.6976 2.13952C11.3882 2.30856 12.0402 2.58385 12.6343 2.94124L14.0542 1.89321C14.2426 1.75798 14.4937 1.77247 14.6579 1.93668L16.0537 3.33244C16.2179 3.49665 16.2372 3.75262 16.0971 3.93614L15.0443 5.35605C15.4017 5.95009 15.677 6.60209 15.846 7.29273L17.5943 7.55353C17.8213 7.58734 17.9903 7.78052 17.9903 8.01234V9.98766C17.9903 10.2195 17.8213 10.4127 17.5943 10.4465L15.846 10.7073C15.677 11.3979 15.4017 12.0499 15.0443 12.6439L16.0971 14.0639C16.2372 14.2522 16.2179 14.5034 16.0537 14.6676L14.6579 16.0633C14.4937 16.2275 14.2377 16.2468 14.0542 16.1068L12.6343 15.0539C12.0402 15.4113 11.3882 15.6866 10.6976 15.8556L10.4368 17.604C10.403 17.831 10.2098 18 9.978 18H8.00268C7.77086 18 7.57768 17.831 7.54387 17.604L7.28307 15.8556C6.59243 15.6866 5.94043 15.4113 5.34639 15.0539L3.92648 16.1068C3.74296 16.2468 3.48699 16.2275 3.32278 16.0633L1.92702 14.6676C1.76281 14.5034 1.74349 14.2474 1.88355 14.0639L2.94607 12.6343C2.58868 12.0402 2.31339 11.3882 2.14435 10.6976L0.396029 10.4368C0.169037 10.403 0 10.2098 0 9.978V8.00268C0 7.77086 0.169037 7.57768 0.396029 7.54387L2.14435 7.28307C2.31339 6.59243 2.58868 5.94043 2.94607 5.34639L1.89321 3.93614C1.75798 3.75262 1.77247 3.49665 1.93668 3.33244L3.33244 1.93668C3.49665 1.77247 3.75262 1.75315 3.93614 1.89321L5.35605 2.94607C5.95009 2.58868 6.60209 2.31339 7.29273 2.14435L7.55353 0.396029C7.58251 0.169037 7.77569 0 8.00751 0H9.98283C10.2146 0 10.4078 0.169037 10.4416 0.396029L10.6976 2.13952ZM8.99275 5.20633C11.084 5.20633 12.784 6.90153 12.784 8.99759C12.784 11.0936 11.0888 12.7888 8.99275 12.7888C6.8967 12.7888 5.2015 11.0936 5.2015 8.99759C5.2015 6.90153 6.90153 5.20633 8.99275 5.20633Z"
fill="#74869C"
/>
</svg>
</div>
<div class="icon-title">Term of service</div>
</li>
<li class="list-group-item">
<div class="icon-div">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2.23637 1.12569L4.86298 2.52155C5.35829 2.79171 5.76353 3.46713 5.76353 4.02247V11.5721H9.1256C9.42578 11.5721 9.66593 11.3319 9.66593 11.0318V8.52523C9.66593 8.24005 9.89107 8.01491 10.1762 8.01491H10.2813C10.5665 8.01491 10.7916 8.24005 10.7916 8.52523V11.6922C10.7916 12.2625 10.3263 12.7128 9.77099 12.7128H5.77854V14.3488C5.77854 14.9191 5.37329 15.1593 4.87799 14.8891L0.57035 12.6077C0.555341 12.5927 0.525322 12.5927 0.510313 12.5777L0.37523 12.4726C0.150092 12.2775 0 12.0074 0 11.6772V1.02063C0 0.465285 0.450276 0 1.02063 0H9.77099C10.3413 0 10.7916 0.465285 10.7916 1.02063V4.18757C10.7916 4.47274 10.5665 4.69788 10.2813 4.69788H10.1762C9.89107 4.69788 9.66593 4.47274 9.66593 4.18757V1.68103C9.66593 1.38085 9.42578 1.1407 9.1256 1.1407H2.23637V1.12569ZM11.7822 7.15939H9.05055C8.60027 7.15939 8.22504 6.79917 8.22504 6.33388C8.22504 5.88361 8.58526 5.50838 9.05055 5.50838H11.7822V4.80295C11.7822 4.2326 12.1575 4.03748 12.6227 4.36768L14.604 5.74852C15.0692 6.07873 15.0692 6.60405 14.604 6.91924L12.6227 8.30009C12.1575 8.63029 11.7822 8.42016 11.7822 7.86482V7.15939Z"
fill="#74869C"
/>
</svg>
</div>
<div class="icon-title">Sign Out</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>