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

Commit eae8cff

Browse files
ArvindjittaArvindjitta
authored
adding cards to index.html (#21)
* Update index.html I would add the basic cards in the index.html file, that has useful information listing all the community organisations projects, with the following information: project name project description repo link website link tech stack status * Update index.html added font awesome icons * Update index.html
1 parent 93745f6 commit eae8cff

File tree

1 file changed

+113
-0
lines changed

1 file changed

+113
-0
lines changed

‎index.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,5 +208,118 @@ <h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
208208
>
209209
</div>
210210
</div>
211+
212+
<!-- new card in a container -->
213+
214+
<div class="container mx-auto py-24 px-5">
215+
<div class=" grid grid-cols-1 gap-5 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2">
216+
217+
<!-- card 1 -->
218+
219+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
220+
<div class="flex flex-inline ">
221+
<div class=" h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48 ">
222+
<img class="rounded-full" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" alt="">
223+
</div>
224+
<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">
225+
<button class="bg-yellow-400 rounded px-1 text-white text-sm ml-auto"> community </button>
226+
<h1
227+
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">
228+
Eddie Jaoude</h1>
229+
<p
230+
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">
231+
Fullstack open source DevRel! I love code and the community :). GitHub Star ⭐ program 🤓</p>
232+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
233+
<div class="flex flex-inline">
234+
<i class="fa fa-github-alt pr-1 pt-6 "
235+
style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i> </i>
236+
<p class="pr-5 pt-5 text-purple-500 text-lg font-medium">
237+
website</p>
238+
</div>
239+
<div class="flex flex-inline">
240+
<i class="fa fa-code-fork pr-1 pt-6 "
241+
style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i> </i>
242+
<p class="pr-5 pt-5 text-purple-500 text-lg font-medium">
243+
repo</p>
244+
</div>
245+
<div class="flex inline-flex">
246+
<i class="fa fa-star pr-1 pt-6 "
247+
style="font-size:16px; color:rgb(109, 71, 199); font-style:normal;"></i> </i>
248+
<p class="pr-5 pt-5 text-purple-500 text-lg font-medium">
249+
star</p>
250+
</div>
251+
</div>
252+
<!-- for small screens -->
253+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
254+
<div>
255+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
256+
</div>
257+
<div>
258+
<i class="fa fa-code-fork pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
259+
</div>
260+
<div>
261+
<i class="fa fa-star pt-5 pr-1" style="font-size:18px; color:rgb(109, 71, 199)"></i>
262+
</div>
263+
</div>
264+
</div>
265+
</div>
266+
</div>
267+
268+
<!-- card 2 -->
269+
270+
<div class="bg-gray-0 h-32 md:h-48 lg:h-48">
271+
<div class="flex flex-inline ">
272+
<div class=" h-32 w-32 lg:h-48 lg:w-48 md:h-48 md:w-48 ">
273+
<img class="rounded-full" src="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" alt="">
274+
</div>
275+
<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">
276+
<button class="bg-yellow-400 rounded px-1 text-white text-sm ml-auto"> community </button>
277+
<h1
278+
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">
279+
Eddie Jaoude</h1>
280+
<p
281+
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">
282+
Fullstack open source DevRel! I love code and the community :). GitHub Star ⭐ program 🤓</p>
283+
<div class=" hidden lg:inline-flex md:inline-flex flex flex-inline">
284+
<div class="flex flex-inline">
285+
<i class="fa fa-github-alt pr-1 pt-6 "
286+
style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i> </i>
287+
<p class="pr-5 pt-5 text-purple-500 text-lg font-medium">
288+
website</p>
289+
</div>
290+
<div class="flex flex-inline">
291+
<i class="fa fa-code-fork pr-1 pt-6 "
292+
style="font-size:18px; color:rgb(109, 71, 199); font-style:normal;"></i> </i>
293+
<p class="pr-5 pt-5 text-purple-500 text-lg font-medium">
294+
repo</p>
295+
</div>
296+
<div class="flex inline-flex">
297+
<i class="fa fa-star pr-1 pt-6 "
298+
style="font-size:16px; color:rgb(109, 71, 199); font-style:normal;"></i> </i>
299+
<p class="pr-5 pt-5 text-purple-500 text-lg font-medium">
300+
star</p>
301+
</div>
302+
</div>
303+
<!-- for small screens -->
304+
<div class="flex-inline lg:hidden sm:flex-inline md:hidden flex flex-inline">
305+
<div>
306+
<i class="fa fa-github-alt pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
307+
</div>
308+
<div>
309+
<i class="fa fa-code-fork pt-5 pr-5" style="font-size:20px; color:rgb(109, 71, 199);"></i>
310+
</div>
311+
<div>
312+
<i class="fa fa-star pt-5 pr-1" style="font-size:18px; color:rgb(109, 71, 199)"></i>
313+
</div>
314+
</div>
315+
</div>
316+
</div>
317+
</div>
318+
319+
</div>
320+
</div>
321+
322+
323+
211324
</body>
212325
</html>

0 commit comments

Comments
 (0)