-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
204 lines (185 loc) · 9.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5431 Titan Robotics</title>
<meta name="description" content="FRC 5431 Titan Robotics strives to develop student leaders by collaborating to solve complex problems.">
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!--stuff added specifically for slider-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="/img/universal/titlelesslogo.png">
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
</head>
<body>
<!--Navigation bar-->
<div id="navbar"></div>
<main>
<!--Top banner-->
<section id="banner">
<div id="index-banner-image" class="rellax" data-rellax-speed="-1"></div>
<div id="arrowdown">
<a href="#slider"><span></span></a>
</div>
</section>
<div id="slider" class="carousel slide carousel-fade d-none d-md-block" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" id="activeOnLoad">
<!-- get the ID -->
<div class="item-inner" style="background-image: url('img/universal/5431\ number\ sign.jpg');"></div>
</div>
<div class="carousel-item">
<div class="item-inner" style="background-image: url('img/universal/frc\ event.jpg')"></div>
</div>
<div class="carousel-item">
<div class="item-inner" style="background-image: url('img/about/2020/Hyperion\ shooting.jpg');"></div>
</div>
<div class="carousel-item">
<div class="item-inner" style="background-image: url('img/universal/hat\ construction.jpg');"></div>
</div>
</div>
<a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<!-- /.carousel -->
<!--End of slider-->
<!--Everything below the slider-->
<section id="index-content">
<div class="container-fluid pb-0 pb-md-4">
<!--Three boxes containing information about FIRST, PAHS and NTX-->
<div class="card-group pt-3">
<div class="card p-2 p-lg-4" id="titan-blue">
<div class="mt-1">
<img class="card-img-overlay d-block d-md-none mh-100 mw-100" src="img/Logos/FRC_condensed.png" alt="FIRST Robotics (FRC)">
<img class="card-img-overlay d-none d-md-flex ml-md-auto d-lg-none mh-100 mw-100" src="img/Logos/FRC.png" alt="FIRST Robotics (FRC)">
<a href="https://www.firstinspires.org/robotics/frc" target="_blank"><img class="card-img-top d-none d-lg-block" src="img/Logos/FRC.png" alt="FIRST Robotics (FRC)"></a>
</div>
<div class="card-body">
<h2 class="card-title mt-3">FIRST Robotics</h2>
<div class="line mb-3"></div>
<p class="card-text">
FIRST (For Inspiration and Recognition of Science and
Technology) was founded in 1989 to inspire young people’s
interest and participation in science and technology. Over the
past 30 years, FIRST participation has been proven to
encourage students to pursue education and careers in
STEM-related fields.
</p>
</div>
<div class="card-footer">
<h3>
<a href="https://www.firstinspires.org/robotics/frc" target="_blank">Find Out More ></a>
</h3>
</div>
</div>
<div class="w-100 pt-3 d-none d-sm-block d-lg-none">
<!-- wrap on sm-->
</div>
<div class="card p-2 p-lg-4" id="titan-navy">
<div class="mt-1">
<img class="card-img-overlay d-block d-md-flex ml-md-auto d-lg-none mh-100 mw-100" src="img/Logos/PAHS_helmet.png" alt="Plano ISD Academy High School (AHS)">
<a href="https://www.pisd.edu/academy" target="_blank"><img class="card-img-top d-none d-lg-block" src="img/Logos/PAHS_helmet.png" alt="Plano ISD Academy High School (AHS)"></a>
</div>
<div class="card-body">
<h2 class="card-title mt-3">Plano ISD Academy</h2>
<div class="line mb-3"></div>
<p class="card-text">
Plano ISD Academy High School is an innovative, STEAM,
project-based 9th-12th grade learning community focused on
interdisciplinary connections to foster a professional
environment, inspire creativity, and empower students to
collaborate and compete in a rapidly changing world.
</p>
</div>
<div class="card-footer">
<h3>
<a href="https://www.pisd.edu/academy" target="_blank">Find Out More ></a>
</h3>
</div>
</div>
<div class="w-100 pt-3 d-none d-sm-block d-lg-none">
<!-- wrap on sm-->
</div>
<div class="card p-2 p-lg-4" id="titan-purple">
<div class="mt-1">
<img class="card-img-overlay d-block d-md-none mh-100 mw-100" src="img/Logos/NTX_no_text.png" alt="North Texas Robotics (NTX)">
<img class="card-img-overlay d-none d-md-flex ml-md-auto d-lg-none mh-100 mw-100" src="img/Logos/NTX.png" alt="North Texas Robotics (NTX)">
<a href="https://www.ntxrobotics.com/" target="_blank"><img class="card-img-top d-none d-lg-block" src="img/Logos/NTX.png" alt="North Texas Robotics (NTX)"></a>
</div>
<div class="card-body">
<h2 class="card-title mt-3">NTX Robotics</h2>
<div class="line mb-3"></div>
<p class="card-text">
North Texas Robotics was founded in 2015 to bring teams
together to further STEM and FIRST across North Texas. Its
teams work hard to promote and create inter-team alliances
across the area. NTX is responsible for the North Texas Coach
and Mentor Workshop and the NTX Tournament of Robots.
</p>
</div>
<div class="card-footer">
<h3>
<a href="https://www.ntxrobotics.com/" target="_blank">Find Out More ></a>
</h3>
</div>
</div>
</div>
<!--Main section containing embed videos and Twitter timeline-->
<div class="px-xl-5 px-md-3 px-0">
<div class="row mt-3 mx-lg-3 mx-md-2 mx-0 px-xl-5 px-md-4 px-2 py-md-4 py-3" id="media">
<div class="col col-lg-8 col-md-7">
<h2>5431 Chairman's Video</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe width="700" height="394" src="https://www.youtube.com/embed/V_4pVFlNjqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>
Our 2019-2020 season chairman’s video. The video talks about
our drive and passion for spreading the seeds of STEM
education, and covers how we do it!
</p>
<h2>About FIRST</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe width="700" height="394" src="https://www.youtube.com/embed/K_PuWjr7qcM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>
This video talks about who FIRST is and what FIRST Robotics
Competition (FRC) does. Impacting many highschool students
around the world preparing them for the future through fun
challenges.
</p>
</div>
<div class="col col-lg-4 col-md-5">
<h2>Stay Up to Date!</h2>
<a class="twitter-timeline" data-height="1000" href="https://twitter.com/frc5431?ref_src=twsrc%5Etfw">Tweets by frc5431</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</section>
</main>
<!--JS Files-->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="rellax.min.js"></script>
<script src="script.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!--stuff added specifically for slider-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$("#slider").carousel({
interval: 6000,
pause: false,
ride: "carousel",
});
</script>
</body>
</html>