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

Commit 3730b76

Browse files
eddiejaoudeeddiejaoude
committed
feat(projects): flex to grid
1 parent 4d542c3 commit 3730b76

File tree

1 file changed

+91
-39
lines changed

1 file changed

+91
-39
lines changed

‎index.html‎

Lines changed: 91 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -48,89 +48,141 @@ <h2 class="text-4xl mb-8 font-semibold">
4848
<h2 class="text-center text-3xl font-semibold text-indigo-100">
4949
Our Projects
5050
</h2>
51-
52-
<div class="lg:flex">
53-
<div class="mt-6 mx-5 bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
54-
<img src="https://user-images.githubusercontent.com/624760/91444835-3797dc80-e86d-11ea-8dfa-d7993a4d382d.png" alt="Sample Project" class="w-full h-64 object-cover">
51+
52+
<div
53+
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4"
54+
>
55+
<div
56+
class="bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
57+
>
58+
<img
59+
src="https://user-images.githubusercontent.com/624760/91444835-3797dc80-e86d-11ea-8dfa-d7993a4d382d.png"
60+
alt="Sample Project"
61+
class="w-full h-64 object-cover"
62+
/>
5563
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
5664
EddieBot
5765
</h3>
5866
<p class="mx-3 text-indigo-100 text-base pb-3">
5967
Discord bot for Eddie Jaoude's Discord server.
6068
</p>
6169
</div>
62-
<div class="mt-6 mx-5 bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
63-
<img src="https://user-images.githubusercontent.com/624760/91444606-e687e880-e86c-11ea-9001-522fc212c7c5.png" alt="Sample Project" class="w-full h-64 object-cover">
70+
71+
<div
72+
class="bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
73+
>
74+
<img
75+
src="https://user-images.githubusercontent.com/624760/91444606-e687e880-e86c-11ea-9001-522fc212c7c5.png"
76+
alt="Sample Project"
77+
class="w-full h-64 object-cover"
78+
/>
6479
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
6580
LiveStream GitOps Demo
6681
</h3>
6782
<p class="mx-3 text-indigo-100 text-base pb-3">
6883
GitOps live stream repo for EddieBot
6984
</p>
7085
</div>
71-
<div class="mt-6 mx-5 bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
72-
<img src="https://user-images.githubusercontent.com/624760/91445888-9f9af280-e86e-11ea-8180-9198953bc33d.png" alt="Sample Project" class="w-full h-64 object-cover">
86+
87+
<div
88+
class="bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
89+
>
90+
<img
91+
src="https://user-images.githubusercontent.com/624760/91445888-9f9af280-e86e-11ea-8180-9198953bc33d.png"
92+
alt="Sample Project"
93+
class="w-full h-64 object-cover"
94+
/>
7395
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
7496
EddieBot Map
7597
</h3>
7698
<p class="mx-3 text-indigo-100 text-base pb-3">
7799
Live steaming background with a map and maybe more ...
78100
</p>
79101
</div>
80-
</div>
81102

