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,185 @@
|
|
|
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}} - Flexbox 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>Flexbox Layouts</h1>
|
|
13
|
+
<p>Flexible box model examples</p>
|
|
14
|
+
</header>
|
|
15
|
+
|
|
16
|
+
<!-- Basic Row Layout -->
|
|
17
|
+
<section class="section">
|
|
18
|
+
<h2 class="section-title">Basic Row Layout</h2>
|
|
19
|
+
<div class="flex-row">
|
|
20
|
+
<div class="flex-item">Item 1</div>
|
|
21
|
+
<div class="flex-item">Item 2</div>
|
|
22
|
+
<div class="flex-item">Item 3</div>
|
|
23
|
+
<div class="flex-item">Item 4</div>
|
|
24
|
+
</div>
|
|
25
|
+
</section>
|
|
26
|
+
|
|
27
|
+
<!-- Space Between -->
|
|
28
|
+
<section class="section">
|
|
29
|
+
<h2 class="section-title">Space Between</h2>
|
|
30
|
+
<div class="flex-space-between">
|
|
31
|
+
<div class="flex-item">Left</div>
|
|
32
|
+
<div class="flex-item">Center</div>
|
|
33
|
+
<div class="flex-item">Right</div>
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
36
|
+
|
|
37
|
+
<!-- Space Around -->
|
|
38
|
+
<section class="section">
|
|
39
|
+
<h2 class="section-title">Space Around</h2>
|
|
40
|
+
<div class="flex-space-around">
|
|
41
|
+
<div class="flex-item">Item 1</div>
|
|
42
|
+
<div class="flex-item">Item 2</div>
|
|
43
|
+
<div class="flex-item">Item 3</div>
|
|
44
|
+
</div>
|
|
45
|
+
</section>
|
|
46
|
+
|
|
47
|
+
<!-- Space Evenly -->
|
|
48
|
+
<section class="section">
|
|
49
|
+
<h2 class="section-title">Space Evenly</h2>
|
|
50
|
+
<div class="flex-space-evenly">
|
|
51
|
+
<div class="flex-item">🎨</div>
|
|
52
|
+
<div class="flex-item">⚡</div>
|
|
53
|
+
<div class="flex-item">🚀</div>
|
|
54
|
+
<div class="flex-item">💎</div>
|
|
55
|
+
</div>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<!-- Column Layout -->
|
|
59
|
+
<section class="section">
|
|
60
|
+
<h2 class="section-title">Column Layout</h2>
|
|
61
|
+
<div class="flex-column">
|
|
62
|
+
<div class="flex-item">First</div>
|
|
63
|
+
<div class="flex-item">Second</div>
|
|
64
|
+
<div class="flex-item">Third</div>
|
|
65
|
+
<div class="flex-item">Fourth</div>
|
|
66
|
+
</div>
|
|
67
|
+
</section>
|
|
68
|
+
|
|
69
|
+
<!-- Center Everything -->
|
|
70
|
+
<section class="section">
|
|
71
|
+
<h2 class="section-title">Perfect Center</h2>
|
|
72
|
+
<div class="flex-center">
|
|
73
|
+
<div class="flex-item centered">
|
|
74
|
+
<h3>🎯</h3>
|
|
75
|
+
<p>Perfectly Centered</p>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</section>
|
|
79
|
+
|
|
80
|
+
<!-- Wrap Layout -->
|
|
81
|
+
<section class="section">
|
|
82
|
+
<h2 class="section-title">Flex Wrap (Responsive)</h2>
|
|
83
|
+
<div class="flex-wrap">
|
|
84
|
+
<div class="flex-card">
|
|
85
|
+
<span class="icon">📱</span>
|
|
86
|
+
<h4>Mobile</h4>
|
|
87
|
+
<p>Responsive design</p>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="flex-card">
|
|
90
|
+
<span class="icon">💻</span>
|
|
91
|
+
<h4>Desktop</h4>
|
|
92
|
+
<p>Full experience</p>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="flex-card">
|
|
95
|
+
<span class="icon">⌚</span>
|
|
96
|
+
<h4>Watch</h4>
|
|
97
|
+
<p>On the go</p>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="flex-card">
|
|
100
|
+
<span class="icon">📺</span>
|
|
101
|
+
<h4>TV</h4>
|
|
102
|
+
<p>Big screen</p>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="flex-card">
|
|
105
|
+
<span class="icon">🎮</span>
|
|
106
|
+
<h4>Gaming</h4>
|
|
107
|
+
<p>Interactive</p>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="flex-card">
|
|
110
|
+
<span class="icon">🎧</span>
|
|
111
|
+
<h4>Audio</h4>
|
|
112
|
+
<p>Immersive</p>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</section>
|
|
116
|
+
|
|
117
|
+
<!-- Mixed Sizes (flex-grow) -->
|
|
118
|
+
<section class="section">
|
|
119
|
+
<h2 class="section-title">Flex Grow (Different Sizes)</h2>
|
|
120
|
+
<div class="flex-grow-demo">
|
|
121
|
+
<div class="flex-item grow-1">Grow 1x</div>
|
|
122
|
+
<div class="flex-item grow-2">Grow 2x</div>
|
|
123
|
+
<div class="flex-item grow-3">Grow 3x</div>
|
|
124
|
+
</div>
|
|
125
|
+
</section>
|
|
126
|
+
|
|
127
|
+
<!-- Align Items -->
|
|
128
|
+
<section class="section">
|
|
129
|
+
<h2 class="section-title">Align Items Variations</h2>
|
|
130
|
+
|
|
131
|
+
<div class="align-demo">
|
|
132
|
+
<h4>Flex Start</h4>
|
|
133
|
+
<div class="flex-align-start">
|
|
134
|
+
<div class="flex-item small">S</div>
|
|
135
|
+
<div class="flex-item medium">M</div>
|
|
136
|
+
<div class="flex-item large">L</div>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div class="align-demo">
|
|
141
|
+
<h4>Center</h4>
|
|
142
|
+
<div class="flex-align-center">
|
|
143
|
+
<div class="flex-item small">S</div>
|
|
144
|
+
<div class="flex-item medium">M</div>
|
|
145
|
+
<div class="flex-item large">L</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div class="align-demo">
|
|
150
|
+
<h4>Flex End</h4>
|
|
151
|
+
<div class="flex-align-end">
|
|
152
|
+
<div class="flex-item small">S</div>
|
|
153
|
+
<div class="flex-item medium">M</div>
|
|
154
|
+
<div class="flex-item large">L</div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<div class="align-demo">
|
|
159
|
+
<h4>Stretch</h4>
|
|
160
|
+
<div class="flex-align-stretch">
|
|
161
|
+
<div class="flex-item">Stretch 1</div>
|
|
162
|
+
<div class="flex-item">Stretch 2</div>
|
|
163
|
+
<div class="flex-item">Stretch 3</div>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
</section>
|
|
167
|
+
|
|
168
|
+
<!-- Holy Grail Layout -->
|
|
169
|
+
<section class="section">
|
|
170
|
+
<h2 class="section-title">Holy Grail Layout</h2>
|
|
171
|
+
<div class="holy-grail">
|
|
172
|
+
<header class="hg-header">Header</header>
|
|
173
|
+
<div class="hg-body">
|
|
174
|
+
<aside class="hg-sidebar-left">Left Sidebar</aside>
|
|
175
|
+
<main class="hg-content">Main Content</main>
|
|
176
|
+
<aside class="hg-sidebar-right">Right Sidebar</aside>
|
|
177
|
+
</div>
|
|
178
|
+
<footer class="hg-footer">Footer</footer>
|
|
179
|
+
</div>
|
|
180
|
+
</section>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<script src="script.js"></script>
|
|
184
|
+
</body>
|
|
185
|
+
</html>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
// Flexbox Layout Component JavaScript
|
|
2
|
+
console.log('Flexbox Layout Component initialized');
|
|
3
|
+
|
|
4
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
5
|
+
// Add click handlers to flex items
|
|
6
|
+
const flexItems = document.querySelectorAll('.flex-item, .flex-card');
|
|
7
|
+
|
|
8
|
+
flexItems.forEach(item => {
|
|
9
|
+
item.addEventListener('click', function() {
|
|
10
|
+
// Add pulse animation
|
|
11
|
+
this.style.animation = 'pulse 0.5s ease';
|
|
12
|
+
setTimeout(() => {
|
|
13
|
+
this.style.animation = '';
|
|
14
|
+
}, 500);
|
|
15
|
+
|
|
16
|
+
console.log('Flex item clicked:', this.textContent.trim());
|
|
17
|
+
});
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
// Highlight layout on hover
|
|
21
|
+
const layouts = document.querySelectorAll('[class*="flex-"]');
|
|
22
|
+
layouts.forEach(layout => {
|
|
23
|
+
layout.addEventListener('mouseenter', function() {
|
|
24
|
+
this.style.outline = '2px dashed rgba(102, 126, 234, 0.3)';
|
|
25
|
+
this.style.outlineOffset = '10px';
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
layout.addEventListener('mouseleave', function() {
|
|
29
|
+
this.style.outline = 'none';
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// Add animation to sections on scroll
|
|
34
|
+
const observerOptions = {
|
|
35
|
+
root: null,
|
|
36
|
+
rootMargin: '0px',
|
|
37
|
+
threshold: 0.1
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const observer = new IntersectionObserver((entries) => {
|
|
41
|
+
entries.forEach(entry => {
|
|
42
|
+
if (entry.isIntersecting) {
|
|
43
|
+
entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
|
|
44
|
+
observer.unobserve(entry.target);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
}, observerOptions);
|
|
48
|
+
|
|
49
|
+
document.querySelectorAll('.section').forEach(section => {
|
|
50
|
+
observer.observe(section);
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
console.log('Total layouts demonstrated:', layouts.length);
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
// Add pulse animation style
|
|
57
|
+
const style = document.createElement('style');
|
|
58
|
+
style.textContent = `
|
|
59
|
+
@keyframes pulse {
|
|
60
|
+
0%, 100% {
|
|
61
|
+
transform: scale(1);
|
|
62
|
+
}
|
|
63
|
+
50% {
|
|
64
|
+
transform: scale(0.95);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes fadeInUp {
|
|
69
|
+
from {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
transform: translateY(30px);
|
|
72
|
+
}
|
|
73
|
+
to {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
transform: translateY(0);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
`;
|
|
79
|
+
document.head.appendChild(style);
|
|
@@ -0,0 +1,336 @@
|
|
|
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, #667eea 0%, #764ba2 100%);
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
padding: 40px 20px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.container {
|
|
15
|
+
max-width: 1200px;
|
|
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: white;
|
|
25
|
+
border-radius: 30px;
|
|
26
|
+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.page-header h1 {
|
|
30
|
+
font-size: 3.5rem;
|
|
31
|
+
color: #333;
|
|
32
|
+
margin-bottom: 15px;
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.page-header p {
|
|
37
|
+
font-size: 1.5rem;
|
|
38
|
+
color: #666;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Section */
|
|
42
|
+
.section {
|
|
43
|
+
background: white;
|
|
44
|
+
padding: 40px;
|
|
45
|
+
border-radius: 20px;
|
|
46
|
+
margin-bottom: 30px;
|
|
47
|
+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.section-title {
|
|
51
|
+
font-size: 2rem;
|
|
52
|
+
color: #333;
|
|
53
|
+
margin-bottom: 30px;
|
|
54
|
+
text-align: center;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Base Flex Item */
|
|
58
|
+
.flex-item {
|
|
59
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
60
|
+
color: white;
|
|
61
|
+
padding: 25px;
|
|
62
|
+
border-radius: 15px;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
text-align: center;
|
|
65
|
+
transition: all 0.3s ease;
|
|
66
|
+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.flex-item:hover {
|
|
70
|
+
transform: translateY(-5px) scale(1.05);
|
|
71
|
+
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Basic Row */
|
|
75
|
+
.flex-row {
|
|
76
|
+
display: flex;
|
|
77
|
+
gap: 20px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Space Between */
|
|
81
|
+
.flex-space-between {
|
|
82
|
+
display: flex;
|
|
83
|
+
justify-content: space-between;
|
|
84
|
+
gap: 20px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Space Around */
|
|
88
|
+
.flex-space-around {
|
|
89
|
+
display: flex;
|
|
90
|
+
justify-content: space-around;
|
|
91
|
+
gap: 20px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Space Evenly */
|
|
95
|
+
.flex-space-evenly {
|
|
96
|
+
display: flex;
|
|
97
|
+
justify-content: space-evenly;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.flex-space-evenly .flex-item {
|
|
101
|
+
font-size: 3rem;
|
|
102
|
+
padding: 30px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Column Layout */
|
|
106
|
+
.flex-column {
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-direction: column;
|
|
109
|
+
gap: 15px;
|
|
110
|
+
max-width: 400px;
|
|
111
|
+
margin: 0 auto;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Center Everything */
|
|
115
|
+
.flex-center {
|
|
116
|
+
display: flex;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
align-items: center;
|
|
119
|
+
min-height: 300px;
|
|
120
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
121
|
+
border-radius: 15px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.flex-item.centered {
|
|
125
|
+
background: white;
|
|
126
|
+
color: #333;
|
|
127
|
+
padding: 40px;
|
|
128
|
+
border-radius: 20px;
|
|
129
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.flex-item.centered h3 {
|
|
133
|
+
font-size: 4rem;
|
|
134
|
+
margin-bottom: 10px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Flex Wrap */
|
|
138
|
+
.flex-wrap {
|
|
139
|
+
display: flex;
|
|
140
|
+
flex-wrap: wrap;
|
|
141
|
+
gap: 25px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.flex-card {
|
|
145
|
+
flex: 1 1 calc(33.333% - 20px);
|
|
146
|
+
min-width: 200px;
|
|
147
|
+
background: white;
|
|
148
|
+
padding: 30px;
|
|
149
|
+
border-radius: 15px;
|
|
150
|
+
text-align: center;
|
|
151
|
+
border: 3px solid #f0f0f0;
|
|
152
|
+
transition: all 0.3s ease;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.flex-card:hover {
|
|
156
|
+
border-color: #667eea;
|
|
157
|
+
transform: translateY(-5px);
|
|
158
|
+
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.flex-card .icon {
|
|
162
|
+
font-size: 3rem;
|
|
163
|
+
display: block;
|
|
164
|
+
margin-bottom: 15px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.flex-card h4 {
|
|
168
|
+
font-size: 1.5rem;
|
|
169
|
+
color: #333;
|
|
170
|
+
margin-bottom: 10px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.flex-card p {
|
|
174
|
+
color: #666;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* Flex Grow */
|
|
178
|
+
.flex-grow-demo {
|
|
179
|
+
display: flex;
|
|
180
|
+
gap: 15px;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.grow-1 {
|
|
184
|
+
flex-grow: 1;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.grow-2 {
|
|
188
|
+
flex-grow: 2;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.grow-3 {
|
|
192
|
+
flex-grow: 3;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* Align Items */
|
|
196
|
+
.align-demo {
|
|
197
|
+
margin-bottom: 30px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.align-demo h4 {
|
|
201
|
+
color: #333;
|
|
202
|
+
margin-bottom: 15px;
|
|
203
|
+
font-size: 1.2rem;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.flex-align-start,
|
|
207
|
+
.flex-align-center,
|
|
208
|
+
.flex-align-end,
|
|
209
|
+
.flex-align-stretch {
|
|
210
|
+
display: flex;
|
|
211
|
+
gap: 15px;
|
|
212
|
+
min-height: 150px;
|
|
213
|
+
background: #f8f9fa;
|
|
214
|
+
padding: 20px;
|
|
215
|
+
border-radius: 10px;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.flex-align-start {
|
|
219
|
+
align-items: flex-start;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.flex-align-center {
|
|
223
|
+
align-items: center;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.flex-align-end {
|
|
227
|
+
align-items: flex-end;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.flex-align-stretch {
|
|
231
|
+
align-items: stretch;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.flex-item.small {
|
|
235
|
+
height: 50px;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.flex-item.medium {
|
|
239
|
+
height: 80px;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.flex-item.large {
|
|
243
|
+
height: 120px;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* Holy Grail Layout */
|
|
247
|
+
.holy-grail {
|
|
248
|
+
display: flex;
|
|
249
|
+
flex-direction: column;
|
|
250
|
+
min-height: 400px;
|
|
251
|
+
background: #f8f9fa;
|
|
252
|
+
border-radius: 15px;
|
|
253
|
+
overflow: hidden;
|
|
254
|
+
border: 2px solid #e0e0e0;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.hg-header,
|
|
258
|
+
.hg-footer {
|
|
259
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
260
|
+
color: white;
|
|
261
|
+
padding: 25px;
|
|
262
|
+
text-align: center;
|
|
263
|
+
font-weight: 600;
|
|
264
|
+
font-size: 1.3rem;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.hg-body {
|
|
268
|
+
display: flex;
|
|
269
|
+
flex: 1;
|
|
270
|
+
gap: 20px;
|
|
271
|
+
padding: 20px;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.hg-sidebar-left,
|
|
275
|
+
.hg-sidebar-right {
|
|
276
|
+
flex: 0 0 200px;
|
|
277
|
+
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
278
|
+
color: white;
|
|
279
|
+
padding: 25px;
|
|
280
|
+
border-radius: 10px;
|
|
281
|
+
font-weight: 600;
|
|
282
|
+
display: flex;
|
|
283
|
+
align-items: center;
|
|
284
|
+
justify-content: center;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.hg-content {
|
|
288
|
+
flex: 1;
|
|
289
|
+
background: white;
|
|
290
|
+
padding: 30px;
|
|
291
|
+
border-radius: 10px;
|
|
292
|
+
display: flex;
|
|
293
|
+
align-items: center;
|
|
294
|
+
justify-content: center;
|
|
295
|
+
font-size: 1.2rem;
|
|
296
|
+
color: #333;
|
|
297
|
+
font-weight: 600;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/* Responsive Design */
|
|
301
|
+
@media (max-width: 968px) {
|
|
302
|
+
.flex-row,
|
|
303
|
+
.flex-space-between,
|
|
304
|
+
.flex-space-around,
|
|
305
|
+
.flex-space-evenly,
|
|
306
|
+
.flex-grow-demo {
|
|
307
|
+
flex-wrap: wrap;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.hg-body {
|
|
311
|
+
flex-direction: column;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.hg-sidebar-left,
|
|
315
|
+
.hg-sidebar-right {
|
|
316
|
+
flex: 0 0 auto;
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
@media (max-width: 768px) {
|
|
321
|
+
.page-header h1 {
|
|
322
|
+
font-size: 2.5rem;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.section {
|
|
326
|
+
padding: 25px;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.flex-card {
|
|
330
|
+
flex: 1 1 100%;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.flex-column {
|
|
334
|
+
max-width: 100%;
|
|
335
|
+
}
|
|
336
|
+
}
|