Skip to content

Commit 0efeeae

Browse files
davidtheweb-devdavidtheweb-dev
committed
Added image gallery layout
1 parent 3fd1ec9 commit 0efeeae

File tree

1 file changed

+193
-0
lines changed

1 file changed

+193
-0
lines changed

‎image-gallery/index.html‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script src="https://cdn.tailwindcss.com"></script>
7+
<title>Image Gallery</title>
8+
</head>
9+
<body>
10+
<!-- Global Container -->
11+
<div class="flex items-center justify-center min-h-screen bg-cyan-50">
12+
<!-- Card Container -->
13+
<div class="bg-white p-6 m-3 space-y-10 shadow-2xl rounded-3xl md:p-40">
14+
<!-- Menu Container -->
15+
<div
16+
class="flex flex-col items-center justify-center space-y-3 md:flex-row md:space-y-0 md:space-x-8 md:mb-24 md:justify-end"
17+
>
18+
<!-- Menu Items -->
19+
<div class="group">
20+
<a href="#">Vector</a>
21+
<div
22+
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
23+
></div>
24+
</div>
25+
<div class="group">
26+
<a href="#">Illustrations</a>
27+
<div
28+
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
29+
></div>
30+
</div>
31+
<div class="group">
32+
<a href="#">Images</a>
33+
<div
34+
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
35+
></div>
36+
</div>
37+
<div class="group">
38+
<a href="#">Icons</a>
39+
<div
40+
class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
41+
></div>
42+
</div>
43+
</div>
44+
45+
<!-- Search Container -->
46+
<div class="flex flex-col justify-between space-y-5 md:flex-row md:space-y-0">
47+
<!-- Input and SVG Container -->
48+
<div class="flex justify-between border-b">
49+
<input
50+
type="text"
51+
class="ml-6 border-none md:w-80 placeholder:font-thin focus:outline-none"
52+
placeholder="Search"
53+
/>
54+
<button>
55+
<svg
56+
xmlns="http://www.w3.org/2000/svg"
57+
class="w-8 text-gray-300 duration-200 hover:scale-110"
58+
viewBox="0 0 24 24"
59+
stroke-width="1.5"
60+
stroke="currentColor"
61+
fill="none"
62+
stroke-linecap="round"
63+
stroke-linejoin="round"
64+
>
65+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
66+
<circle cx="10" cy="10" r="7" />
67+
<line x1="21" y1="21" x2="15" y2="15" />
68+
</svg>
69+
</button>
70+
</div>
71+
72+
<!-- Upload Button -->
73+
<button
74+
class="py-3 px-14 text-lg font-normal text-white bg-black border border-black rounded-md shadow-2xl duration-200 hover:bg-white hover:text-black"
75+
>
76+
Upload
77+
</button>
78+
</div>
79+
80+
<!-- Gallery Container -->
81+
<div class="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
82+
<!-- Image 1 -->
83+
<div class="relative group">
84+
<img src="images/image1.jpg" alt="" class="w-74" />
85+
<div
86+
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
87+
>
88+
<div class="flex justify-between w-full">
89+
<div class="font-normal">
90+
<p class="text-sm">Abstract Painting</p>
91+
<p class="text-xs">245 likes - 35 Shares</p>
92+
</div>
93+
<div class="flex items-center">
94+
<img src="images/bookmark.svg" alt="bookmark" />
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
100+
<!-- Image 2 -->
101+
<div class="relative group">
102+
<img src="images/image2.jpg" alt="" class="w-74" />
103+
<div
104+
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
105+
>
106+
<div class="flex justify-between w-full">
107+
<div class="font-normal">
108+
<p class="text-sm">Abstract Painting</p>
109+
<p class="text-xs">245 likes - 35 Shares</p>
110+
</div>
111+
<div class="flex items-center">
112+
<img src="images/bookmark.svg" alt="bookmark" />
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
118+
<!-- Image 3 -->
119+
<div class="relative group">
120+
<img src="images/image3.jpg" alt="" class="w-74" />
121+
<div
122+
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
123+
>
124+
<div class="flex justify-between w-full">
125+
<div class="font-normal">
126+
<p class="text-sm">Abstract Painting</p>
127+
<p class="text-xs">245 likes - 35 Shares</p>
128+
</div>
129+
<div class="flex items-center">
130+
<img src="images/bookmark.svg" alt="bookmark" />
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
136+
<!-- Image 4 -->
137+
<div class="relative group">
138+
<img src="images/image4.jpg" alt="" class="w-74" />
139+
<div
140+
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
141+
>
142+
<div class="flex justify-between w-full">
143+
<div class="font-normal">
144+
<p class="text-sm">Abstract Painting</p>
145+
<p class="text-xs">245 likes - 35 Shares</p>
146+
</div>
147+
<div class="flex items-center">
148+
<img src="images/bookmark.svg" alt="bookmark" />
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
154+
<!-- Image 5 -->
155+
<div class="relative group">
156+
<img src="images/image5.jpg" alt="" class="w-74" />
157+
<div
158+
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
159+
>
160+
<div class="flex justify-between w-full">
161+
<div class="font-normal">
162+
<p class="text-sm">Abstract Painting</p>
163+
<p class="text-xs">245 likes - 35 Shares</p>
164+
</div>
165+
<div class="flex items-center">
166+
<img src="images/bookmark.svg" alt="bookmark" />
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
172+
<!-- Image 6 -->
173+
<div class="relative group">
174+
<img src="images/image6.jpg" alt="" class="w-74" />
175+
<div
176+
class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
177+
>
178+
<div class="flex justify-between w-full">
179+
<div class="font-normal">
180+
<p class="text-sm">Abstract Painting</p>
181+
<p class="text-xs">245 likes - 35 Shares</p>
182+
</div>
183+
<div class="flex items-center">
184+
<img src="images/bookmark.svg" alt="bookmark" />
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
</div>
192+
</body>
193+
</html>

0 commit comments

Comments
 (0)