82-
<div class="lg:flex">
83-
<div class="mt-6 mx-5 bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
84-
<img src="https://user-images.githubusercontent.com/624760/91445058-83e31c80-e86d-11ea-8243-3ca11b384d40.png" alt="Sample Project" class="w-full h-64 object-cover">
103+
<div
104+
class="bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
105+
>
106+
<img
107+
src="https://user-images.githubusercontent.com/624760/91445058-83e31c80-e86d-11ea-8243-3ca11b384d40.png"
108+
alt="Sample Project"
109+
class="w-full h-64 object-cover"
110+
/>
85111
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
86112
Eddie Jaoude Community website
87113
</h3>
88114
<p class="mx-3 text-indigo-100 text-base pb-3">
89115
Information about our community
90116
</p>
91117
</div>
92-
<div class="mt-6 mx-5 bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
93-
<img src="https://user-images.githubusercontent.com/624760/91445509-1d123300-e86e-11ea-9648-c5c715355f26.png" alt="Sample Project" class="w-full h-64 object-cover">
118+
119+
<div
120+
class="bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
121+
>
122+
<img
123+
src="https://user-images.githubusercontent.com/624760/91445509-1d123300-e86e-11ea-9648-c5c715355f26.png"
124+
alt="Sample Project"
125+
class="w-full h-64 object-cover"
126+
/>
94127
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
95128
Support
96129
</h3>
97130
<p class="mx-3 text-indigo-100 text-base pb-3">
98131
Community Help & Support and AEA (Ask Everyone Anything)
99132
</p>
100133
</div>
101-
<div class="mt-6 mx-5 bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
102-
<img src="https://user-images.githubusercontent.com/624760/91444606-e687e880-e86c-11ea-9001-522fc212c7c5.png" alt="Sample Project" class="w-full h-64 object-cover">
134+
135+
<div
136+
class="bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
137+
>
138+
<img
139+
src="https://user-images.githubusercontent.com/624760/91444606-e687e880-e86c-11ea-9001-522fc212c7c5.png"
140+
alt="Sample Project"
141+
class="w-full h-64 object-cover"
142+
/>
103143
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
104144
EddieBot UI
105145
</h3>
106146
<p class="mx-3 text-indigo-100 text-base pb-3">
107-
EddieBotUI is the front end application that shows Eddie Jaoude Discord Community's public stats.
147+
EddieBotUI is the front end application that shows Eddie Jaoude
148+
Discord Community's public stats.
149+
</p>
150+
</div>
151+
152+
<div
153+
class="bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
154+
>
155+
<img
156+
src="https://user-images.githubusercontent.com/624760/91445261-cefd2f80-e86d-11ea-8421-4553b29d2e4a.png"
157+
alt="Sample Project"
158+
class="w-full h-64 object-cover"
159+
/>
160+
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
161+
Awesome GitHub Profiles
162+
</h3>
163+
<p class="mx-3 text-indigo-100 text-base pb-3">
164+
List of GitHub profiles that have awesome customization, that you
165+
can use for inspiration
166+
</p>
167+
</div>
168+
169+
<div
170+
class="bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105"
171+
>
172+
<img
173+
src="https://user-images.githubusercontent.com/624760/91445718-61053800-e86e-11ea-81c7-751328c63e85.png"
174+
alt="Sample Project"
175+
class="w-full h-64 object-cover"
176+
/>
177+
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
178+
Hacktoberfest practice
179+
</h3>
180+
<p class="mx-3 text-indigo-100 text-base pb-3">
181+
Repo for you to raise a Pull Request for practice
108182
</p>
109183
</div>
110184
</div>
111185
</div>
112-
113-
<div class="lg:flex">
114-
<div class="mt-6 mx-5 bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
115-
<img src="https://user-images.githubusercontent.com/624760/91445261-cefd2f80-e86d-11ea-8421-4553b29d2e4a.png" alt="Sample Project" class="w-full h-64 object-cover">
116-
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
117-
Awesome GitHub Profiles
118-
</h3>
119-
<p class="mx-3 text-indigo-100 text-base pb-3">
120-
List of GitHub profiles that have awesome customization, that you can use for inspiration
121-
</p>
122-
</div>
123-
<div class="mt-6 mx-5 bg-blue-700 rounded max-w-sm overflow-hidden shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
124-
<img src="https://user-images.githubusercontent.com/624760/91445718-61053800-e86e-11ea-81c7-751328c63e85.png" alt="Sample Project" class="w-full h-64 object-cover">
125-
<h3 class="mt-3 ml-3 font-bold text-indigo-100 text-xl mb-2">
126-
Hacktoberfest practice
127-
</h3>
128-
<p class="mx-3 text-indigo-100 text-base pb-3">
129-
Repo for you to raise a Pull Request for practice
130-
</p>
131-
</div>
132-
</div>
133-
134186

135187
<div class="mt-6">
136188
<a

0 commit comments

Comments
 (0)