create-template-html-css 1.2.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +39 -0
- package/README.md +111 -1
- package/bin/cli.js +20 -3
- package/package.json +13 -8
- package/src/generator.js +1 -1
- package/src/inserter.js +1 -1
- package/templates/animated-card/index.html +85 -0
- package/templates/animated-card/script.js +37 -0
- package/templates/animated-card/style.css +254 -0
- package/templates/dashboard-grid/index.html +247 -0
- package/templates/dashboard-grid/script.js +157 -0
- package/templates/dashboard-grid/style.css +558 -0
- package/templates/fade-gallery/index.html +134 -0
- package/templates/fade-gallery/script.js +123 -0
- package/templates/fade-gallery/style.css +309 -0
- package/templates/grid-layout/index.html +164 -0
- package/templates/grid-layout/script.js +75 -0
- package/templates/grid-layout/style.css +452 -0
- package/templates/masonry-grid/index.html +196 -0
- package/templates/masonry-grid/script.js +122 -0
- package/templates/masonry-grid/style.css +259 -0
- package/templates/spinner/index.html +56 -0
- package/templates/spinner/script.js +22 -0
- package/templates/spinner/style.css +207 -0
- package/templates/typing-effect/index.html +58 -0
- package/templates/typing-effect/script.js +247 -0
- package/templates/typing-effect/style.css +253 -0
|
@@ -0,0 +1,452 @@
|
|
|
1
|
+
* {
|
|
2
|
+
margin: 0;
|
|
3
|
+
padding: 0;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
9
|
+
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%);
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
padding: 40px 20px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.container {
|
|
15
|
+
max-width: 1400px;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Header */
|
|
20
|
+
.page-header {
|
|
21
|
+
text-align: center;
|
|
22
|
+
padding: 60px 20px;
|
|
23
|
+
margin-bottom: 60px;
|
|
24
|
+
background: rgba(255, 255, 255, 0.1);
|
|
25
|
+
backdrop-filter: blur(10px);
|
|
26
|
+
border-radius: 30px;
|
|
27
|
+
color: white;
|
|
28
|
+
animation: fadeIn 0.8s ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.page-header h1 {
|
|
32
|
+
font-size: 3.5rem;
|
|
33
|
+
margin-bottom: 15px;
|
|
34
|
+
font-weight: 700;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.page-header p {
|
|
38
|
+
font-size: 1.5rem;
|
|
39
|
+
opacity: 0.9;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Section */
|
|
43
|
+
.section {
|
|
44
|
+
margin-bottom: 80px;
|
|
45
|
+
animation: slideUp 0.8s ease;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.section-title {
|
|
49
|
+
font-size: 2.5rem;
|
|
50
|
+
color: white;
|
|
51
|
+
margin-bottom: 30px;
|
|
52
|
+
text-align: center;
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Basic Grid */
|
|
57
|
+
.basic-grid {
|
|
58
|
+
display: grid;
|
|
59
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
60
|
+
gap: 30px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.grid-item {
|
|
64
|
+
background: white;
|
|
65
|
+
padding: 40px 30px;
|
|
66
|
+
border-radius: 20px;
|
|
67
|
+
text-align: center;
|
|
68
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
position: relative;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.grid-item::before {
|
|
75
|
+
content: '';
|
|
76
|
+
position: absolute;
|
|
77
|
+
top: 0;
|
|
78
|
+
left: -100%;
|
|
79
|
+
width: 100%;
|
|
80
|
+
height: 100%;
|
|
81
|
+
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
|
|
82
|
+
transition: left 0.5s ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.grid-item:hover::before {
|
|
86
|
+
left: 100%;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.grid-item:hover {
|
|
90
|
+
transform: translateY(-10px) scale(1.02);
|
|
91
|
+
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.grid-item .icon {
|
|
95
|
+
font-size: 4rem;
|
|
96
|
+
display: block;
|
|
97
|
+
margin-bottom: 20px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.grid-item h3 {
|
|
101
|
+
font-size: 1.8rem;
|
|
102
|
+
color: #333;
|
|
103
|
+
margin-bottom: 10px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.grid-item p {
|
|
107
|
+
color: #666;
|
|
108
|
+
font-size: 1.1rem;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Item Colors */
|
|
112
|
+
.item-1 { border-top: 5px solid #667eea; }
|
|
113
|
+
.item-2 { border-top: 5px solid #f093fb; }
|
|
114
|
+
.item-3 { border-top: 5px solid #4facfe; }
|
|
115
|
+
.item-4 { border-top: 5px solid #43e97b; }
|
|
116
|
+
|
|
117
|
+
/* Feature Grid */
|
|
118
|
+
.feature-grid {
|
|
119
|
+
display: grid;
|
|
120
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
121
|
+
gap: 20px;
|
|
122
|
+
grid-auto-rows: 200px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.feature-item {
|
|
126
|
+
background: white;
|
|
127
|
+
padding: 30px;
|
|
128
|
+
border-radius: 20px;
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
align-items: center;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
text-align: center;
|
|
134
|
+
transition: all 0.3s ease;
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
position: relative;
|
|
137
|
+
overflow: hidden;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.feature-item::after {
|
|
141
|
+
content: '';
|
|
142
|
+
position: absolute;
|
|
143
|
+
inset: 0;
|
|
144
|
+
background: linear-gradient(135deg, rgba(102, 126, 234, 0) 0%, rgba(118, 75, 162, 0.1) 100%);
|
|
145
|
+
opacity: 0;
|
|
146
|
+
transition: opacity 0.3s ease;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.feature-item:hover::after {
|
|
150
|
+
opacity: 1;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.feature-item:hover {
|
|
154
|
+
transform: scale(1.05);
|
|
155
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
156
|
+
z-index: 10;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.hero-item {
|
|
160
|
+
grid-column: span 2;
|
|
161
|
+
grid-row: span 2;
|
|
162
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
163
|
+
color: white;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.hero-item h3 {
|
|
167
|
+
font-size: 2.5rem;
|
|
168
|
+
margin-bottom: 20px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.hero-item p {
|
|
172
|
+
font-size: 1.2rem;
|
|
173
|
+
margin-bottom: 30px;
|
|
174
|
+
opacity: 0.95;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.feature-item .icon {
|
|
178
|
+
font-size: 3rem;
|
|
179
|
+
margin-bottom: 15px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.feature-item h4 {
|
|
183
|
+
font-size: 1.3rem;
|
|
184
|
+
color: #333;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.hero-item h4 {
|
|
188
|
+
color: white;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.btn {
|
|
192
|
+
padding: 15px 35px;
|
|
193
|
+
background: white;
|
|
194
|
+
color: #667eea;
|
|
195
|
+
border: none;
|
|
196
|
+
border-radius: 30px;
|
|
197
|
+
font-size: 1.1rem;
|
|
198
|
+
font-weight: 600;
|
|
199
|
+
cursor: pointer;
|
|
200
|
+
transition: all 0.3s ease;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.btn:hover {
|
|
204
|
+
transform: translateY(-3px);
|
|
205
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* Auto-fit Grid */
|
|
209
|
+
.auto-grid {
|
|
210
|
+
display: grid;
|
|
211
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
212
|
+
gap: 25px;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.auto-item {
|
|
216
|
+
background: white;
|
|
217
|
+
border-radius: 20px;
|
|
218
|
+
overflow: hidden;
|
|
219
|
+
transition: all 0.4s ease;
|
|
220
|
+
cursor: pointer;
|
|
221
|
+
position: relative;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.auto-item::before {
|
|
225
|
+
content: '';
|
|
226
|
+
position: absolute;
|
|
227
|
+
top: 0;
|
|
228
|
+
left: 0;
|
|
229
|
+
right: 0;
|
|
230
|
+
height: 5px;
|
|
231
|
+
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
|
|
232
|
+
transform: scaleX(0);
|
|
233
|
+
transform-origin: left;
|
|
234
|
+
transition: transform 0.4s ease;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.auto-item:hover::before {
|
|
238
|
+
transform: scaleX(1);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.auto-item:hover {
|
|
242
|
+
transform: translateY(-8px);
|
|
243
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.auto-content {
|
|
247
|
+
padding: 35px 25px;
|
|
248
|
+
text-align: center;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.auto-content .number {
|
|
252
|
+
font-size: 3rem;
|
|
253
|
+
font-weight: 700;
|
|
254
|
+
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
255
|
+
-webkit-background-clip: text;
|
|
256
|
+
-webkit-text-fill-color: transparent;
|
|
257
|
+
background-clip: text;
|
|
258
|
+
display: block;
|
|
259
|
+
margin-bottom: 15px;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.auto-content h4 {
|
|
263
|
+
font-size: 1.5rem;
|
|
264
|
+
color: #333;
|
|
265
|
+
margin-bottom: 10px;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.auto-content p {
|
|
269
|
+
color: #666;
|
|
270
|
+
font-size: 1rem;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* Complex Grid */
|
|
274
|
+
.complex-grid {
|
|
275
|
+
display: grid;
|
|
276
|
+
grid-template-columns: 200px 1fr 1fr;
|
|
277
|
+
grid-template-rows: 100px auto 100px 80px;
|
|
278
|
+
gap: 20px;
|
|
279
|
+
grid-template-areas:
|
|
280
|
+
"sidebar header header"
|
|
281
|
+
"sidebar content content"
|
|
282
|
+
"sidebar widget-1 widget-2"
|
|
283
|
+
"footer footer footer";
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.complex-item {
|
|
287
|
+
background: white;
|
|
288
|
+
padding: 25px;
|
|
289
|
+
border-radius: 20px;
|
|
290
|
+
transition: all 0.3s ease;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.complex-item:hover {
|
|
294
|
+
transform: scale(1.02);
|
|
295
|
+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.sidebar {
|
|
299
|
+
grid-area: sidebar;
|
|
300
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
301
|
+
color: white;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.sidebar h4 {
|
|
305
|
+
margin-bottom: 20px;
|
|
306
|
+
font-size: 1.5rem;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.sidebar ul {
|
|
310
|
+
list-style: none;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.sidebar li {
|
|
314
|
+
padding: 12px 0;
|
|
315
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
316
|
+
cursor: pointer;
|
|
317
|
+
transition: padding-left 0.3s ease;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.sidebar li:hover {
|
|
321
|
+
padding-left: 10px;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.header {
|
|
325
|
+
grid-area: header;
|
|
326
|
+
display: flex;
|
|
327
|
+
justify-content: space-between;
|
|
328
|
+
align-items: center;
|
|
329
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
330
|
+
color: white;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.content {
|
|
334
|
+
grid-area: content;
|
|
335
|
+
min-height: 300px;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.content h4 {
|
|
339
|
+
color: #333;
|
|
340
|
+
font-size: 1.8rem;
|
|
341
|
+
margin-bottom: 15px;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.content p {
|
|
345
|
+
color: #666;
|
|
346
|
+
font-size: 1.1rem;
|
|
347
|
+
line-height: 1.6;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.widget-1 {
|
|
351
|
+
grid-area: widget-1;
|
|
352
|
+
text-align: center;
|
|
353
|
+
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
354
|
+
color: white;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.widget-2 {
|
|
358
|
+
grid-area: widget-2;
|
|
359
|
+
text-align: center;
|
|
360
|
+
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
|
361
|
+
color: white;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.widget-1 .icon,
|
|
365
|
+
.widget-2 .icon {
|
|
366
|
+
font-size: 2.5rem;
|
|
367
|
+
display: block;
|
|
368
|
+
margin-bottom: 10px;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.widget-1 strong,
|
|
372
|
+
.widget-2 strong {
|
|
373
|
+
font-size: 2rem;
|
|
374
|
+
display: block;
|
|
375
|
+
margin-bottom: 5px;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.widget-1 small,
|
|
379
|
+
.widget-2 small {
|
|
380
|
+
font-size: 1rem;
|
|
381
|
+
opacity: 0.9;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.footer {
|
|
385
|
+
grid-area: footer;
|
|
386
|
+
background: #333;
|
|
387
|
+
color: white;
|
|
388
|
+
display: flex;
|
|
389
|
+
align-items: center;
|
|
390
|
+
justify-content: center;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* Animations */
|
|
394
|
+
@keyframes fadeIn {
|
|
395
|
+
from {
|
|
396
|
+
opacity: 0;
|
|
397
|
+
transform: translateY(-20px);
|
|
398
|
+
}
|
|
399
|
+
to {
|
|
400
|
+
opacity: 1;
|
|
401
|
+
transform: translateY(0);
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
@keyframes slideUp {
|
|
406
|
+
from {
|
|
407
|
+
opacity: 0;
|
|
408
|
+
transform: translateY(40px);
|
|
409
|
+
}
|
|
410
|
+
to {
|
|
411
|
+
opacity: 1;
|
|
412
|
+
transform: translateY(0);
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
/* Responsive Design */
|
|
417
|
+
@media (max-width: 1024px) {
|
|
418
|
+
.complex-grid {
|
|
419
|
+
grid-template-columns: 1fr 1fr;
|
|
420
|
+
grid-template-areas:
|
|
421
|
+
"header header"
|
|
422
|
+
"sidebar content"
|
|
423
|
+
"widget-1 widget-2"
|
|
424
|
+
"footer footer";
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
@media (max-width: 768px) {
|
|
429
|
+
.page-header h1 {
|
|
430
|
+
font-size: 2.5rem;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.page-header p {
|
|
434
|
+
font-size: 1.2rem;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.hero-item {
|
|
438
|
+
grid-column: span 1;
|
|
439
|
+
grid-row: span 1;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.complex-grid {
|
|
443
|
+
grid-template-columns: 1fr;
|
|
444
|
+
grid-template-areas:
|
|
445
|
+
"header"
|
|
446
|
+
"sidebar"
|
|
447
|
+
"content"
|
|
448
|
+
"widget-1"
|
|
449
|
+
"widget-2"
|
|
450
|
+
"footer";
|
|
451
|
+
}
|
|
452
|
+
}
|
|
@@ -0,0 +1,196 @@
|
|
|
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
|
+
<title>{{name}} - Masonry Grid Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<header class="header">
|
|
12
|
+
<h1>Masonry Grid Gallery</h1>
|
|
13
|
+
<p>Pinterest-style dynamic layout</p>
|
|
14
|
+
<div class="filter-buttons">
|
|
15
|
+
<button class="filter-btn active" data-filter="all">All</button>
|
|
16
|
+
<button class="filter-btn" data-filter="design">Design</button>
|
|
17
|
+
<button class="filter-btn" data-filter="photo">Photo</button>
|
|
18
|
+
<button class="filter-btn" data-filter="art">Art</button>
|
|
19
|
+
</div>
|
|
20
|
+
</header>
|
|
21
|
+
|
|
22
|
+
<div class="masonry-grid" id="masonryGrid">
|
|
23
|
+
<!-- Design Items -->
|
|
24
|
+
<div class="masonry-item design" data-category="design">
|
|
25
|
+
<div class="item-content gradient-1">
|
|
26
|
+
<span class="category-tag">Design</span>
|
|
27
|
+
<div class="item-info">
|
|
28
|
+
<h3>Modern UI Design</h3>
|
|
29
|
+
<p>Beautiful interface concepts</p>
|
|
30
|
+
<div class="item-meta">
|
|
31
|
+
<span>🎨 Design</span>
|
|
32
|
+
<span>❤️ 234</span>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="masonry-item photo" data-category="photo">
|
|
39
|
+
<div class="item-content gradient-2">
|
|
40
|
+
<span class="category-tag">Photo</span>
|
|
41
|
+
<div class="item-info">
|
|
42
|
+
<h3>Nature Photography</h3>
|
|
43
|
+
<p>Stunning landscapes</p>
|
|
44
|
+
<div class="item-meta">
|
|
45
|
+
<span>📷 Photo</span>
|
|
46
|
+
<span>❤️ 567</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="masonry-item art tall" data-category="art">
|
|
53
|
+
<div class="item-content gradient-3">
|
|
54
|
+
<span class="category-tag">Art</span>
|
|
55
|
+
<div class="item-info">
|
|
56
|
+
<h3>Digital Art Collection</h3>
|
|
57
|
+
<p>Creative illustrations and paintings</p>
|
|
58
|
+
<div class="item-meta">
|
|
59
|
+
<span>🖼️ Art</span>
|
|
60
|
+
<span>❤️ 892</span>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="masonry-item design" data-category="design">
|
|
67
|
+
<div class="item-content gradient-4">
|
|
68
|
+
<span class="category-tag">Design</span>
|
|
69
|
+
<div class="item-info">
|
|
70
|
+
<h3>Logo Design</h3>
|
|
71
|
+
<p>Brand identity concepts</p>
|
|
72
|
+
<div class="item-meta">
|
|
73
|
+
<span>🎨 Design</span>
|
|
74
|
+
<span>❤️ 445</span>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="masonry-item photo tall" data-category="photo">
|
|
81
|
+
<div class="item-content gradient-5">
|
|
82
|
+
<span class="category-tag">Photo</span>
|
|
83
|
+
<div class="item-info">
|
|
84
|
+
<h3>Urban Photography</h3>
|
|
85
|
+
<p>City life captured in stunning detail</p>
|
|
86
|
+
<div class="item-meta">
|
|
87
|
+
<span>📷 Photo</span>
|
|
88
|
+
<span>❤️ 678</span>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div class="masonry-item design" data-category="design">
|
|
95
|
+
<div class="item-content gradient-6">
|
|
96
|
+
<span class="category-tag">Design</span>
|
|
97
|
+
<div class="item-info">
|
|
98
|
+
<h3>Web Design</h3>
|
|
99
|
+
<p>Responsive layouts</p>
|
|
100
|
+
<div class="item-meta">
|
|
101
|
+
<span>🎨 Design</span>
|
|
102
|
+
<span>❤️ 321</span>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="masonry-item art" data-category="art">
|
|
109
|
+
<div class="item-content gradient-7">
|
|
110
|
+
<span class="category-tag">Art</span>
|
|
111
|
+
<div class="item-info">
|
|
112
|
+
<h3>Abstract Art</h3>
|
|
113
|
+
<p>Modern expressions</p>
|
|
114
|
+
<div class="item-meta">
|
|
115
|
+
<span>🖼️ Art</span>
|
|
116
|
+
<span>❤️ 756</span>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="masonry-item photo" data-category="photo">
|
|
123
|
+
<div class="item-content gradient-8">
|
|
124
|
+
<span class="category-tag">Photo</span>
|
|
125
|
+
<div class="item-info">
|
|
126
|
+
<h3>Portrait Photography</h3>
|
|
127
|
+
<p>Capturing emotions</p>
|
|
128
|
+
<div class="item-meta">
|
|
129
|
+
<span>📷 Photo</span>
|
|
130
|
+
<span>❤️ 923</span>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<div class="masonry-item design tall" data-category="design">
|
|
137
|
+
<div class="item-content gradient-9">
|
|
138
|
+
<span class="category-tag">Design</span>
|
|
139
|
+
<div class="item-info">
|
|
140
|
+
<h3>App Design</h3>
|
|
141
|
+
<p>Mobile application interfaces with modern aesthetics</p>
|
|
142
|
+
<div class="item-meta">
|
|
143
|
+
<span>🎨 Design</span>
|
|
144
|
+
<span>❤️ 534</span>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<div class="masonry-item art" data-category="art">
|
|
151
|
+
<div class="item-content gradient-10">
|
|
152
|
+
<span class="category-tag">Art</span>
|
|
153
|
+
<div class="item-info">
|
|
154
|
+
<h3>3D Art</h3>
|
|
155
|
+
<p>Stunning renders</p>
|
|
156
|
+
<div class="item-meta">
|
|
157
|
+
<span>🖼️ Art</span>
|
|
158
|
+
<span>❤️ 612</span>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="masonry-item photo" data-category="photo">
|
|
165
|
+
<div class="item-content gradient-11">
|
|
166
|
+
<span class="category-tag">Photo</span>
|
|
167
|
+
<div class="item-info">
|
|
168
|
+
<h3>Travel Photography</h3>
|
|
169
|
+
<p>World adventures</p>
|
|
170
|
+
<div class="item-meta">
|
|
171
|
+
<span>📷 Photo</span>
|
|
172
|
+
<span>❤️ 834</span>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<div class="masonry-item design" data-category="design">
|
|
179
|
+
<div class="item-content gradient-12">
|
|
180
|
+
<span class="category-tag">Design</span>
|
|
181
|
+
<div class="item-info">
|
|
182
|
+
<h3>Typography</h3>
|
|
183
|
+
<p>Font design showcase</p>
|
|
184
|
+
<div class="item-meta">
|
|
185
|
+
<span>🎨 Design</span>
|
|
186
|
+
<span>❤️ 445</span>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<script src="script.js"></script>
|
|
195
|
+
</body>
|
|
196
|
+
</html>
|