-
Notifications
You must be signed in to change notification settings - Fork 0
/
viewall.html
151 lines (141 loc) · 9.67 KB
/
viewall.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- favicon -->
<link rel="shortcut icon"
href="https://e7.pngegg.com/pngimages/829/586/png-clipart-whatsapp-logo-whatsapp-logo-desktop-computer-icons-viber-grass-viber.png"
type="image/x-icon">
<title>Community-view all | Whatsapp</title>
<!-- tailwind css -->
<link rel="stylesheet" href="./assests/css/output.css">
</head>
<body class="py-5 bg-emerald-900 max-w-sm mx-auto">
<h1 class="text-white font-semibold text-center pb-5">WhatsApp UI challenge (Viewall - Community)</h1>
<header class="bg-gray-900 ">
<div class="flex flex-1 justify-between items-center px-3 py-3">
<!-- go back icon -->
<a href="community.html" class="text-gray-500 hover:text-emerald-600" title="Go back">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.425 12q0-.2.063-.375T4.7 11.3l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12q0 .425-.288.713T19 13H7.825Z" />
</svg>
</a>
<!-- vertical dot -->
<a href="settings.html" title="view-settings">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 24"
class="text-gray-500 hover:cursor-pointer hover:text-emerald-600">
<path fill="currentColor"
d="M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2Z" />
</svg>
</a>
</div>
<section class="px-3 py-3 flex items-center hover:cursor-pointer hover:bg-gray-800">
<img src="https://i.tracxn.com/logo/company/Selection_999(163)_1559117969631.png?height=120&width=120"
alt="cyberdude-community-profile-picture" class="w-12 h-12 object-cover rounded">
</div>
<div class="text-gray-300 font-medium px-4 flex flex-col">
<span class="text-sm">CyberDude Full stack Interns</span>
<span class="text-gray-500 text-sm">Community · 5 groups</span>
</div>
</section>
</header>
<!-- content section -->
<section class="bg-gray-950">
<section>
<!-- annoucements card-->
<section class="py-2 hover:cursor-pointer hover:bg-gray-800">
<div class="pl-4 pe-3 py-4 flex font-medium">
<div class="w-10 h-10 rounded-full bg-emerald-600 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
class="text-emerald-300">
<path fill="currentColor"
d="M3 6c0-1.1.9-2 2-2h8l4-4h2v16h-2l-4-4H5a2 2 0 0 1-2-2H1V6h2zm8 9v5H8l-1.67-5H5v-2h8v2h-2z" />
</svg>
</div>
<div class="flex flex-col flex-1 pl-5">
<div class="flex justify-between">
<span class="text-gray-300 text-sm">Announcements</span>
<span class="text-gray-500 text-xs">29/09/23</span>
</div>
<div class="text-gray-500 text-sm">
<p>Anbu: Anyone who wants to learn english....</p>
</div>
</div>
</div>
</section>
<section>
<hr class="border-gray-800 py-2">
<span class="text-gray-500 text-sm px-3">Groups you're in</span>
</section>
<!-- intern group card -->
<section class="py-2 hover:cursor-pointer hover:bg-gray-800">
<div class="pl-4 pe-3 py-4 flex font-medium ">
<div>
<img src="./assests/Images/Cyberdude-Interns logo.jpeg" alt="Cyberdude-Interns-logo"
class="w-10 h-10 rounded-full object-cover">
</div>
<div class="flex flex-col flex-1 pl-5">
<div class="flex justify-between items-center">
<span class="text-gray-300 text-sm">Full Stack Engineers - CyberDude</span>
<span class="text-gray-500 text-xs">12:23 pm</span>
</div>
<div class="text-gray-500 text-sm">
<p>You reacted ❤ to "Respecting ur request, ...</p>
</div>
</div>
</div>
</section>
<!-- english group card -->
<section class="py-2 hover:cursor-pointer hover:bg-gray-800">
<div class="pl-4 pe-3 py-4 flex font-medium ">
<div>
<img src="https://production.listennotes.com/podcasts/lets-speak-english-abc-ingl%C3%A9s-5FEBjpocqZa-MKvLon2YsyH.1400x1400.jpg"
alt="lets-speak- english-group-icon" class="w-10 h-10 rounded-full">
</div>
<div class="flex flex-col flex-1 pl-5">
<div class="flex justify-between">
<span class="text-gray-300 text-sm">Let's talk English - CyberDude</span>
<span class="text-gray-500 text-xs">1:53 pm</span>
</div>
<div class="text-gray-500 text-sm">
<p>Anbu: Choose your preffered time slot for l...</p>
</div>
</div>
</div>
</section>
<section>
<hr class="border-gray-800 py-2">
<span class="text-gray-500 text-sm px-3">Groups can join</span>
</section>
<section>
<div class=" px-3 pl-4 py-3 flex items-center hover:cursor-pointer hover:bg-gray-800">
<div class="text-gray-400 bg-gray-700 flex items-center justify-center w-10 h-10 rounded-full ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M10.27 12h3.46a1.5 1.5 0 0 0 1.48-1.75l-.3-1.79a2.951 2.951 0 0 0-5.82.01l-.3 1.79c-.15.91.55 1.74 1.48 1.74zm-8.61-.89c-.13.26-.18.57-.1.88c.16.69.76 1.03 1.53 1h1.95c.83 0 1.51-.58 1.51-1.29c0-.14-.03-.27-.07-.4c-.01-.03-.01-.05.01-.08c.09-.16.14-.34.14-.53c0-.31-.14-.6-.36-.82c-.03-.03-.03-.06-.02-.1c.07-.2.07-.43.01-.65a1.12 1.12 0 0 0-.99-.74a.09.09 0 0 1-.07-.03C5.03 8.14 4.72 8 4.37 8c-.3 0-.57.1-.75.26c-.03.03-.06.03-.09.02a1.24 1.24 0 0 0-1.7 1.03c0 .02-.01.04-.03.06c-.29.26-.46.65-.41 1.05c.03.22.12.43.25.6c.03.02.03.06.02.09zm14.58 2.54c-1.17-.52-2.61-.9-4.24-.9c-1.63 0-3.07.39-4.24.9A2.988 2.988 0 0 0 6 16.39V18h12v-1.61c0-1.18-.68-2.26-1.76-2.74zm-15.02.93A2.01 2.01 0 0 0 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29c-.37-.06-.74-.1-1.13-.1c-.99 0-1.93.21-2.78.58zm21.56 0A6.95 6.95 0 0 0 20 14c-.39 0-.76.04-1.13.1c.4.68.63 1.46.63 2.29V18H24v-1.57c0-.81-.48-1.53-1.22-1.85zM22 11v-.5c0-1.1-.9-2-2-2h-2c-.42 0-.65.48-.39.81l.7.63c-.19.31-.31.67-.31 1.06c0 1.1.9 2 2 2s2-.9 2-2z" />
</svg>
</div>
<span class="text-gray-300 font-medium text-sm px-4 pl-5">CDN Creative artists</span>
</div>
<div class=" px-3 pl-4 py-3 flex items-center hover:cursor-pointer hover:bg-gray-800">
<div class="text-gray-400 bg-gray-700 flex items-center justify-center w-10 h-10 rounded-full ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M10.27 12h3.46a1.5 1.5 0 0 0 1.48-1.75l-.3-1.79a2.951 2.951 0 0 0-5.82.01l-.3 1.79c-.15.91.55 1.74 1.48 1.74zm-8.61-.89c-.13.26-.18.57-.1.88c.16.69.76 1.03 1.53 1h1.95c.83 0 1.51-.58 1.51-1.29c0-.14-.03-.27-.07-.4c-.01-.03-.01-.05.01-.08c.09-.16.14-.34.14-.53c0-.31-.14-.6-.36-.82c-.03-.03-.03-.06-.02-.1c.07-.2.07-.43.01-.65a1.12 1.12 0 0 0-.99-.74a.09.09 0 0 1-.07-.03C5.03 8.14 4.72 8 4.37 8c-.3 0-.57.1-.75.26c-.03.03-.06.03-.09.02a1.24 1.24 0 0 0-1.7 1.03c0 .02-.01.04-.03.06c-.29.26-.46.65-.41 1.05c.03.22.12.43.25.6c.03.02.03.06.02.09zm14.58 2.54c-1.17-.52-2.61-.9-4.24-.9c-1.63 0-3.07.39-4.24.9A2.988 2.988 0 0 0 6 16.39V18h12v-1.61c0-1.18-.68-2.26-1.76-2.74zm-15.02.93A2.01 2.01 0 0 0 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29c-.37-.06-.74-.1-1.13-.1c-.99 0-1.93.21-2.78.58zm21.56 0A6.95 6.95 0 0 0 20 14c-.39 0-.76.04-1.13.1c.4.68.63 1.46.63 2.29V18H24v-1.57c0-.81-.48-1.53-1.22-1.85zM22 11v-.5c0-1.1-.9-2-2-2h-2c-.42 0-.65.48-.39.81l.7.63c-.19.31-.31.67-.31 1.06c0 1.1.9 2 2 2s2-.9 2-2z" />
</svg>
</div>
<span class="text-gray-300 font-medium text-sm px-4 pl-5">CDN Digital Marketing</span>
</div>
</section>
</section>
</section>
<!-- footer section -->
<section class="px-3 py-3 pb-6 bg-gray-950">
<button
class="bg-emerald-600 hover:bg-emerald-700 text-gray-950 hover:text-gray-300 rounded-full w-full p-3 text-sm font-medium mt-10">
+ Add group</button>
</section>
</body>
</html>