-
Notifications
You must be signed in to change notification settings - Fork 0
/
messages.html
257 lines (234 loc) · 18.5 KB
/
messages.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Messages</title>
<link href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="messages.css">
</head>
<body>
<div class="sidebar">
<h3>tech<span>mart</span></h3>
<svg class="menu-icon" width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.5" x="0.458333" y="0.458333" width="49.0833" height="49.0833" rx="12.375" stroke="#0F27BD"
stroke-width="0.916667" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M16.9795 25.0002C16.9795 24.6205 17.2873 24.3127 17.667 24.3127L32.3333 24.3127C32.713 24.3127 33.0208 24.6205 33.0208 25.0002C33.0208 25.3799 32.713 25.6877 32.3333 25.6877H17.667C17.2873 25.6877 16.9795 25.3799 16.9795 25.0002ZM19.989 31.4168C19.989 31.0371 20.2968 30.7293 20.6765 30.7293L32.3337 30.7293C32.7134 30.7293 33.0212 31.0371 33.0212 31.4168C33.0212 31.7965 32.7134 32.1043 32.3337 32.1043L20.6765 32.1043C20.2968 32.1043 19.989 31.7965 19.989 31.4168ZM25.2037 18.5835C25.2037 18.2038 25.5115 17.896 25.8912 17.896L32.3337 17.896C32.7134 17.896 33.0212 18.2038 33.0212 18.5835C33.0212 18.9632 32.7134 19.271 32.3337 19.271L25.8912 19.271C25.5115 19.271 25.2037 18.9632 25.2037 18.5835Z"
fill="#0F27BD" />
</svg>
<p class="menu">MENU</p>
<div>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M21.5 10.9V4.1C21.5 2.6 20.86 2 19.27 2H15.23C13.64 2 13 2.6 13 4.1V10.9C13 12.4 13.64 13 15.23 13H19.27C20.86 13 21.5 12.4 21.5 10.9Z"
fill="#A1A4B6" />
<path
d="M11 13.1V19.9C11 21.4 10.36 22 8.77 22H4.73C3.14 22 2.5 21.4 2.5 19.9V13.1C2.5 11.6 3.14 11 4.73 11H8.77C10.36 11 11 11.6 11 13.1Z"
fill="#A1A4B6" />
<path
d="M21.5 19.9V17.1C21.5 15.6 20.86 15 19.27 15H15.23C13.64 15 13 15.6 13 17.1V19.9C13 21.4 13.64 22 15.23 22H19.27C20.86 22 21.5 21.4 21.5 19.9Z"
fill="#A1A4B6" />
<path
d="M11 6.9V4.1C11 2.6 10.36 2 8.77 2H4.73C3.14 2 2.5 2.6 2.5 4.1V6.9C2.5 8.4 3.14 9 4.73 9H8.77C10.36 9 11 8.4 11 6.9Z"
fill="#A1A4B6" />
</svg>
Dashbord
</div>
<div class="messages">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.5 12.015C2.5 6.74712 6.71 2 12.52 2C18.2 2 22.5 6.65699 22.5 11.985C22.5 18.1642 17.46 22 12.5 22C10.86 22 9.04 21.5593 7.58 20.698C7.07 20.3876 6.64 20.1572 6.09 20.3375L4.07 20.9384C3.56 21.0986 3.1 20.698 3.25 20.1572L3.92 17.9139C4.03 17.6034 4.01 17.2729 3.85 17.0125C2.99 15.4301 2.5 13.6975 2.5 12.015ZM11.2 12.015C11.2 12.7261 11.77 13.2969 12.48 13.307C13.19 13.307 13.76 12.7261 13.76 12.025C13.76 11.314 13.19 10.7431 12.48 10.7431C11.78 10.7331 11.2 11.314 11.2 12.015ZM15.81 12.025C15.81 12.7261 16.38 13.307 17.09 13.307C17.8 13.307 18.37 12.7261 18.37 12.025C18.37 11.314 17.8 10.7431 17.09 10.7431C16.38 10.7431 15.81 11.314 15.81 12.025ZM7.87 13.307C7.17 13.307 6.59 12.7261 6.59 12.025C6.59 11.314 7.16 10.7431 7.87 10.7431C8.58 10.7431 9.15 11.314 9.15 12.025C9.15 12.7261 8.58 13.2969 7.87 13.307Z"
fill="#0F27BD" />
</svg>
Messages
</div>
<div>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.1 6.94C20.1 7.48 19.81 7.97 19.35 8.22L17.61 9.16L16.13 9.95L13.06 11.61C12.73 11.79 12.37 11.88 12 11.88C11.63 11.88 11.27 11.79 10.94 11.61L4.64999 8.22C4.18999 7.97 3.89999 7.48 3.89999 6.94C3.89999 6.4 4.18999 5.91 4.64999 5.66L6.61999 4.6L8.18999 3.75L10.94 2.27C11.6 1.91 12.4 1.91 13.06 2.27L19.35 5.66C19.81 5.91 20.1 6.4 20.1 6.94Z"
fill="#A1A4B6" />
<path
d="M9.9 12.7901L4.05 9.87014C3.6 9.64014 3.08 9.67014 2.65 9.93014C2.22 10.1901 1.97 10.6501 1.97 11.1501V16.6801C1.97 17.6401 2.5 18.5001 3.36 18.9301L9.21 21.8501C9.41 21.9501 9.63 22.0001 9.85 22.0001C10.11 22.0001 10.37 21.9301 10.6 21.7801C11.03 21.5201 11.28 21.0601 11.28 20.5601V15.0301C11.29 14.0801 10.76 13.2201 9.9 12.7901Z"
fill="#A1A4B6" />
<path
d="M22.03 11.1501V16.6801C22.03 17.6301 21.5 18.4901 20.64 18.9201L14.79 21.8501C14.59 21.9501 14.37 22.0001 14.15 22.0001C13.89 22.0001 13.63 21.9301 13.39 21.7801C12.97 21.5201 12.71 21.0601 12.71 20.5601V15.0401C12.71 14.0801 13.24 13.2201 14.1 12.7901L16.25 11.7201L17.75 10.9701L19.95 9.87013C20.4 9.64013 20.92 9.66013 21.35 9.93013C21.77 10.1901 22.03 10.6501 22.03 11.1501Z"
fill="#A1A4B6" />
<path d="M17.61 9.16L16.13 9.95L6.62 4.6L8.18999 3.75L17.37 8.93C17.47 8.99 17.55 9.07 17.61 9.16Z"
fill="#A1A4B6" />
<path
d="M17.75 10.9702V13.2402C17.75 13.6502 17.41 13.9902 17 13.9902C16.59 13.9902 16.25 13.6502 16.25 13.2402V11.7202L17.75 10.9702Z"
fill="#A1A4B6" />
</svg>
Products
</div>
<div>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#clip0_1063_2811)">
<mask id="mask0_1063_2811" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24"
height="24">
<path d="M24 0H0V24H24V0Z" fill="url(#pattern0)" />
</mask>
<g mask="url(#mask0_1063_2811)">
<path d="M24 0H0V24H24V0Z" fill="#A1A4B6" />
</g>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1063_2811" transform="scale(0.0104167)" />
</pattern>
<clipPath id="clip0_1063_2811">
<rect width="24" height="24" fill="white" />
</clipPath>
<image id="image0_1063_2811" width="96" height="96"
xlink:href="data:image/png;base64,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" />
</defs>
</svg>
Wishlist
</div>
<div>
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="13.5" cy="13" r="12" fill="#A1A4B6" stroke="#A1A4B6" stroke-width="2" />
<path
d="M14.067 15.048V14.668C14.067 12.312 17.639 12.198 17.639 9.291C17.639 7.125 16.1 6.08 13.668 6.08C10.818 6.08 8.861 7.828 9.108 10.241L10.913 11.533C10.628 9.215 11.825 8.113 13.516 8.113C14.77 8.113 15.34 8.664 15.34 9.5C15.34 11.419 12.053 11.609 12.053 14.497V15.048H14.067ZM14.257 19V16.302H11.825V19H14.257Z"
fill="#FAFAFB" />
</svg>
Help & Support
</div>
<a class="logout">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.8 2H14.2C11 2 9 4 9 7.2V11.25H15.25C15.66 11.25 16 11.59 16 12C16 12.41 15.66 12.75 15.25 12.75H9V16.8C9 20 11 22 14.2 22H16.79C19.99 22 21.99 20 21.99 16.8V7.2C22 4 20 2 16.8 2Z"
fill="#D41111" />
<path
d="M4.56 11.2501L6.63 9.18009C6.78 9.03009 6.85 8.84009 6.85 8.65009C6.85 8.46009 6.78 8.26009 6.63 8.12009C6.34 7.83009 5.86 7.83009 5.57 8.12009L2.22 11.4701C1.93 11.7601 1.93 12.2401 2.22 12.5301L5.57 15.8801C5.86 16.1701 6.34 16.1701 6.63 15.8801C6.92 15.5901 6.92 15.1101 6.63 14.8201L4.56 12.7501H9V11.2501H4.56Z"
fill="#D41111" />
</svg>
Log Out
</a>
</div>
<div class="main">
<div class="nav-right">
<p>Hey Nora<br>
<span>Read & Send Messages</span>
</p>
<label class="search">
<input placeholder="Search" type="search">
</label>
<div class="circle">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.9516 15.6973L19.8683 13.899C19.6408 13.4982 19.435 12.7398 19.435 12.2957V9.55484C19.435 7.009 17.94 4.80984 15.7841 3.78067C15.2208 2.784 14.1808 2.1665 12.9891 2.1665C11.8083 2.1665 10.7466 2.80567 10.1833 3.81317C8.07081 4.864 6.60831 7.0415 6.60831 9.55484V12.2957C6.60831 12.7398 6.40248 13.4982 6.17498 13.8882L5.08081 15.6973C4.64748 16.4232 4.54998 17.2248 4.82081 17.9615C5.08081 18.6873 5.69831 19.2507 6.49998 19.5215C8.60165 20.2365 10.8116 20.5832 13.0216 20.5832C15.2316 20.5832 17.4416 20.2365 19.5433 19.5323C20.3016 19.2832 20.8866 18.709 21.1683 17.9615C21.45 17.214 21.3741 16.3907 20.9516 15.6973Z"
fill="#4B4E61" />
<path
d="M16.0658 21.6773C15.6108 22.934 14.4083 23.8332 13 23.8332C12.1442 23.8332 11.2992 23.4865 10.7033 22.869C10.3567 22.544 10.0967 22.1107 9.94501 21.6665C10.0858 21.6882 10.2267 21.699 10.3783 21.7207C10.6275 21.7532 10.8875 21.7857 11.1475 21.8073C11.765 21.8615 12.3933 21.894 13.0217 21.894C13.6392 21.894 14.2567 21.8615 14.8633 21.8073C15.0908 21.7857 15.3183 21.7748 15.535 21.7423C15.7083 21.7207 15.8817 21.699 16.0658 21.6773Z"
fill="#4B4E61" />
</svg>
</div>
<img class="circle" src="profile avatar.png">
</div>
<div class="main-info">
<div class="left">
<div class="head">
Your messages
</div>
<div class="message-sections">
<img src="images/avatar3.png">
<div>
<span class="name">Ayomide Gadgets</span>
<span>10:24AM</span>
<p>
<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 12.75L3.93333 15.75L12 7.5" stroke="#F17105" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M1 6.5L3.93333 9.5L12 1.25" stroke="#F17105" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
I've sent the money
</p>
</div>
</div>
<div class="message-sections2">
<img src="images/avatar4.png">
<div>
<span>Ayomide Gadgets</span>
<span>10:24AM</span>
<p>
<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 12.75L3.93333 15.75L12 7.5" stroke="#F17105" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M1 6.5L3.93333 9.5L12 1.25" stroke="#F17105" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
I've sent the money
</p>
</div>
</div>
<div class="message-sections">
<img src="images/avatar5.png">
<div>
<span>Ayomide Gadgets</span>
<span>10:24AM</span>
<p>
<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 12.75L3.93333 15.75L12 7.5" stroke="#F17105" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M1 6.5L3.93333 9.5L12 1.25" stroke="#F17105" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
I've sent the money
</p>
</div>
</div>
<div class="message-sections">
<img src="images/avatar6.png">
<div>
<span>Ayomide Gadgets</span>
<span>10:24AM</span>
<p>
<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 12.75L3.93333 15.75L12 7.5" stroke="#F17105" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M1 6.5L3.93333 9.5L12 1.25" stroke="#F17105" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
I've sent the money
</p>
</div>
</div>
</div>
<div class="right">
<div class="head">
<img src="images/avatar2.png">
Ayomide Gadgets
</div>
<p class="hr-lines">Today</p>
<div class="sender-message">
Lorem Ipsum is a dummy text sed erat sapien sapien quis tincidunt suspendisse. Sedaquat lacus, orci sed tortor ipsum
ante tortorsis. <span>10:24AM</span>
</div>
<div class="my-message">
I've sent the payment <span>10:24AM</span>
</div>
<div class="my-message">
Have you received the payment?
</div>
<div class="error">
<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.8841 19.7132L12.7419 0.428547C12.5759 0.141956 12.2893 0 12 0C11.7107 0 11.4215 0.141956 11.2581 0.428547L0.115851 19.7132C-0.213595 20.2864 0.198882 20.9988 0.857773 20.9988H23.1422C23.8011 20.9988 24.2136 20.2864 23.8841 19.7132ZM11.1429 7.92812C11.1429 7.81027 11.2393 7.71385 11.3572 7.71385H12.6428C12.7607 7.71385 12.8571 7.81027 12.8571 7.92812V12.8564C12.8571 12.9743 12.7607 13.0707 12.6428 13.0707H11.3572C11.2393 13.0707 11.1429 12.9743 11.1429 12.8564V7.92812ZM12 17.3562C11.6636 17.3493 11.3432 17.2108 11.1077 16.9705C10.8722 16.7301 10.7403 16.407 10.7403 16.0705C10.7403 15.734 10.8722 15.4109 11.1077 15.1706C11.3432 14.9302 11.6636 14.7917 12 14.7849C12.3364 14.7917 12.6568 14.9302 12.8923 15.1706C13.1278 15.4109 13.2597 15.734 13.2597 16.0705C13.2597 16.407 13.1278 16.7301 12.8923 16.9705C12.6568 17.2108 12.3364 17.3493 12 17.3562Z"
fill="#D41111" />
</svg>
<span>Message not delivered</span>
<span>Retry</span>
</div>
<label>
<input class="message-bar" placeholder="Type a message and press enter to send">
</label>
</div>
</div>
</div>
</body>
</html>