create-template-html-css 1.3.0 → 1.4.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.
@@ -0,0 +1,556 @@
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 100%);
10
+ min-height: 100vh;
11
+ padding: 40px 20px;
12
+ }
13
+
14
+ .container {
15
+ max-width: 1400px;
16
+ margin: 0 auto;
17
+ }
18
+
19
+ /* Hero */
20
+ .hero {
21
+ text-align: center;
22
+ padding: 80px 20px;
23
+ margin-bottom: 60px;
24
+ background: white;
25
+ border-radius: 30px;
26
+ box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
27
+ }
28
+
29
+ .hero h1 {
30
+ font-size: 4rem;
31
+ background: linear-gradient(135deg, #667eea, #764ba2);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ background-clip: text;
35
+ margin-bottom: 15px;
36
+ font-weight: 700;
37
+ }
38
+
39
+ .hero p {
40
+ font-size: 1.5rem;
41
+ color: #666;
42
+ }
43
+
44
+ /* Section */
45
+ .section {
46
+ margin-bottom: 60px;
47
+ }
48
+
49
+ .section-title {
50
+ font-size: 2.5rem;
51
+ color: white;
52
+ text-align: center;
53
+ margin-bottom: 40px;
54
+ font-weight: 700;
55
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
56
+ }
57
+
58
+ .dark-section .section-title {
59
+ color: white;
60
+ }
61
+
62
+ /* Equal Height Cards */
63
+ .card-container {
64
+ display: flex;
65
+ gap: 30px;
66
+ flex-wrap: wrap;
67
+ }
68
+
69
+ .card {
70
+ flex: 1 1 calc(25% - 25px);
71
+ min-width: 250px;
72
+ background: white;
73
+ border-radius: 20px;
74
+ padding: 35px;
75
+ display: flex;
76
+ flex-direction: column;
77
+ transition: all 0.3s ease;
78
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
79
+ }
80
+
81
+ .card:hover {
82
+ transform: translateY(-10px);
83
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
84
+ }
85
+
86
+ .card-icon {
87
+ font-size: 4rem;
88
+ margin-bottom: 20px;
89
+ }
90
+
91
+ .card h3 {
92
+ font-size: 1.8rem;
93
+ color: #333;
94
+ margin-bottom: 15px;
95
+ }
96
+
97
+ .card p {
98
+ color: #666;
99
+ line-height: 1.6;
100
+ margin-bottom: 25px;
101
+ flex-grow: 1;
102
+ }
103
+
104
+ .card-btn {
105
+ padding: 12px 25px;
106
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
107
+ color: white;
108
+ border: none;
109
+ border-radius: 25px;
110
+ font-weight: 600;
111
+ cursor: pointer;
112
+ transition: all 0.3s ease;
113
+ margin-top: auto;
114
+ }
115
+
116
+ .card-btn:hover {
117
+ transform: scale(1.05);
118
+ box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
119
+ }
120
+
121
+ /* Pricing Cards */
122
+ .pricing-container {
123
+ display: flex;
124
+ gap: 30px;
125
+ justify-content: center;
126
+ flex-wrap: wrap;
127
+ }
128
+
129
+ .pricing-card {
130
+ flex: 1 1 300px;
131
+ max-width: 380px;
132
+ background: white;
133
+ border-radius: 25px;
134
+ padding: 40px 30px;
135
+ display: flex;
136
+ flex-direction: column;
137
+ align-items: center;
138
+ position: relative;
139
+ transition: all 0.3s ease;
140
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
141
+ }
142
+
143
+ .pricing-card:hover {
144
+ transform: translateY(-10px);
145
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
146
+ }
147
+
148
+ .pricing-card.featured {
149
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
150
+ color: white;
151
+ transform: scale(1.05);
152
+ }
153
+
154
+ .pricing-card.featured:hover {
155
+ transform: scale(1.1) translateY(-10px);
156
+ }
157
+
158
+ .pricing-badge {
159
+ position: absolute;
160
+ top: 20px;
161
+ right: 20px;
162
+ background: #667eea;
163
+ color: white;
164
+ padding: 8px 20px;
165
+ border-radius: 20px;
166
+ font-size: 0.9rem;
167
+ font-weight: 600;
168
+ }
169
+
170
+ .pricing-badge.popular {
171
+ background: gold;
172
+ color: #333;
173
+ }
174
+
175
+ .pricing-icon {
176
+ font-size: 4rem;
177
+ margin-bottom: 20px;
178
+ }
179
+
180
+ .pricing-amount {
181
+ margin-bottom: 30px;
182
+ text-align: center;
183
+ }
184
+
185
+ .currency {
186
+ font-size: 2rem;
187
+ vertical-align: top;
188
+ }
189
+
190
+ .price {
191
+ font-size: 4rem;
192
+ font-weight: 700;
193
+ }
194
+
195
+ .period {
196
+ font-size: 1.2rem;
197
+ color: #666;
198
+ }
199
+
200
+ .pricing-card.featured .period {
201
+ color: rgba(255, 255, 255, 0.8);
202
+ }
203
+
204
+ .pricing-features {
205
+ list-style: none;
206
+ margin-bottom: 30px;
207
+ width: 100%;
208
+ flex-grow: 1;
209
+ }
210
+
211
+ .pricing-features li {
212
+ padding: 12px 0;
213
+ border-bottom: 1px solid #f0f0f0;
214
+ font-size: 1.1rem;
215
+ }
216
+
217
+ .pricing-card.featured .pricing-features li {
218
+ border-bottom-color: rgba(255, 255, 255, 0.2);
219
+ }
220
+
221
+ .pricing-btn {
222
+ width: 100%;
223
+ padding: 15px;
224
+ background: #667eea;
225
+ color: white;
226
+ border: none;
227
+ border-radius: 30px;
228
+ font-size: 1.1rem;
229
+ font-weight: 600;
230
+ cursor: pointer;
231
+ transition: all 0.3s ease;
232
+ }
233
+
234
+ .pricing-btn:hover {
235
+ transform: scale(1.05);
236
+ }
237
+
238
+ .featured-btn {
239
+ background: white;
240
+ color: #667eea;
241
+ }
242
+
243
+ /* Product Cards */
244
+ .dark-section {
245
+ background: rgba(0, 0, 0, 0.2);
246
+ padding: 60px 20px;
247
+ border-radius: 30px;
248
+ }
249
+
250
+ .product-container {
251
+ display: flex;
252
+ gap: 30px;
253
+ flex-wrap: wrap;
254
+ justify-content: center;
255
+ }
256
+
257
+ .product-card {
258
+ flex: 1 1 calc(33.333% - 25px);
259
+ min-width: 300px;
260
+ max-width: 400px;
261
+ background: white;
262
+ border-radius: 20px;
263
+ overflow: hidden;
264
+ display: flex;
265
+ flex-direction: column;
266
+ transition: all 0.3s ease;
267
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
268
+ }
269
+
270
+ .product-card:hover {
271
+ transform: translateY(-10px);
272
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
273
+ }
274
+
275
+ .product-image {
276
+ height: 250px;
277
+ position: relative;
278
+ display: flex;
279
+ align-items: center;
280
+ justify-content: center;
281
+ font-size: 5rem;
282
+ }
283
+
284
+ .product-badge {
285
+ position: absolute;
286
+ top: 15px;
287
+ right: 15px;
288
+ background: #667eea;
289
+ color: white;
290
+ padding: 8px 20px;
291
+ border-radius: 20px;
292
+ font-size: 0.9rem;
293
+ font-weight: 600;
294
+ }
295
+
296
+ .product-badge.sale {
297
+ background: #ff4757;
298
+ }
299
+
300
+ .product-info {
301
+ padding: 25px;
302
+ display: flex;
303
+ flex-direction: column;
304
+ flex-grow: 1;
305
+ }
306
+
307
+ .product-info h3 {
308
+ font-size: 1.8rem;
309
+ color: #333;
310
+ margin-bottom: 10px;
311
+ }
312
+
313
+ .product-rating {
314
+ margin-bottom: 15px;
315
+ color: gold;
316
+ }
317
+
318
+ .product-rating span {
319
+ color: #999;
320
+ font-size: 0.9rem;
321
+ }
322
+
323
+ .product-info p {
324
+ color: #666;
325
+ line-height: 1.6;
326
+ margin-bottom: 20px;
327
+ flex-grow: 1;
328
+ }
329
+
330
+ .product-footer {
331
+ display: flex;
332
+ justify-content: space-between;
333
+ align-items: center;
334
+ margin-top: auto;
335
+ }
336
+
337
+ .product-price {
338
+ font-size: 2rem;
339
+ font-weight: 700;
340
+ color: #667eea;
341
+ }
342
+
343
+ .product-price del {
344
+ font-size: 1.5rem;
345
+ color: #999;
346
+ margin-right: 10px;
347
+ }
348
+
349
+ .product-btn {
350
+ padding: 12px 25px;
351
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
352
+ color: white;
353
+ border: none;
354
+ border-radius: 25px;
355
+ font-weight: 600;
356
+ cursor: pointer;
357
+ transition: all 0.3s ease;
358
+ }
359
+
360
+ .product-btn:hover {
361
+ transform: scale(1.05);
362
+ }
363
+
364
+ /* Team Cards */
365
+ .team-container {
366
+ display: flex;
367
+ gap: 30px;
368
+ flex-wrap: wrap;
369
+ justify-content: center;
370
+ }
371
+
372
+ .team-card {
373
+ flex: 1 1 calc(25% - 25px);
374
+ min-width: 250px;
375
+ max-width: 300px;
376
+ background: white;
377
+ border-radius: 20px;
378
+ padding: 35px;
379
+ text-align: center;
380
+ display: flex;
381
+ flex-direction: column;
382
+ align-items: center;
383
+ transition: all 0.3s ease;
384
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
385
+ }
386
+
387
+ .team-card:hover {
388
+ transform: translateY(-10px);
389
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
390
+ }
391
+
392
+ .team-avatar {
393
+ width: 120px;
394
+ height: 120px;
395
+ border-radius: 50%;
396
+ display: flex;
397
+ align-items: center;
398
+ justify-content: center;
399
+ font-size: 2.5rem;
400
+ color: white;
401
+ font-weight: 700;
402
+ margin-bottom: 20px;
403
+ }
404
+
405
+ .team-card h3 {
406
+ font-size: 1.8rem;
407
+ color: #333;
408
+ margin-bottom: 10px;
409
+ }
410
+
411
+ .team-role {
412
+ color: #667eea;
413
+ font-weight: 600;
414
+ margin-bottom: 15px;
415
+ }
416
+
417
+ .team-bio {
418
+ color: #666;
419
+ line-height: 1.6;
420
+ margin-bottom: 20px;
421
+ flex-grow: 1;
422
+ }
423
+
424
+ .team-social {
425
+ display: flex;
426
+ gap: 15px;
427
+ }
428
+
429
+ .social-link {
430
+ width: 40px;
431
+ height: 40px;
432
+ border-radius: 50%;
433
+ background: #f0f0f0;
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ text-decoration: none;
438
+ font-size: 1.5rem;
439
+ transition: all 0.3s ease;
440
+ }
441
+
442
+ .social-link:hover {
443
+ background: #667eea;
444
+ transform: scale(1.1);
445
+ }
446
+
447
+ /* Testimonial Cards */
448
+ .testimonial-container {
449
+ display: flex;
450
+ gap: 30px;
451
+ flex-wrap: wrap;
452
+ }
453
+
454
+ .testimonial-card {
455
+ flex: 1 1 calc(33.333% - 25px);
456
+ min-width: 300px;
457
+ background: white;
458
+ border-radius: 20px;
459
+ padding: 35px;
460
+ display: flex;
461
+ flex-direction: column;
462
+ position: relative;
463
+ transition: all 0.3s ease;
464
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
465
+ }
466
+
467
+ .testimonial-card:hover {
468
+ transform: translateY(-10px);
469
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
470
+ }
471
+
472
+ .quote-icon {
473
+ font-size: 4rem;
474
+ color: #667eea;
475
+ opacity: 0.3;
476
+ line-height: 1;
477
+ margin-bottom: 15px;
478
+ }
479
+
480
+ .testimonial-text {
481
+ color: #666;
482
+ line-height: 1.8;
483
+ font-size: 1.1rem;
484
+ margin-bottom: 25px;
485
+ flex-grow: 1;
486
+ }
487
+
488
+ .testimonial-author {
489
+ display: flex;
490
+ align-items: center;
491
+ gap: 15px;
492
+ margin-top: auto;
493
+ }
494
+
495
+ .author-avatar {
496
+ width: 60px;
497
+ height: 60px;
498
+ border-radius: 50%;
499
+ display: flex;
500
+ align-items: center;
501
+ justify-content: center;
502
+ color: white;
503
+ font-weight: 700;
504
+ font-size: 1.3rem;
505
+ }
506
+
507
+ .author-info h4 {
508
+ color: #333;
509
+ margin-bottom: 5px;
510
+ }
511
+
512
+ .author-info p {
513
+ color: #999;
514
+ font-size: 0.9rem;
515
+ }
516
+
517
+ /* Gradients */
518
+ .gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
519
+ .gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
520
+ .gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
521
+ .gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
522
+ .gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
523
+ .gradient-6 { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
524
+ .gradient-7 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
525
+ .gradient-8 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
526
+ .gradient-9 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
527
+ .gradient-10 { background: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%); }
528
+
529
+ /* Responsive */
530
+ @media (max-width: 1200px) {
531
+ .card {
532
+ flex: 1 1 calc(50% - 20px);
533
+ }
534
+
535
+ .team-card {
536
+ flex: 1 1 calc(50% - 20px);
537
+ }
538
+ }
539
+
540
+ @media (max-width: 768px) {
541
+ .hero h1 {
542
+ font-size: 2.5rem;
543
+ }
544
+
545
+ .card,
546
+ .pricing-card,
547
+ .product-card,
548
+ .team-card,
549
+ .testimonial-card {
550
+ flex: 1 1 100%;
551
+ }
552
+
553
+ .pricing-card.featured {
554
+ transform: scale(1);
555
+ }
556
+ }