-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (127 loc) · 6.89 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- favicon -->
<!-- css references -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/home.css">
<!-- <link rel="stylesheet" href="css/test.css">-->
<!-- <link rel="stylesheet" href="css/scroll.css">-->
<link rel="stylesheet" href="css/sun.css">
<!-- fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Righteous|Song+Myung" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quattrocento:400,700" rel="stylesheet">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="img/icons/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon/favicon-16x16.png">
<link rel="manifest" href="img/icons/favicon/site.webmanifest">
<link rel="mask-icon" href="img/icons/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> White Oak Project </title>
</head>
<body>
<main class="main">
<div class="filter"></div>
<img src="img/tree.svg" class="tree-background">
<div class="nav-dots">
<ul>
<li class="current"><a href="#" onclick="scrollToPage(0)" class="dot dot--current"></a></li>
<li><a href="#" onclick="scrollToPage(1)" class="dot"></a></li>
<li><a href="#" onclick="scrollToPage(2)" class="dot"></a></li>
</ul>
</div>
<section class="section welcome first" id="first">
<div class="sun">
<div class="ray_box">
<div class="ray ray1"></div>
<div class="ray ray2"></div>
<div class="ray ray3"></div>
<div class="ray ray4"></div>
<div class="ray ray5"></div>
<div class="ray ray6"></div>
<div class="ray ray7"></div>
<div class="ray ray8"></div>
<div class="ray ray9"></div>
<div class="ray ray10"></div>
</div>
</div>
<h1 class="title fadeUp">The White Oak Project</h1>
<!-- adopted from Naoya https://codepen.io/nxworld/pen/OyRrGy -->
<div class="scroll-1__container">
<a href="#" class="scroll-1 scroll-1--dark" onclick="scrollDown()">
<div class="scroll-1__circle scroll-1__circle--dark"></div><span class="scroll-1__arrow scroll-1__arrow--dark"></span>Scroll
</a>
</div>
<a class="link cloud-link" href="photos/"><div class="cloud-btn cloud-btn--left"><span class="cloud-btn__span">Photos</span></div></a>
<a class="link cloud-link" href="resources/"><div class="cloud-btn cloud-btn--right"><span class="cloud-btn__span">Resources</span></div></a>
</section>
<div class="second-wrapper">
<!--<img src="img/dirt.jpg" class="dirt-background-2">-->
<section class="section second" id="second">
<div class="section-background sb--second"></div>
<!-- <img src="img/dirt.png" class="dirt-background">-->
<!-- <div class="section-background dirt-background-cover"></div>-->
<!-- <video class="brewerton-mp4" id="brewerton-mp4">-->
<!-- <source src="img/brewerton.mp4" type="video/mp4">-->
<!-- </video>-->
<span class="mission-title">Our mission:</span>
<p class="mission mission--1"><i>to restore the presence of white oak and white pine trees in New York State's Canal Regions</i></p>
<ol class="mission mission-goals">
<li>To replenish the region with a future of white oak and white pine trees of ecological proportion and cultural significance</li>
<li>To foster strong awareness and appreciation of the unique characteristics and indispensable value of white oaks and white pines among residents and visitors of the canal region</li>
<li>To collect seeds, produce seedlings for plantings, and engage the support and collaboration of individuals and organizations in the canal region</li>
</ol>
<a href="resources/" class="link mission-link"><i>See our full mission statement</i></a>
<div class="scroll-1__container">
<a href="#" class="scroll-1 scroll-1--light" onclick="scrollDown()">
<div class="scroll-1__circle scroll-1__circle--light"></div><span class="scroll-1__arrow scroll-1__arrow--light"></span><span class="scroll__text">Scroll</span>
</a>
</div>
</section>
</div>
<section class="section third" id="third">
<div class="section-background sb--third"></div>
<div class="home-nav">
<a class="home-nav-link" href="photos/"><div class="home-nav-item">
<h2 class="home-nav-item__title">Photos</h2>
</div></a>
<a class="home-nav-link" href="resources/"><div class="home-nav-item">
<h2 class="home-nav-item__title">Resources</h2>
</div></a>
<a class="home-nav-link" href="team/"><div class="home-nav-item">
<h2 class="home-nav-item__title">Team</h2>
</div></a>
</div>
<div class="contact-container">
<div class="contact">
<form action="https://formspree.io/whiteoakprojectmail@gmail.com" method="POST">
<div class="flex-center">
<span class="contact__text">Contact us:</span>
<input type="text" name="name" placeholder="name" class="input input--contact contact_e">
<input type="email" name="email" placeholder="email" class="input input--contact contact_e">
</div>
<div class="flex-center">
<textarea type="text" name="message" placeholder="message" class="input input--contact contact_e"></textarea>
<input name="submit" type="image" src="img/icons/send.svg" alt="send" class="contact-submit contact_e" value="send">
</div>
</form>
</div>
</div>
</section>
<!--div class="credit">
<div>Icons made by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
<a href="https://pngtree.com/free-vectors">free vectors from pngtree.com</a>
<span class="credit__text"><a href="http://cameronabbot.ml" class="credit__link" target="_blank">Site created by Cameron Abbot</a></span>
</div-->
</main>
<!-- js, jquery references -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/scroll.js"></script>
</body>
<!-- Created by Cameron Abbot -->
</html>