Technigo · Nicolinabl · Sep 1, 2025 · Sep 1, 2025 · Sep 1, 2025 · Sep 1, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}
diff --git a/README.md b/README.md
@@ -1 +1,47 @@
-# js-project-business-site
+# js-project-business-site
+
+# Business site - Willz models
+https://willz-models.netlify.app/
+
+This website is my contribution to Technigo bootcamps assignment: project business site. The goal was to explore responsive design, interactivity, and layout techniques. The aim for me while building this was to learn as much as possible while playing around and having fun with the code. Therefor I chose to make a dummy model agency site featuring my family cat Willz. My goal was to make the website look professional but with fun content. The site combines professional design elements with playful, interactive features, making it both visually appealing and enjoyable to explore.
+
+## Features
+* Responsive Design: Optimized for desktop, tablet, and mobile devices.
+
+* Navigation: Full navigation bar for desktop, Hamburger menu on smaller screens with interactive DOM functionality
+
+* Interactive Theme: “Party Mode” button changes the site’s color scheme and vibe using JavaScript.
+
+* Layout: Created using grid and flexbox
+
+* Booking Form: Includes multiple input types with POST submission to httpbin.org
+
+## Technologies used
+* HTML – Semantic structure and accessibility
+
+* CSS – Styling with Flexbox and CSS Grid for responsive layouts
+
+* JavaScript – Interactive hamburger menu and dynamic theme toggle
+
+## Project requirements met
+* Fully responsive across all viewport sizes (320px–1600px)
+
+* Responsive navigation bar and layout using Flexbox and Grid
+
+* Responsive header with hero image/video
+
+* Interactive form with multiple input types and POST submission
+
+* Hamburger menu on smaller screens, functional using javaScript
+
+* Successfully deployed on Netlify
+
+## Learning Outcomes
+
+* Practiced responsive design techniques across devices
+
+* Implemented interactive features using JavaScript
+
+* Experimented with theme toggling and playful UI
+
+* Gained experience combining CSS Grid and Flexbox for complex layouts
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/Willz-catwalk.jpeg b/images/Willz-catwalk.jpeg
diff --git a/images/Willz-fancy.jpeg b/images/Willz-fancy.jpeg
diff --git a/images/blue-paint.jpg b/images/blue-paint.jpg
diff --git a/images/disco.jpg b/images/disco.jpg
diff --git a/images/golden-party.jpg b/images/golden-party.jpg
diff --git a/images/willz-artsy.jpeg b/images/willz-artsy.jpeg
diff --git a/images/willz-cowboy.jpeg b/images/willz-cowboy.jpeg
diff --git a/images/willz-dreaming.png b/images/willz-dreaming.png
diff --git a/images/willz-dress.jpeg b/images/willz-dress.jpeg
diff --git a/images/willz-glasses.png b/images/willz-glasses.png
diff --git a/images/willz-jacket.jpeg b/images/willz-jacket.jpeg
diff --git a/images/willz-kpop.jpeg b/images/willz-kpop.jpeg
diff --git a/images/willz-manicure.jpeg b/images/willz-manicure.jpeg
diff --git a/images/willz-nature.jpeg b/images/willz-nature.jpeg
diff --git a/images/willz-potato.jpeg b/images/willz-potato.jpeg
diff --git a/images/willz-princess.jpeg b/images/willz-princess.jpeg
diff --git a/images/willz-royal.jpeg b/images/willz-royal.jpeg
diff --git a/images/willz-zara.jpeg b/images/willz-zara.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,289 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  >
+  <title>Willz agency</title>
+  <link
+    rel="stylesheet"
+    href="style.css"
+  />
+  <link
+    rel="preconnect"
+    href="https://fonts.googleapis.com"
+  >
+  <link
+    rel="preconnect"
+    href="https://fonts.gstatic.com"
+    crossorigin
+  >
+  <link
+    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+    rel="stylesheet"
+  >
+</head>
+
+<body id="fullBody">
+  <!---NAVBAR DESKTOP------------->
+  <ul
+    id="desktopNav"
+    class="nav-list"
+  >
+    <li><a href="#homePage">Home </a></li>
+    <li><a href="#modelSection">Models </a></li>
+    <li><a href="#information">About us </a></li>
+    <li><a href="#formSection">Contact </a></li>
+
+    <button
+      id="partyMode"
+      class="partyButton"
+    >Party mode</button>
+  </ul>
+
+  <!---HAMBURGER MENU-->
+  <div
+    class="hamburger"
+    onclick="hamburgerFunction(this)"
+  >
+    <div class="barOne"></div>
+    <div class="barTwo"></div>
+    <div class="barThree"></div>
+  </div>
+
+  <nav class="hamburgerLinks">
+    <ul>
+      <span class="hamburgerLinkSpan">
+        <li
+          onclick="closeHamburger()"
+          class="hamburgerList"
+        ><a href="#homePage">Home</li></a>
+      </span>
+      <span class="hamburgerLinkSpan">
+        <li
+          onclick="closeHamburger()"
+          class="hamburgerList"
+        ><a href="#modelSection">Models</li></a>
+      </span>
+      <span class="hamburgerLinkSpan">
+        <li
+          onclick="closeHamburger()"
+          class="hamburgerList"
+        ><a href="#information">About us</li></a>
+      </span>
+      <span class="hamburgerLinkSpan">
+        <li
+          onclick="closeHamburger()"
+          class="hamburgerList"
+        ><a href="#formSection">Contact</li></a>
+      </span>
+      <span class="hamburgerButtonSpan"><button
+          onclick="partyCloseHamburger()"
+          id="partyModeHamburger"
+          class="partyButton"
+        >Party mode</button></span>
+    </ul>
+  </nav>
+
+  <!---HERO SECTION-->
+  <header
+    id="homePage"
+    class="hero"
+  >
+    <div class="header-text">
+      <h1 id="heroText">WILLZ MODELS</h1>
+      <p class="header-paragraph">A one cat model agency</p>
+    </div>
+  </header>
+
+  <!----MAIN section--------->
+  <section
+    id="modelSection"
+    class="main-section"
+  >
+    <div class="card 1">
+      <img src="images/willz-zara.jpeg" />
+      <h3>Fashionable</h3>
+    </div>
+
+    <div class="card 2">
+      <img src="images/Willz-fancy.jpeg" />
+      <h3>Sofisticated</h3>
+    </div>
+
+    <div class="card 3">
+      <img src="images/willz-cowboy.jpeg" />
+      <h3>casual</h3>
+    </div>
+
+    <div class="card 4">
+      <img src="images/Willz-catwalk.jpeg" />
+      <h3>professional</h3>
+    </div>
+
+    <div class="card 5">
+      <img src="images/willz-royal.jpeg" />
+      <h3>Royal</h3>
+    </div>
+
+    <div class="card 6">
+      <img src="images/willz-potato.jpeg" />
+      <h3>stoic</h3>
+    </div>
+
+    <div class="card 7">
+      <img src="images/willz-kpop.jpeg" />
+      <h3>Modern</h3>
+    </div>
+
+    <div class="card 8">
+      <img src="images/willz-jacket.jpeg" />
+      <h3>Focused</h3>
+    </div>
+
+    <div class="card 9">
+      <img src="images/willz-princess.jpeg" />
+      <h3>Feminine</h3>
+    </div>
+
+    <div class="card 10">
+      <img src="images/willz-artsy.jpeg" />
+      <h3>Artistic</h3>
+    </div>
+
+    <div class="card 11">
+      <img src="images/willz-manicure.jpeg" />
+      <h3>Well groomed</h3>
+    </div>
+
+    <div class="card 12">
+      <img src="images/willz-nature.jpeg" />
+      <h3>Natural</h3>
+    </div>
+  </section>
+
+
+  <!--INFO + FORM section------->
+  <section
+    id="information"
+    class="info-section"
+  >
+    <div class="info-text">
+      <h2>ABOUT US</h2>
+      <img
+        class="infoImage"
+        src="images/willz-dreaming.png"
+        alt="cat"
+      >
+      <p>Forget about casting calls, multiple models, or diva drama. Willz is the one-cat wonder your brand
+        has been dreaming of. From slick fashion to casual cool, Willz can pull off any look, any pose and any vibe. All
+        without a single hiss. Professional Purr-fectionist: Takes direction better than most humans. Multi-Look expert:
+        From well dressed sofisticated looks to natural vibes, Willz does it all. Flexible & Focused: Stretches, yawns,
+        or stares
+        dramatically, all on cue. Why hire a dozen models when Willz has mastered it all? Book a shoot and let this
+        feline phenomenon turn you project into a paw-some masterpiece.</p>
+    </div>
+
+    <div
+      id="formSection"
+      class="form-section"
+    >
+      <form
+        action="https://httpbin.org/anything"
+        method="post"
+      >
+        <div class="formHeading">
+          <h3>Request a booking with willz</h3>
+        </div>
+        <fieldset>
+          <label>
+            <span class="customer-name">Name</span>
+            <input
+              type="text"
+              name="name"
+              placeholder="Your name"
+              required
+            >
+          </label>
+
+          <label>
+            <span class="customer-email">Email</span>
+            <input
+              type="email"
+              name="email"
+              placeholder="[email protected]"
+              required
+            >
+          </label>
+
+          <label>
+            <span class="version-willz">Type of booking</span>
+            <select
+              name="willz-version"
+              id="willz-version"
+              required
+            >
+              <option
+                value="booking type"
+                selected
+                disabled
+              >Choose type of booking</option>
+              <option value="Photo shoot">Photo shoot</option>
+              <option value="Catwalk">Catwalk</option>
+              <option value="Live performance">Live performance</option>
+            </select>
+          </label>
+
+          <label>
+            <span class="requested-date">Requested date</span>
+            <input
+              type="date"
+              name="day"
+              id="day"
+              required
+            >
+          </label>
+
+          <div class="radiobutton-row">
+            <label class="radiobutton-container">Full day
+              <input
+                type="radio"
+                name="time"
+                value="Full day"
+              >
+              <span class="custom-radiobutton"></span>
+            </label>
+            <label class="radiobutton-container">Half day
+              <input
+                type="radio"
+                name="time"
+                value="Half day"
+              >
+              <span class="custom-radiobutton"></span>
+            </label>
+          </div>
+          <div class="button-box">
+            <button
+              id="submit-button"
+              class="submit-button"
+              type="submit"
+            >Submit</button>
+          </div>
+        </fieldset>
+      </form>
+    </div>
+
+  </section>
+
+  <!---FOOTER----------->
+  <footer>
+    <p>Created by: Nicolina Bäcklin Löwenberg</p>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,52 @@
+const hamburgerLinks = document.querySelector(".hamburgerLinks")
+const hamburgerBtn = document.querySelector(".hamburger")
+
+function hamburgerFunction(x) {
+  x.classList.toggle("change")
+  hamburgerLinks.classList.toggle("open")
+}
+
+const btn = document.getElementById("partyMode")
+const modelSection = document.getElementById("modelSection")
+const desktopNav = document.getElementById("desktopNav")
+const heroText = document.getElementById("heroText")
+const btnHamburger = document.getElementById("partyModeHamburger")
+const fullBody = document.getElementById("fullBody")
+
+btn.onclick = () => {
+  modelSection.classList.toggle("party")
+  desktopNav.classList.toggle("partyNav")
+  heroText.classList.toggle("partyText")
+  fullBody.classList.toggle("partyBody")
+}
+
+btnHamburger.onclick = () => {
+  modelSection.classList.toggle("party")
+  desktopNav.classList.toggle("partyNav")
+  heroText.classList.toggle("partyText")
+  fullBody.classList.toggle("partyBody")
+  closeHamburger()
+}
+
+function closeHamburger() {
+  hamburgerLinks.classList.remove("open")
+  hamburgerBtn.classList.remove("change")
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+