-
Notifications
You must be signed in to change notification settings - Fork 0
/
support.html
187 lines (170 loc) · 6.72 KB
/
support.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Surf Groove Conservation Society</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="shortcut icon" type="image/jpg" href="img/favicon.ico" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="scss/custom.css">
</head>
<body>
<!-- mobile nav -------------------------------------------------------->
<div class="mobile-nav">
<a href="index.html">
<img class="mobile-logo" src="img/logo.svg" alt="Surflove Logo">
</a>
<i class="fa fa-bars blue-hover" aria-hidden="true"></i>
<!-- Mobile Slide Out -->
<div class="mobile-slide-out">
<ul role="navigation">
<li class='closeMobileMenu'>
<i class="fa fa-times" aria-hidden="true"></i>
</li>
<a href="#">
<li>About</li>
</a>
<a href="current-campaigns.html">
<li>News</li>
</a>
<a href="support.html">
<li>Support Us</li>
</a>
</ul>
</div>
</div>
<!-- role for screen readers, across browsers -->
<nav role="navigation">
<div class="flex-container">
<a href="index.html">
<img class='logo' src="img/logo.svg" alt="SurfLove Logo">
</a>
<a class="blue-hover" href="#">About</a>
<div class="dropdown-menu">Our Work
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="dropdown-menu-inner">
<a href="current-campaigns.html">
<li>News</li>
</a>
<li><a href=""></a>Archive</li>
</ul>
</div>
<a href="support.html">Support</a>
<a href="#">
<div class="btn-primary">
Donate
</div>
</a>
</nav>
</div>
<!-- Hero section-------------------------------------------------------------------->
<div class="hero-section support-hero">
<div class="cta">
<h1>How You Can Help</h1>
</div>
</div>
<!-- Member Section------------------------------------------------------------------->
<div class="member-section">
<div data-aos="fade-right" data-aos-duration="1500" class="black-box">
<h2>Become a member</h2>
<p>If you really want to get behind us and give us your support, become a member.
<br><br>
Members receive regular email news updates on what is happening, keeping you posted. Click Join now for mebership options</p>
<div class="btn-primary">
Join Now
</div>
</div>
</div>
<!-- Merch Section------------------------------------------------------------------------------->
<div class="merch-section">
<div class="flex-child">
<div data-aos="fade-left" data-aos-duration="1500" class="merch-text">
<h3>Wear it with Pride</h3>
<p>Top quality T-shirts with stand out NZ surfing design for only NZ$25 plus NZ$5 postage.</p>
<div class="btn-primary">
Shop Now
</div>
<p class='fine-print'>(note: we can only send within NZ, email us if you want information about posting internationally).</p>
</div>
</div>
<div class="merch-image">
<img class="t-shirt-img flex-child" pic src="img/t-shirt.png" alt="Picture of a woman in a surfgroove protection t-shirt">
</div>
</div>
<!-- Donate section-------------------------------------------------------------------------->
<div class="donate-section">
<div data-aos="fade-up" data-aos-duration="2000" class="black-box">
<h2>Donate</h2>
<p>By making a donation to the Surfgroove you are empowering us to keep doing what we do, looking after our oceans and our surbreaks
<br><br>You can donate any amount, anthing you are able to donate to us will be hugely appreciated.
</p>
<div class="btn-primary">
Donate
</div>
</div>
</div>
<!-- Footer------------------------------------------------------------------->
<div class="footer support-footer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#1f1f1f" fill-opacity="1" d="M0,256L80,234.7C160,213,320,171,480,181.3C640,192,800,256,960,272C1120,288,1280,256,1360,240L1440,224L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z">
</path>
</svg>
<!-- Text part of footer ---------------------------------------------------------->
<div class="footer-main top-20">
<ul class="footer-col">
<li>
<h5>Main Menu</h5>
</li>
<a href="#">
<li>About</li>
</a>
<a href="current-campaigns.html">
<li>Our Work</li>
</a>
<a href="support.html">
<li>Support</li>
</a>
<a href="news.html">
<li>News</li>
</a>
</ul>
<ul class="footer-col">
<li>
<h5>Quick Links</h5>
</li>
<li><a href="#"></a>Our Friends</li>
<li><a href="#"></a>Our Constitution</li>
<li><a href="#"></a>Submssion Docs</li>
<li><a href="#"></a>Volunteer</li>
</ul>
<div class="footer-col footer-right">
<h5>Sign Up To Our Newsletter</h5>
<label for="sign-up">Your Email</label>
<div class="sign-up">
<input type="text" name="sign-up" placeholder=""="">
<div class="btn-newsletter">Sign Up</div>
</div>
<h5 class="add-20">Contact</h5>
<p class="top-20">info@[email protected]</p>
<div class="text-align">
<h5>Stay Social</h5>
<i class="blue-hover socials fa fa-facebook-square" aria-hidden="true"></i>
<i class="blue-hover socials fa fa-instagram" aria-hidden="true"></i>
<i class="blue-hover socials fa fa-twitter" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
<!-- My Script -->
<script src="js/script.js" charset="utf-8"></script>
<!-- Fade Effect -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
</html>