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,54 @@
|
|
|
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}} - Form Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="container">
|
|
11
|
+
<form class="form" id="contactForm">
|
|
12
|
+
<h1 class="form-title">Contact Us</h1>
|
|
13
|
+
<p class="form-subtitle">Fill in the details and we'll get back to you soon</p>
|
|
14
|
+
|
|
15
|
+
<div class="form-group">
|
|
16
|
+
<label for="name">Full Name</label>
|
|
17
|
+
<input type="text" id="name" name="name" required>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div class="form-group">
|
|
21
|
+
<label for="email">Email</label>
|
|
22
|
+
<input type="email" id="email" name="email" required>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="form-group">
|
|
26
|
+
<label for="phone">Phone</label>
|
|
27
|
+
<input type="tel" id="phone" name="phone">
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="form-group">
|
|
31
|
+
<label for="subject">Subject</label>
|
|
32
|
+
<select id="subject" name="subject" required>
|
|
33
|
+
<option value="">Select a subject</option>
|
|
34
|
+
<option value="support">Technical Support</option>
|
|
35
|
+
<option value="sales">Sales</option>
|
|
36
|
+
<option value="general">General</option>
|
|
37
|
+
</select>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="form-group">
|
|
41
|
+
<label for="message">Message</label>
|
|
42
|
+
<textarea id="message" name="message" rows="5" required></textarea>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="form-group checkbox-group">
|
|
46
|
+
<input type="checkbox" id="terms" name="terms" required>
|
|
47
|
+
<label for="terms">I agree to the terms of service</label>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<button type="submit" class="form-btn">Submit</button>
|
|
51
|
+
</form>
|
|
52
|
+
</div>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
// Form validation and submission
|
|
2
|
+
document.getElementById('contactForm').addEventListener('submit', function(e) {
|
|
3
|
+
e.preventDefault();
|
|
4
|
+
|
|
5
|
+
// Get form values
|
|
6
|
+
const formData = {
|
|
7
|
+
name: document.getElementById('name').value,
|
|
8
|
+
email: document.getElementById('email').value,
|
|
9
|
+
phone: document.getElementById('phone').value,
|
|
10
|
+
subject: document.getElementById('subject').value,
|
|
11
|
+
message: document.getElementById('message').value
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
console.log('Form submitted:', formData);
|
|
15
|
+
|
|
16
|
+
// Show success message
|
|
17
|
+
alert('Form submitted successfully! We will get back to you soon.');
|
|
18
|
+
|
|
19
|
+
// Reset form
|
|
20
|
+
this.reset();
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// Real-time validation
|
|
24
|
+
document.querySelectorAll('input, textarea, select').forEach(field => {
|
|
25
|
+
field.addEventListener('blur', function() {
|
|
26
|
+
if (this.checkValidity()) {
|
|
27
|
+
this.classList.add('valid');
|
|
28
|
+
this.classList.remove('invalid');
|
|
29
|
+
} else {
|
|
30
|
+
this.classList.add('invalid');
|
|
31
|
+
this.classList.remove('valid');
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
});
|
|
@@ -0,0 +1,137 @@
|
|
|
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
|
+
width: 100%;
|
|
19
|
+
max-width: 600px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.form {
|
|
23
|
+
background: white;
|
|
24
|
+
padding: 40px;
|
|
25
|
+
border-radius: 15px;
|
|
26
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.form-title {
|
|
30
|
+
color: #333;
|
|
31
|
+
font-size: 2rem;
|
|
32
|
+
margin-bottom: 10px;
|
|
33
|
+
text-align: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.form-subtitle {
|
|
37
|
+
color: #666;
|
|
38
|
+
text-align: center;
|
|
39
|
+
margin-bottom: 30px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.form-group {
|
|
43
|
+
margin-bottom: 25px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.form-group label {
|
|
47
|
+
display: block;
|
|
48
|
+
color: #333;
|
|
49
|
+
font-weight: 600;
|
|
50
|
+
margin-bottom: 8px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.form-group input,
|
|
54
|
+
.form-group select,
|
|
55
|
+
.form-group textarea {
|
|
56
|
+
width: 100%;
|
|
57
|
+
padding: 12px 15px;
|
|
58
|
+
border: 2px solid #e0e0e0;
|
|
59
|
+
border-radius: 8px;
|
|
60
|
+
font-size: 16px;
|
|
61
|
+
font-family: inherit;
|
|
62
|
+
transition: all 0.3s ease;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.form-group input:focus,
|
|
66
|
+
.form-group select:focus,
|
|
67
|
+
.form-group textarea:focus {
|
|
68
|
+
outline: none;
|
|
69
|
+
border-color: #667eea;
|
|
70
|
+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.form-group textarea {
|
|
74
|
+
resize: vertical;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.checkbox-group {
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.checkbox-group input[type="checkbox"] {
|
|
83
|
+
width: auto;
|
|
84
|
+
margin-left: 10px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.checkbox-group label {
|
|
88
|
+
margin: 0;
|
|
89
|
+
font-weight: normal;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.form-btn {
|
|
93
|
+
width: 100%;
|
|
94
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
95
|
+
color: white;
|
|
96
|
+
border: none;
|
|
97
|
+
padding: 15px;
|
|
98
|
+
border-radius: 8px;
|
|
99
|
+
font-size: 18px;
|
|
100
|
+
font-weight: 600;
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
transition: all 0.3s ease;
|
|
103
|
+
text-transform: uppercase;
|
|
104
|
+
letter-spacing: 1px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.form-btn:hover {
|
|
108
|
+
transform: translateY(-2px);
|
|
109
|
+
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.form-btn:active {
|
|
113
|
+
transform: translateY(0);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Validation styles */
|
|
117
|
+
.form-group input:invalid:not(:placeholder-shown),
|
|
118
|
+
.form-group select:invalid:not(:placeholder-shown),
|
|
119
|
+
.form-group textarea:invalid:not(:placeholder-shown) {
|
|
120
|
+
border-color: #dc3545;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.form-group input:valid:not(:placeholder-shown),
|
|
124
|
+
.form-group select:valid:not(:placeholder-shown),
|
|
125
|
+
.form-group textarea:valid:not(:placeholder-shown) {
|
|
126
|
+
border-color: #28a745;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@media (max-width: 768px) {
|
|
130
|
+
.form {
|
|
131
|
+
padding: 30px 20px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.form-title {
|
|
135
|
+
font-size: 1.5rem;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
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}} - Hero Component</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<!-- Hero Section 1 - Gradient Background -->
|
|
11
|
+
<section class="hero hero-gradient">
|
|
12
|
+
<div class="hero-content">
|
|
13
|
+
<h1 class="hero-title">Welcome to Our Website</h1>
|
|
14
|
+
<p class="hero-subtitle">
|
|
15
|
+
We create amazing digital experiences that deliver results
|
|
16
|
+
</p>
|
|
17
|
+
<div class="hero-buttons">
|
|
18
|
+
<button class="hero-btn btn-primary">Get Started</button>
|
|
19
|
+
<button class="hero-btn btn-secondary">Learn More</button>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="hero-scroll">
|
|
23
|
+
<span>Scroll Down</span>
|
|
24
|
+
<div class="scroll-arrow">↓</div>
|
|
25
|
+
</div>
|
|
26
|
+
</section>
|
|
27
|
+
|
|
28
|
+
<!-- Hero Section 2 - With Image -->
|
|
29
|
+
<section class="hero hero-image">
|
|
30
|
+
<div class="hero-overlay"></div>
|
|
31
|
+
<div class="hero-content">
|
|
32
|
+
<span class="hero-badge">✨ New</span>
|
|
33
|
+
<h1 class="hero-title">Smart Solutions for Your Business</h1>
|
|
34
|
+
<p class="hero-subtitle">
|
|
35
|
+
Advanced technology that takes your business to the next level
|
|
36
|
+
</p>
|
|
37
|
+
<div class="hero-buttons">
|
|
38
|
+
<button class="hero-btn btn-primary">Get a Quote</button>
|
|
39
|
+
<button class="hero-btn btn-outlined">View Demo</button>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="hero-stats">
|
|
42
|
+
<div class="stat">
|
|
43
|
+
<h3>500+</h3>
|
|
44
|
+
<p>Happy Clients</p>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="stat">
|
|
47
|
+
<h3>99%</h3>
|
|
48
|
+
<p>Satisfaction</p>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="stat">
|
|
51
|
+
<h3>24/7</h3>
|
|
52
|
+
<p>Support</p>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<!-- Hero Section 3 - Centered -->
|
|
59
|
+
<section class="hero hero-centered">
|
|
60
|
+
<div class="hero-content">
|
|
61
|
+
<h1 class="hero-title typing-text">Let's Build Something Amazing Together</h1>
|
|
62
|
+
<p class="hero-subtitle">
|
|
63
|
+
A professional team of developers and designers waiting to create your next project
|
|
64
|
+
</p>
|
|
65
|
+
<form class="hero-form">
|
|
66
|
+
<input type="email" placeholder="Enter your email" required>
|
|
67
|
+
<button type="submit" class="hero-btn btn-primary">Join Us</button>
|
|
68
|
+
</form>
|
|
69
|
+
<p class="hero-note">⭐ Free, no credit card required</p>
|
|
70
|
+
</div>
|
|
71
|
+
</section>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
// Smooth scroll for hero scroll indicator
|
|
2
|
+
document.querySelectorAll('.hero-scroll').forEach(scroll => {
|
|
3
|
+
scroll.addEventListener('click', function() {
|
|
4
|
+
window.scrollTo({
|
|
5
|
+
top: window.innerHeight,
|
|
6
|
+
behavior: 'smooth'
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
// Hero buttons
|
|
12
|
+
document.querySelectorAll('.hero-btn').forEach(button => {
|
|
13
|
+
button.addEventListener('click', function() {
|
|
14
|
+
if (this.type !== 'submit') {
|
|
15
|
+
console.log('Hero button clicked:', this.textContent);
|
|
16
|
+
alert(`Clicked on: ${this.textContent}`);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
// Hero form submission
|
|
22
|
+
document.querySelectorAll('.hero-form').forEach(form => {
|
|
23
|
+
form.addEventListener('submit', function(e) {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
const email = this.querySelector('input[type="email"]').value;
|
|
26
|
+
console.log('Form submitted with email:', email);
|
|
27
|
+
alert(`Thank you! We'll send you information to: ${email}`);
|
|
28
|
+
this.reset();
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// Parallax effect for hero sections
|
|
33
|
+
window.addEventListener('scroll', function() {
|
|
34
|
+
const scrolled = window.pageYOffset;
|
|
35
|
+
|
|
36
|
+
document.querySelectorAll('.hero').forEach(hero => {
|
|
37
|
+
const rect = hero.getBoundingClientRect();
|
|
38
|
+
if (rect.top < window.innerHeight && rect.bottom > 0) {
|
|
39
|
+
const content = hero.querySelector('.hero-content');
|
|
40
|
+
if (content) {
|
|
41
|
+
const offset = scrolled * 0.5;
|
|
42
|
+
content.style.transform = `translateY(${offset}px)`;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// Animate stats on scroll
|
|
49
|
+
const statsObserver = new IntersectionObserver((entries) => {
|
|
50
|
+
entries.forEach(entry => {
|
|
51
|
+
if (entry.isIntersecting) {
|
|
52
|
+
const stat = entry.target;
|
|
53
|
+
const h3 = stat.querySelector('h3');
|
|
54
|
+
const finalValue = h3.textContent;
|
|
55
|
+
|
|
56
|
+
// Animate number if it's numeric
|
|
57
|
+
if (!isNaN(parseInt(finalValue))) {
|
|
58
|
+
let current = 0;
|
|
59
|
+
const target = parseInt(finalValue);
|
|
60
|
+
const increment = target / 50;
|
|
61
|
+
|
|
62
|
+
const timer = setInterval(() => {
|
|
63
|
+
current += increment;
|
|
64
|
+
if (current >= target) {
|
|
65
|
+
h3.textContent = finalValue;
|
|
66
|
+
clearInterval(timer);
|
|
67
|
+
} else {
|
|
68
|
+
h3.textContent = Math.floor(current) + (finalValue.includes('+') ? '+' : '');
|
|
69
|
+
}
|
|
70
|
+
}, 30);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
statsObserver.unobserve(stat);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
}, { threshold: 0.5 });
|
|
77
|
+
|
|
78
|
+
document.querySelectorAll('.stat').forEach(stat => {
|
|
79
|
+
statsObserver.observe(stat);
|
|
80
|
+
});
|
|
@@ -0,0 +1,272 @@
|
|
|
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
|
+
overflow-x: hidden;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Base Hero Styles */
|
|
13
|
+
.hero {
|
|
14
|
+
min-height: 100vh;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
align-items: center;
|
|
19
|
+
padding: 80px 20px;
|
|
20
|
+
position: relative;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.hero-content {
|
|
24
|
+
max-width: 900px;
|
|
25
|
+
text-align: center;
|
|
26
|
+
position: relative;
|
|
27
|
+
z-index: 2;
|
|
28
|
+
animation: fadeInUp 1s ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@keyframes fadeInUp {
|
|
32
|
+
from {
|
|
33
|
+
opacity: 0;
|
|
34
|
+
transform: translateY(30px);
|
|
35
|
+
}
|
|
36
|
+
to {
|
|
37
|
+
opacity: 1;
|
|
38
|
+
transform: translateY(0);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.hero-title {
|
|
43
|
+
font-size: 3.5rem;
|
|
44
|
+
margin-bottom: 20px;
|
|
45
|
+
font-weight: 700;
|
|
46
|
+
line-height: 1.2;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.hero-subtitle {
|
|
50
|
+
font-size: 1.3rem;
|
|
51
|
+
margin-bottom: 40px;
|
|
52
|
+
line-height: 1.6;
|
|
53
|
+
opacity: 0.9;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.hero-buttons {
|
|
57
|
+
display: flex;
|
|
58
|
+
gap: 20px;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
flex-wrap: wrap;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.hero-btn {
|
|
64
|
+
padding: 15px 35px;
|
|
65
|
+
border: none;
|
|
66
|
+
border-radius: 50px;
|
|
67
|
+
font-size: 16px;
|
|
68
|
+
font-weight: 600;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
transition: all 0.3s ease;
|
|
71
|
+
text-transform: uppercase;
|
|
72
|
+
letter-spacing: 1px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.btn-primary {
|
|
76
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
77
|
+
color: white;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.btn-primary:hover {
|
|
81
|
+
transform: translateY(-3px);
|
|
82
|
+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.btn-secondary {
|
|
86
|
+
background: white;
|
|
87
|
+
color: #667eea;
|
|
88
|
+
border: 2px solid white;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.btn-outlined {
|
|
92
|
+
background: transparent;
|
|
93
|
+
color: white;
|
|
94
|
+
border: 2px solid white;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.btn-outlined:hover {
|
|
98
|
+
background: white;
|
|
99
|
+
color: #667eea;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Hero 1 - Gradient */
|
|
103
|
+
.hero-gradient {
|
|
104
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
105
|
+
color: white;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.hero-scroll {
|
|
109
|
+
position: absolute;
|
|
110
|
+
bottom: 30px;
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
align-items: center;
|
|
114
|
+
color: white;
|
|
115
|
+
animation: bounce 2s infinite;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@keyframes bounce {
|
|
119
|
+
0%, 20%, 50%, 80%, 100% {
|
|
120
|
+
transform: translateY(0);
|
|
121
|
+
}
|
|
122
|
+
40% {
|
|
123
|
+
transform: translateY(-10px);
|
|
124
|
+
}
|
|
125
|
+
60% {
|
|
126
|
+
transform: translateY(-5px);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.scroll-arrow {
|
|
131
|
+
font-size: 2rem;
|
|
132
|
+
margin-top: 10px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Hero 2 - With Image */
|
|
136
|
+
.hero-image {
|
|
137
|
+
background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920') center/cover;
|
|
138
|
+
color: white;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.hero-overlay {
|
|
142
|
+
position: absolute;
|
|
143
|
+
top: 0;
|
|
144
|
+
left: 0;
|
|
145
|
+
right: 0;
|
|
146
|
+
bottom: 0;
|
|
147
|
+
background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
|
|
148
|
+
z-index: 1;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.hero-badge {
|
|
152
|
+
display: inline-block;
|
|
153
|
+
background: rgba(255, 255, 255, 0.2);
|
|
154
|
+
padding: 8px 20px;
|
|
155
|
+
border-radius: 50px;
|
|
156
|
+
margin-bottom: 20px;
|
|
157
|
+
backdrop-filter: blur(10px);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.hero-stats {
|
|
161
|
+
display: flex;
|
|
162
|
+
gap: 60px;
|
|
163
|
+
justify-content: center;
|
|
164
|
+
margin-top: 60px;
|
|
165
|
+
flex-wrap: wrap;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.stat h3 {
|
|
169
|
+
font-size: 3rem;
|
|
170
|
+
margin-bottom: 10px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.stat p {
|
|
174
|
+
font-size: 1rem;
|
|
175
|
+
opacity: 0.9;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Hero 3 - Centered */
|
|
179
|
+
.hero-centered {
|
|
180
|
+
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
|
|
181
|
+
color: white;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.hero-form {
|
|
185
|
+
display: flex;
|
|
186
|
+
gap: 15px;
|
|
187
|
+
margin-top: 40px;
|
|
188
|
+
max-width: 600px;
|
|
189
|
+
margin-left: auto;
|
|
190
|
+
margin-right: auto;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.hero-form input {
|
|
194
|
+
flex: 1;
|
|
195
|
+
padding: 15px 25px;
|
|
196
|
+
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
197
|
+
border-radius: 50px;
|
|
198
|
+
font-size: 16px;
|
|
199
|
+
background: rgba(255, 255, 255, 0.1);
|
|
200
|
+
color: white;
|
|
201
|
+
backdrop-filter: blur(10px);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.hero-form input::placeholder {
|
|
205
|
+
color: rgba(255, 255, 255, 0.6);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.hero-form input:focus {
|
|
209
|
+
outline: none;
|
|
210
|
+
border-color: white;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.hero-note {
|
|
214
|
+
margin-top: 20px;
|
|
215
|
+
font-size: 0.9rem;
|
|
216
|
+
opacity: 0.8;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.typing-text {
|
|
220
|
+
border-left: 4px solid white;
|
|
221
|
+
padding-right: 10px;
|
|
222
|
+
animation: typing 3s steps(40) 1s 1 normal both, blink 0.75s step-end infinite;
|
|
223
|
+
white-space: nowrap;
|
|
224
|
+
overflow: hidden;
|
|
225
|
+
display: inline-block;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
@keyframes typing {
|
|
229
|
+
from {
|
|
230
|
+
width: 0;
|
|
231
|
+
}
|
|
232
|
+
to {
|
|
233
|
+
width: 100%;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@keyframes blink {
|
|
238
|
+
50% {
|
|
239
|
+
border-color: transparent;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* Responsive */
|
|
244
|
+
@media (max-width: 768px) {
|
|
245
|
+
.hero-title {
|
|
246
|
+
font-size: 2rem;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.hero-subtitle {
|
|
250
|
+
font-size: 1rem;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.hero-buttons {
|
|
254
|
+
flex-direction: column;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.hero-btn {
|
|
258
|
+
width: 100%;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.hero-form {
|
|
262
|
+
flex-direction: column;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.hero-stats {
|
|
266
|
+
gap: 30px;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.stat h3 {
|
|
270
|
+
font-size: 2rem;
|
|
271
|
+
}
|
|
272
|
+
}
|