-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
165 lines (129 loc) · 5.69 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
<html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Soil Life</title>
<meta name="" content="">
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body>
<main id="barba-wrapper barba-container">
<!-- Navigation Bar-->
<nav class="navbar navbar-toggleable-md fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="logo.svg" width="180" height="60" alt="">
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item ">
<a class="nav-link" href="index.html#aboutUs">about us </a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#sixFsOfSoil">soil matters</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#mediaContent">media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#getInvolved">get involved</a>
</li>
</ul>
</div>
</nav>
<!-- Jumbotron -->
<div class="container-fluid jumbotron">
<h2 class="jumboText">we all share<br>common ground.<br></h2>
<h3 class="jumboTear">get dirty. get connected.</h3>
</div>
<div class="container-fluid allConnected" id="allConnected" data-prev="index.htm#allConnected" data-next="healthySoils.html">
<!-- TODO: Set Text Color, Center & Animate transform on Scroll Down to smaller text and center of wheel -->
<div class="wheelText text-center">
<a class="nav prev" href="">
<a class="nav next" href="healthySoils.html">
<img src="arrow.png">
</a>
</div>
<!-- TODO: Add Icons, Set Positions (How to position divs in a circle about a center?), Reveal each div on Scroll Down -->
<div class="wheelItem" id="wheel"></div>
<!-- <div class="wheelItem" id="wheelHealthySoils"></div>
<div class="wheelItem" id="wheelHealthyPlants"></div>
<div class="wheelItem" id="wheelHealthyPeople"></div>
<div class="wheelItem" id="wheelHealthyCommunities"></div>
<div class="wheelItem" id="wheelHealthyEconomies"></div>
<div class="wheelItem" id="wheelHealthyPlanet"></div> -->
<div class="container-fluid sixFsOfSoil" id="sixFsOfSoil">
<a class="nav next" href="sixFsFood.html" style="margin-top: -25vh">
<img src="arrow.png">
</a>
<!-- TODO: Add Scroll Down to change between Icons, Text, and Color -->
<div class="sixFsContainer text-center" style="">
<img class="sixFsIcon" id="sixFsIcon" src='6Fs-Filter No Text.svg'>
<p class="text-center" id="fundamental" style="">
soils are fundamental to life on Earth.
<br>
if you <span id="changeText">Breathe Air/Eat Food/Wear Clothes</span>, you depend on soil.
</p>
<button type="button" class="btn" id="sixFsButton">find out how!</button>
</div>
</div>
<!-- TODO: Background Image, Video Player (video to be created)-->
<div class="container-fluid mediaContent" id="mediaContent">
<div class="soilGenesis">
</div>
<!-- <a class="nav next" id="test" href="videos.html">
<img src="arrow.png">
</a> -->
</div>
<div class="container-fluid digDeeper" id="dig1">
<a class="nav next" href="soilSpheres.html">
<img src="arrow.png">
</a> </div>
</div>
<!-- TODO: -->
<!-- TODO: -->
<div class="container-fluid getInvolved" id="getInvolved">
<div class="involvedItem " id="index1">
<a class="nav next" id="test" href="atHome.html">
<img src="arrow.png">
</a> </div>
</div>
<!-- TODO: Add Background Images, Text-->
<div class="container-fluid aboutUs" id="aboutUs">
</div>
</main>
</body>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 footer-left text-left" id="footerText">
<br>
<p> soil life is an organization based out of uc davis and supported <br>
by the Soils and Biogeochemistry graduate group.
<br><br>
we are on a mission to change the way
the world looks at soil </p>
</div>
<div class="col-md-4 justified-end text-right footer-right" style="textAli" id="footerTear">
<h2><span>stay connected</span>
</h2>
</div>
</div>
</div>
</footer>
<script src="nextprev.js"></script>
<script src="barba.js"></script>
<script src="scripts/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</html>