Technigo · fridascript · Sep 5, 2025 · Sep 10, 2025 · Sep 10, 2025 · Sep 16, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
-# js-project-business-site
+# js-project-business-site
+
+section 1: toppmeny (logga             location IG)
+section 2: hero image (header)
+section 3: menybar (bilder) zoomas vid hover
+section 4: menybar (text). länkar till 1. dropdown meny 2. dropdown meny 3. form 
diff --git a/coffeecup.png b/coffeecup.png
diff --git a/herovid.mp4 b/herovid.mp4
diff --git a/ig.jpeg b/ig.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  >
+  <title> no name kafé </title>
+  <link
+    rel="icon"
+    type="image"
+    href="logga2.png"
+  >
+  <link
+    rel="stylesheet"
+    href="style.css"
+  >
+</head>
+
+<body>
+  <header>
+
+    <!--hero image-->
+    <video
+      autoplay
+      muted
+      loop
+      playsinline
+    >
+      <source
+        src="herovid.mp4"
+        type="video/mp4"
+      />
+    </video>
+
+
+    <!--navbar including;
+  1.logga - 2.hamburger - 3.navbar-links-->
+
+    <!--logga-->
+    <nav class="navbar">
+      <div class="logga">
+        <img
+          src="logga2.png"
+          alt="logga"
+        >
+      </div>
+
+      <!--hamburger-menu-->
+      <button class="hamburger">☰</button>
+
+      <!--nav bar-links-->
+      <div class="nav-links">
+        <a href="#">
+          <svg
+            viewBox="0 0 288 512"
+            width="12"
+            title="map-pin"
+          >
+            <path
+              d="M112 316.94v156.69l22.02 33.02c4.75 7.12 15.22 7.12 19.97 0L176 473.63V316.94c-10.39 1.92-21.06 3.06-32 3.06s-21.61-1.14-32-3.06zM144 0C64.47 0 0 64.47 0 144s64.47 144 144 144 144-64.47 144-144S223.53 0 144 0zm0 76c-37.5 0-68 30.5-68 68 0 6.62-5.38 12-12 12s-12-5.38-12-12c0-50.73 41.28-92 92-92 6.62 0 12 5.38 12 12s-5.38 12-12 12z"
+            />
+          </svg>
+        </a>
+        <a href="http://instagram.com">
+          <svg
+            viewBox="0 0 512 512"
+            width="18"
+            title="camera-retro"
+          >
+            <path
+              d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"
+            />
+          </svg>
+        </a>
+      </div>
+    </nav>
+
+    <h1> NO NAME <br> KAFÉ </h1>
+    </section>
+  </header>
+
+  <!--grid container-->
+  <section class="menybar">
+
+    <!--COFFEE-->
+    <article
+      class="menybubbla"
+      tabindex="0"
+    >
+      <img
+        class="illustration"
+        src="coffeecup.png"
+        alt="coffee"
+      >
+
+      <h2> COFFEE </h2>
+
+      <!-- dropdownmenu-coffee-->
+      <ul class="dropdown-menu">
+        <li> Espresso 15kr</li>
+        <li> Dubbel 25kr</li>
+        <li> Americano 25kr</li>
+        <li> Latte 35kr</li>
+      </ul>
+    </article>
+
+    <!--FOOD-->
+    <article
+      class="menybubbla"
+      tabindex="0"
+    >
+      <img
+        class="illustration"
+        src="macka.png"
+        alt="food"
+      >
+
+      <h2> FOOD </h2>
+      <!--dropdown-menu-food-->
+      <ul class="dropdown-menu">
+        <li>no name sandwich 75 kr </li>
+        <li>no name salad 120 kr</li>
+      </ul>
+    </article>
+
+    <!--HANG-YOUR-ART-->
+    <article
+      class="menybubbla"
+      tabindex="0"
+    >
+      <img
+        class="illustration"
+        src="painting.png"
+        alt="hang your art"
+      >
+      <h2> HANG YOUR <br> ART </h2>
+
+      <!--dropdown-form-hang-your-art-->
+      <form
+        class="dropdown-form"
+        action="https://httpbin.org/anything"
+        method="POST"
+      >
+        <p> Want to hang your art in our cafe? <br>
+          Fill out your info and we will get back with more information shortly!
+        </p>
+
+        <label for="instagram">Instagram:</label>
+        <input
+          type="text"
+          name="instagram"
+          id="instagram"
+        >
+
+        <label for="email">Email:</label>
+        <input
+          type="email"
+          name="email"
+          id="email"
+        >
+
+        <label for="portfolio">Link your portfolio:</label>
+        <input
+          type="url"
+          id="portfolio"
+          name="portfolio"
+        >
+
+        <label
+          for="radio-button"
+          class="consent"
+        >
+          <input
+            type="radio"
+            id="radio-button"
+            name="consent"
+          >
+          I agree to the use of my information.
+        </label>
+
+
+        <button type="submit">💌</button>
+      </form>
+    </article>
+  </section>
+  <!--end-grid-container-menybar-->
+
+
+  <footer>
+    mon-fri: 8-17
+    sat-sun: 9-20
+    <br>
+    no name kafé
+  </footer>
+
+  <!--java-for-hamburger-->
+  <script>
+    const btn = document.querySelector('.hamburger');
+    const links = document.querySelector('.nav-links');
+
+    btn.addEventListener('click', () => {
+      links.classList.toggle('show');
+    });
+  </script>
+</body>
+
+</html>
diff --git a/logga.png b/logga.png
diff --git a/logga2.png b/logga2.png
diff --git a/macka.png b/macka.png
diff --git a/painting.png b/painting.png
diff --git a/pin.png b/pin.png