-
Notifications
You must be signed in to change notification settings - Fork 0
/
community.html
186 lines (164 loc) · 11.9 KB
/
community.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
<!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 | whatsapp</title>
<!-- tailwind css -->
<link rel="stylesheet" href="./assests/css/output.css">
</head>
<body class="bg-emerald-900 py-5">
<h1 class="font-semibold text-white text-center mb-5">Whatsapp UI challenge (Community)</h1>
<section class="max-w-sm mx-auto">
<!-- header section -->
<header>
<!-- Whatsapp Header section starts -->
<div class="bg-gray-900 text-gray-300 px-3 py-5 flex items-center justify-between space-x-2">
<h4 class="font-semibold text-lg">WhatsApp</h4>
<div class="flex ">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 24 24"
class="pe-1 hover:cursor-pointer hover:text-emerald-600 ">
<path fill="currentColor"
d="M12 17.5q1.875 0 3.188-1.313T16.5 13q0-1.875-1.313-3.188T12 8.5q-1.875 0-3.188 1.313T7.5 13q0 1.875 1.313 3.188T12 17.5Zm0-2q-1.05 0-1.775-.725T9.5 13q0-1.05.725-1.775T12 10.5q1.05 0 1.775.725T14.5 13q0 1.05-.725 1.775T12 15.5ZM4 21q-.825 0-1.413-.588T2 19V7q0-.825.588-1.413T4 5h3.15L9 3h6l1.85 2H20q.825 0 1.413.588T22 7v12q0 .825-.588 1.413T20 21H4Zm0-2h16V7h-4.05l-1.825-2h-4.25L8.05 7H4v12Zm8-6Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 24 24"
class="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>
</div>
</div>
<!-- Whatsapp Header section list starts -->
<ul class="bg-gray-900 text-gray-500 px-3 py-2 flex items-center justify-between">
<li>
<div class="text-emerald-600 relative flex justify-center ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" 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 class="bg-emerald-600 w-10 h-1 top-10 absolute">
</div>
</div>
</li>
<li class="flex items-center flex-1 justify-between">
<div class="ml-5 font-medium text-sm flex items-center ms-8">
<a href="index.html"><span class="hover:cursor-pointer"> Chats</span></a>
<span
class=" bg-gray-400 text-gray-700 text-xs p-0.5 rounded-full w-4 h-4 flex items-center justify-center ml-2">2</span>
</div>
<div class="ml-3 font-medium text-sm flex items-center relative justify-center text-gray-500 ">
<a href="about.html"><span>Updates</span></a>
<!-- <div class="absolute top-8 bg-emerald-400 w-24 h-1"></div> -->
</div>
<div class="ml-3 font-medium text-sm flex items-center pe-6">
<a href="calls.html"><span> Calls
</span></a>
</div>
</li>
</ul>
<!-- whatsapp header section list ending -->
<!-- Whatsapp header section ends -->
</header>
<!-- community section content -->
<section class="bg-gray-950 ">
<!-- Create New community -->
<div class=" px-3 pt-5 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-12 h-12 rounded-md relative">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" 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 class="bg-emerald-600 text-gray-300 rounded-full absolute right-0 bottom-0 ">
<svg xmlns="http://www.w3.org/2000/svg" width=20" height="20" viewBox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd"
d="M13 6a1 1 0 1 0-2 0v5H6a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5V6Z"
clip-rule="evenodd" />
</svg>
</div>
</div>
<span class="text-gray-300 font-medium text-sm px-4">New Community</span>
</div>
<!--CyberDude Community -->
<section class="py-2">
<!-- community card -->
<section class= " px-3 py-3 flex items-center hover:cursor-pointer hover:bg-gray-900">
<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">
<span class="text-sm">CyberDude Full stack Interns</span>
</div>
</section>
<!-- horizontal line -->
<div class="py-2"><hr class="border-gray-800 "></div>
<!-- annoucements card-->
<section class="py-2 hover:cursor-pointer hover:bg-gray-900">
<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>
<!-- intern group card -->
<section class="py-2 hover:cursor-pointer hover:bg-gray-900">
<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-900">
<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 items-center">
<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>
<!-- view all page -->
<section class="py-5 hover:cursor-pointer hover:bg-gray-900">
<a href="viewall.html" title="viewall-groups">
<div class="text-gray-500 pl-6 flex items-center ">
<!-- icon appears here -->
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.41z"/></svg>
</div>
<div class="pl-6">
<span class="text-base">View all</span>
</div>
</div>
</a>
</section>
</section>
</section>
</body>
</html>