-
Notifications
You must be signed in to change notification settings - Fork 0
/
involved.html
172 lines (158 loc) · 9.34 KB
/
involved.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get Involved</title>
<meta charset="UTF-8">
<!--I add user-scalable = no so mobile devices view remove scrolling sideways-->
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
<!-- W3 CSS -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Poppins&family=Raleway:wght@400;500;600;700&family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="hero-involved" class="hero-75">
<!-- Possible thing to add: make the navbar have a fixed position then solid background when you scroll down instead of disappearing -->
<div id="header">
<div class="navbar transparent w3-bar w3-mobile w3-left-align w3-large">
<a href="index.html"><img src="images/logo-edited.png" id="logo" class="navbar-item" alt="logo"></a>
<a href="about.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48 ">About Us</a>
<a href="involved.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48 ">Get Involved</a>
<a href="advocacy.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48 ">Our Advocacy</a>
<a href="donate.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48">Donate</a>
<a href="signup.html" class="navbar-item navbar-btn w3-hide-small w3-hide-medium w3-padding-48 w3-right">Begin Your Legacy</a>
<!-- Navbar for mobile -->
<!-- NOTE: navbar turns white when we press this, so we'll have to change it -->
<a class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-48 w3-hover-white w3-large" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<div id="navMenu" class="w3-bar-block w3-white w3-hide w3-hide-large w3-large">
<a href="about.html" class="w3-bar-item w3-button w3-padding-large">About Us</a>
<a href="involved.html" class="w3-bar-item w3-button w3-padding-large">Get Involved</a>
<a href="advocacy.html" class="w3-bar-item w3-button w3-padding-large">Our Advocacy</a>
<a href="signup.html" class="w3-bar-item w3-button w3-padding-large">Begin Your Legacy</a>
<a href="donate.html" class="w3-bar-item w3-button w3-padding-large">Donate</a>
</div>
</div>
</div>
<div class="bottomleft"><h1 class="hero-h1">Get Involved</h1></div>
</section>
<section id="legacy-page">
<h1 class="section-heading-h1 w3-center text-white container-padding">Events and Campaigns</h1>
<div class="ticket">
<div class="ticket-box">
<div class="text-container">
<h1 class="ticket-title">Legacy Camp Wave 8</h1>
<p class="ticket-date no-margin">MM/DD/YYYY - MM/DD/YYYY</p>
<p class="ticket-location">
<i class="fas fa-map-marker-alt fa-2xl"></i>
Bacolod City, Negros Occidental
</p>
<p class="ticket-des">The eighth annual SLMi Legacy Camp is here! Develop your leadership and advocacy-building skills as you listen to talks by industry professionals from multiple fields: medicine, engineering, law, business, and more. By the end of the program, you'll be prepared to make an impact, change lives, and pay it forward.</p>
<a href="#" class="card-btn">LEARN MORE</a>
</div>
<div class="ticket-image" id = "ticket2"></div>
</div>
</div>
<div class="ticket">
<div class="ticket-box">
<div class="text-container">
<h1 class="ticket-title">Save Negros Forests</h1>
<p class="ticket-date no-margin">MM/DD/YYYY - MM/DD/YYYY</p>
<p class="ticket-location">
<i class="fas fa-map-marker-alt fa-2xl"></i>
Don Salvador Benedicto, Negros Occidental
</p>
<p class="ticket-des">The aim of our latest campaign is to combat the prevalent issue of deforestation in many forests throughout the region. This will be accomplished through a series of educational social media posts, online and in-person seminars, and reforestation campaigns that will take place in Don Salvador Benedicto, Negros Occidental.</p>
<a href="#" class="card-btn">LEARN MORE</a>
</div>
<div class="ticket-image" id="ticket1"></div>
</div>
</div>
<div class="ticket">
<div class="ticket-box">
<div class="text-container">
<h1 class="ticket-title">Love in Time of Calamity</h1>
<p class="ticket-date no-margin">MM/DD/YYYY - MM/DD/YYYY</p>
<p class="ticket-location">
<i class="fas fa-map-marker-alt fa-2xl"></i>
Negros Occidental
</p>
<p class="ticket-des">In these trying times, the poor and marginalized need our help more than ever. Join us as we conduct outreaches for communities throughout Bacolod City and neighboring areas. If you live far away, we also accept monetary and in-kind donations that will be used to fund the program and purchase donation goods.</p>
<a href="#" class="card-btn">LEARN MORE</a>
</div>
<div class="ticket-image" id="ticket3"></div>
</div>
</div>
<a href="advocacy.html"></a>
<p id="fb-link" class="no-margin">Check our <a href="https://www.facebook.com/I-Am-A-Legacy-2080852895460859" id="actual-fblink">Facebook Page</a> for more information</p>
</section>
<footer class="w3-container">
<div class="w3-content w3-row">
<div class="w3-quarter">
<h5 class="footer-link"><a href="index.html">Home</a></h5>
<h5 class="footer-link"><a href="advocacy.html">Our Advocacy</a></h5>
</div>
<div class="w3-quarter">
<h5 class="footer-link"><a href="about.html">About Us</a></h5>
<h5 class="footer-link"><a href="donate.html">Donate</a></h5>
</div>
<div class="w3-quarter">
<h5 class="footer-link"><a href="involved.html">Get Involved</a></h5>
<h5 class="footer-link"><a href="signup.html">Begin Your Legacy</a></h5>
</div>
<div class="w3-quarter">
<form action="#">
<h6>Subscribe to the Legacy Newsletter </h6>
<input class="w3-input" type="text" placeholder="Email">
<input id="newsletter-submit" type="submit" value="Sign Up">
</form>
</div>
</div>
<div class="w3-content w3-row">
<div class="w3-col l3 m3">
<h3>Contact Us</h3>
<h6>Email: [email protected]</h6>
<h6>Contact No.: +63 961 044 2124</h6>
<h6>Address: Purok Star Apple 2, Brgy. 27, Bacolod, Negros Occidental</h6>
</div>
<div class="w3-col l3 m3">
<div class="social-icons">
<h3>Find Us Online</h3>
<div class="wrapper">
<div class="icon facebook">
<div class="tooltip">Facebook</div>
<span><a href="https://www.facebook.com/I-Am-A-Legacy-2080852895460859"><i class="fab fa-facebook-f"></a></i></span>
</div>
<div class="icon twitter">
<div class="tooltip">Twitter</div>
<span><i class="fab fa-twitter"></i></span>
</div>
<div class="icon instagram">
<div class="tooltip">Instagram</div>
<span><i class="fab fa-instagram"></i></span>
</div>
<div class="icon youtube">
<div class="tooltip">Youtube</div>
<span><i class="fab fa-youtube"></i></span>
</div>
</div>
</div>
</div>
<div class="w3-col l4 m6">
<h3>Attributions</h3>
<h6>Icons created by Freepik, juicy_fish, Smashicons, Nikita Golubev, Gajah Mada, Aficons Studio, Creative Stall, & flatart_icons - Flaticon</h6>
</div>
</div>
<div class="w3-content">
<div class="flex-center">
<h6>Copyright © 2022 I Am A Legacy. All Rights Reserved.</h6>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>