-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (102 loc) · 3.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ganas - Adelante con Fuerza</title>
<meta name="description" content="Ganas - Adelante con Fuerza">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="Assets/favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Hero Section -->
<header id="hero">
<h1>Échale Ganas</h1>
<p id="quote">"Success is not final, failure is not fatal: It is the courage to continue that counts."</p>
<button id="new-quote-btn">
<img src="Assets/app_icon.svg" alt="Échale Ganas" />
</button>
<form id="signup-form">
<input
type="email"
id="email-signup"
name="email"
placeholder="Enter your email to get updates"
required
aria-label="Enter your email"
pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$"
>
<button type="submit" id="signup-btn" class="cta-btn">Learn More</button>
<p id="form-feedback" aria-live="polite" class="hidden"></p> <!-- Feedback placeholder -->
</form>
<div class="scroll-indicator" aria-hidden="true">↓↓</div>
<!-- Filler Text -->
<div id="filler-text" class="filler-text">
<p>‘Échale Ganas’ isn’t just encouragement—it’s a mindset.</p>
<p>Turn wisdom into action and make your dreams come true.</p>
<h3>Coming Soon!</h3>
<p>The Ganas app rewards you for achieving your goals on your own terms.</p>
<p>Prove to mom que si puedes. <strong>Sign up to learn more.</strong></p>
</div>
</header>
<!-- Main Content -->
<main>
<!-- Feature Highlights Section -->
<section id="features">
<div class="feature">
<img src="Assets/piggy-bank.svg" alt="Con Ganas, Ganas dinero Icon" width="100" height="100">
<h2>Ganas Dinero</h2>
<p><strong>Grow your money con Ganas.</strong> Control your finances and build your future.</p>
</div>
<div class="feature">
<img src="Assets/pilas_icon.svg" alt="Ponte las Pilas Icon" width="100" height="100">
<h2>Ponte las Pilas</h2>
<p><strong>Motivación para cada día.</strong> Stay inspired and keep moving forward.</p>
</div>
<div class="feature">
<img src="Assets/Trophy_icon.svg" alt="Ganas Icon" width="100" height="100">
<h2>Rewards</h2>
<p><strong>Set goals con Ganas.</strong> Track progress and earn rewards for your achievements.</p>
</div>
</section>
</main>
<!-- Bottom Sign-Up Section -->
<section id="bottom-signup" class="signup-section">
<h2>Don’t Miss Out!</h2>
<p>Sign up below to stay updated and be the first to know when Ganas launches!</p>
<form id="bottom-signup-form" class="signup-form">
<input
type="email"
id="bottom-email-signup"
name="email"
placeholder="Enter your email"
required
aria-label="Enter your email"
pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$"
>
<button type="submit" id="bottom-signup-btn" class="cta-btn">Sign Up</button>
<p id="bottom-form-feedback" aria-live="polite" class="hidden"></p> <!-- Feedback placeholder -->
</form>
</section>
<!-- Footer Section -->
<footer>
<div class="footer-content">
<p>Follow Us:</p>
<div class="social-icons">
<a href="#" aria-label="Facebook">
<img src="Assets/facebook_icon.svg" alt="Facebook Icon" width="30" height="30">
</a>
<a href="#" aria-label="Twitter">
<img src="Assets/twitter_icon.svg" alt="Twitter Icon" width="30" height="30">
</a>
<a href="#" aria-label="Instagram">
<img src="Assets/instagram_icon.svg" alt="Instagram Icon" width="30" height="30">
</a>
</div>
<p>© 2024 Ganas. All Rights Reserved.</p>
<a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
</div>
</footer>
<script src="scripts.js" defer></script>
</body>
</html>