172 lines
4.7 KiB
HTML
172 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Scouts BSA Troop 3352 | Glencoe, Minnesota</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
header {
|
|
background-color: #005696;
|
|
color: white;
|
|
padding: 20px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.hero {
|
|
padding: 20px;
|
|
position: relative;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
.slider {
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.slides {
|
|
display: flex;
|
|
transition: transform 0.5s ease-in-out;
|
|
}
|
|
|
|
.slides img {
|
|
width: 100vw;
|
|
max-width: 100%;
|
|
flex: 0 0 100%;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.prev,
|
|
.next {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.prev {
|
|
left: 10px;
|
|
}
|
|
|
|
.next {
|
|
right: 10px;
|
|
}
|
|
|
|
.calendar {
|
|
margin: 20px;
|
|
}
|
|
|
|
.contact {
|
|
background: #f4f4f4;
|
|
padding: 20px;
|
|
margin-top: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: left;
|
|
}
|
|
|
|
.contact-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.contact-content {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mobile {
|
|
display: none;
|
|
}
|
|
|
|
.contact-info {
|
|
width: 50%;
|
|
}
|
|
|
|
.contact-text {
|
|
width: 50%;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
max-width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>Scouts BSA Troop 3352, Glencoe, Minnesota</header>
|
|
|
|
<section class="hero">
|
|
<h2>Welcome to Troop 3352!</h2>
|
|
<div class="slider">
|
|
<div class="slides">
|
|
<!-- INSERT IMAGES HERE -->
|
|
</div>
|
|
<button class="prev" onclick="moveSlide(-1)">❮</button>
|
|
<button class="next" onclick="moveSlide(1)">❯</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="calendar">
|
|
<h2>Upcoming Events</h2>
|
|
<iframe class="desktop"
|
|
src="https://calendar.google.com/calendar/u/0/embed?showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&bgcolor=%23FFFFFF&src=troop352glencoe@gmail.com&color=%23B1440E&ctz=America/Chicago"
|
|
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
|
|
<iframe class="mobile"
|
|
src="https://calendar.google.com/calendar/u/0/embed?mode=AGENDA&showTitle=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&bgcolor=%23FFFFFF&src=troop352glencoe@gmail.com&color=%23B1440E&ctz=America/Chicago"
|
|
style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
|
|
</section>
|
|
|
|
<section class="contact">
|
|
<div class="contact-content">
|
|
<div class="contact-info">
|
|
<h2>Contact Us</h2>
|
|
<p>Scoutmaster Will Freberg: <a href="mailto:k20will@gmail.com">k20will@gmail.com</a></p>
|
|
</div>
|
|
<div class="contact-text">
|
|
<p>Scouts BSA Troop 3352 is chartered by Glencoe VFW Post 5102. To join Troop 3352, please attend one of
|
|
our meetings, which are typically held in the basement of the Glencoe City Center.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
let currentIndex = 0;
|
|
function moveSlide(direction) {
|
|
const slides = document.querySelector('.slides');
|
|
const totalSlides = slides.children.length;
|
|
currentIndex = (currentIndex + direction + totalSlides) % totalSlides;
|
|
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|