Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit df13c49

Browse files
BOLT04BOLT04
authored
feat(moderators): add moderators cards (#32)
* feat(moderators): add some moderators cards The UI for the horizontal cards isn't finished on the PR #21. So the moderators code will change in the future. Also, some moderators are missing since I couldn't find their GitHub on the organization. This needs to be added later as well. Issue: #6 * feat(moderators): add missing moderators #32 Issue: #6 * fix(moderators): moderator card width in small screens When a moderator card doesn't have description or it's too short, it won't occupy the whole width like the other cards. Issue: #6 * refactor(moderators): update moderators card to UI on #21 Issue: #6 * fix(moderators): add a white background and header Removed "mx-auto" class since it is not necessary to make the div centered. * fix(moderators): contrast of community label
1 parent eae8cff commit df13c49

File tree

1 file changed

+321
-0
lines changed

1 file changed

+321
-0
lines changed

‎index.html‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,327 @@ <h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
184184
</div>
185185
</div>
186186

187+
<!-- Moderator cards -->
188+
<div class="container my-8 p-5 bg-white rounded-lg">
189+
<h2 class="text-center text-4xl mb-5 py-5 font-semibold">
190+
Our Moderators
191+
</h2>
192+
<div class="grid grid-cols-1 gap-5 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2">
193+
194+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
195+
<div class="flex flex-inline ">
196+
<div class="h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48">
197+
<img class="rounded-full" src="https://avatars1.githubusercontent.com/u/150512" alt="@stemount">
198+
</div>
199+
<div class="lg:w-2/3 md:w-2/3 sm:w-2/3 px-5 pt-5 sm:pt-2 lg:pt-5 rounded-r-lg">
200+
<button class="bg-yellow-400 rounded px-1 text-black text-sm ml-auto"> community </button>
201+
<button class="bg-purple-400 rounded px-1 text-white text-sm ml-auto"> Server Booster </button>
202+
<h1 class="font-medium text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl font-medium pt-2 sm:pt-1 md:pt-1 lg:pt-1">
203+
Stephen Mount
204+
</h1>
205+
<p class="font-light text-xs sm:text-sm md:text-sm lg:text-sm xl:text-sm py-1 font-normal hidden md:block lg:block break-words">
206+
After 10+ years in software engineering, I am coming up with ideas and things to reverse engineer things for the new wave of ARM etc etc
207+
</p>
208+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
209+
<div class="flex flex-inline">
210+
<a target="_blank" href="https://github.com/stemount">
211+
<i class="fa fa-github-alt pr-1 pt-6 " style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
212+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">GitHub</p>
213+
</a>
214+
</div>
215+
<div class="flex flex-inline">
216+
<a target="_blank" href="https://ste.london">
217+
<i class="fa fa-link pr-1 pt-6 text-purple-500" style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
218+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">Website</p>
219+
</a>
220+
</div>
221+
</div>
222+
<!-- for small screens -->
223+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
224+
<div>
225+
<a target="_blank" href="https://github.com/stemount">
226+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
227+
</a>
228+
</div>
229+
<div>
230+
<a target="_blank" href="https://ste.london">
231+
<i class="fa fa-link pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
232+
</a>
233+
</div>
234+
</div>
235+
</div>
236+
</div>
237+
</div>
238+
239+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
240+
<div class="flex flex-inline">
241+
<div class="h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48">
242+
<img class="rounded-full" src="https://avatars0.githubusercontent.com/u/13338176?s=460&u=d66a31344752bb3fa882a59b3effb10e084f226c&v=4" alt="@mikeysan">
243+
</div>
244+
<div class="lg:w-2/3 md:w-2/3 sm:w-2/3 px-5 pt-5 sm:pt-2 lg:pt-5 rounded-r-lg">
245+
<button class="bg-yellow-400 rounded px-1 text-black text-sm ml-auto"> community </button>
246+
<button class="bg-green-400 rounded px-1 text-white text-sm ml-auto"> python </button>
247+
<h1
248+
class="font-medium text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl font-medium pt-2 sm:pt-1 md:pt-1 lg:pt-1">
249+
Michael Mba
250+
</h1>
251+
<p class="font-light text-xs sm:text-sm md:text-sm lg:text-sm xl:text-sm py-1 font-normal hidden md:block lg:block break-words">
252+
Linux Systems Integrator | Open Source Enthusiast | Photographer | Gamer || Starting my Python journey.
253+
</p>
254+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
255+
<div class="flex flex-inline">
256+
<a target="_blank" href="https://github.com/mikeysan">
257+
<i class="fa fa-github-alt pr-1 pt-6 " style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
258+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">GitHub</p>
259+
</a>
260+
</div>
261+
<div class="flex flex-inline">
262+
<a target="_blank" href="https://mikeysan.hashnode.dev">
263+
<i class="fa fa-link pr-1 pt-6" style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
264+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">Website</p>
265+
</a>
266+
</div>
267+
</div>
268+
<!-- for small screens -->
269+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
270+
<div>
271+
<a target="_blank" href="https://github.com/mikeysan">
272+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
273+
</a>
274+
</div>
275+
<div>
276+
<a target="_blank" href="https://mikeysan.hashnode.dev">
277+
<i class="fa fa-link pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
278+
</a>
279+
</div>
280+
</div>
281+
</div>
282+
</div>
283+
</div>
284+
285+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
286+
<div class="flex flex-inline">
287+
<div class="h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48">
288+
<img class="rounded-full" src="https://avatars1.githubusercontent.com/u/1830380?s=460&u=74697d8b1cbf3e16adec7b411369afbd53ce4864&v=4" alt="@praveenscience">
289+
</div>
290+
<div class=" lg:w-2/3 md:w-2/3 sm:w-2/3 px-5 pt-5 sm:pt-2 lg:pt-5 rounded-r-lg">
291+
<button class="bg-yellow-400 rounded px-1 text-black text-sm ml-auto"> community </button>
292+
<h1 class="font-medium text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl font-medium pt-2 sm:pt-1 md:pt-1 lg:pt-1">
293+
Praveen Kumar
294+
</h1>
295+
<p class="font-light text-xs sm:text-sm md:text-sm lg:text-sm xl:text-sm py-1 font-normal hidden md:block lg:block break-words">
296+
Microsoft MVP, Web Developer and Computer Software & UX Architect. Mentor - Full Stack @Thinkful-Ed.
297+
</p>
298+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
299+
<div class="flex flex-inline">
300+
<a target="_blank" href="https://github.com/praveenscience">
301+
<i class="fa fa-github-alt pr-1 pt-6 " style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
302+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">GitHub</p>
303+
</a>
304+
</div>
305+
<div class="flex flex-inline">
306+
<a target="_blank" href="https://praveen.science/">
307+
<i class="fa fa-link pr-1 pt-6" style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
308+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">Website</p>
309+
</a>
310+
</div>
311+
</div>
312+
<!-- for small screens -->
313+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
314+
<div>
315+
<a target="_blank" href="https://github.com/praveenscience">
316+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
317+
</a>
318+
</div>
319+
<div>
320+
<a target="_blank" href="https://praveen.science/">
321+
<i class="fa fa-link pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
322+
</a>
323+
</div>
324+
</div>
325+
</div>
326+
</div>
327+
</div>
328+
329+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
330+
<div class="flex flex-inline">
331+
<div class="h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48">
332+
<img class="rounded-full" src="https://avatars1.githubusercontent.com/u/18630253?s=460&u=36cdb692666236ff5db7aa3c71e58327bdbdecc7&v=4" alt="@BOLT04">
333+
</div>
334+
<div class="lg:w-2/3 md:w-2/3 sm:w-2/3 px-5 pt-5 sm:pt-2 lg:pt-5 rounded-r-lg">
335+
<button class="bg-yellow-400 rounded px-1 text-black text-sm ml-auto"> community </button>
336+
<h1 class="font-medium text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl font-medium pt-2 sm:pt-1 md:pt-1 lg:pt-1">
337+
David
338+
</h1>
339+
<p class="font-light text-xs sm:text-sm md:text-sm lg:text-sm xl:text-sm py-1 font-normal hidden md:block lg:block break-words">
340+
Job: Software Developer Consultant I love programming, more specifically w/ Kotlin... it's just the best. Very interested in Web Dev and building discord bots
341+
</p>
342+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
343+
<div class="flex flex-inline">
344+
<a target="_blank" href="https://github.com/BOLT04">
345+
<i class="fa fa-github-alt pr-1 pt-6 " style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
346+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">GitHub</p>
347+
</a>
348+
</div>
349+
<div class="flex flex-inline">
350+
<a target="_blank" href="https://bolt04.github.io/react-ultimate-resume/">
351+
<i class="fa fa-link pr-1 pt-6" style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
352+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">Website</p>
353+
</a>
354+
</div>
355+
</div>
356+
<!-- for small screens -->
357+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
358+
<div>
359+
<a target="_blank" href="https://github.com/BOLT04">
360+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
361+
</a>
362+
</div>
363+
<div>
364+
<a target="_blank" href="https://bolt04.github.io/react-ultimate-resume/">
365+
<i class="fa fa-link pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
366+
</a>
367+
</div>
368+
</div>
369+
</div>
370+
</div>
371+
</div>
372+
373+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
374+
<div class="flex flex-inline">
375+
<div class=" h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48 ">
376+
<img class="rounded-full" src="https://avatars3.githubusercontent.com/u/624760?s=460&v=4" alt="@eddiejaoude">
377+
</div>
378+
<div class=" lg:w-2/3 md:w-2/3 sm:w-2/3 px-5 pt-5 sm:pt-2 lg:pt-5 rounded-r-lg">
379+
<button class="bg-yellow-400 rounded px-1 text-black text-sm ml-auto"> community </button>
380+
<button class="bg-green-400 rounded px-1 text-white text-sm ml-auto"> opensource </button>
381+
<h1 class="font-medium text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl font-medium pt-2 sm:pt-1 md:pt-1 lg:pt-1">
382+
Eddie Jaoude
383+
</h1>
384+
<p class="font-light text-xs sm:text-sm md:text-sm lg:text-sm xl:text-sm py-1 font-normal hidden md:block lg:block break-words">
385+
Fullstack open source DevRel! I love code and the community :). GitHub Star ⭐ program 🤓
386+
</p>
387+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
388+
<div class="flex flex-inline">
389+
<a target="_blank" href="https://github.com/eddiejaoude">
390+
<i class="fa fa-github-alt pr-1 pt-6 " style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
391+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">GitHub</p>
392+
</a>
393+
</div>
394+
<div class="flex flex-inline">
395+
<a target="_blank" href="http://youtube.com/eddiejaoude?sub_confirmation=1">
396+
<i class="fa fa-link pr-1 pt-6" style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
397+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">Website</p>
398+
</a>
399+
</div>
400+
</div>
401+
<!-- for small screens -->
402+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
403+
<div>
404+
<a target="_blank" href="https://github.com/eddiejaoude">
405+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
406+
</a>
407+
</div>
408+
<div>
409+
<a target="_blank" href="http://youtube.com/eddiejaoude?sub_confirmation=1">
410+
<i class="fa fa-link pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
411+
</a>
412+
</div>
413+
</div>
414+
</div>
415+
</div>
416+
</div>
417+
418+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
419+
<div class="flex flex-inline">
420+
<div class=" h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48 ">
421+
<img class="rounded-full" src="https://avatars1.githubusercontent.com/u/32101027?s=460&u=a3204811c6965f28996b6bcd36bdc800216d5dfe&v=4" alt="@metaverde">
422+
</div>
423+
<div class=" lg:w-2/3 md:w-2/3 sm:w-2/3 px-5 pt-5 sm:pt-2 lg:pt-5 rounded-r-lg">
424+
<button class="bg-yellow-400 rounded px-1 text-black text-sm ml-auto"> community </button>
425+
<h1 class="font-medium text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl font-medium pt-2 sm:pt-1 md:pt-1 lg:pt-1">
426+
Petra
427+
</h1>
428+
<p class="font-light text-xs sm:text-sm md:text-sm lg:text-sm xl:text-sm py-1 font-normal hidden md:block lg:block break-words">
429+
Linux and blockchain. Looking for ways to change the world.
430+
</p>
431+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
432+
<div class="flex flex-inline">
433+
<a target="_blank" href="https://github.com/metaverde">
434+
<i class="fa fa-github-alt pr-1 pt-6 " style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
435+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">GitHub</p>
436+
</a>
437+
</div>
438+
<div class="flex flex-inline">
439+
<a target="_blank" href="https://metaverde.github.io/">
440+
<i class="fa fa-link pr-1 pt-6" style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
441+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">Website</p>
442+
</a>
443+
</div>
444+
</div>
445+
<!-- for small screens -->
446+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
447+
<div>
448+
<a target="_blank" href="https://github.com/metaverde">
449+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
450+
</a>
451+
</div>
452+
<div>
453+
<a target="_blank" href="https://metaverde.github.io/">
454+
<i class="fa fa-link pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
455+
</a>
456+
</div>
457+
</div>
458+
</div>
459+
</div>
460+
</div>
461+
462+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
463+
<div class="flex flex-inline">
464+
<div class=" h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48 ">
465+
<img class="rounded-full" src="https://avatars0.githubusercontent.com/u/29413522?s=460&v=4" alt="@AmandineFlachs">
466+
</div>
467+
<div class=" lg:w-2/3 md:w-2/3 sm:w-2/3 px-5 pt-5 sm:pt-2 lg:pt-5 rounded-r-lg">
468+
<button class="bg-yellow-400 rounded px-1 text-black text-sm ml-auto"> community </button>
469+
<h1 class="font-medium text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl font-medium pt-2 sm:pt-1 md:pt-1 lg:pt-1">
470+
Amandine Flachs
471+
</h1>
472+
<p class="font-light text-xs sm:text-sm md:text-sm lg:text-sm xl:text-sm py-1 font-normal hidden md:block lg:block break-words">
473+
474+
</p>
475+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
476+
<div class="flex flex-inline">
477+
<a target="_blank" href="https://github.com/AmandineFlachs">
478+
<i class="fa fa-github-alt pr-1 pt-6 " style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
479+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">GitHub</p>
480+
</a>
481+
</div>
482+
<div class="flex flex-inline">
483+
<a target="_blank" href="www.flachsconsulting.com">
484+
<i class="fa fa-link pr-1 pt-6" style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i>
485+
<p class="inline pr-5 pt-5 text-purple-500 text-lg font-medium">Website</p>
486+
</a>
487+
</div>
488+
</div>
489+
<!-- for small screens -->
490+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
491+
<div>
492+
<a target="_blank" href="https://github.com/AmandineFlachs">
493+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
494+
</a>
495+
</div>
496+
<div>
497+
<a target="_blank" href="www.flachsconsulting.com">
498+
<i class="fa fa-link pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
499+
</a>
500+
</div>
501+
</div>
502+
</div>
503+
</div>
504+
</div>
505+
</div>
506+
</div>
507+
187508
<div class="mt-6">
188509
<a
189510
href="https://youtube.com/eddiejaoude?sub_confirmation=1"

0 commit comments

Comments
 (0)