-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
198 lines (192 loc) · 10.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CUSail | Home </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="./images/logos/boat.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/all.css">
<script defer src="./js/all.js"></script>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/animations.css">
<script defer src="./js/index.js"></script>
</head>
<body>
<header>
<nav id="top-navbar">
<a href="./index.html">
<img id="top-navbar-logo" src="./images/logos/justbigword.png" alt="CUSail Word Logo">
</a>
<div id="navbar-links-container">
<a class="onThisPage" href="./index.html">About</a>
<a class="notOnThisPage" href="./app/ourteam.html">Our Team</a>
<a class="notOnThisPage" href="./app/recruitment.html">Recruitment</a>
<a class="notOnThisPage" href="./app/fleet.html">Fleet</a>
<a class="notOnThisPage" href="./app/sponsorship.html">Sponsorship</a>
<a class="notOnThisPage" href="./app/gallery.html">Gallery</a>
<a class="notOnThisPage" href="./app/contact.html">Contact Us</a>
<a class="notOnThisPage" href="./app/givingday.html">Giving Day</a>
</div>
<img id="hamburger-icon" class="navhidden" src="./images/icons/Hamburger.svg" alt="hamburger icon">
</nav>
<nav class="navhidden" id="mobile-top-navbar">
<div id="mobile-navbar-links-container">
<a class="onThisPage" href="./index.html">About</a>
<a class="notOnThisPage" href="./app/ourteam.html">Our Team</a>
<a class="notOnThisPage" href="./app/recruitment.html">Recruitment</a>
<a class="notOnThisPage" href="./app/fleet.html">Fleet</a>
<a class="notOnThisPage" href="./app/sponsorship.html">Sponsorship</a>
<a class="notOnThisPage" href="./app/gallery.html">Gallery</a>
<a class="notOnThisPage" href="./app/contact.html">Contact Us</a>
<a class="notOnThisPage" href="./app/givingday.html">Giving Day</a>
</div>
</nav>
</header>
<main>
<div id="hero-image">
<div id="title">
<h1>CUSail</h1>
<h2>Cornell Autonomous Sailboat Project Team</h2>
</div>
</div>
<h3 id="about-us-header" class="section-header">About Us</h3>
<p class="section-desccription">CUSail, a registered student organization of Cornell University, is an engineering
project team that designs and manufactures an autonomous
sailboat to compete in the SailBot International Robotic Sailboat Regatta. In the long term, the team hopes to
construct a fleet of autonomous sailboats that can independently navigate across the world to collect oceanic
data. CUSail offers students across many disciplines the opportunity to apply what they have been learning in the
classroom to real world engineering problems. With over 30 members, the team combines cutting-edge technology with
advanced mechanical design to engineer a smarter and faster boat every year.</p>
<div id="metrics-container">
<div class="metric">
<img src="./images/icons/members-icon.svg" alt="Members Icon">
<h2>33</h2>
<p>Members</p>
</div>
<div class="metric">
<img src="./images/icons/majors-icon.svg" alt="Majors Icon">
<h2>13</h2>
<p>Majors across 3 colleges</p>
</div>
<div class="metric">
<img src="./images/icons/yearfounded-icon.svg" alt="Year Founded Icon">
<h2>2014</h2>
<p>Year Founded</p>
</div>
</div>
<div id="images-container">
<img class="pic" src="./images/index/dropping-boat.jpg" alt="Dropping boat in the water">
<img class="pic" src="./images/index/christroylake.jpg" alt="Chris and Troy by the lake">
<img class="pic" src="./images/index/electronics.jpg" alt="Closeup of boat electronics">
<img class="pic" src="./images/index/diane-testing.jpg" alt="Dropping boat in the water">
</div>
<h3 class="section-header">Sailbot</h3>
<p class="section-desccription">Each year in June, CUSail competes in the Sailboat International Robotic Sailing
Regatta. This contest helps the team evaluate the boats design and figure out what to improve on in future
iterations. All the events in the regatta are designed to test the mechanical, electrical, and algorithmic
components of the sailboat. This year, the competition will be from June 7-12 on Lake Attitash in Amesbury, MA.
</p>
<h3 class="section-header">Events</h3>
<div id="events-container">
<div class="event-card">
<img src="./images/index/cayuga-lake.jpg" alt="Cayuga Lake">
<h4>Fleet Race</h4>
<p>The sailboat sails in a loop around two buoys via remote control. The goal of this event is to demonstrate an
ability to operate the boat via remote control, as well as to judge the performance of the vessel.</p>
</div>
<div class="event-card">
<img src="./images/index/boat-drone2.jpg" alt="Boat in Cayuga Lake">
<h4>Endurance</h4>
<p>The sailboat sails autonomously around four buoys continuously for up to seven hours to demonstrate the
boat's endurance and ability to sail long distances.</p>
</div>
<div class="event-card">
<img src="./images/index/boat-closeup.jpg" alt="Boat Closeup">
<h4>Station Keeping</h4>
<p>The sailboat autonomously sails into a 40 m x 40 m box and must stay inside the box for five minutes, then
exit the box within 30 seconds. The goal of this event is to demonstrate the boat's ability to precisely
position itself and respond to commands.</p>
</div>
<div class="event-card">
<img src="./images/index/cayuga-lake.jpg" alt="Cayuga Lake">
<h4>Precision Navigation</h4>
<p>The sailboat starts autonomously traverses a route around buoys. The goal of this event is to demonstrate the
boat's ability to autonomously navigate a course with obstacles.</p>
</div>
<div class="event-card">
<img src="./images/index/boat-drone2.jpg" alt="Boat in Cayuga Lake">
<h4>Search</h4>
<p>The sailboat must autonously find an orange buoy placed in a 100 m search area, touch the buoy, and signal
that it has done so. The goal of this event is to demonstrate the boat�s ability to autonomously find an
object.</p>
</div>
</div>
<h3 class="section-header">Long Term Goals</h3>
<div id="goals-container">
<div>
<img src="./images/index/goaltimeline.png" alt="Goal timeline">
</div>
<div id="description-container">
<div class="goal">
<h4 id="current-goal">Sail the Length of Cayuga Lake</h4>
<p id="cayuga-description">The first goal in our series of long-term goals is to sail from the southern end to
the northern end of Cayuga Lake. Cayuga Lake is just under 40 miles long, and we would be able to test our
navigation algorithm on a larger scale. This is the goal that our team is currently working towards.</p>
</div>
<div class="goal">
<h4>Cross the Atlantic Ocean</h4>
<p id="ocean-description">We want to sail across the Atlantic Ocean from the east coast of the United States
to the west coast of Europe. We plan to sail from New York to Portugal to demonstrate our boat is robust
enough to survive ocean and weather conditions and our navigation algorithm can successfully navigate long
distances.</p>
</div>
<div class="goal">
<h4>Empower Oceanic Research</h4>
<p>After we perfect or mechanical design and navigation algorithm, we hope to experiment with applications of
our boat for oceanic research using sensors and other scientific equipment. This would unlock a world of
research opportunities from monitoring weather trends to tracking whale migration patterns.</p>
</div>
</div>
</div>
</main>
<footer>
<nav id="bottom-navbar">
<div id="bottom-navbar-container">
<div id="follow-us">
<p class="footer-heading">Follow Us</p>
<div class="media-links footer-text-container">
<!-- <a target="_blank" href="https://www.facebook.com/cusail/">
Facebook
<img id="facebook-icon" class="footer-icon" src="./images/icons/facebook.svg" alt="Facebook Icon">
</a> -->
<a target="_blank" href="https://www.instagram.com/cusail/">
Instagram
<img id="instagram-icon" class="footer-icon" src="./images/icons/instagram.svg" alt="Instagram Icon">
</a>
<!-- <a target="_blank" href="https://www.linkedin.com/company/cusail/">
LinkedIn
<img id="linkedin-icon" class="footer-icon" src="./images/icons/linkedin.svg" alt="LinkedIn Icon">
</a> -->
<a target="_blank" href="https://www.youtube.com/channel/UCYLMLKmgTJUMDos3ekQzPNg">
Youtube
<img id="youtube-icon" class="footer-icon" src="./images/icons/youtube.svg" alt="Youtube Icon">
</a>
</div>
</div>
<div id="contact-us">
<p id="contact-us-heading" class="footer-heading">Contact Us</p>
<div class="footer-text-container">
<p class="contact-us-subheader">General:</p>
<a target="_blank" href="mailto:[email protected]">[email protected]</a>
<p class="contact-us-subheader">Sponsorship Inquiry:</p>
<a target="_blank" href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
<a href="./index.html"><img id="footer-logo" src="./images/logos/footer-boat.png" alt="boat logo"></a>
<img id="waves-img" src="./images/icons/waves.png" alt="waves">
</nav>
</footer>
</body>