create-template-html-css 1.0.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/CONTRIBUTING.md +62 -0
- package/INSERT-DEMO.md +142 -0
- package/LICENSE +21 -0
- package/QUICKSTART.md +195 -0
- package/README.md +0 -0
- package/SECURITY.md +95 -0
- package/SHOWCASE.html +342 -0
- package/bin/cli.js +158 -0
- package/package.json +50 -0
- package/src/generator.js +64 -0
- package/src/index.js +1 -0
- package/src/inserter.js +99 -0
- package/templates/button/index.html +32 -0
- package/templates/button/script.js +15 -0
- package/templates/button/style.css +108 -0
- package/templates/card/index.html +52 -0
- package/templates/card/script.js +9 -0
- package/templates/card/style.css +103 -0
- package/templates/footer/index.html +67 -0
- package/templates/footer/script.js +43 -0
- package/templates/footer/style.css +165 -0
- package/templates/form/index.html +54 -0
- package/templates/form/script.js +34 -0
- package/templates/form/style.css +137 -0
- package/templates/hero/index.html +73 -0
- package/templates/hero/script.js +80 -0
- package/templates/hero/style.css +272 -0
- package/templates/modal/index.html +63 -0
- package/templates/modal/script.js +69 -0
- package/templates/modal/style.css +223 -0
- package/templates/navigation/index.html +69 -0
- package/templates/navigation/script.js +61 -0
- package/templates/navigation/style.css +161 -0
|
@@ -0,0 +1,63 @@
|
|
|
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}} - Modal Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<h1>Modal Components</h1>
|
|
12
|
+
<p class="subtitle">Click the buttons to open different modal windows</p>
|
|
13
|
+
|
|
14
|
+
<div class="buttons-container">
|
|
15
|
+
<button class="btn btn-primary" data-modal="modal1">Open Basic Modal</button>
|
|
16
|
+
<button class="btn btn-success" data-modal="modal2">Open Form Modal</button>
|
|
17
|
+
<button class="btn btn-danger" data-modal="modal3">Open Warning Modal</button>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<!-- Modal 1 - Basic -->
|
|
22
|
+
<div id="modal1" class="modal">
|
|
23
|
+
<div class="modal-content">
|
|
24
|
+
<span class="modal-close">×</span>
|
|
25
|
+
<h2 class="modal-title">Basic Modal</h2>
|
|
26
|
+
<p class="modal-text">
|
|
27
|
+
This is an example of a basic modal with simple content. You can close it by clicking X or outside the window.
|
|
28
|
+
</p>
|
|
29
|
+
<button class="modal-btn">Close</button>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<!-- Modal 2 - With Form -->
|
|
34
|
+
<div id="modal2" class="modal">
|
|
35
|
+
<div class="modal-content">
|
|
36
|
+
<span class="modal-close">×</span>
|
|
37
|
+
<h2 class="modal-title">Sign Up</h2>
|
|
38
|
+
<form class="modal-form">
|
|
39
|
+
<input type="text" placeholder="Full Name" required>
|
|
40
|
+
<input type="email" placeholder="Email" required>
|
|
41
|
+
<input type="password" placeholder="Password" required>
|
|
42
|
+
<button type="submit" class="modal-btn">Register</button>
|
|
43
|
+
</form>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- Modal 3 - Warning -->
|
|
48
|
+
<div id="modal3" class="modal">
|
|
49
|
+
<div class="modal-content modal-warning">
|
|
50
|
+
<span class="modal-close">×</span>
|
|
51
|
+
<div class="warning-icon">⚠️</div>
|
|
52
|
+
<h2 class="modal-title">Warning!</h2>
|
|
53
|
+
<p class="modal-text">
|
|
54
|
+
Are you sure you want to delete this item? This action cannot be undone.
|
|
55
|
+
</p>
|
|
56
|
+
<div class="modal-actions">
|
|
57
|
+
<button class="modal-btn btn-cancel">Cancel</button>
|
|
58
|
+
<button class="modal-btn btn-confirm">Delete</button>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
// Open modal
|
|
2
|
+
document.querySelectorAll('[data-modal]').forEach(button => {
|
|
3
|
+
button.addEventListener('click', function() {
|
|
4
|
+
const modalId = this.getAttribute('data-modal');
|
|
5
|
+
const modal = document.getElementById(modalId);
|
|
6
|
+
modal.classList.add('active');
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
// Close modal on X click
|
|
11
|
+
document.querySelectorAll('.modal-close').forEach(closeBtn => {
|
|
12
|
+
closeBtn.addEventListener('click', function() {
|
|
13
|
+
this.closest('.modal').classList.remove('active');
|
|
14
|
+
});
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
// Close modal on outside click
|
|
18
|
+
document.querySelectorAll('.modal').forEach(modal => {
|
|
19
|
+
modal.addEventListener('click', function(e) {
|
|
20
|
+
if (e.target === this) {
|
|
21
|
+
this.classList.remove('active');
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
// Close modal on button click
|
|
27
|
+
document.querySelectorAll('.modal-btn').forEach(button => {
|
|
28
|
+
button.addEventListener('click', function(e) {
|
|
29
|
+
if (!this.type || this.type !== 'submit') {
|
|
30
|
+
this.closest('.modal').classList.remove('active');
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
// Handle form submission
|
|
36
|
+
document.querySelectorAll('.modal-form').forEach(form => {
|
|
37
|
+
form.addEventListener('submit', function(e) {
|
|
38
|
+
e.preventDefault();
|
|
39
|
+
console.log('Form submitted');
|
|
40
|
+
alert('Form submitted successfully!');
|
|
41
|
+
this.closest('.modal').classList.remove('active');
|
|
42
|
+
this.reset();
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
// Cancel button
|
|
47
|
+
document.querySelectorAll('.btn-cancel').forEach(button => {
|
|
48
|
+
button.addEventListener('click', function() {
|
|
49
|
+
this.closest('.modal').classList.remove('active');
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// Confirm button
|
|
54
|
+
document.querySelectorAll('.btn-confirm').forEach(button => {
|
|
55
|
+
button.addEventListener('click', function() {
|
|
56
|
+
console.log('Action confirmed');
|
|
57
|
+
alert('Item deleted successfully');
|
|
58
|
+
this.closest('.modal').classList.remove('active');
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
// Close modal on ESC key
|
|
63
|
+
document.addEventListener('keydown', function(e) {
|
|
64
|
+
if (e.key === 'Escape') {
|
|
65
|
+
document.querySelectorAll('.modal.active').forEach(modal => {
|
|
66
|
+
modal.classList.remove('active');
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
});
|
|
@@ -0,0 +1,223 @@
|
|
|
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
|
+
display: flex;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
align-items: center;
|
|
14
|
+
padding: 20px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.container {
|
|
18
|
+
text-align: center;
|
|
19
|
+
color: white;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
h1 {
|
|
23
|
+
font-size: 2.5rem;
|
|
24
|
+
margin-bottom: 10px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.subtitle {
|
|
28
|
+
font-size: 1.2rem;
|
|
29
|
+
margin-bottom: 30px;
|
|
30
|
+
opacity: 0.9;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.buttons-container {
|
|
34
|
+
display: flex;
|
|
35
|
+
gap: 15px;
|
|
36
|
+
flex-wrap: wrap;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.btn {
|
|
41
|
+
padding: 15px 30px;
|
|
42
|
+
border: none;
|
|
43
|
+
border-radius: 8px;
|
|
44
|
+
font-size: 16px;
|
|
45
|
+
font-weight: 600;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
transition: all 0.3s ease;
|
|
48
|
+
color: white;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.btn-primary {
|
|
52
|
+
background: rgba(255, 255, 255, 0.2);
|
|
53
|
+
border: 2px solid white;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.btn-success {
|
|
57
|
+
background: #28a745;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.btn-danger {
|
|
61
|
+
background: #dc3545;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.btn:hover {
|
|
65
|
+
transform: translateY(-2px);
|
|
66
|
+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Modal Styles */
|
|
70
|
+
.modal {
|
|
71
|
+
display: none;
|
|
72
|
+
position: fixed;
|
|
73
|
+
z-index: 1000;
|
|
74
|
+
right: 0;
|
|
75
|
+
top: 0;
|
|
76
|
+
width: 100%;
|
|
77
|
+
height: 100%;
|
|
78
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
79
|
+
backdrop-filter: blur(5px);
|
|
80
|
+
animation: fadeIn 0.3s ease;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.modal.active {
|
|
84
|
+
display: flex;
|
|
85
|
+
justify-content: center;
|
|
86
|
+
align-items: center;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@keyframes fadeIn {
|
|
90
|
+
from {
|
|
91
|
+
opacity: 0;
|
|
92
|
+
}
|
|
93
|
+
to {
|
|
94
|
+
opacity: 1;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.modal-content {
|
|
99
|
+
background: white;
|
|
100
|
+
padding: 40px;
|
|
101
|
+
border-radius: 15px;
|
|
102
|
+
max-width: 500px;
|
|
103
|
+
width: 90%;
|
|
104
|
+
position: relative;
|
|
105
|
+
animation: slideIn 0.3s ease;
|
|
106
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@keyframes slideIn {
|
|
110
|
+
from {
|
|
111
|
+
transform: translateY(-50px);
|
|
112
|
+
opacity: 0;
|
|
113
|
+
}
|
|
114
|
+
to {
|
|
115
|
+
transform: translateY(0);
|
|
116
|
+
opacity: 1;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.modal-close {
|
|
121
|
+
position: absolute;
|
|
122
|
+
left: 20px;
|
|
123
|
+
top: 20px;
|
|
124
|
+
font-size: 30px;
|
|
125
|
+
font-weight: bold;
|
|
126
|
+
color: #999;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
transition: color 0.3s ease;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.modal-close:hover {
|
|
132
|
+
color: #333;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.modal-title {
|
|
136
|
+
color: #333;
|
|
137
|
+
font-size: 1.8rem;
|
|
138
|
+
margin-bottom: 20px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.modal-text {
|
|
142
|
+
color: #666;
|
|
143
|
+
line-height: 1.6;
|
|
144
|
+
margin-bottom: 25px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.modal-btn {
|
|
148
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
149
|
+
color: white;
|
|
150
|
+
border: none;
|
|
151
|
+
padding: 12px 30px;
|
|
152
|
+
border-radius: 8px;
|
|
153
|
+
font-size: 16px;
|
|
154
|
+
font-weight: 600;
|
|
155
|
+
cursor: pointer;
|
|
156
|
+
transition: all 0.3s ease;
|
|
157
|
+
width: 100%;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.modal-btn:hover {
|
|
161
|
+
transform: translateY(-2px);
|
|
162
|
+
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* Modal Form */
|
|
166
|
+
.modal-form {
|
|
167
|
+
display: flex;
|
|
168
|
+
flex-direction: column;
|
|
169
|
+
gap: 15px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.modal-form input {
|
|
173
|
+
padding: 12px 15px;
|
|
174
|
+
border: 2px solid #e0e0e0;
|
|
175
|
+
border-radius: 8px;
|
|
176
|
+
font-size: 16px;
|
|
177
|
+
transition: border-color 0.3s ease;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.modal-form input:focus {
|
|
181
|
+
outline: none;
|
|
182
|
+
border-color: #667eea;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* Warning Modal */
|
|
186
|
+
.modal-warning {
|
|
187
|
+
text-align: center;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.warning-icon {
|
|
191
|
+
font-size: 4rem;
|
|
192
|
+
margin-bottom: 20px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.modal-actions {
|
|
196
|
+
display: flex;
|
|
197
|
+
gap: 15px;
|
|
198
|
+
margin-top: 25px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.btn-cancel {
|
|
202
|
+
background: #6c757d;
|
|
203
|
+
width: 50%;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.btn-confirm {
|
|
207
|
+
background: #dc3545;
|
|
208
|
+
width: 50%;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
@media (max-width: 768px) {
|
|
212
|
+
.modal-content {
|
|
213
|
+
padding: 30px 20px;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
h1 {
|
|
217
|
+
font-size: 2rem;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.buttons-container {
|
|
221
|
+
flex-direction: column;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
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}} - Navigation Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<nav class="navbar">
|
|
11
|
+
<div class="nav-container">
|
|
12
|
+
<div class="nav-brand">
|
|
13
|
+
<h2>My Logo</h2>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<button class="nav-toggle" id="navToggle">
|
|
17
|
+
<span></span>
|
|
18
|
+
<span></span>
|
|
19
|
+
<span></span>
|
|
20
|
+
</button>
|
|
21
|
+
|
|
22
|
+
<ul class="nav-menu" id="navMenu">
|
|
23
|
+
<li class="nav-item">
|
|
24
|
+
<a href="#home" class="nav-link active">Home</a>
|
|
25
|
+
</li>
|
|
26
|
+
<li class="nav-item">
|
|
27
|
+
<a href="#about" class="nav-link">About</a>
|
|
28
|
+
</li>
|
|
29
|
+
<li class="nav-item">
|
|
30
|
+
<a href="#services" class="nav-link">Services</a>
|
|
31
|
+
</li>
|
|
32
|
+
<li class="nav-item">
|
|
33
|
+
<a href="#portfolio" class="nav-link">Portfolio</a>
|
|
34
|
+
</li>
|
|
35
|
+
<li class="nav-item">
|
|
36
|
+
<a href="#contact" class="nav-link">Contact</a>
|
|
37
|
+
</li>
|
|
38
|
+
</ul>
|
|
39
|
+
</div>
|
|
40
|
+
</nav>
|
|
41
|
+
|
|
42
|
+
<main class="main-content">
|
|
43
|
+
<section id="home" class="section">
|
|
44
|
+
<h1>Home</h1>
|
|
45
|
+
<p>Welcome to our website</p>
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
<section id="about" class="section">
|
|
49
|
+
<h1>About</h1>
|
|
50
|
+
<p>A little about us...</p>
|
|
51
|
+
</section>
|
|
52
|
+
|
|
53
|
+
<section id="services" class="section">
|
|
54
|
+
<h1>Services</h1>
|
|
55
|
+
<p>The services we offer</p>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<section id="portfolio" class="section">
|
|
59
|
+
<h1>Portfolio</h1>
|
|
60
|
+
<p>Our projects</p>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<section id="contact" class="section">
|
|
64
|
+
<h1>Contact</h1>
|
|
65
|
+
<p>Get in touch</p>
|
|
66
|
+
</section>
|
|
67
|
+
</main>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
// Mobile menu toggle
|
|
2
|
+
const navToggle = document.getElementById('navToggle');
|
|
3
|
+
const navMenu = document.getElementById('navMenu');
|
|
4
|
+
|
|
5
|
+
navToggle.addEventListener('click', function() {
|
|
6
|
+
navMenu.classList.toggle('active');
|
|
7
|
+
navToggle.classList.toggle('active');
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
// Smooth scrolling for navigation links
|
|
11
|
+
document.querySelectorAll('.nav-link').forEach(link => {
|
|
12
|
+
link.addEventListener('click', function(e) {
|
|
13
|
+
e.preventDefault();
|
|
14
|
+
|
|
15
|
+
// Remove active class from all links
|
|
16
|
+
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
|
17
|
+
|
|
18
|
+
// Add active class to clicked link
|
|
19
|
+
this.classList.add('active');
|
|
20
|
+
|
|
21
|
+
// Get target section
|
|
22
|
+
const targetId = this.getAttribute('href');
|
|
23
|
+
const targetSection = document.querySelector(targetId);
|
|
24
|
+
|
|
25
|
+
// Scroll to section
|
|
26
|
+
if (targetSection) {
|
|
27
|
+
targetSection.scrollIntoView({
|
|
28
|
+
behavior: 'smooth',
|
|
29
|
+
block: 'start'
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Close mobile menu if open
|
|
34
|
+
navMenu.classList.remove('active');
|
|
35
|
+
navToggle.classList.remove('active');
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
// Highlight active section on scroll
|
|
40
|
+
window.addEventListener('scroll', function() {
|
|
41
|
+
const sections = document.querySelectorAll('.section');
|
|
42
|
+
const navLinks = document.querySelectorAll('.nav-link');
|
|
43
|
+
|
|
44
|
+
let current = '';
|
|
45
|
+
|
|
46
|
+
sections.forEach(section => {
|
|
47
|
+
const sectionTop = section.offsetTop;
|
|
48
|
+
const sectionHeight = section.clientHeight;
|
|
49
|
+
|
|
50
|
+
if (pageYOffset >= sectionTop - 100) {
|
|
51
|
+
current = section.getAttribute('id');
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
navLinks.forEach(link => {
|
|
56
|
+
link.classList.remove('active');
|
|
57
|
+
if (link.getAttribute('href') === `#${current}`) {
|
|
58
|
+
link.classList.add('active');
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
});
|
|
@@ -0,0 +1,161 @@
|
|
|
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: #f5f5f5;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Navbar Styles */
|
|
13
|
+
.navbar {
|
|
14
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
15
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
16
|
+
position: fixed;
|
|
17
|
+
top: 0;
|
|
18
|
+
left: 0;
|
|
19
|
+
right: 0;
|
|
20
|
+
z-index: 1000;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.nav-container {
|
|
24
|
+
max-width: 1200px;
|
|
25
|
+
margin: 0 auto;
|
|
26
|
+
padding: 0 20px;
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
align-items: center;
|
|
30
|
+
height: 70px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.nav-brand h2 {
|
|
34
|
+
color: white;
|
|
35
|
+
font-size: 1.8rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.nav-menu {
|
|
39
|
+
display: flex;
|
|
40
|
+
list-style: none;
|
|
41
|
+
gap: 10px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.nav-item {
|
|
45
|
+
position: relative;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.nav-link {
|
|
49
|
+
color: white;
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
padding: 10px 20px;
|
|
52
|
+
border-radius: 8px;
|
|
53
|
+
transition: all 0.3s ease;
|
|
54
|
+
display: block;
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.nav-link:hover,
|
|
59
|
+
.nav-link.active {
|
|
60
|
+
background: rgba(255, 255, 255, 0.2);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.nav-toggle {
|
|
64
|
+
display: none;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
background: none;
|
|
67
|
+
border: none;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
padding: 5px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nav-toggle span {
|
|
73
|
+
width: 25px;
|
|
74
|
+
height: 3px;
|
|
75
|
+
background: white;
|
|
76
|
+
margin: 3px 0;
|
|
77
|
+
transition: all 0.3s ease;
|
|
78
|
+
border-radius: 3px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Main Content */
|
|
82
|
+
.main-content {
|
|
83
|
+
margin-top: 70px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.section {
|
|
87
|
+
min-height: 100vh;
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
align-items: center;
|
|
92
|
+
padding: 40px 20px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.section:nth-child(odd) {
|
|
96
|
+
background: #fff;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.section:nth-child(even) {
|
|
100
|
+
background: #f9f9f9;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.section h1 {
|
|
104
|
+
font-size: 3rem;
|
|
105
|
+
color: #333;
|
|
106
|
+
margin-bottom: 20px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.section p {
|
|
110
|
+
font-size: 1.2rem;
|
|
111
|
+
color: #666;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Mobile Responsive */
|
|
115
|
+
@media (max-width: 768px) {
|
|
116
|
+
.nav-toggle {
|
|
117
|
+
display: flex;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.nav-menu {
|
|
121
|
+
position: fixed;
|
|
122
|
+
right: -100%;
|
|
123
|
+
top: 70px;
|
|
124
|
+
flex-direction: column;
|
|
125
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
126
|
+
width: 100%;
|
|
127
|
+
text-align: center;
|
|
128
|
+
transition: 0.3s;
|
|
129
|
+
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.2);
|
|
130
|
+
padding: 20px 0;
|
|
131
|
+
gap: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.nav-menu.active {
|
|
135
|
+
right: 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.nav-item {
|
|
139
|
+
margin: 10px 0;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.nav-toggle.active span:nth-child(1) {
|
|
143
|
+
transform: rotate(-45deg) translate(-5px, 6px);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.nav-toggle.active span:nth-child(2) {
|
|
147
|
+
opacity: 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.nav-toggle.active span:nth-child(3) {
|
|
151
|
+
transform: rotate(45deg) translate(-5px, -6px);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.section h1 {
|
|
155
|
+
font-size: 2rem;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.section p {
|
|
159
|
+
font-size: 1rem;
|
|
160
|
+
}
|
|
161
|
+
}
|