-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
177 lines (144 loc) · 7.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="image/iconWithLine.png">
<meta property="og:image" content="image/308x7178.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css">
<title>Home - Walled Lake Robotics</title>
<link rel="stylesheet" href="footer.css">
<link rel="stylesheet" href="nav.css">
<style>
.text-box {
margin-top: 20px;
margin-bottom: 20px;
margin-inline: auto;
}
.video {
position: relative;
}
#my-video {
position: relative;
right: 0;
bottom: 0;
width: 100%;
max-height: 60vh;
object-fit: cover;
}
.walls {
position: absolute;
font-size: 1.5vw;
top: 50%;
left: 50%;
color: #f1f1f1;
width: 90%;
padding: 20px;
text-align: center;
background-image: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), transparent, transparent, transparent);
transform: translate(-50%, -50%);
}
.walls h1 {
font-size: calc(19px + 1.3vw);
}
.teamhist {
text-align: center;
}
.info1 {
max-width: 50ch;
font-weight: normal;
font-size: 1.35em;
}
.othermed {
text-align: center;
}
.face {
left: 5%;
}
</style>
</head>
<body>
<nav class="topnav">
<a href="index.html" style="line-height: 24px; padding-top: 9px;"><img src="image/home.png" alt="Home logo" style="height:35px; width:35px;"></a>
<div class="mobile">
<img src="image/xicon.png" alt="x button" id="mobile-x-button" style="position: absolute; width: 30px; height: 30px; cursor: pointer;">
<a href="first.html">FIRST</a>
<a href="occra.html">OCCRA</a>
<a href="308.html">308</a>
<a href="7178.html">7178</a>
<a href="community.html">Community</a>
<a href="sponsors.html">Sponsors</a>
<a href="contact.html">Contact Us</a>
<a href="https://www.brodysonline.com/walledlakehsrobotics" target="_blank">Shop</a>
</div>
<a href="#" style="line-height: 24px; padding-top: 9px;" id="burger"><img src="image/burbur.png" alt="menu icon" style="height:35px; width:35px;"></a>
</nav>
<script src="js/nav.js"></script>
<div class="video">
<video autoplay muted loop id="my-video">
<source src="video/backgroundvideo.mp4" type="video/mp4">
</video>
<div class="walls">
<h1><span style="white-space: nowrap;">Walled Lake</span> Robotics</h1>
</div>
</div>
<script>
const video = document.getElementById("my-video");
// Wait for video metadata to load first
video.onloadedmetadata = function() {
// Get the duration of the video (in seconds)
let duration = video.duration;
// Set video to a random timestamp
video.currentTime = Math.random() * duration;
};
</script>
<div class="divider-bar"></div>
<div class="content">
<div class="text-box">
<h1 class="teamhist">About Walled Lake Robotics</h1>
<h2 class="info1">
Welcome to the official website for the robotics teams 308 and 7178! At Walled Lake Robotics, anyone can find a job on the team that they will enjoy, whether it’s
mechanical engineering, electrical engineering, marketing, CAD design, programming, and more.
Anyone from Walled Lake Western, Central, or Northern is welcome to become a part of our teams. If you would like to learn more or meet us, visit
our contact page.
</h2>
</div>
<div class="vertical-split" style="margin-inline: auto; border-style: dashed; max-width: 1200px;">
<div class="vertical-split-column">
<h1 class="teamhist" style="font-size: 3rem;">What is Robotics?</h1>
<div class="text-box" style="margin-top: 0px;">
<h2 class="info1">
Robotics is an after-school varsity sport in which groups of high school students, guided by experienced mentors, collaborate to build a robot that can compete in a season-specific game. Each season provides a new and unique challenge, ranging from launching balls into a goal to making your robot climb a bar.
</h2>
<h2 class="info1">
Walled Lake Robotics competes in two separate seasons: one in the fall (OCCRA) and one in the spring (FIRST). To learn more about our seasons, visit our <a href="occra.html">OCCRA</a> and <a href="first.html">FIRST</a> pages.
</h2>
</div>
</div>
<div class="vertical-split-column">
<img src="image/7178workingOnBot.jpg" alt="Students working on their robot in the workshop.">
</div>
</div>
</div>
<footer>
<ul class="social-icon">
<li class="social-icon__item">
<a class="social-icon__link" href="https://www.facebook.com/groups/972328127497050"><ion-icon name="logo-facebook"></ion-icon></a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" href="https://twitter.com/wl_robotics?lang=en"><ion-icon name="logo-twitter"></ion-icon></a>
</li>
</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="first.html">FIRST</a></li>
<li class="menu__item"><a class="menu__link" href="occra.html">OCCRA</a></li>
<li class="menu__item"><a class="menu__link" href="308.html">308</a></li>
<li class="menu__item"><a class="menu__link" href="7178.html">7178</a></li>
<li class="menu__item"><a class="menu__link" href="community.html">Community</a></li>
<li class="menu__item"><a class="menu__link" href="https://www.brodysonline.com/walledlakehsrobotics" target="_blank">Shop</a></li>
</ul>
<p>©2024 Walled Lake Robotics</p>
</footer>
</body>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</html>