create-template-html-css 1.2.2 → 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.
- package/CHANGELOG.md +63 -0
- package/README.md +165 -1
- package/bin/cli.js +27 -3
- package/package.json +16 -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/flex-cards/index.html +276 -0
- package/templates/flex-cards/script.js +122 -0
- package/templates/flex-cards/style.css +556 -0
- package/templates/flex-dashboard/index.html +282 -0
- package/templates/flex-dashboard/script.js +149 -0
- package/templates/flex-dashboard/style.css +659 -0
- package/templates/flex-layout/index.html +185 -0
- package/templates/flex-layout/script.js +79 -0
- package/templates/flex-layout/style.css +336 -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,164 @@
|
|
|
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}} - Grid Layout Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<header class="page-header">
|
|
12
|
+
<h1>CSS Grid Layouts</h1>
|
|
13
|
+
<p>Modern responsive grid systems</p>
|
|
14
|
+
</header>
|
|
15
|
+
|
|
16
|
+
<!-- Basic Grid -->
|
|
17
|
+
<section class="section">
|
|
18
|
+
<h2 class="section-title">Basic Grid Layout</h2>
|
|
19
|
+
<div class="basic-grid">
|
|
20
|
+
<div class="grid-item item-1">
|
|
21
|
+
<span class="icon">📱</span>
|
|
22
|
+
<h3>Responsive</h3>
|
|
23
|
+
<p>Adapts to any screen size</p>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="grid-item item-2">
|
|
26
|
+
<span class="icon">⚡</span>
|
|
27
|
+
<h3>Fast</h3>
|
|
28
|
+
<p>Lightning-fast performance</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="grid-item item-3">
|
|
31
|
+
<span class="icon">🎨</span>
|
|
32
|
+
<h3>Beautiful</h3>
|
|
33
|
+
<p>Modern design patterns</p>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="grid-item item-4">
|
|
36
|
+
<span class="icon">🔒</span>
|
|
37
|
+
<h3>Secure</h3>
|
|
38
|
+
<p>Enterprise-grade security</p>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
|
|
43
|
+
<!-- Feature Grid -->
|
|
44
|
+
<section class="section">
|
|
45
|
+
<h2 class="section-title">Feature Grid</h2>
|
|
46
|
+
<div class="feature-grid">
|
|
47
|
+
<div class="feature-item hero-item">
|
|
48
|
+
<h3>Hero Feature</h3>
|
|
49
|
+
<p>This item spans multiple columns and rows, creating a focal point in your layout.</p>
|
|
50
|
+
<button class="btn">Explore</button>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="feature-item">
|
|
53
|
+
<span class="icon">🚀</span>
|
|
54
|
+
<h4>Launch</h4>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="feature-item">
|
|
57
|
+
<span class="icon">💡</span>
|
|
58
|
+
<h4>Ideas</h4>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="feature-item">
|
|
61
|
+
<span class="icon">🎯</span>
|
|
62
|
+
<h4>Target</h4>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="feature-item">
|
|
65
|
+
<span class="icon">📊</span>
|
|
66
|
+
<h4>Analytics</h4>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="feature-item">
|
|
69
|
+
<span class="icon">🔧</span>
|
|
70
|
+
<h4>Tools</h4>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
|
|
75
|
+
<!-- Auto-fit Grid -->
|
|
76
|
+
<section class="section">
|
|
77
|
+
<h2 class="section-title">Auto-Fit Grid</h2>
|
|
78
|
+
<div class="auto-grid">
|
|
79
|
+
<div class="auto-item">
|
|
80
|
+
<div class="auto-content">
|
|
81
|
+
<span class="number">01</span>
|
|
82
|
+
<h4>First</h4>
|
|
83
|
+
<p>Automatically adjusts</p>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="auto-item">
|
|
87
|
+
<div class="auto-content">
|
|
88
|
+
<span class="number">02</span>
|
|
89
|
+
<h4>Second</h4>
|
|
90
|
+
<p>Flexible layout</p>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="auto-item">
|
|
94
|
+
<div class="auto-content">
|
|
95
|
+
<span class="number">03</span>
|
|
96
|
+
<h4>Third</h4>
|
|
97
|
+
<p>Perfect spacing</p>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="auto-item">
|
|
101
|
+
<div class="auto-content">
|
|
102
|
+
<span class="number">04</span>
|
|
103
|
+
<h4>Fourth</h4>
|
|
104
|
+
<p>Responsive design</p>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="auto-item">
|
|
108
|
+
<div class="auto-content">
|
|
109
|
+
<span class="number">05</span>
|
|
110
|
+
<h4>Fifth</h4>
|
|
111
|
+
<p>Modern approach</p>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="auto-item">
|
|
115
|
+
<div class="auto-content">
|
|
116
|
+
<span class="number">06</span>
|
|
117
|
+
<h4>Sixth</h4>
|
|
118
|
+
<p>Clean code</p>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</section>
|
|
123
|
+
|
|
124
|
+
<!-- Complex Grid -->
|
|
125
|
+
<section class="section">
|
|
126
|
+
<h2 class="section-title">Complex Grid Layout</h2>
|
|
127
|
+
<div class="complex-grid">
|
|
128
|
+
<div class="complex-item sidebar">
|
|
129
|
+
<h4>Sidebar</h4>
|
|
130
|
+
<ul>
|
|
131
|
+
<li>Dashboard</li>
|
|
132
|
+
<li>Projects</li>
|
|
133
|
+
<li>Tasks</li>
|
|
134
|
+
<li>Settings</li>
|
|
135
|
+
</ul>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="complex-item header">
|
|
138
|
+
<h3>Header Section</h3>
|
|
139
|
+
<p>Welcome back!</p>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="complex-item content">
|
|
142
|
+
<h4>Main Content</h4>
|
|
143
|
+
<p>This area can contain your primary content with flexible dimensions.</p>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="complex-item widget-1">
|
|
146
|
+
<span class="icon">📈</span>
|
|
147
|
+
<strong>+25%</strong>
|
|
148
|
+
<small>Growth</small>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="complex-item widget-2">
|
|
151
|
+
<span class="icon">👥</span>
|
|
152
|
+
<strong>1.2K</strong>
|
|
153
|
+
<small>Users</small>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="complex-item footer">
|
|
156
|
+
<p>© 2026 Grid Layout</p>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</section>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<script src="script.js"></script>
|
|
163
|
+
</body>
|
|
164
|
+
</html>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
// Grid Layout Component JavaScript
|
|
2
|
+
console.log('Grid Layout Component initialized');
|
|
3
|
+
|
|
4
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
5
|
+
// Add intersection observer for animation on scroll
|
|
6
|
+
const observerOptions = {
|
|
7
|
+
root: null,
|
|
8
|
+
rootMargin: '0px',
|
|
9
|
+
threshold: 0.1
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const observer = new IntersectionObserver((entries) => {
|
|
13
|
+
entries.forEach(entry => {
|
|
14
|
+
if (entry.isIntersecting) {
|
|
15
|
+
entry.target.style.animation = 'slideUp 0.8s ease forwards';
|
|
16
|
+
observer.unobserve(entry.target);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
}, observerOptions);
|
|
20
|
+
|
|
21
|
+
// Observe all sections
|
|
22
|
+
document.querySelectorAll('.section').forEach(section => {
|
|
23
|
+
observer.observe(section);
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
// Add click handlers to grid items
|
|
27
|
+
const gridItems = document.querySelectorAll('.grid-item, .feature-item, .auto-item');
|
|
28
|
+
gridItems.forEach(item => {
|
|
29
|
+
item.addEventListener('click', function() {
|
|
30
|
+
this.style.animation = 'pulse 0.5s ease';
|
|
31
|
+
setTimeout(() => {
|
|
32
|
+
this.style.animation = '';
|
|
33
|
+
}, 500);
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
// Sidebar navigation
|
|
38
|
+
const sidebarItems = document.querySelectorAll('.sidebar li');
|
|
39
|
+
sidebarItems.forEach(item => {
|
|
40
|
+
item.addEventListener('click', function() {
|
|
41
|
+
// Remove active class from all items
|
|
42
|
+
sidebarItems.forEach(i => i.style.fontWeight = 'normal');
|
|
43
|
+
// Add active class to clicked item
|
|
44
|
+
this.style.fontWeight = 'bold';
|
|
45
|
+
console.log('Navigation clicked:', this.textContent);
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
// Add hover effect sound (optional)
|
|
50
|
+
const allItems = document.querySelectorAll('.grid-item, .feature-item, .auto-item, .complex-item');
|
|
51
|
+
allItems.forEach(item => {
|
|
52
|
+
item.addEventListener('mouseenter', function() {
|
|
53
|
+
this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// Log grid layout info
|
|
58
|
+
console.log('Grid items loaded:', document.querySelectorAll('.grid-item').length);
|
|
59
|
+
console.log('Feature items loaded:', document.querySelectorAll('.feature-item').length);
|
|
60
|
+
console.log('Auto items loaded:', document.querySelectorAll('.auto-item').length);
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
// Add pulse animation style
|
|
64
|
+
const style = document.createElement('style');
|
|
65
|
+
style.textContent = `
|
|
66
|
+
@keyframes pulse {
|
|
67
|
+
0%, 100% {
|
|
68
|
+
transform: scale(1);
|
|
69
|
+
}
|
|
70
|
+
50% {
|
|
71
|
+
transform: scale(0.95);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
`;
|
|
75
|
+
document.head.appendChild(style);
|
|
@@ -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
|
+
}
|