Technigo · RPaemurd · Sep 9, 2025 · Sep 9, 2025 · Sep 11, 2025 · Sep 16, 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,3 @@
-# js-project-business-site
+# js-project-business-site
+
+https://js-project-business.netlify.app/
diff --git a/images/Group 2.jpg b/images/Group 2.jpg
diff --git a/images/Hero.jpg b/images/Hero.jpg
diff --git a/images/Intersect.jpg b/images/Intersect.jpg
diff --git a/images/annie-spratt-AAJOt76pQtY-unsplash.jpg b/images/annie-spratt-AAJOt76pQtY-unsplash.jpg
diff --git a/images/camping.jpg b/images/camping.jpg
diff --git a/images/chris-lawton-6tfO1M8_gas-unsplash.jpg b/images/chris-lawton-6tfO1M8_gas-unsplash.jpg
diff --git a/images/daniel-j-schwarz-wGoKAJGAeNs-unsplash.jpg b/images/daniel-j-schwarz-wGoKAJGAeNs-unsplash.jpg
diff --git a/images/ewan-robertson-5kP9M84AGUE-unsplash.jpg b/images/ewan-robertson-5kP9M84AGUE-unsplash.jpg
diff --git a/images/jonny-gios-6kHkMDEaqVw-unsplash.jpg b/images/jonny-gios-6kHkMDEaqVw-unsplash.jpg
diff --git a/images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg b/images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg
diff --git a/images/marita-kavelashvili-ugnrXk1129g-unsplash.jpg b/images/marita-kavelashvili-ugnrXk1129g-unsplash.jpg
diff --git a/images/matthew-smith-Rfflri94rs8-unsplash.jpg b/images/matthew-smith-Rfflri94rs8-unsplash.jpg
diff --git a/images/navicon.png b/images/navicon.png
diff --git a/images/quentin-zwzeorQPepo-unsplash.jpg b/images/quentin-zwzeorQPepo-unsplash.jpg
diff --git a/images/tino-rischawy-kJ1Ndy-Q3Fw-unsplash.jpg b/images/tino-rischawy-kJ1Ndy-Q3Fw-unsplash.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Find My Trail</title>
+    <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=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:[email protected]&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Container for all the content -->
+    <div class="layout-container">
+
+        <header>
+            <section class="nav-menu">
+                <div class="nav-links">
+                    <ul>
+                        <!-- Navigation links on desktop -->
+                        <li><a href="/home">Home</a></li>
+                        <li><a href="/about">About</a></li>
+                        <li><a href="/contact">Contact</a></li>
+                    </ul>
+                </div>
+            </section>
+            <nav>
+                <!-- Hamburger menu -->
+                <section class="ham-menu">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </section>
+            </nav>
+            <!-- Header text -->
+            <section class="header-text">
+                <h3>THE GREAT OUTDOORS</h3>
+                <h1>Find My Trail</h1>
+            </section>
+        </header>
+        <!-- Container for my cards and form -->
+        <main class="container">
+            <section class="text-container">
+                <h3>EXPERIENCE</h3>
+                <h2>The Thrilling Outdoors</h2>
+                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
+                <p>lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+            </section>
+
+            <section class="mid-content">
+                <article class="card1">
+                    <div class="card-text">
+                        <h2>Trail Guide</h2>
+                        <p>Lorem, ipsum dolor sit amet <br>  consectetur adipisicing elit. <br> Tenetur dolore sed accusantium nisi molestias.</p>
+                    </div>
+                </article>
+
+                <article class="card2">
+                    <div class="card-text">
+                        <h2>Scenic Routes</h2>
+                        <p>Lorem, ipsum dolor sit amet <br>  consectetur adipisicing elit. <br> Tenetur dolore sed accusantium nisi molestias.</p>
+                    </div>
+                </article>
+
+                <article class="card3">
+                    <div class="card-text">
+                        <h2>Trail & Error</h2>
+                        <p>Lorem, ipsum dolor sit amet <br>  consectetur adipisicing elit. <br> Tenetur dolore sed accusantium nisi molestias.</p>
+                    </div>
+                </article>
+            </section>
+
+            <section class="text-content">
+              <p>Lorem, ipsum dolor sit amet consectetur </p>
+            </section>
+
+            <section class="form-section">
+                <article class="card4">
+                    <form action="https://httpbin.org/anything" method="POST">
+                        <h3>Walk with us!</h3>
+
+                        <label for="fname">First Name</label>
+                        <input 
+                            type="text" 
+                            id="fname" 
+                            name="firstname" required 
+                            placeholder="Your name..">
+
+                        <label for="lname">Last Name</label>
+                        <input 
+                            type="text" 
+                            id="lname" 
+                            name="lastname" required 
+                            placeholder="Your last name..">
+
+                        <label for="email">Your emailaddress..</label>
+                        <input 
+                            type="email" 
+                            name="email" required
+                            placeholder="Your emailadress...">
+
+                        <button type="submit">Start hiking</button>
+
+                    </form>
+                </article>
+            </section>
+        </main>
+
+        <footer>
+            <p>&copy; Find My Trail. All rights reserved.</p>
+        </footer>
+
+    </div>
+
+    <script src="script.js"></script>
+
+</body>
+</html>
+
diff --git a/script.js b/script.js
@@ -0,0 +1,12 @@
+// Find the hamburger icon
+const hamMenu = document.querySelector(".ham-menu");
+// Find the menu panel
+const navMenu = document.querySelector(".nav-menu");
+
+// When the hamburger icon is clicked
+hamMenu.addEventListener("click", () => {
+    // ...adds a class called "active" to the icon to change it to an "X".
+    hamMenu.classList.toggle("active");
+    // ...and add the "active" class to the menu to make it slide out.
+    navMenu.classList.toggle("active");
+});