-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
183 lines (166 loc) · 7.43 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kelmscott Senior High School Robotics</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
@media (max-width: 640px) {
.features .container {
grid-template-columns: 1fr;
}
.feature-card {
margin-bottom: 1rem;
}
.individual-feature .container .flex {
flex-direction: column;
}
.individual-feature .container .flex > div {
width: 100%;
}
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.blog img {
max-width: 100%;
height: auto;
}
.footer .container {
flex-direction: column;
text-align: center;
}
.footer .container > div {
margin-top: 1rem;
}
}
</style>
</head>
<body>
<!-- Header Section -->
<header class="bg-gray-800 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="https://kshs-robotics-club.github.io/">
<img src="logo.png" alt="KSHS Robotics" class="w-20 h-20">
</a>
<nav>
<a href="about.html" class="mx-2">About</a>
<a href="programs.html" class="mx-2">Programs</a>
<a href="contact.html" class="mx-2">Contact</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero text-white text-center py-32" style="position: relative; overflow: hidden;">
<video autoplay muted loop playsinline style="position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: -1;">
<source src="KSHS.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="position: relative; z-index: 1;">
<h1 class="text-4xl font-bold">Kelmscott Senior High School Robotics</h1>
<p class="text-xl my-4">An opportunity for students to explore and develop their passions and interests.</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg mx-auto sm:mx-0 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-300">Learn More</button>
</div>
</section>
<!-- Feature Section -->
<section class="features bg-gray-200 py-16">
<div class="container mx-auto grid grid-cols-3 gap-4">
<!-- Feature 1 -->
<div class="feature-card text-center p-4">
<i class="fas fa-robot text-4xl text-blue-500"></i>
<h2 class="text-2xl font-bold my-3">Multi team strategy</h2>
<p class="text-gray-600">Our team is split up into multiple subteams based off interests and tasks required for the robot and team generally.</p>
</div>
<!-- Feature 2 -->
<div class="feature-card text-center p-4">
<i class="fas fa-cogs text-4xl text-blue-500"></i>
<h2 class="text-2xl font-bold my-3"> This Page is NOT COMPLETE!</h2>
<p class="text-gray-600">Bear with us as our web developer finishes of this site. Feel free to check out the old one for more information</p>
</div>
<!-- Feature 3 -->
<div class="feature-card text-center p-4">
<i class="fas fa-medal text-4xl text-blue-500"></i>
<h2 class="text-2xl font-bold my-3">WARP</h2>
<p class="text-gray-600">We recently competed in <a href="https://waroboticsplayoffs.com/">WARP 2024</a>.</p>
</div>
</div>
</section>
<!-- Individual Feature Sections -->
<section class="individual-feature bg-cover bg-right text-white py-16"
style="background-image: url('insta-post.png')">
<div class="container mx-auto px-4 sm:px-0">
<div class="flex flex-col items-center sm:items-start">
<div class="w-full sm:w-1/2 text-center sm:text-left">
<h2 class="text-3xl font-bold mb-4">FIRST Robotics Competition</h2>
<p class="text-lg mb-4">Join our team as we prepare for the exciting world of FRC, where high school students build and program robots.</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg mx-auto sm:mx-0 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-300">Learn More</button>
</div>
</div>
</div>
</section>
<!-- Sponsors Section -->
<section class="blog bg-gray-200 py-16">
<div class="container mx-auto px-4 sm:px-0">
<h2 class="text-3xl font-bold mb-4 text-center sm:text-left">Our Sponsors!</h2>
<div class="text-center sm:text-left">
<a href="https://www.wa.gov.au/organisation/department-of-primary-industries-and-regional-development">
<img class="mx-auto sm:mx-0" width="500" height="500" src="sponsor.svg" alt="Sponsor Logo" />
</a>
</div>
</div>
</section>
<!-- Blog Section -->
<section class="blog bg-gray-100 py-16">
<div class="container mx-auto px-4 sm:px-0">
<h2 class="text-3xl font-bold mb-4 text-center sm:text-left">Latest Blog Posts</h2>
<!-- Blog Posts Go Here -->
</div>
</section>
<!-- FAQ Section -->
<section class="faq bg-gray-200 py-16">
<div class="container mx-auto px-4 sm:px-0">
<h2 class="text-3xl font-bold mb-4 text-center sm:text-left">Frequently Asked Questions</h2>
<!-- FAQ Content Goes Here -->
</div>
</section>
<!-- Team Section -->
<section class="team bg-gray-300 py-16">
<div class="container mx-auto px-4 sm:px-0">
<h2 class="text-3xl font-bold mb-4 text-center sm:text-left">Meet Our Team</h2>
<!-- Team Member Cards Go Here -->
</div>
</section>
<!-- Contact Form -->
<section class="contact bg-gray-200 py-16">
<div class="container mx-auto px-4 sm:px-0">
<h2 class="text-3xl font-bold mb-4 text-center sm:text-left">Get in Touch</h2>
<!-- Contact Form Fields Go Here -->
</div>
</section>
<!-- Map Section -->
<section class="map bg-gray-300 py-16">
<div class="container mx-auto">
<!-- Google Maps Embed Goes Here -->
</div>
</section>
<!-- Footer Section -->
<footer class="bg-gray-800 text-white py-4">
<div class="container mx-auto flex flex-col sm:flex-row justify-between items-center px-4 sm:px-0">
<p class="mb-4 sm:mb-0">© 2024 Kelmscott Senior High School Robotics</p>
<div>
<a href="#" class="mx-2"><i class="fab fa-twitter"></i></a>
<a href="https://www.facebook.com/profile.php?id=61559577347658" class="mx-2"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com/kshsrobotics/" class="mx-2"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/@KSHSFRCroboticsteam" class="mx-2"><i class="fab fa-youtube"></i></a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"></script>
</body>
</html>