This repository has been archived by the owner on Oct 30, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·290 lines (258 loc) · 14.3 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
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en">
<head>
<!--Gottlieb-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Gottlieb-->
<script src="vendors/js/jquery.collagePlus.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="res/css/style.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>NCA</title>
</head>
<body>
<header class="head">
<nav class="header_nav" style="position:fixed; width: 100%;">
<div class="nav">
<ul class="header-nav">
<li><a class="text contactExit" style="margin-left:40px;margin-right:20px;" href="#form-main">Contact us</a></li>
<li><a class="text" href="external_donations.html">Donations</a></li>
<ul class="main-nav">
<li><a class="text cd-signup" href="#0">Sign up</a></li>
<li><a class="text cd-signin" href="#0">Login</a></li>
</ul>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Welcome to the Namibian Community in the Americas. <br>Welcome to your home away from home.</h1>
</div>
</header>
<section class="section-features">
<div class="rows">
<h2>NCA as a community</h2>
<p class="long-copy">The amount of Namibians entering the Americas has been growsing over the years, and with that has come a need for organization and unity amongst the countrymen and countrywomen.
With the aim to unite us as individuals outside the motherland, the idea of an NCA group was born, with the following mission and objectives:
</p>
</div>
<div class="rows" style="text-align: center">
<div class="col span-1-of-3 box wow shake" data-wow-delay=".5s">
<i class="fa fa-calendar fa-3x icon-big"></i>
<h3>Annual Mettings</h3>
<p>
Convene annual get-together of Namibians in the Americas. </p>
</div>
<div class="col span-1-of-3 box wow shake" data-wow-delay=".5s">
<i class="icon-big fa fa-users fa-3x"></i>
<h3>Community Communications</h3>
<p>Maintain ongoing communication among one another</p>
</div>
<div class="col span-1-of-3 box wow shake" data-wow-delay=".5s">
<i class="fa fa-globe fa-3x icon-big"></i>
<h3>Home away from Home</h3>
<p>Be positive and active participants in Namibia's development, with the idea that Namibians are valuable to Namibia and Namibia is valuable to Namibians.</p>
</div>
<div>
<br/>
<p>The Mission of the Organization is to build community and a sense of unity among Namibians. It wishes to attract, manage and disburse resources that will contribute towards the development of Namibians.</p>
</div>
</div>
</section>
<section class="section-features" style="padding-bottom: 0;">
<div class="clearfix ">
<img src="res/img/collage1.jpg" alt="Autumn pumpkin soup" style="max-width: 100%;height: auto;width: auto; padding-bottom: 0;">
</div>
</section>
<section class="section-steps">
<div class="rows">
<h2>Namibia</h2>
</div>
<div class="rows">
<p>
Located in South-West Africa, nestled cozily against the chilly Atlantic Ocean, Namibia is a country with diverse cultures, landscapes, and wildlife. This hidden gem is home to the Big Five [Game]- Elephants,
Lions, Rhinos, Water Buffalos, and Cheetahs; and approximately 2.1 million inhabitants. Even though it boasts an area of 825,615 km2/318,696sq mi, Namibia is one of the least densely populated countries in the world.
With more than over 5 major ethnic groups, and over 10 languages and dialects, this country both enjoys and offers great cultural interaction as part of daily life. This infused cultural experience, set in an ever
modernizing land, makes those from it proud to call in Home.
</p>
</div>
<div style="margin-top: 40px">
<img class="globe" src="https://upload.wikimedia.org/wikipedia/commons/3/31/Namibia_on_the_globe_%28Zambia_centered%29.svg" align="middle" alt="Namibia globe" style="width:304px;height:228px;">
</div>
</section>
<section class="contact">
<div id="form-main">
<h2 style="color: white">Contact us</h2>
<div id="form-div">
<form class="form" id="form1" style="background-color:black">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input class="wow shake" data-wow-delay="1s" type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
</div>
</section>
<!-- The pop-up modal code is here. Ask Gottlieb.-->
<div class="cd-user-modal"> <!-- this is the entire modal form, inclusive of background -->
<div class="cd-user-modal-container"> <!-- this is the container wrapper -->
<ul class="cd-switcher">
<li><a href="#0">Login</a></li>
<li><a href="#0">Sign up</a></li>
</ul>
<div id="cd-login"> <!-- log in form -->
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="signin_email">E-mail</label>
<input class="full-width has-padding has-border" id="signin_email" name="signin_email" type="email" placeholder="E-mail">
<span class="cd-error-message">Please enter a valid email!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="signin_password">Password</label>
<input class="full-width has-padding has-border" id="signin_password" name="signin_password" type="text" placeholder="Password">
<a href="#0" class="hide-password">Hide</a>
<span class="cd-error-message">Please enter the password!</span>
</p>
<p class="fieldset">
<input class="full-width" type="submit" value="Login">
</p>
<!-- The "OR" line code for the login. -->
<div style="text-align: center; margin-top: 20px; color: #808080; font-variant: small-caps;">
<hr style="margin-bottom: -20px; height: 0; border: 0; border-top: 1px solid #e6e6e6;">
<div style="display: inline-block; position: relative; padding: 10px; background-color: #fff;">OR</div>
</div>
<!-- The "OR" line code for the login. -->
<!-- FACEBOOK LOGIN -->
<p class="fieldset" style="text-align: center;">
<a href="#facebook-link" class="sc-btn sc--facebook">
<span class="sc-icon">
<svg viewBox="0 0 33 33" width="25" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path d="M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z"></path>
</g>
</svg>
</span>
<span class="sc-text"><b>Login via Facebook</b></span>
</a>
</p>
</form>
<p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
<!-- Hide close button, but look to incorporate once responsive design is complete. -->
<!-- <a href="#0" class="cd-close-form">Close</a> -->
</div> <!-- cd-login -->
<div id="cd-signup"> <!-- sign up form -->
<form class="cd-form">
<!-- FACEBOOK Registration -->
<p class="fieldset" style="text-align: center;">
<a href="#facebook-link" class="sc-btn sc--facebook">
<span class="sc-icon">
<svg viewBox="0 0 33 33" width="25" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path d="M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z"></path>
</g>
</svg>
</span>
<span class="sc-text"><b>Signup via Facebook</b></span>
</a>
</p>
<!-- The "OR" line code for the signup. -->
<div style="text-align: center; margin-top: 20px; color: #808080; font-variant: small-caps;">
<hr style="margin-bottom: -20px; height: 0; border: 0; border-top: 1px solid #e6e6e6;">
<div style="display: inline-block; position: relative; padding: 10px; background-color: #fff;">OR</div>
</div>
<!-- The "OR" line code for the signup. -->
<p class="fieldset">
<label class="image-replace cd-fullName" for="signup_fullname">First Name</label>
<input class="full-width has-padding has-border" id="signup_fullname" name="signup_fullname" type="text" placeholder="Full Name">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-email" for="signup_email">E-mail</label>
<input class="full-width has-padding has-border" id="signup_email" name="signup_email" type="email" placeholder="E-mail">
<span class="cd-error-message">Please enter a valid e-mail!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="signup_password">Password</label>
<input class="full-width has-padding has-border" id="signup_password" name="signup_password" type="text" placeholder="Password">
<a href="#0" class="hide-password">Hide</a>
<span class="cd-error-message">Please enter a password. You'll need it!</span>
</p>
<p class="fieldset gender" for="sex">
<input type="radio" name="sex" id="sex" value="female"> Female
<input type="radio" name="sex" id="sex" value="male"> Male
</p>
<p class="fieldset terms">
<input type="checkbox" id="accept-terms">
<label for="accept-terms">I agree to the <a href="#0">Terms</a> of usage and <a href="#0">Privacy Policy</a>.</label>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Create account">
</p>
</form>
<p class="cd-form-bottom-message"><a href="#0">Already have an account? Login</a></p>
<!-- Hide close button, but look to incorporate once responsive design is complete. -->
<!-- <a href="#0" class="cd-close-form">Close</a> -->
</div> <!-- cd-signup -->
<div id="cd-reset-password"> <!-- reset password form -->
<p class="cd-form-message">Forgot your password? Please enter your email address. You will receive a link to reset your password.</p>
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="reset-email">E-mail</label>
<input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Reset password">
</p>
</form>
<p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
</div> <!-- cd-reset-password -->
<a href="#0" class="cd-close-form">Close</a>
</div> <!-- cd-user-modal-container -->
</div> <!-- cd-user-modal -->
<!-- This is the end of pop-up modal code. Ask Gottlieb. -->
<script src="js/wow.min.js"></script> <!-- Find out from OP what this is...-->
<script src="vendors/js/modernizr.js"></script> <!-- Modernizr JS. Gottlieb addition. -->
<script src="res/js/main.js"></script> <!-- Gem jQuery. Gottlieb addition. -->
<script>
new WOW().init();
</script>
<script>
// I would like to remove the "fixed" header tab once you reach the conatct us section, so that picture displays in full.
var a = $(".nav").offset().top;
$(document).scroll(function(){
if($(this).scrollTop() > 0){
$('.nav').css({"background":"rgba(255, 255, 255, 0.95)", "border-bottom":"1px solid #eeeeee","transition":"background-color 1s"});
$('.text').css({ "color":"gray","transition":"color 0.9s"});
}else{
$('.nav').css({"background":"transparent","border":"none"});
$('.text').css({"color":"white"});
}
});
</script>
<script>
/*Credits: http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom */
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
//alert("You are near the bottom!");
$('.nav').css({"background":"transparent","border":"none"});
$('.text').css({"color":"white","transition":"color 0.5s"});
}
});
</script>
</body>
</html>