-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHomepage.html
379 lines (366 loc) · 22.2 KB
/
Homepage.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HomePage</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
</head>
</head>
<body class="container m-auto mt-5 bg-slate-600">
<div class="flex w-[1280px] h-[844px] bg-black rounded-lg ">
<div class=" w-[76px] h-[844px] bg-[#1D203E]">
<div class="mt-[12px] ml-[12px]">
<div class="float-left mr-[8px] h-[12px] w-[12px] bg-[#ED695E] rounded-full"></div>
<div class="float-left mr-[8px] h-[12px] w-[12px] bg-[#F4BF4F] rounded-full"></div>
<div class="float-left h-[12px] w-[12px] bg-[#61C554] rounded-full"></div>
</div>
<img class="w-[40px] h-[40px] ml-[16px] mt-[32px] " src="./src/logo/Logo.png" alt="">
</div>
<div class="absolute ml-[6.5px] ">
<svg class="" xmlns="http://www.w3.org/2000/svg" width="69" height="844" viewBox="0 0 69 844" fill="none">
<g filter="url(#filter0_bd_528_5693)">
<path d="M69 0H88V844H69V519.261C69 505.265 62.3412 492.104 51.0652 483.813L18.9348 460.187C7.65879 451.896 1 438.735 1 424.739V130.261C1 116.265 7.65879 103.104 18.9348 94.8126L51.0652 71.1874C62.3412 62.8962 69 49.7349 69 35.7387V0Z" fill="#383A57" fill-opacity="0.5" shape-rendering="crispEdges"/>
</g>
<defs>
<filter id="filter0_bd_528_5693" x="-29" y="-30" width="147" height="904" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="15"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_528_5693"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
<feBlend mode="normal" in2="effect1_backgroundBlur_528_5693" result="effect2_dropShadow_528_5693"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_528_5693" result="shape"/>
</filter>
</defs>
</svg>
</div>
<div class="absolute mt-[45px]">
<div class="h-[40px] w-[40px] rounded-full bg-[#70B4E5] mt-[80px] ml-[20px]">
<img class=" pt-[8px] pl-[12px]" src="./src/logo/icondiaman.png" alt="">
</div>
<div class=" h-[42px] w-[42px] rounded-full mt-[25px] ml-[20px] ">
<img class="pt-[px] pl-[px] " src="./src/logo/drawfood.png" alt="">
</div>
<div class="h-[40px] w-[40px] bg-[#70B4E5] rounded-full mt-[25px] ml-[20px] ">
<img class="pt-[px] pl-[px] " src="./src/logo/Group 3-1.png" alt="">
</div>
<div class=" h-[40px] w-[40px] bg-[#70B4E5] rounded-full mt-[25px] ml-[20px] ">
<img class="pt-[px] pl-[px] " src="./src/logo/Explore.png" alt="">
</div>
<div class="h-[40px] w-[40px] bg-[#70B4E5] rounded-full mt-[25px] ml-[20px] ">
<img class="pt-[px] pl-[px] " src="./src/logo/Icon Add.png" alt="">
</div>
</div>
<div class="absolute mt-[323px] ml-[3px]">
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="38" viewBox="0 0 9 38" fill="none">
<mask id="path-1-inside-1_261_465" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.12458 0.503418C2.01738 3.25297 0.822998 6.66026 0.822998 10.2376V27.7624C0.822998 31.3398 2.01738 34.7471 4.12458 37.4966C4.24285 36.4423 4.44496 35.3978 4.72955 34.3733L7.513 24.3529C8.48586 20.8506 8.48586 17.1494 7.513 13.6471L4.72955 3.62673C4.44496 2.6022 4.24285 1.55776 4.12458 0.503418Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.12458 0.503418C2.01738 3.25297 0.822998 6.66026 0.822998 10.2376V27.7624C0.822998 31.3398 2.01738 34.7471 4.12458 37.4966C4.24285 36.4423 4.44496 35.3978 4.72955 34.3733L7.513 24.3529C8.48586 20.8506 8.48586 17.1494 7.513 13.6471L4.72955 3.62673C4.44496 2.6022 4.24285 1.55776 4.12458 0.503418Z" fill="url(#paint0_linear_261_465)"/>
<path d="M4.12458 0.503418L5.11834 0.391939L4.84149 -2.076L3.33086 -0.10487L4.12458 0.503418ZM4.12458 37.4966L3.33086 38.1049L4.84149 40.076L5.11834 37.6081L4.12458 37.4966ZM4.72955 34.3733L5.69307 34.6409L4.72955 34.3733ZM7.513 24.3529L6.54948 24.0852H6.54948L7.513 24.3529ZM7.513 13.6471L6.54948 13.9148H6.54948L7.513 13.6471ZM4.72955 3.62673L3.76604 3.89437L4.72955 3.62673ZM1.823 10.2376C1.823 6.88396 2.94257 3.68971 4.91829 1.11171L3.33086 -0.10487C1.09219 2.81623 -0.177002 6.43656 -0.177002 10.2376H1.823ZM1.823 27.7624V10.2376H-0.177002V27.7624H1.823ZM4.91829 36.8883C2.94257 34.3103 1.823 31.1161 1.823 27.7624H-0.177002C-0.177002 31.5635 1.09219 35.1838 3.33086 38.1049L4.91829 36.8883ZM5.11834 37.6081C5.2307 36.6065 5.42271 35.6142 5.69307 34.6409L3.76604 34.1057C3.46722 35.1814 3.255 36.2781 3.13081 37.3851L5.11834 37.6081ZM5.69307 34.6409L8.47652 24.6205L6.54948 24.0852L3.76604 34.1057L5.69307 34.6409ZM8.47652 24.6205C9.49802 20.9431 9.49802 17.0569 8.47652 13.3795L6.54948 13.9148C7.4737 17.2419 7.4737 20.7581 6.54948 24.0852L8.47652 24.6205ZM8.47652 13.3795L5.69307 3.35908L3.76604 3.89437L6.54948 13.9148L8.47652 13.3795ZM5.69307 3.35908C5.42271 2.38578 5.2307 1.39357 5.11834 0.391939L3.13081 0.614897C3.255 1.72196 3.46722 2.81862 3.76604 3.89437L5.69307 3.35908Z" fill="white" fill-opacity="0.4" style="mix-blend-mode:overlay" mask="url(#path-1-inside-1_261_465)"/>
<defs>
<linearGradient id="paint0_linear_261_465" x1="28.4999" y1="21" x2="8.49991" y2="43" gradientUnits="userSpaceOnUse">
<stop stop-color="#C441F4"/>
<stop offset="1" stop-color="#00DAEA"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="w-[244px] h-[844px] float-left bg-[#44486d] ">
<div class=" w-[244px] h-[44px] flex items-center" style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<h1 class="ml-5 text-slate-50 font-bold text-lg">Student& Network</h1>
</div>
<div class="w-[212px] h-[328px] mt-[16px] ml-[16px]" >
<ul class="flex w-[212px] h-[40px] bg-slate-700 rounded-lg">
<li class="flex items-center ml-3">
<img src="./src/logo/Symbol.png" alt="">
<h1 class="ml-3 text-white">Home</h1>
</li>
</ul>
<ul class="flex w-[212px] h-[40px] ">
<li class="flex items-center ml-2">
<img src="./src/logo/Music.png" alt="">
<h1 class="ml-2 text-white">Music</h1>
</li>
</ul>
<a href="../library/dist/Library.html">
<ul class="flex w-[212px] h-[40px] ">
<li class="flex items-center ml-3">
<img src="./src/logo/Book.png" alt="">
<h1 class="ml-3 text-white">Library</h1>
</li>
</ul>
</a>
<a href="../Add-Friend/dist/Add-friend.html">
<ul class="flex w-[212px] h-[40px] ">
<li class="flex items-center ml-3">
<img class="w-[20px] h-[20px]" src="./src/logo/add.png" alt="">
<h1 class="ml-2 text-white">Add Friend</h1>
</li>
</ul>
</a>
<ul class="flex w-[212px] h-[40px] ">
<li class="flex items-center ml-2">
<img src="./src/logo/Game.png" alt="">
<h1 class="ml-2 text-white">Game</h1>
</li>
</ul>
<ul class="flex w-[212px] h-[40px] ">
<li class="flex items-center ml-2">
<img src="./src/logo/Education.png" alt="">
<h1 class="ml-2 text-white">Education</h1>
</li>
</ul>
<ul class="flex w-[212px] h-[40px] ">
<li class="flex items-center ml-3">
<img src="./src/logo/S.png" alt="">
<h1 class="ml-3 text-white">Science & Tech</h1>
</li>
</ul>
<ul class="flex w-[212px] h-[40px] ">
<li class="flex items-center ml-2">
<img src="./src/logo/Entertainment.png" alt="">
<h1 class="ml-1 text-white">Etertainment</h1>
</li>
</ul>
<ul class="flex w-[212px] h-[40px] ">
<li class="flex items-center ml-3">
<img src="./src/logo/student.png" alt="">
<h1 class="ml-3 text-white">Student Hubs</h1>
</li>
</ul>
</div>
</div>
<!-- my account -->
<div class="flex justify-between items-center w-[320px] h-[72px] bg-[#1D203E] absolute mt-[773px]" style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<div class="flex ml-3">
<img src="./src/picture/User Profil_8.png" alt="">
<h2 class="text-[15px] text-slate-200 fond-[Lato] ml-2 mt-1">sophiefortune</h2>
</div>
<div class="mt-4">
<img src="./src/logo/Add Friend.png" alt="">
</div>
</div>
<div class="float-left w-[716px] h-[844px] bg-[#2C2F48]">
<!-- botton search -->
<div class="flex justify-center items-center w-[716px] h-[44px] ">
<div class="w-[442px] h-[24px] "style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<div class="flex justify-center items-center mt-[1.5px]">
<img src="./src/logo/magnifyingglass.png" alt="">
<h1 class="ml-2 text-slate-100 text-xs">Search</h1>
</div>
</div>
</div>
<!-- homepage -->
<div class="flex flex-col w-[716px] h-[800px] bg-[#1D203E] chin">
<!-- add story -->
<div class="flex w-[668px] h-[180px] mt-[24px] rounded-lg ml-[24px]">
<div class="relative w-full">
<div class="absolute inset-0 ">
<div class="flex h-full overflow-x-scroll ">
<div class="float-left">
<img class=" h-[80%] w-[110px] rounded-t-lg" src="./src/logo/User profil.png" alt="">
<div class="flex justify-center items-center font-medium text-lg rounded-b-lg h-[20%] bg-slate-400 w-[110px]">Story</div>
</div>
<div class="flex-none h-full w-[110px] bg-blue-600 ml-2 rounded-lg">
<div class="mt-[6px] ml-[6px]">
<img class="float-left" src="./src/logo/User Profil 2.png" alt="">
<div class="float-left font-[Lato] text-[8px] ml-2 mt-1">
<h2>Anne Couture</h2>
<h2">online</h2>
</div>
</div>
</div>
<div class="flex-none h-full w-[110px] bg-blue-600 ml-2 rounded-lg">
<div class="mt-[6px] ml-[6px]">
<img class="float-left" src="./src/logo/User Profil 2.png" alt="">
<div class="float-left font-[Lato] text-[8px] ml-2 mt-1">
<h2>Anne Couture</h2>
<h2">online</h2>
</div>
</div>
</div>
<div class="flex-none w-[110px] h-full bg-blue-600 ml-2 rounded-lg">
<div class="mt-[6px] ml-[6px]">
<img class="float-left" src="./src/logo/User Profil 2.png" alt="">
<div class="float-left font-[Lato] text-[8px] ml-2 mt-1">
<h2>Anne Couture</h2>
<h2">online</h2>
</div>
</div>
</div>
<div class="flex-none h-full w-[110px] bg-blue-600 ml-2 rounded-lg">
<div class="mt-[6px] ml-[6px]">
<img class="float-left" src="./src/logo/User Profil 2.png" alt="">
<div class="float-left font-[Lato] text-[8px] ml-2 mt-1">
<h2>Anne Couture</h2>
<h2">online</h2>
</div>
</div>
</div>
<div class="flex-none h-full w-[110px] bg-blue-600 ml-2 rounded-lg">
<div class="mt-[6px] ml-[6px]">
<img class="float-left" src="./src/logo/User Profil 2.png" alt="">
<div class="float-left font-[Lato] text-[8px] ml-2 mt-1">
<h2>Anne Couture</h2>
<h2">online</h2>
</div>
</div>
</div>
<div class="flex-none h-full w-[110px] bg-blue-600 ml-2 rounded-lg">
<div class="mt-[6px] ml-[6px]">
<img class="float-left" src="./src/logo/User Profil 2.png" alt="">
<div class="float-left font-[Lato] text-[8px] ml-2 mt-1">
<h2>Anne Couture</h2>
<h2">online</h2>
</div>
</div>
</div>
<div class="flex-none h-full w-[110px] bg-blue-600 ml-2 rounded-lg">
<div class="mt-[6px] ml-[6px]">
<img class="float-left" src="./src/logo/User Profil 2.png" alt="">
<div class="float-left font-[Lato] text-[8px] ml-2 mt-1">
<h2>Anne Couture</h2>
<h2">online</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- button post -->
<div class="flex w-[668px] h-[33px] mt-[30px] ml-[24px]">
<div class="flex justify-center items-center w-[100px] h-[33px] rounded-lg" style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="w-[20px] h-[20px]" src="./src/logo/Symbol.png" alt="">
<h2 class="font-bold text-slate-200 text-lg ml-2">Post</h2>
</div>
<div class="flex justify-center items-center ml-5 w-[100px] h-[33px] rounded-lg" style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="w-[20px] h-[20px]" src="./src/logo/image.png" alt="">
<h2 class="font-bold text-slate-200 text-lg ml-2">Photo</h2>
</div>
<div class="flex justify-center items-center ml-5 w-[100px] h-[33px] rounded-lg" style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="w-[20px] h-[20px]" src="./src/logo/video.png" alt="">
<h2 class="font-bold text-slate-200 text-lg ml-2">Video</h2>
</div>
</div>
<!-- user post -->
<div class="w-[668px] h-[449px] ml-[24px] mt-[30px] rounded-lg" style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<div class="flex m-4">
<img class="w-[40px] h-[40px] float-left" src="./src/logo/User.png" alt="">
<div class="ml-2">
<h3 class="font-[Lato] text-white">Sophie Fortune</h3>
<h3 class="text-sm text-yellow-400">online</h3>
</div>
</div>
<p class="ml-4 text-slate-50 -mt-2">Hello every one here is my flower. I love it</p>
<div class="flex w-[627px] h-[300px] ml-4 mt-3 rounded-lg " style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="w-[50%] h-[100%]" src="./src/picture/download.jpg" alt="">
<img class="w-[50%] h-[100%]" src="./src/picture/flower.jpg" alt="">
</div>
<div class="flex ml-4 mt-1">
<img src="./src/logo/like.png" alt="">
<img class="ml-3 h-[20px] w-[20px] mt-1" src="./src/logo/comment.png" alt="">
<img class="ml-3 mt-1" src="./src/logo/share.png" alt="">
</div>
</div>
</div>
</div>
<div class="float-left w-[244px] h-844px bg-[#2C2F48]"style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<!-- menu header -->
<div class="flex justify-center items-center h-[44px] w-[244px]"style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<div class="h-[24px] w-[220px] flex justify-between items-center">
<img src="./src/logo/Mail.png" alt="">
<img src="./src/logo/Bell.png" alt="">
<a href="../Chat/dist/Chat.html"><img src="./src/logo/Chat.png" alt="" ></a>
<a href="../Security/Security.html"><img src="./src/logo/Setting.png" alt=""></a>
</div>
</div>
<div class="ml-2">
<img class="flex justify-center " src="./src/picture/LooperGroup.png" alt="">
<img class="-translate-y-48 ml-14" src="./src/picture/User profil.png" alt="">
</div>
<!-- number -friend -->
<div class="flex -mt-24 ml-3">
<h2 class="text-[15px] text-slate-200" >New Members</h2>
<h3 class="text-[15px] text-slate-400 ml-[76px]" >See all</h3>
</div>
<div class="flex-col ml-3 w-[216px] h-[265px] mt-3">
<div class="flex items-center pl-2 w-[216] h-[60px] mt-1 rounded-lg"style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="h-[44px] w-[44px]" src="./src/picture/User Profil_1.png" alt="">
<div class="ml-2">
<h2 class="text-[13px] text-slate-200 fond-[Lato]">Anne Couture</h2>
<h3 class="text-[11px] text-slate-200 fond-[Lato]">5 min ago</h3>
</div>
</div>
<div class="flex items-center pl-2 w-[216] h-[60px] mt-2 rounded-lg"style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="h-[44px] w-[44px]" src="./src/picture/User Profil_2.png" alt="">
<div class="ml-2">
<h2 class="text-[13px] text-slate-200 fond-[Lato]">Miriam Soleil</h2>
<h3 class="text-[11px] text-slate-200 fond-[Lato]">20 min ago</h3>
</div>
</div>
<div class="flex items-center pl-2 w-[216] h-[60px] mt-2 rounded-lg"style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="h-[44px] w-[44px]" src="./src/picture/User Profil_3.png" alt="">
<div class="ml-2">
<h2 class="text-[13px] text-slate-200 fond-[Lato]">Marie Laval</h2>
<h3 class="text-[13px] text-slate-200 fond-[Lato]">35 min ago</h3>
</div>
</div>
<div class="flex items-center pl-2 w-[216] h-[60px] mt-2 rounded-lg"style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="h-[44px] w-[44px]" src="./src/picture/User Profil_4.png" alt="">
<div class="ml-2">
<h2 class="text-[13px] text-slate-200 fond-[Lato]">Mark Morain</h2>
<h3 class="text-[13px] text-slate-200 fond-[Lato]">40 min ago</h3>
</div>
</div>
</div>
<!-- Activity number -->
<div class="flex ml-3 mt-5">
<h2 class="text-[15px] text-slate-200" >Recent Activity</h2>
<h3 class="text-[15px] text-slate-400 ml-[76px]" >See all</h3>
</div>
<div class="flex-col ml-3 w-[216px] h-[265px] mt-3 ">
<div class="flex items-center pl-2 w-[216] h-[60px] mt-1 rounded-lg"style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="h-[44px] w-[44px]" src="./src/picture/User Profil_5.png" alt="">
<div class="ml-2">
<h2 class="text-[13px] text-slate-200 fond-[Lato] ">Hola Spine <span class="text-[11px] text-slate-400 ml-2 ">invited you</span></h2>
<h4 class="text-[11px] text-slate-400 -mt-1">to a channel </h4>
<h3 class="text-[11px] text-slate-400 fond-[Lato] -mt-1">2 min ago</h3>
</div>
</div>
<div class="flex items-center pl-2 w-[216] h-[60px] mt-2 rounded-lg"style="border: 0.5px solid
rgba(255, 255, 255, 0.2);">
<img class="h-[44px] w-[44px]" src="./src/picture/User Profil_6.png" alt="">
<div class="ml-2">
<h2 class="text-[13px] text-slate-200 fond-[Lato]">Eva Solain <span class="text-[11px] text-slate-400 ml-2">invited you</span></h2>
<h4 class="text-[11px] text-slate-400 -mt-1">to a chat </h4>
<h3 class="text-[11px] text-slate-400 fond-[Lato] -mt-1">20 min ago</h3>
</div>
</div>
</div>
</div>
</div>
<script src="/js.js"></script>
</body>
</html>