Hopefully RSC
dugo3number2
parent
329f3cffda
commit
f52e551c79
|
|
@ -4,11 +4,12 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>About - Beacon Blend</title>
|
<title>About - Beacon Blend</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Beacon Blend</h1>
|
<h1>Beacon Blend</h1>
|
||||||
<nav class="top">
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="..">Home</a></li>
|
<li><a href="..">Home</a></li>
|
||||||
<li><a href="#" id="current">About</a></li>
|
<li><a href="#" id="current">About</a></li>
|
||||||
|
|
@ -17,18 +18,21 @@
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="top">
|
||||||
<h2>About</h2>
|
<h2 class="title">About</h2>
|
||||||
<section>
|
<section>
|
||||||
<h2>About LCS Beacon Blend</h2>
|
<h2 class="title">About LCS Beacon Blend</h2>
|
||||||
<p>About paragraph here</p>
|
<div class="img-container center">
|
||||||
|
<img src="../assets/img/coffee1.png" />
|
||||||
|
</div>
|
||||||
|
<p>Beacon Blend is the coffee shop run by Lighthouse Christian School as a fundraiser. We serve many varieties of coffee with all of your favorite add-ons. All of our profit supports us to go to A.C.E.'s Regional and International Student Conventions. There, we compete in events in categories such as music, platform, athletics, art, photography, and more. The trip to ISC is where most of the money is spent because of the distance. We appreciate all of the support we receive through the coffee shop, and we aim to please all of our customers with the best service and quality we can.</p>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>About Lighthouse Christian School</h2>
|
<h2 class="title">About Lighthouse Christian School</h2>
|
||||||
<p>About LCS paragraph here</p>
|
<div class="img-container center">
|
||||||
</section>
|
<img src="../assets/img/ace.jpg" />
|
||||||
<section>
|
</div>
|
||||||
<h2>Images here</h2>
|
<p>Lighthouse Christian School is the model school of A.C.E. School of Tomorrow, located in the world headquarters. Although we are a small school, we make up for it with our unique personalities and interests, as well as our competition at convention. We have other fundraisers besides the coffee shop, like bake sales, vending machines, dinner nights, banquets, coupon cards, and more. All of this money helps us to go to RSC and ISC.</p>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
|
@ -44,5 +48,6 @@
|
||||||
<span>©2024 Lighthouse Christian School</span><br />
|
<span>©2024 Lighthouse Christian School</span><br />
|
||||||
<span>Created for LCS and Student Conventions by David Jentes</span>
|
<span>Created for LCS and Student Conventions by David Jentes</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="../assets/js/navhide.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -23,6 +23,7 @@ nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
transition: display 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav li {
|
nav li {
|
||||||
|
|
@ -45,10 +46,34 @@ nav a:hover {
|
||||||
font-size: calc(1rem + 10px);
|
font-size: calc(1rem + 10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #eed3b3;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: background-color 200ms;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: #ddc2a2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-alt {
|
||||||
|
background-color: #ffe4c4;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color : #ffe4c4;
|
background-color : #ffe4c4;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
font-family: 'Libre Baskerville', sans-serif;
|
font-family: 'Libre Baskerville', s100ans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -65,17 +90,42 @@ body {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.cover-tagline {
|
.cover-tagline {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
color: #dddddd;
|
color: #dddddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-container {
|
||||||
|
width: 33%;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 950px) {
|
@media screen and (max-width: 950px) {
|
||||||
.cover-tagline {
|
.cover-tagline {
|
||||||
margin: 25% 0;
|
margin: 25% 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 750px) {
|
||||||
|
.flex {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.img-container {
|
||||||
|
width: 96.5%;
|
||||||
|
margin: 10px, 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.cover-tagline {
|
.cover-tagline {
|
||||||
margin-top: 50%;
|
margin-top: 50%;
|
||||||
|
|
@ -83,5 +133,120 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
margin: 30px;
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
margin-top: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #eed3b3;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer ul {
|
||||||
|
list-style: none;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer li {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bolder;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.extrapad {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: 2px solid #222222;
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #ffe4c4;
|
||||||
|
font-family: inherit;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
border: 2px solid #222222;
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #ffe4c4;
|
||||||
|
font-family: inherit;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
background-color: #ffe4c4;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 2px solid #222222;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
outline: none;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]:checked {
|
||||||
|
background-color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pumps {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ext::-webkit-outer-spin-button,
|
||||||
|
#ext::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ext {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
#note {
|
||||||
|
color: inherit;
|
||||||
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
|
|
@ -0,0 +1,161 @@
|
||||||
|
const step1 = document.getElementById("step1")
|
||||||
|
const step2 = document.getElementById("step2")
|
||||||
|
const step3 = document.getElementById("step3")
|
||||||
|
const step4 = document.getElementById("step4")
|
||||||
|
|
||||||
|
const menu1 = document.getElementById("menu1")
|
||||||
|
const menu2 = document.getElementById("menu2")
|
||||||
|
|
||||||
|
const step1next = document.getElementById("step1next")
|
||||||
|
const step2back = document.getElementById("step2back")
|
||||||
|
const step2next = document.getElementById("step2next")
|
||||||
|
const step3back = document.getElementById("step3back")
|
||||||
|
const step3next = document.getElementById("step3next")
|
||||||
|
const step4back = document.getElementById("step4back")
|
||||||
|
|
||||||
|
const phoneext = document.getElementById("phoneext")
|
||||||
|
const extDiv = document.getElementById("extDiv")
|
||||||
|
const phoneDiv = document.getElementById("phoneDiv")
|
||||||
|
|
||||||
|
const hoticed = document.getElementById("hoticed")
|
||||||
|
const hotDiv = document.getElementById("hotDiv")
|
||||||
|
const icedDiv = document.getElementById("icedDiv")
|
||||||
|
|
||||||
|
const caramel = document.getElementById("caramel");
|
||||||
|
const pecan = document.getElementById("pecan");
|
||||||
|
const pumpkin = document.getElementById("pumpkin");
|
||||||
|
const sfvanilla = document.getElementById("sfvanilla");
|
||||||
|
const hazelnut = document.getElementById("hazelnut");
|
||||||
|
const peppermint = document.getElementById("peppermint");
|
||||||
|
const vanilla = document.getElementById("vanilla");
|
||||||
|
const sfmarshmallow = document.getElementById("sfmarshmallow");
|
||||||
|
|
||||||
|
const caramelPumps = document.getElementById("caramelpumps");
|
||||||
|
const pecanPumps = document.getElementById("pecanpumps");
|
||||||
|
const pumpkinPumps = document.getElementById("pumpkinpumps");
|
||||||
|
const sfvanillaPumps = document.getElementById("sfvanillapumps");
|
||||||
|
const hazelnutPumps = document.getElementById("hazelnutpumps");
|
||||||
|
const peppermintPumps = document.getElementById("peppermintpumps");
|
||||||
|
const vanillaPumps = document.getElementById("vanillapumps");
|
||||||
|
const sfmarshmallowPumps = document.getElementById("sfmarshmallowpumps");
|
||||||
|
|
||||||
|
step1next.addEventListener("click", () => {
|
||||||
|
menu1.classList.add("hidden")
|
||||||
|
menu2.classList.add("hidden")
|
||||||
|
step1.classList.add("hidden")
|
||||||
|
step2.classList.remove("hidden")
|
||||||
|
})
|
||||||
|
|
||||||
|
step2back.addEventListener("click", () => {
|
||||||
|
menu1.classList.remove("hidden")
|
||||||
|
menu2.classList.remove("hidden")
|
||||||
|
step1.classList.remove("hidden")
|
||||||
|
step2.classList.add("hidden")
|
||||||
|
})
|
||||||
|
|
||||||
|
step2next.addEventListener("click", () => {
|
||||||
|
step2.classList.add("hidden")
|
||||||
|
step3.classList.remove("hidden")
|
||||||
|
})
|
||||||
|
|
||||||
|
step3back.addEventListener("click", () => {
|
||||||
|
step2.classList.remove("hidden")
|
||||||
|
step3.classList.add("hidden")
|
||||||
|
})
|
||||||
|
|
||||||
|
step3next.addEventListener("click", () => {
|
||||||
|
step3.classList.add("hidden")
|
||||||
|
step4.classList.remove("hidden")
|
||||||
|
})
|
||||||
|
|
||||||
|
step4back.addEventListener("click", () => {
|
||||||
|
step3.classList.remove("hidden")
|
||||||
|
step4.classList.add("hidden")
|
||||||
|
})
|
||||||
|
|
||||||
|
caramel.addEventListener("click", () => {
|
||||||
|
if (caramel.checked) {
|
||||||
|
caramelPumps.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
caramelPumps.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
pecan.addEventListener("click", () => {
|
||||||
|
if (pecan.checked) {
|
||||||
|
pecanPumps.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
pecanPumps.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
pumpkin.addEventListener("click", () => {
|
||||||
|
if (pumpkin.checked) {
|
||||||
|
pumpkinPumps.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
pumpkinPumps.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
sfvanilla.addEventListener("click", () => {
|
||||||
|
if (sfvanilla.checked) {
|
||||||
|
sfvanillaPumps.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
sfvanillaPumps.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
hazelnut.addEventListener("click", () => {
|
||||||
|
if (hazelnut.checked) {
|
||||||
|
hazelnutPumps.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
hazelnutPumps.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
peppermint.addEventListener("click", () => {
|
||||||
|
if (peppermint.checked) {
|
||||||
|
peppermintPumps.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
peppermintPumps.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
vanilla.addEventListener("click", () => {
|
||||||
|
if (vanilla.checked) {
|
||||||
|
vanillaPumps.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
vanillaPumps.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
sfmarshmallow.addEventListener("click", () => {
|
||||||
|
if (sfmarshmallow.checked) {
|
||||||
|
sfmarshmallowPumps.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
sfmarshmallowPumps.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
phoneext.addEventListener("change", () => {
|
||||||
|
if (phoneext.value == "ext") {
|
||||||
|
extDiv.classList.remove("hidden")
|
||||||
|
phoneDiv.classList.add("hidden")
|
||||||
|
} else if (phoneext.value == "phone") {
|
||||||
|
extDiv.classList.add("hidden")
|
||||||
|
phoneDiv.classList.remove("hidden")
|
||||||
|
} else {
|
||||||
|
extDiv.classList.add("hidden")
|
||||||
|
phoneDiv.classList.add("hidden")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
hoticed.addEventListener("change", () => {
|
||||||
|
if (hoticed.value == "hot") {
|
||||||
|
hotDiv.classList.remove("hidden")
|
||||||
|
icedDiv.classList.add("hidden")
|
||||||
|
} else if (hoticed.value == "iced") {
|
||||||
|
hotDiv.classList.add("hidden")
|
||||||
|
icedDiv.classList.remove("hidden")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
window.onscroll = () => {
|
||||||
|
navScroll()
|
||||||
|
}
|
||||||
|
|
||||||
|
const nav = document.getElementsByTagName("nav")[0]
|
||||||
|
const h1 = document.getElementsByTagName("h1")[0]
|
||||||
|
|
||||||
|
function navScroll() {
|
||||||
|
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
|
||||||
|
nav.classList.add("hidden");
|
||||||
|
h1.style.fontSize = "20px"
|
||||||
|
} else {
|
||||||
|
nav.classList.remove("hidden");
|
||||||
|
h1.style.fontSize = "2rem"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -28,21 +28,21 @@
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<!-- Dates and hours -->
|
<!-- Dates and hours -->
|
||||||
<h2>Hours</h2>
|
<h2 class="title">Hours</h2>
|
||||||
<span>Monday-Friday mornings: 7:30-8:00</span><br />
|
<span>Monday-Friday mornings: 7:30-8:00</span><br />
|
||||||
<span>Monday-Thursday afternoons: 1:00-1:30</span><br /><br />
|
<span>Monday-Thursday afternoons: 1:00-1:30</span><br /><br />
|
||||||
<h2>Upcoming dates</h2>
|
<h2 class="title">Upcoming dates</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>March 25-29</li>
|
<li>March 25-29</li>
|
||||||
<li>April 15-19</li>
|
<li>April 15-19</li>
|
||||||
<li>May 6-10</li>
|
<li>May 6-10</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Location</h2>
|
<h2 class="title">Location</h2>
|
||||||
<span>The coffee shop is located in the break room at A.C.E. School of Tomorrow headquarters. We may open the coffee shop at other locations or during other fundraisers, so keep an eye out here!</span>
|
<span>The coffee shop is located in the break room at A.C.E. School of Tomorrow headquarters. We may open the coffee shop at other locations or during other fundraisers, so keep an eye out here!</span>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<!-- New at the coffee shop -->
|
<!-- New at the coffee shop -->
|
||||||
<h2>What's new?</h2>
|
<h2 class="title">What's new?</h2>
|
||||||
<h2>Mocha</h2>
|
<h2>Mocha</h2>
|
||||||
<p>A latte with a mix of hot chocolate! Try it hot or iced with all your favorite add-ons!</p>
|
<p>A latte with a mix of hot chocolate! Try it hot or iced with all your favorite add-ons!</p>
|
||||||
<h2>Almond milk</h2>
|
<h2>Almond milk</h2>
|
||||||
|
|
@ -51,12 +51,21 @@
|
||||||
<p>Sugar-free hot chocolate and add-ons are here! Try some sugar-free vanilla or toasted marshmallow syrup in any drink today!</p>
|
<p>Sugar-free hot chocolate and add-ons are here! Try some sugar-free vanilla or toasted marshmallow syrup in any drink today!</p>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<!-- Images -->
|
<div class="flex">
|
||||||
<h2>Images here</h2>
|
<div class="img-container">
|
||||||
|
<img src="assets/img/coffee1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="img-container">
|
||||||
|
<img src="assets/img/coffee2.png" />
|
||||||
|
</div>
|
||||||
|
<div class="img-container">
|
||||||
|
<img src="assets/img/machine.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<span>Beacon Blend</span>
|
<span>Beacon Blend</span><br />
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Home</a></li>
|
<li><a href="#">Home</a></li>
|
||||||
<li><a href="about">About</a></li>
|
<li><a href="about">About</a></li>
|
||||||
|
|
@ -66,5 +75,6 @@
|
||||||
<span>©2024 Lighthouse Christian School</span><br />
|
<span>©2024 Lighthouse Christian School</span><br />
|
||||||
<span>Created for LCS and Student Conventions by David Jentes</span>
|
<span>Created for LCS and Student Conventions by David Jentes</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="assets/js/navhide.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Menu - Beacon Blend</title>
|
<title>Menu - Beacon Blend</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -17,13 +18,13 @@
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="top">
|
||||||
<h2>Menu</h2>
|
<h2 class="title">Menu</h2>
|
||||||
|
<div class="button-container">
|
||||||
|
<a href="order" class="button">Order online</a>
|
||||||
|
</div>
|
||||||
<section>
|
<section>
|
||||||
<a href="order">Order online</a>
|
<h2 class="title">16oz Hot Drinks - $2.50 each</h2>
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<h2>16oz Hot Drinks - $2.50 each</h2>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Espresso (single or double)</li>
|
<li>Espresso (single or double)</li>
|
||||||
<li>Latte</li>
|
<li>Latte</li>
|
||||||
|
|
@ -32,17 +33,17 @@
|
||||||
<li>Cappucino</li>
|
<li>Cappucino</li>
|
||||||
<li>Hot Chocolate (available sugar-free)</li>
|
<li>Hot Chocolate (available sugar-free)</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>16oz Cold Drinks - $2.50 each</h2>
|
<h2 class="title">16oz Cold Drinks - $2.50 each</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Iced Coffee (Espresso and Milk)</li>
|
<li>Iced Coffee (Espresso and Milk)</li>
|
||||||
<li>Espresso (single or double)</li>
|
<li>Espresso (single or double)</li>
|
||||||
<li>Latte</li>
|
<li>Latte</li>
|
||||||
<li>Mocha</li>
|
<li>Mocha</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>All drinks are available with whole or almond milk.</h2>
|
<h2 class="title">All drinks are available with whole or almond milk.</h2>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Syrups (with sugar)</h2>
|
<h2 class="title">Syrups (with sugar)</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Salted Caramel</li>
|
<li>Salted Caramel</li>
|
||||||
<li>French Vanilla</li>
|
<li>French Vanilla</li>
|
||||||
|
|
@ -51,22 +52,26 @@
|
||||||
<li>Pumpkin</li>
|
<li>Pumpkin</li>
|
||||||
<li>Peppermint</li>
|
<li>Peppermint</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Syrups (sugar-free)</h2>
|
<h2 class="title">Syrups (sugar-free)</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Vanilla</li>
|
<li>Vanilla</li>
|
||||||
<li>Toasted Marshmallow</li>
|
<li>Toasted Marshmallow</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Swirls</h2>
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 class="title">Swirls</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Mocha</li>
|
<li>Mocha</li>
|
||||||
<li>White Mocha</li>
|
<li>White Mocha</li>
|
||||||
<li>Caramel</li>
|
<li>Caramel</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h2>Whipped cream is available as an option for each drink.</h2>
|
<h2 class="title">Whipped cream is available as an option for each drink.</h2>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section class="extrapad">
|
||||||
<h2>Sound good?</h2>
|
<h2 class="title">Sound good?</h2>
|
||||||
<a href="order">Order online now!</a>
|
<div class="button-container">
|
||||||
|
<a href="order" class="button button-alt">Order online now!</a>
|
||||||
|
</div><br />
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
|
@ -80,5 +85,6 @@
|
||||||
<span>©2024 Lighthouse Christian School</span><br />
|
<span>©2024 Lighthouse Christian School</span><br />
|
||||||
<span>Created for LCS and Student Conventions by David Jentes</span>
|
<span>Created for LCS and Student Conventions by David Jentes</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="../assets/js/navhide.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Note to judges</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Note to judges</h1>
|
||||||
|
<p>The order page is disabled on this version of the site. I plan to use it to replace the current system I have created as it looks and works much better. This version, however, does not have the backend needed to process orders. This will go to an order placed screen in production. Also, thank you for all that you do to help judge our projects for convention! I really appreciate it!</p>
|
||||||
|
<span>- David</span><br />
|
||||||
|
<a href="order/index.html">Return to order page</a><br />
|
||||||
|
<a href="index.html">Return to home</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Order - Beacon Blend</title>
|
<title>Order - Beacon Blend</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/main.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -17,90 +18,105 @@
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="top">
|
||||||
<h2>Order Online</h2>
|
<h2 class="title">Order Online</h2>
|
||||||
<section>
|
<h2 class="title" id="menu1">Just want to browse the menu?</h2>
|
||||||
<h2>Just want to browse the menu?</h2>
|
<div class="button-container" id="menu2">
|
||||||
<a href="menu">Menu</a>
|
<a href="menu" class="button">Menu</a>
|
||||||
</section>
|
</div><br />
|
||||||
<form>
|
<div class="button-container">
|
||||||
<section>
|
<a href="../notetojudges.html" id="note">Note to judges about this page</a>
|
||||||
|
</div>
|
||||||
|
<form action="../notetojudges.html">
|
||||||
|
<section id="step1">
|
||||||
<h2>Your contact information</h2>
|
<h2>Your contact information</h2>
|
||||||
<label for="name">Your name</label>
|
<label for="name">Your name</label><br />
|
||||||
<input type="text" name="name" id="name" />
|
<input type="text" name="name" id="name" /><br /><br />
|
||||||
<select id="phoneext" name="phoneext">
|
<select id="phoneext" name="phoneext">
|
||||||
<option value="ext">Contact A.C.E. phone extension</option>
|
<option value="ext">Contact A.C.E. phone extension</option>
|
||||||
<option value="phone">Contact phone number</option>
|
<option value="phone">Contact phone number</option>
|
||||||
<option value="school">I am a student</option>
|
<option value="school">I am a student</option>
|
||||||
</select>
|
</select><br /><br />
|
||||||
<div id="extDiv">
|
<div id="extDiv">
|
||||||
<input type="number" size="4" name="ext" id="ext" />
|
<input type="number" size="4" name="ext" id="ext" value="" />
|
||||||
</div>
|
</div>
|
||||||
<div id="phoneDiv">
|
<div id="phoneDiv" class="hidden">
|
||||||
<input type="tel" name="phone" id="phone" />
|
<input type="tel" name="phone" id="phone" />
|
||||||
</div>
|
</div><br /><br />
|
||||||
<a href="#">Next</a>
|
<div class="button-container">
|
||||||
|
<a href="#" class="button button-alt" id="step1next">Next</a>
|
||||||
|
</div><br />
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section id="step2" class="hidden">
|
||||||
<h2>Your drink</h2>
|
<h2>Your drink</h2>
|
||||||
<h2>$2.50</h2>
|
<h2>$2.50 - 16oz</h2>
|
||||||
<select id="hoticed" name="hoticed">
|
<select id="hoticed" name="hoticed">
|
||||||
<option value="hot">Hot drinks</option>
|
<option value="hot">Hot drinks</option>
|
||||||
<option value="iced">Iced drinks</option>
|
<option value="iced">Iced drinks</option>
|
||||||
</select>
|
</select><br /><br />
|
||||||
<div id="hotDiv">
|
<div id="hotDiv">
|
||||||
<select id="hot" name="hot">
|
<select id="hot" name="hot">
|
||||||
<option value="espresso">Espresso</option>
|
|
||||||
<option value="dblespresso">Double Espresso</option>
|
|
||||||
<option value="latte">Latte</option>
|
<option value="latte">Latte</option>
|
||||||
<option value="mocha">Mocha</option>
|
<option value="mocha">Mocha</option>
|
||||||
<option value="americano">Americano</option>
|
|
||||||
<option value="cappuccino">Cappuccino</option>
|
<option value="cappuccino">Cappuccino</option>
|
||||||
|
<option value="americano">Americano</option>
|
||||||
|
<option value="espresso">Espresso</option>
|
||||||
|
<option value="dblespresso">Double Espresso</option>
|
||||||
<option value="hotchoc">Hot Chocolate</option>
|
<option value="hotchoc">Hot Chocolate</option>
|
||||||
<option value="sfhotchoc">Sugar-free Hot Chocolate</option>
|
<option value="sfhotchoc">Sugar-free Hot Chocolate</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div id="icedDiv">
|
<div id="icedDiv" class="hidden">
|
||||||
<select id="hot" name="hot">
|
<select id="hot" name="hot">
|
||||||
|
<option value="icedlatte">Iced Latte</option>
|
||||||
<option value="icedcoffee">Iced Coffee (espresso and milk)</option>
|
<option value="icedcoffee">Iced Coffee (espresso and milk)</option>
|
||||||
|
<option value="icedmocha">Iced Mocha</option>
|
||||||
<option value="icedespresso">Iced Espresso</option>
|
<option value="icedespresso">Iced Espresso</option>
|
||||||
<option value="iceddblespresso">Iced Double Espresso</option>
|
<option value="iceddblespresso">Iced Double Espresso</option>
|
||||||
<option value="icedlatte">Iced Latte</option>
|
|
||||||
<option value="icedmocha">Iced Mocha</option>
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div><br /><br />
|
||||||
<a href="#">Next</a>
|
<div class="button-container">
|
||||||
|
<a href="#" class="button button-alt" id="step2back">Back</a>
|
||||||
|
<a href="#" class="button button-alt" id="step2next">Next</a>
|
||||||
|
</div><br />
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section id="step3" class="hidden">
|
||||||
<h2>Your milk choice</h2>
|
<h2>Your milk choice</h2>
|
||||||
<select id="milk" name="milk">
|
<select id="milk" name="milk">
|
||||||
<option value="whole">Whole milk</option>
|
<option value="whole">Whole milk</option>
|
||||||
<option value="almond">Almond milk</option>
|
<option value="almond">Almond milk</option>
|
||||||
</select>
|
</select>
|
||||||
<h2>Your add-ons</h2>
|
<h2>Your add-ons</h2>
|
||||||
<label><input type="checkbox" name="caramel" id="caramel" value="true" /> Salted Caramel</label><span id="caramelpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="caramelpumps" /> pumps</span><br />
|
<label><input type="checkbox" name="caramel" id="caramel" value="true" /> Salted Caramel</label><span id="caramelpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="caramelpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="pecan" id="pecan" value="true" /> Butter Pecan</label><span id="pecanpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pecanpumps" /> pumps</span><br />
|
<label><input type="checkbox" name="pecan" id="pecan" value="true" /> Butter Pecan</label><span id="pecanpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pecanpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="pumpkin" id="pumpkin" value="true" /> Pumpkin</label><span id="pumpkinpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pumpkinpumps" /> pumps</span><br />
|
<label><input type="checkbox" name="pumpkin" id="pumpkin" value="true" /> Pumpkin</label><span id="pumpkinpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pumpkinpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="sfvanilla" id="sfvanilla" value="true" /> Sugar-free Vanilla</label><span id="sfvanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfvanillapumps" /> pumps</span><br />
|
<label><input type="checkbox" name="sfvanilla" id="sfvanilla" value="true" /> Sugar-free Vanilla</label><span id="sfvanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfvanillapumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="hazelnut" id="hazelnut" value="true" /> Hazelnut</label><span id="hazelnutpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="hazelnutpumps" /> pumps</span><br />
|
<label><input type="checkbox" name="hazelnut" id="hazelnut" value="true" /> Hazelnut</label><span id="hazelnutpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="hazelnutpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="peppermint" id="peppermint" value="true" /> Peppermint</label><span id="peppermintpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="peppermintpumps" /> pumps</span><br />
|
<label><input type="checkbox" name="peppermint" id="peppermint" value="true" /> Peppermint</label><span id="peppermintpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="peppermintpumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="vanilla" id="vanilla" value="true" /> French Vanilla</label><span id="vanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="vanillapumps" /> pumps</span><br />
|
<label><input type="checkbox" name="vanilla" id="vanilla" value="true" /> French Vanilla</label><span id="vanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="vanillapumps" class="pumps" /> pumps</span><br />
|
||||||
<label><input type="checkbox" name="sfmarshmallow" id="sfmarshmallow" value="true" /> Sugar-free Toasted Marshmallow</label><span id="sfmarshmallowpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfmarshmallowpumps" /> pumps</span><br />
|
<label><input type="checkbox" name="sfmarshmallow" id="sfmarshmallow" value="true" /> Sugar-free Toasted Marshmallow</label><span id="sfmarshmallowpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfmarshmallowpumps" class="pumps" /> pumps</span><br /><br />
|
||||||
<label><input type="checkbox" name="mocha" value="true"> Mocha Swirl</label><br />
|
<label><input type="checkbox" name="mocha" value="true"> Mocha Swirl</label><br />
|
||||||
<label><input type="checkbox" name="whitemocha" value="true"> White Mocha Swirl</label><br />
|
<label><input type="checkbox" name="whitemocha" value="true"> White Mocha Swirl</label><br />
|
||||||
<label><input type="checkbox" name="caramels" value="true"> Caramel Swirl</label><br />
|
<label><input type="checkbox" name="caramels" value="true"> Caramel Swirl</label><br />
|
||||||
<label><input type="checkbox" name="whippedcream" value="true"> Whipped Cream</label><br />
|
<label><input type="checkbox" name="whippedcream" value="true"> Whipped Cream</label><br /><br /><br />
|
||||||
<a href="#">Next</a>
|
<div class="button-container">
|
||||||
|
<a href="#" class="button button-alt" id="step3back">Back</a>
|
||||||
|
<a href="#" class="button button-alt" id="step3next">Next</a>
|
||||||
|
</div><br />
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section id="step4" class="hidden">
|
||||||
<h2>Your payment</h2>
|
<label for="payment">Your payment</label><br />
|
||||||
<select name="payment" id="payment">
|
<select name="payment" id="payment" required>
|
||||||
|
<option value="" default>Please select</option>
|
||||||
<option value="cash">Cash - $2.50 for one</option>
|
<option value="cash">Cash - $2.50 for one</option>
|
||||||
<option value="punchcard">Punchcard - $10 for five</option>
|
<option value="punchcard">Punchcard - $10 for five</option>
|
||||||
</select>
|
</select><br /><br />
|
||||||
<h2>Special notes</h2>
|
<label for="notes">Special notes</label><br />
|
||||||
<input type="text" id="notes" name="notes" />
|
<input type="text" id="notes" name="notes" /><br /><br />
|
||||||
<input type="submit" value="Place order" />
|
<div class="button-container">
|
||||||
|
<a href="#" class="button button-alt" id="step4back">Back</a>
|
||||||
|
<input type="submit" value="Place order" class="button button-alt" />
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</form>
|
</form>
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -114,5 +130,7 @@
|
||||||
<span>©2024 Lighthouse Christian School</span><br />
|
<span>©2024 Lighthouse Christian School</span><br />
|
||||||
<span>Created for LCS and Student Conventions by David Jentes</span>
|
<span>Created for LCS and Student Conventions by David Jentes</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="../assets/js/navhide.js"></script>
|
||||||
|
<script src="../assets/js/formhide.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue