Technigo · AgnesSj01 · Sep 5, 2025 · Sep 5, 2025 · Sep 10, 2025 · Sep 10, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# js-project-business-site
+# js-project-business-site
diff --git a/contact.html b/contact.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!--Making the page responsive on different screen sizes-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contact</title>
+
+    <!--=====External CSS files====-->
+    <!--CSS for the popup boxes-->
+    <link rel="stylesheet" href="popupbox.css" />
+    <!--Css for the form-->
+    <link rel="stylesheet" href="forms.css" />
+    <!--Css for the overal style on the page-->
+
+    <link rel="stylesheet" href="style.css" />
+
+    <!--Font "Awesome" for icons, used for hambruger meny-->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
+    />
+
+    <!--Javascript file (menu and popup functionality)-->
+    <script src="index.js" defer></script>
+  </head>
+
+  <body>
+    <!--=====================HEADER===========================-->
+    <!--named the class for the header to "site-header"-->
+    <header class="site-header">
+      <!--Logo and brand text for the site-->
+      <a class="brand" href="index.html">
+        <img src="images/expresso.png" alt="Coffee logo" class="logo" />
+        <span class="logo-text">Legacy Coffee</span></a
+      >
+
+      <!--hamburger menu button (only visible on mobile)-->
+      <button
+        class="menu-toggle"
+        aria-label="Open menu"
+        aria-controls="myTopnav"
+        aria-expanded="false"
+      >
+        <!-- Font Awesome solid (fylld ikon) + bars (hamburgerikon) -->
+        <i class="fa-solid fa-bars"></i>
+      </button>
+
+      <!--navigation links-->
+      <nav class="top-nav" id="myTopnav">
+        <ul>
+          <li><a href="openinghours.html">OPENING HOURS</a></li>
+          <li><a href="contact.html">CONTACT</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <!--========================MAIN CONTENT====================================-->
+    <div id="page">
+      <main id="content">
+        <!-- Hero-sektion with a background video-->
+        <section class="hero-opening" aria-labelledby="hero-title">
+          <img src="./images/barista.jpg" alt="cake" class="hero-img" />
+          <h1 id="hero-title">CONTACT</h1>
+        </section>
+        <section class="contact-text">
+          <p><strong>Phone number</strong>: 08-123 456 78</p>
+          <p><strong>Email</strong>: LegacyCoffee@gmail.com</p>
+          <p>
+            Would like to collaborate with us? Feel free to contact us via our
+            Instagram
+          </p>
+        </section>
+      </main>
+
+      <!--===Footer with contact details====-->
+      <footer>
+        <p>@2025 Legacy Coffee</p>
+        <p>Storgatan 29 Stockholm</p>
+        <p>
+          Follow our instagram:
+          <!-- This link opens in a new tab.
+            The rel="noopener noreferrer" part improves security
+            by preventing the new page from accessing our site,
+             and also hides the referrer information. -->
+          <a
+            href="https://www.instagram.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Instagram</a
+          >
+        </p>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/forms.css 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
diff --git a/images/barista.jpg b/images/barista.jpg
diff --git a/images/cake.jpg b/images/cake.jpg
diff --git a/images/coffeBreak.jpg b/images/coffeBreak.jpg
diff --git a/images/coffeeheart.jpg b/images/coffeeheart.jpg
diff --git a/images/coffeemaking.jpg b/images/coffeemaking.jpg
diff --git a/images/coffeemenu.jpg b/images/coffeemenu.jpg
diff --git a/images/coffeetakeaway.jpg b/images/coffeetakeaway.jpg
diff --git a/images/expresso.png b/images/expresso.png
diff --git a/images/grandmother.png b/images/grandmother.png
diff --git a/images/menu.jpg b/images/menu.jpg
diff --git a/images/menu.png b/images/menu.png
diff --git a/images/takeaway.jpg b/images/takeaway.jpg
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		# js-project-business-site
		# js-project-business-site