-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdonate.html
116 lines (107 loc) · 5 KB
/
donate.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
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donate Now</title>
<link rel="stylesheet" href="donate.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="logo">
<img src="images/greaur.png" alt="">
</div>
<ul class="nav-links">
<li><a href="#stories">Stories</a></li>
<li><a href="act.html">Act</a></li>
<li><a href="#explore">Explore</a></li>
</ul>
</nav>
<!-- Main Content -->
<div class="page-content container">
<div class="donate-banner">
<div class="donate-text">
<h1>You Can Help Protect Our Planet</h1>
<p>Your donation supports an independent environmental organization.</p>
</div>
</div>
<!-- Donation Form Section -->
<section class="donation-section">
<div class="left">
<div class="donation-info">
<p>Total Amount Donated: <span id="total-donated">$0</span></p>
<p>Your donation allows us to continue our vital work for a greener world.</p>
</div>
<form id="donation-form">
<label for="donation-amount">Enter Donation Amount ($):</label>
<input type="number" id="donation-amount" name="amount" required min="1">
<button type="submit">Donate Now</button>
</form>
</div>
<div class="right">
<img src="https://www.greenpeace.org/static/planet4-canada-stateless/2022/11/900e4336-gp0stpj03_web_size.jpg" alt="Donation Banner">
</div>
</section>
<!-- Our Focus Section -->
<section class="our-focus">
<h2>Our Focus:</h2>
<div class="focus-items">
<div class="focus-item">
<img src="https://www.greenpeace.org/static/planet4-canada-stateless/2024/02/f9211566-imageedit_1_7149884729-150x150.png" alt="Transforming Energy">
<h3>Transforming Energy</h3>
<p>We actively support renewable energy solutions and challenge fossil fuel industries.</p>
</div>
<div class="focus-item">
<img src="https://www.greenpeace.org/static/planet4-canada-stateless/2024/02/3e36aee6-imageedit_1_7093472969-150x150.png" alt="Living Sustainably">
<h3>Living Sustainably</h3>
<p>We work to change habits of unsustainable consumption and production to ensure we live within our planet's limits.</p>
</div>
<div class="focus-item">
<img src="https://www.greenpeace.org/static/planet4-canada-stateless/2024/02/f6e6f226-imageedit_1_3633749352-150x150.png" alt="Protecting Nature">
<h3>Protecting Nature</h3>
<p>A healthy environment is essential to a green and peaceful world. We help protect nature and its biodiversity.</p>
</div>
</div>
</section>
</div>
<footer id="footer">
<div class="container">
<div class="footer-content">
<!-- Contact Information -->
<div class="contact-info">
<h3>Contact Information</h3>
<p><strong>Email:</strong> <a href="mailto:[email protected]">[email protected]</a></p>
<p><strong>Phone:</strong> +1-123-456-7890</p>
<p><strong>Address:</strong> 123 Green Street, EcoCity, Earthland</p>
</div>
<!-- Links -->
<div class="links">
<h3>Links</h3>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
</ul>
</div>
<!-- Social Media -->
<div class="social-media">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="#" aria-label="Facebook">Facebook</a>
<a href="#" aria-label="Twitter">Twitter</a>
<a href="#" aria-label="Instagram">Instagram</a>
<a href="#" aria-label="LinkedIn">LinkedIn</a>
</div>
</div>
</div>
<!-- Footer Bottom -->
<div class="footer-bottom">
<p>© 2024 Green Aurora. All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="donate.js"></script>
</body>
</html>