diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index a15b0ecb9..b8534c667 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# js-project-business-site \ No newline at end of file +# js-project-business-site diff --git a/contact.html b/contact.html new file mode 100644 index 000000000..e10714eb2 --- /dev/null +++ b/contact.html @@ -0,0 +1,96 @@ + + + + + + + Contact + + + + + + + + + + + + + + + + + + + + +
+ + + + Legacy Coffee + + + + + + +
+ + +
+
+ +
+ cake +

CONTACT

+
+
+

Phone number: 08-123 456 78

+

Email: LegacyCoffee@gmail.com

+

+ Would like to collaborate with us? Feel free to contact us via our + Instagram +

+
+
+ + + +
+ + diff --git a/forms.css b/forms.css new file mode 100644 index 000000000..191b29f63 --- /dev/null +++ b/forms.css @@ -0,0 +1,208 @@ +/*TESTING IF PUSH WORKGIT*/ + +/* ========================================= + FORM STYLES (modal order form) + - Layout and look for the form inside the modal + - Mobile-first; tablet/desktop tweaks via media queries + ========================================= */ + +* { + box-sizing: border-box; /* include padding and border in element's total width*/ +} + +/*The style for the form*/ +form { + border: 2px solid rgb(255, 254, 254); + border-radius: 10px; + padding: 0 10px; + max-width: 250px; + margin: 0 auto 0; + text-align: center; + background: rgba(0, 0, 0); +} + +/*Style for h2 in the form*/ +form h2 { + font-size: 16px; + color: white; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-style: normal; + margin-bottom: 10px; +} + +/*Focus, when the user do input the fielt turn blue*/ +input:focus, +select:focus { + outline: none; + background: lightblue; + box-shadow: 0 0 0 3px rgba(58, 166, 87, 0.25); +} + +/* Grouped sections with a title (legend) */ +fieldset { + text-align: center; + border-radius: 10px; + color: rgb(255, 253, 253); + font-size: 12px; + border: 2px solid rgb(255, 255, 255); + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + margin-bottom: 10px; +} + +/* Text/number/time inputs share the same base styling */ +input { + font-size: 16px; + padding: 5px 10px; + border-radius: 5px; + margin-bottom: 10px; + border: 2px solid rgb(255, 255, 255); + background-color: #ffffff; + width: 100%; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +/* Coffee select dropdown */ +select { + width: 100%; + padding: 8px; + border-radius: 10px; +} + +/* Radio group row layout */ +.size-row { + display: flex; + justify-content: center; +} + +/* Dropdown visual reset to match inputs */ +.choice { + background-color: #ffffff; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; +} + +/* One block per custom radio option (label wraps input + visuals) */ +.radiobutton { + display: flex; + flex-direction: column; + align-items: center; + padding: 8px; + margin-bottom: 10px; +} + +/* Hide the native radio, we’ll show a custom dot instead */ +.radiobutton input[type="radio"] { + display: none; +} + +/* The custom radio “dot” */ +.style-radiobutton { + width: 12px; + height: 12px; + border-radius: 50%; + border: 2px solid rgb(255, 255, 255); + cursor: pointer; + background-color: #ffffff; +} + +/* Selected/checked state of the custom radio */ +.radiobutton input:checked ~ .style-radiobutton { + background: rgb(12, 85, 1); +} + +/* ========================= + MODAL (form) CONTAINER + - Hidden by default; shown when JS adds .active + ========================= */ + +.form-popup { + display: none; /* hidden by default */ + position: fixed; /* overlay on top of the page */ + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1000; /* above other content */ + overflow: auto; /* allow scroll if content is tall */ + padding: 15px; + place-items: center; /* will center children when display:grid is active */ +} + +/* Visible state of the modal overlay */ +.form-popup.active { + display: grid; + place-items: center; + background: rgba(0, 0, 0, 0.6); +} + +/*================MEDIA QUERIES=======================*/ + +/* ===== Tablet (>= 667px) ===== */ +@media (min-width: 667px) { + form { + display: flex; + flex-direction: column; + width: 300px; + max-width: 100%; + margin: 0 auto 0; + padding: 10px; + } + + form h2 { + font-size: 15px; + } + fieldset { + font-size: 15px; + padding: 5px; + } +} + +/* ===== Desktop (>= 1024px) ===== */ +@media (min-width: 1024px) { + .radiobutton input { + cursor: pointer; + } + + form { + width: 300px; + max-width: 100%; + margin: 0 auto 0; + padding: 10px; + } + + form h2 { + font-size: 15px; + } + fieldset { + font-size: 15px; + padding: 5px; + } + + /* Hover feedback on desktop for the custom radio */ + .radiobutton:hover input ~ .style-radiobutton { + background-color: rgb(68, 70, 68); + } + + /* Slightly larger custom radio on desktop */ + .style-radiobutton { + width: 15px; + height: 15px; + } + + .radiobutton span { + font-size: 15px; + } + + /* Input sizing on desktop */ + input { + width: 100%; + height: 35px; + font-size: 15px; + } + + /* Dropdown sizing on desktop */ + .choice { + width: 100%; + height: 40px; + font-size: 15px; + } +} diff --git a/images/Coffeebeans.jpg b/images/Coffeebeans.jpg new file mode 100644 index 000000000..323944de2 Binary files /dev/null and b/images/Coffeebeans.jpg differ diff --git a/images/barista.jpg b/images/barista.jpg new file mode 100644 index 000000000..0079fb9f4 Binary files /dev/null and b/images/barista.jpg differ diff --git a/images/cake.jpg b/images/cake.jpg new file mode 100644 index 000000000..52f9971f4 Binary files /dev/null and b/images/cake.jpg differ diff --git a/images/coffeBreak.jpg b/images/coffeBreak.jpg new file mode 100644 index 000000000..da0ab8cd8 Binary files /dev/null and b/images/coffeBreak.jpg differ diff --git a/images/coffeeheart.jpg b/images/coffeeheart.jpg new file mode 100644 index 000000000..fd3d1cde3 Binary files /dev/null and b/images/coffeeheart.jpg differ diff --git a/images/coffeemaking.jpg b/images/coffeemaking.jpg new file mode 100644 index 000000000..ab835ba2e Binary files /dev/null and b/images/coffeemaking.jpg differ diff --git a/images/coffeemenu.jpg b/images/coffeemenu.jpg new file mode 100644 index 000000000..ed3fd48c6 Binary files /dev/null and b/images/coffeemenu.jpg differ diff --git a/images/coffeetakeaway.jpg b/images/coffeetakeaway.jpg new file mode 100644 index 000000000..09de771d4 Binary files /dev/null and b/images/coffeetakeaway.jpg differ diff --git a/images/expresso.png b/images/expresso.png new file mode 100644 index 000000000..3cba03310 Binary files /dev/null and b/images/expresso.png differ diff --git a/images/grandmother.png b/images/grandmother.png new file mode 100644 index 000000000..f33be3298 Binary files /dev/null and b/images/grandmother.png differ diff --git a/images/menu.jpg b/images/menu.jpg new file mode 100644 index 000000000..71d5d94c0 Binary files /dev/null and b/images/menu.jpg differ diff --git a/images/menu.png b/images/menu.png new file mode 100644 index 000000000..5c0d6153a Binary files /dev/null and b/images/menu.png differ diff --git a/images/takeaway.jpg b/images/takeaway.jpg new file mode 100644 index 000000000..bdf5a2201 Binary files /dev/null and b/images/takeaway.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..cda976308 --- /dev/null +++ b/index.html @@ -0,0 +1,292 @@ + + + + + + + Legacy Coffee + + + + + + + + + + + + + + + + + + + + + +
+ + + + Legacy Coffee + + + + + + +
+ + +
+
+ +
+ +

WELCOME TO LEGACY COFFEE

+
+ +
+ +

About us

+

+ Our family has run this café for generations, serving exceptional + coffee made from beans grown under fair and sustainable conditions. +

+
+ + +
+
+ + +
+

A coffee with heart in every cup

+ + +
+ + +
+

Coffee that makes a difference

+ + +
+ + +
+

Take a look at our coffee menu

+ + +
+ + +
+

Skip the line, order in advance

+ +
+
+
+
+ + + +
+ + + + + +
+
+

About us

+

+ When coffee became scarce during World War II, Aunt Agda opened her + little café. Whenever real beans could be found, she served a genuine + cup – a rare luxury in a time of rationing and substitutes. +

+

+ After the war, her daughter Ingrid took over and turned the café into + a symbol of hope. As real coffee returned, she focused on quality and + care in every cup. +

+

+ Today, the café is still run by the family. Agda’s legacy lives on + through organic, toxin-free coffee grown under fair conditions – and a + warm sense of community that tastes just as good now as it did then. +

+ + +
+
+ + +
+
+

Our passion

+

+ We are passionate about coffee that does good – both in the cup and + for the world. That’s why we source beans from farmers who use + sustainable methods that respect nature and the climate. Just as + important is ensuring that the people behind the coffee have fair + working conditions and receive fair pay for their work. +

+

+ Our coffee is certified by internationally recognized labels such as + Fairtrade, KRAV, and Rainforest Alliance – a guarantee of both great + taste and a responsible choice. The result is high-quality coffee you + can truly enjoy with a clear conscience. +

+ + +
+
+ + +
+
+ menu + + +
+
+ + + +
+
+ +
+

ORDER

+ + +
+ Contact details +
+
+
+
+
+ + +
+ Choice of coffee + + +
+ + +
+ Size +
+ + + + +
+
+ + +
+ Pickup time + + +
+ + +
+ + + + +
+
+
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 000000000..82110e668 --- /dev/null +++ b/index.js @@ -0,0 +1,66 @@ +// =================== NAVIGATION (hamburger menu) =================== + +const toggleButton = document.querySelector(".menu-toggle"); // the hamburger icon +const nav = document.getElementById("myTopnav"); // the