Skip to content

Commit d26ce3d

Browse files
samfreundsamfreund
committed
update nav-bar
12.14.21 13:19
1 parent 031d717 commit d26ce3d

4 files changed

Lines changed: 277 additions & 87 deletions

File tree

‎index.html‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6-
<meta name="description" content="" />
7-
<meta name="author" content="" />
8-
<title>The JavaJokers - Golda Meir School's FTC Team</title>
9-
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
10-
<!-- Font Awesome icons (free version)-->
11-
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
12-
<!-- Google fonts-->
13-
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
14-
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
15-
<!-- Core theme CSS (includes Bootstrap)-->
16-
<link href="css/styles.css" rel="stylesheet" />
17-
</head>
18-
<body id="page-top">
19-
<!-- Navigation-->
20-
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
21-
<div class="container px-4 px-lg-5">
22-
<a class="navbar-brand" href="#page-top">JavaJokers</a>
23-
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<meta name="description" content="" />
8+
<meta name="author" content="" />
9+
<title>The JavaJokers - Golda Meir School's FTC Team</title>
10+
<link rel="icon" type="image/x-icon" href="../assets/favicon.ico" />
11+
<!-- Font Awesome icons (free version)-->
12+
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous">
13+
</script>
14+
<!-- Google fonts-->
15+
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
16+
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
17+
rel="stylesheet" />
18+
<!-- Core theme CSS (includes Bootstrap)-->
19+
<link href="css/styles.css" rel="stylesheet" />
20+
</head>
21+
22+
<body id="page-top">
23+
<!-- Navigation-->
24+
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
25+
<div class="container px-4 px-lg-5">
26+
<a class="navbar-brand" href="#page-top">JavaJokers</a>
27+
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
2428
Menu
2529
<i class="fas fa-bars"></i>
2630
</button>
@@ -29,6 +33,7 @@
2933
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
3034
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
3135
<li class="nav-item"><a class="nav-link" href="#contactus">Contact</a></li>
36+
<li class="nav-item"><a class="nav-link" href="/logs">Logs</a></li>
3237
<li class="nav-item"><a class="nav-link" href="/meettheteam">Meet The Team</a></li>
3338
</ul>
3439
</div>
@@ -161,4 +166,4 @@ <h4 class="text-uppercase m-0">Github</h4>
161166
<script src="js/scripts.js"></script>
162167

163168
</body>
164-
</html>
169+
</html>

‎js/scripts.js‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,46 +9,46 @@
99

1010
window.addEventListener('DOMContentLoaded', event => {
1111

12-
// Navbar shrink function
13-
var navbarShrink = function () {
14-
const navbarCollapsible = document.body.querySelector('#mainNav');
15-
if (!navbarCollapsible) {
16-
return;
17-
}
18-
if (window.scrollY === 0) {
19-
navbarCollapsible.classList.remove('navbar-shrink')
20-
} else {
21-
navbarCollapsible.classList.add('navbar-shrink')
22-
}
23-
24-
};
25-
26-
// Shrink the navbar
27-
navbarShrink();
28-
29-
// Shrink the navbar when page is scrolled
30-
document.addEventListener('scroll', navbarShrink);
31-
32-
// Activate Bootstrap scrollspy on the main nav element
33-
const mainNav = document.body.querySelector('#mainNav');
34-
if (mainNav) {
35-
new bootstrap.ScrollSpy(document.body, {
36-
target: '#mainNav',
37-
offset: 74,
38-
});
39-
};
40-
41-
// Collapse responsive navbar when toggler is visible
42-
const navbarToggler = document.body.querySelector('.navbar-toggler');
43-
const responsiveNavItems = [].slice.call(
44-
document.querySelectorAll('#navbarResponsive .nav-link')
45-
);
46-
responsiveNavItems.map(function (responsiveNavItem) {
47-
responsiveNavItem.addEventListener('click', () => {
48-
if (window.getComputedStyle(navbarToggler).display !== 'none') {
49-
navbarToggler.click();
50-
}
51-
});
12+
// Navbar shrink function
13+
var navbarShrink = function () {
14+
const navbarCollapsible = document.body.querySelector('#mainNav');
15+
if (!navbarCollapsible) {
16+
return;
17+
}
18+
if (window.scrollY === 0) {
19+
navbarCollapsible.classList.remove('navbar-shrink')
20+
} else {
21+
navbarCollapsible.classList.add('navbar-shrink')
22+
}
23+
24+
};
25+
26+
// Shrink the navbar
27+
navbarShrink();
28+
29+
// Shrink the navbar when page is scrolled
30+
document.addEventListener('scroll', navbarShrink);
31+
32+
// Activate Bootstrap scrollspy on the main nav element
33+
const mainNav = document.body.querySelector('#mainNav');
34+
if (mainNav) {
35+
new bootstrap.ScrollSpy(document.body, {
36+
target: '#mainNav',
37+
offset: 74,
5238
});
39+
};
40+
41+
// Collapse responsive navbar when toggler is visible
42+
const navbarToggler = document.body.querySelector('.navbar-toggler');
43+
const responsiveNavItems = [].slice.call(
44+
document.querySelectorAll('#navbarResponsive .nav-link')
45+
);
46+
responsiveNavItems.map(function (responsiveNavItem) {
47+
responsiveNavItem.addEventListener('click', () => {
48+
if (window.getComputedStyle(navbarToggler).display !== 'none') {
49+
navbarToggler.click();
50+
}
51+
});
52+
});
5353

5454
});

‎logs/index.html‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<meta name="description" content="" />
8+
<meta name="author" content="" />
9+
<title>The JavaJokers - Golda Meir School's FTC Team</title>
10+
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
11+
<!-- Font Awesome icons (free version)-->
12+
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous">
13+
</script>
14+
<!-- Google fonts-->
15+
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
16+
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
17+
rel="stylesheet" />
18+
<!-- Core theme CSS (includes Bootstrap)-->
19+
<link href="../css/styles.css" rel="stylesheet" />
20+
</head>
21+
22+
<body id="page-top">
23+
<!-- Navigation-->
24+
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
25+
<div class="container px-4 px-lg-5">
26+
<a class="navbar-brand" href="#page-top">JavaJokers</a>
27+
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
28+
Menu
29+
<i class="fas fa-bars"></i>
30+
</button>
31+
<div class="collapse navbar-collapse" id="navbarResponsive">
32+
<ul class="navbar-nav ms-auto">
33+
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
34+
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
35+
<li class="nav-item"><a class="nav-link" href="#contactus">Contact</a></li><li class="nav-item"<a class="nav-link" href="/meettheteam">Meet The Team</a></li>
36+
<li class="nav-item"><a class="nav-link" href="../">Back</a></li>
37+
</ul>
38+
</div>
39+
</div>
40+
</nav>
41+
<!-- Masthead-->
42+
<header class="masthead">
43+
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
44+
<div class="d-flex justify-content-center">
45+
<div class="text-center">
46+
<img src="/assets/img/logo.png" class="logo"></img>
47+
<h2 class="text-white-50 mx-auto mt-2 mb-5">The JavaJokers</h2>
48+
<a class="btn btn-primary" href="#contactus">Meet the Team</a>
49+
</div>
50+
</div>
51+
</div>
52+
</header>
53+
<!-- About-->
54+
<section class="about-section text-center" id="about">
55+
<div class="container px-4 px-lg-5">
56+
<div class="row gx-4 gx-lg-5 justify-content-center">
57+
<div class="col-lg-8">
58+
<h2 class="text-white mb-4">JavaJokers is the 2021-2022 First Tech Challenge (FTC) team for the Golda Meir School, located in Milwaukee, WI. </h2>
59+
<p class="text-white-50">
60+
We are a team of 15 people, and our goal is to expand our current knowledge of robotics, marketing and outreach, coding and app development, and much more.<br>
61+
Our team number is <code>13828</code>.
62+
</p>
63+
</div>
64+
</div>
65+
</div>
66+
</section>
67+
<!-- Projects-->
68+
<section class="projects-section bg-light" id="projects">
69+
<div class="container text-center mt-5 mb-2">
70+
<h1 class="mb-0">Meet our team</h1>
71+
</div>
72+
<div class="container mt-3">
73+
<div class="row">
74+
<div class="col-md-3">
75+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/uppKNuF.jpg" width="90">
76+
<h5 class="mt-3 name">Sam Freund</h5><span class="work d-block">Lead Programmer</span><span class="work d-block">9th grade</span>
77+
<div class="mt-4 about"><span>Our lead programmer, who has been working with computers since 5th grade. Fluent in HTML, Java, Javascript, and Python.</span></div>
78+
79+
</div>
80+
</div>
81+
<div class="col-md-3">
82+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/oJmLthK.jpg" width="90">
83+
<h5 class="mt-3 name">Mark Mommaerts</h5><span class="work d-block">Lead Mechanic</span><span class="work d-block">9th grade</span>
84+
<div class="mt-4 about"><span>I love the hardware, not the software.</span></div>
85+
86+
</div>
87+
</div>
88+
<div class="col-md-3">
89+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/HFpxxJz.jpg" width="90">
90+
<h5 class="mt-3 name">Phoebe Scalise</h5><span class="work d-block">Outreach</span><span class="work d-block">9th grade</span>
91+
<div class="mt-4 about"><span>He is packing it in and packing it up And sneaking away and buggering up And chickening out and pissing off home, Yes, bravely he is throwing in the sponge.</span></div>
92+
93+
</div>
94+
</div>
95+
<div class="col-md-3">
96+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/MZm1LNz.jpg" width="90">
97+
<h5 class="mt-3 name">Arianna Valenzuela</h5><span class="work d-block">Artistic Director</span><span class="work d-block">11th grade</span>
98+
<div class="mt-4 about"><span> What... is the air-speed velocity of an unladen swallow? What do you mean? An African or European swallow?</span></div>
99+
100+
</div>
101+
</div>
102+
<div class="col-md-3">
103+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/MZm1LNz.jpg" width="90">
104+
<h5 class="mt-3 name">Alex Krostag</h5><span class="work d-block">Programmer</span><span class="work d-block">9th grade</span>
105+
<div class="mt-4 about"><span> Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</span></div>
106+
107+
</div>
108+
</div>
109+
<div class="col-md-3">
110+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/oJmLthK.jpg" width="90">
111+
<h5 class="mt-3 name">Azeal Melendez</h5><span class="work d-block">Outreach</span><span class="work d-block">9th grade</span>
112+
<div class="mt-4 about"><span>We are the keepers of the sacred words: 'Ni', 'Peng', and 'Neee-wom'!</span></div>
113+
114+
</div>
115+
</div>
116+
<div class="col-md-3">
117+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/oJmLthK.jpg" width="90">
118+
<h5 class="mt-3 name">Henry Martin</h5><span class="work d-block">Website Design</span><span class="work d-block">6th grade</span>
119+
<div class="mt-4 about"><span>We are the keepers of the sacred words: 'Ni', 'Peng', and 'Neee-wom'!</span></div>
120+
121+
</div>
122+
</div>
123+
<div class="col-md-3">
124+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/oJmLthK.jpg" width="90">
125+
<h5 class="mt-3 name">Logan Owens</h5><span class="work d-block">Human Resources</span><span class="work d-block">10th grade</span>
126+
<div class="mt-4 about"><span>We are the keepers of the sacred words: 'Ni', 'Peng', and 'Neee-wom'!</span></div>
127+
128+
</div>
129+
</div>
130+
<div class="col-md-3">
131+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/oJmLthK.jpg" width="90">
132+
<h5 class="mt-3 name">Charles Lawton</h5><span class="work d-block">Mechanic</span><span class="work d-block">10th grade</span>
133+
<div class="mt-4 about"><span>We are the keepers of the sacred words: 'Ni', 'Peng', and 'Neee-wom'!</span></div>
134+
135+
</div>
136+
</div>
137+
<div class="col-md-3">
138+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/oJmLthK.jpg" width="90">
139+
<h5 class="mt-3 name">Toby Morris</h5><span class="work d-block">Assistant Mechanic</span><span class="work d-block">10th grade</span>
140+
<div class="mt-4 about"><span>Nobody expects the Spanish Inquisition!</span></div>
141+
142+
</div>
143+
</div>
144+
<div class="col-md-3">
145+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/oJmLthK.jpg" width="90">
146+
<h5 class="mt-3 name">Elijah Piechocki</h5><span class="work d-block">Website Design</span><span class="work d-block">6th grade</span>
147+
<div class="mt-4 about"><span>We are the keepers of the sacred words: 'Ni', 'Peng', and 'Neee-wom'!</span></div>
148+
149+
</div>
150+
</div>
151+
<div class="col-md-3">
152+
<div class="bg-white p-3 text-center rounded box"><img class="img-responsive rounded-circle" src="https://i.imgur.com/oJmLthK.jpg" width="90">
153+
<h5 class="mt-3 name">Andrew Welch</h5><span class="work d-block">Sir Robin</span><span class="work d-block">8th grade</span>
154+
<div class="mt-4 about"><span>We are the keepers of the sacred words: 'Ni', 'Peng', and 'Neee-wom'!</span></div>
155+
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
</section>
161+
162+
<!-- Contact-->
163+
<section class="contact-section bg-black" id="contactus">
164+
165+
166+
<div class="social d-flex justify-content-center">
167+
<a class="mx-2" href="https://github.com/JavaJokers"><i class="fab fa-github"></i></a>
168+
<a class="mx-2" href="https://discord.gg/gWGdhBCqyR"><i class="fab fa-discord"></i></a>
169+
</div>
170+
</div>
171+
</section>
172+
<!-- Footer-->
173+
<footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright &copy; The JavaJokers 2021</div></footer>
174+
<!-- Bootstrap core JS-->
175+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
176+
<!-- Core theme JS-->
177+
<script src="../js/scripts.js"></script>
178+
179+
</body>
180+
</html>

0 commit comments

Comments
 (0)