Technigo · SaraEnderborg · Sep 5, 2025 · Sep 5, 2025 · Sep 5, 2025 · Sep 11, 2025
diff --git a/images/.ignore b/images/.ignore
@@ -0,0 +1 @@
+You have successfully downloaded your photos. You will need to unzip these files onto your computer before using them.
diff --git a/images/Hero.wedding.jpg b/images/Hero.wedding.jpg
diff --git a/images/couple1.jpg b/images/couple1.jpg
diff --git a/images/couple2.jpg b/images/couple2.jpg
diff --git a/images/family1.jpg b/images/family1.jpg
diff --git a/images/kid1.jpg b/images/kid1.jpg
diff --git a/images/kid2.jpg b/images/kid2.jpg
diff --git a/images/kid3.jpg b/images/kid3.jpg
diff --git a/images/photographer.jpg b/images/photographer.jpg
diff --git a/images/wed1.jpg b/images/wed1.jpg
diff --git a/images/wed2.jpg b/images/wed2.jpg
diff --git a/images/wed3.jpg b/images/wed3.jpg
diff --git a/images/wed4.jpg b/images/wed4.jpg
diff --git a/images/wedding5 (1).jpg b/images/wedding5 (1).jpg
diff --git a/images/wedding6.jpg b/images/wedding6.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Photography by Louise</title>
+    <link 
+      href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <link 
+      rel="stylesheet"
+      href="style.css">
+  </head>
+  <body>
+    <div class="wrapper">
+      <header class="header">
+        <h1>Photography by Louise</h1>
+        <button class="hamburger" aria-label="Menu">☰</button>
+        <nav class="navbar">
+          <ul>
+            <li><a href="#about">About</a></li>
+            <li><a href="portfolio.html">Portfolio</a></li>
+            <li><a href="#sessions">Sessions</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <section class="hero">
+          <div class="hero-content">
+            <h2>Catch the moments that means the most</h2>
+            <p>Beautiful memories, captured forever</p>
+             <a
+              href="#contact"
+              class="hero-button"
+            >
+              Book a session
+            </a>
+          </div>
+        </section>
+
+        <section
+          id="about"
+          class="about"
+        >
+          <div class="about wrapper">
+           <img
+              class="about-img"
+              src="../images/photographer.jpg"
+              alt="photographer portrait"
+            />
+            <div class="about-text">
+              <h2>About Me</h2>
+              <p>
+                Hello! I'm Louise, a passionate photographer who loves capturing
+                authentic moments. Whether it's a wedding, a couple shoot, or
+                playful kids – my goal is to create timeless memories that you
+                will treasure forever.
+              </p>
+            </div>
+          </div>
+        </section>
+
+         <section
+           id="Sessions"
+           class="grid"
+         >
+          <article class="card">
+            <img
+              src="../images/wed2.jpg"
+              alt="wedding-beach"
+            />
+            <h3>Wedding</h3>
+            <p>Romantic pictures from your big day.</p>
+          </article>
+
+          <article class="card">
+            <img
+              src="../images/couple1.jpg"
+              alt="Couple-photo"
+            />
+            <h3>Couples</h3>
+            <p>Capture love and your special moments</p>
+          </article>
+
+          <article class="card">
+            <img
+              src="../images/kid1.jpg"
+              alt="Family/Children-photo"
+            />
+            <h3>Family/Children</h3>
+            <p>Natural and playful portraits of family/children</p>
+          </article>
+        </section>
+      </main>
+
+      <section
+        id="contact"
+        class="contact"
+      >
+        <h2>Make a request</h2>
+        <form
+          action="https://httpbin.org/anything"
+          method="POST"
+        >
+          <div class="form-input">
+            <label for="name">Name</label>
+            <input
+              required
+              type="text"
+              name="name"
+              id="name"
+              placeholder="Your full name"
+            />
+          </div>
+
+          <div class="form-input">
+            <label for="session">Type of session</label>
+           <select
+              required
+              name="session"
+              id="session"
+            >
+              <option value="">Please choose</option>
+              <option value="wedding">Wedding</option>
+              <option value="couple">Couple</option>
+              <option value="family">Family/Children</option>
+            </select>
+          </div>
+          <div class="form-input">
+            <p>Preferred time of day:</p>
+            <label><input 
+                    type="radio"
+                    name="time" 
+                    value="morning"> Morning
+            </label>
+            <label><input 
+                    type="radio"
+                    name="time" 
+                    value="afternoon"> Afternoon
+            </label>
+            <label><input 
+                    type="radio"
+                    name="time" 
+                    value="Evening"> Evening
+            </label>
+             <label><input 
+                    type="radio"
+                    name="time" 
+                    value="whole"> Whole day
+            </label>
+          </div>
+          <div class="form-input">
+            <label>
+              <input 
+               type="checkbox"
+               name="newsletter"> Sign me up for news
+            </label>
+          </div>
+          <div class="form-input">
+            <label for="date">Preferred date
+            </label>
+           <input
+              required
+              type="date"
+              name="date"
+              id="date"
+            />
+          </div>
+          <div class="form-input">
+            <label for="email">Email</label>
+            <input
+              required
+              type="email"
+              name="email"
+              id="email"
+              placeholder="[email protected]"
+            />
+          </div>
+          <div class="form-input">
+            <label for="message">Message</label>
+            <textarea
+              name="message"
+              id="message"
+              rows="5"
+              cols="50"
+              placeholder="Tell me about your vision?"
+            ></textarea>
+          </div>
+
+          <button type="submit">Send Request</button>
+        </form>
+      </section>
+
+      <footer>
+        <p>&copy; 2025 Photography by Louise</p>
+      </footer>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Portfolio - Photography by Louise</title>
+     <link
+       href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lato:wght@400;700&display=swap"
+       rel="stylesheet">
+    <link 
+      rel="stylesheet"
+      href="style.css">
+  </head>
+  <body>
+    <div class="wrapper">
+      <header class="header">
+        <h1 class="logo">Photography by Louise</h1>
+         <button class="hamburger"
+          aria-label="Menu">
+           ☰      
+         </button>
+        <nav class="navbar">
+          <ul>
+            <li><a href="index.html#about">About</a></li>
+            <li><a href="portfolio.html">Portfolio</a></li>
+            <li><a href="index.html#sessions">Sessions</a></li>
+            <li><a href="index.html#contact">Contact</a></li>
+          </ul>
+        </nav>
+      </header>
+
+      <section class="portfolio">
+        <h2>Portfolio</h2>
+        <div class="portfolio-grid">
+          <img 
+            src="../images/wed4.jpg"
+            alt="Wedding moment" />
+          <img 
+            src="../images/couple2.jpg" 
+            alt="Couple session" />
+          <img 
+            src="../images/family1.jpg"
+            alt="Family shoot" />
+          <img
+            src="../images/kid3.jpg"
+            alt="Children portrait" />
+        </div>
+      </section>
+
+      <footer class="footer">
+        <p>&copy; 2025 Photography by Louise</p>
+      </footer>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,16 @@
+const hamburger = document.querySelector('.hamburger')
+const navbar = document.querySelector('.navbar')
+const navLinks = document.querySelectorAll('.navbar a')
+
+hamburger.addEventListener('click', () => {
+  navbar.classList.toggle('show')
+  hamburger.classList.toggle('open')
+  hamburger.textContent = navbar.classList.contains('show') ? '✕' : '☰'
+});
+
+navLinks.forEach(link => {
+  link.addEventListener('click', () => {
+    navbar.classList.remove('show')
+    hamburger.textContent = '☰'
+  })
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		You have successfully downloaded your photos. You will need to unzip these files onto your computer before using them.