Technigo · majaengberg02 · Sep 3, 2025 · Sep 11, 2025 · Sep 16, 2025 · Sep 17, 2025
diff --git a/Images/brandon-day-oCJuJQqvCzc-unsplash.jpg b/Images/brandon-day-oCJuJQqvCzc-unsplash.jpg
diff --git a/Images/calab-acker-vOiTMqB-xDk-unsplash.jpg b/Images/calab-acker-vOiTMqB-xDk-unsplash.jpg
diff --git a/Images/cristina-glebova--zeIM3l8OJo-unsplash.jpg b/Images/cristina-glebova--zeIM3l8OJo-unsplash.jpg
diff --git a/Images/g-l-q3XE0HnCEGc-unsplash.jpg b/Images/g-l-q3XE0HnCEGc-unsplash.jpg
diff --git a/Images/haberdoedas-Zc3fR4AiH4U-unsplash.jpg b/Images/haberdoedas-Zc3fR4AiH4U-unsplash.jpg
diff --git a/Images/lum3n-DwDCTnlp-V4-unsplash.jpg b/Images/lum3n-DwDCTnlp-V4-unsplash.jpg
diff --git a/Images/martin-chavez-NYXMfO8E-nQ-unsplash.jpg b/Images/martin-chavez-NYXMfO8E-nQ-unsplash.jpg
diff --git a/Images/matthew-henry-6x-hVXXiBxs-unsplash.jpg b/Images/matthew-henry-6x-hVXXiBxs-unsplash.jpg
diff --git a/Images/menu_18dp_2446C2_FILL0_wght300_GRAD0_opsz20.svg b/Images/menu_18dp_2446C2_FILL0_wght300_GRAD0_opsz20.svg
diff --git a/Images/natalia-gusakova-oWiWdIO1rfQ-unsplash.jpg b/Images/natalia-gusakova-oWiWdIO1rfQ-unsplash.jpg
diff --git a/Images/ryan-walton-wsSsXz8HMX8-unsplash.jpg b/Images/ryan-walton-wsSsXz8HMX8-unsplash.jpg
diff --git a/Images/sebastian-herrmann-yEmTlB3CdS8-unsplash.jpg b/Images/sebastian-herrmann-yEmTlB3CdS8-unsplash.jpg
diff --git a/README.md b/README.md
@@ -1 +1,45 @@
-# js-project-business-site
+# js-project-business-site
+
+# Paws of Hope Website
+
+A website for **Paws of Hope**, an organization dedicated to rescuing and rehoming animals.  
+Built with **HTML**, **CSS**, and **JavaScript**.  
+
+Live site: https://business-site-pawsofhope.netlify.app/
+
+---
+
+## Purpose
+- Share the mission of Paws of Hope  
+- Showcase adoptable pets  
+- Provide contact information and newsletter signup  
+
+---
+
+## Pages
+- **Home** – Introduction and mission  
+- **About** – Information about the organization  
+- **Adopt** – Profiles of pets available for adoption  
+- **Contact** – Contact details and newsletter subscription  
+
+---
+
+## Tech Stack
+- HTML5  
+- CSS3  
+- JavaScript  
+
+---
+
+## Setup
+1. Clone or download this repository.  
+2. Open the project in VS Code (or another editor).  
+3. Open `index.html` in a browser or use Live Server in VS Code.  
+
+---
+
+## Future Improvements
+- Add detailed pet pages  
+- Implement search and filters for adoptions  
+- Improve form validation  
+- Optimize images for performance  
diff --git a/index.html b/index.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Paws of Hope</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js" defer></script>
+</head>
+
+<body>
+
+  <section>
+
+    <nav class="navbar" id="navbar">
+      <h1 class="logo">Paws of Hope</h1>
+      <button 
+      id="open-menu-btn" 
+      onclick="openSidebar()" 
+      aria-label="Open Menu">
+        <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="30" 
+        height="30" 
+        viewBox="0 0 24 22" 
+        fill="none" 
+        stroke="#2446C2"
+        stroke-width="3" 
+        stroke-linecap="round" 
+        stroke-linejoin="round">
+          <line x1="3" y1="13" x2="21" y2="13"></line>
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="20" x2="21" y2="20"></line>
+        </svg>
+      </button>
+      <div class="nav-links" id="navbarLinks">
+        <button 
+        id="close-menu-btn" 
+        onclick="closeSidebar()" 
+        aria-label="Close Menu">
+          <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          height="30px" 
+          viewBox="0 0 24 22" 
+          width="30px" 
+          fill="none"
+          stroke="#2446C2" 
+          stroke-width="3" 
+          stroke-linecap="round" 
+          stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+        <a href="#home">Home</a>
+        <a href="#about">About</a>
+        <a href="#adopt">Adopt</a>
+        <a href="#contact">Contact</a>
+      </div>
+    </nav>
+  </section>
+
+  <div 
+  id="overlay" 
+  onclick="closeSidebar()" 
+  aria-hidden="true">
+  </div>
+
+  <section>
+    <div class="hero-container">
+      <img class="hero-image" 
+      src="Images/lum3n-DwDCTnlp-V4-unsplash.jpg" 
+      alt="Hero image of a dog">
+
+      <div class="hero-text">
+        <h2>ADOPT</h2>
+        <h3>Don't shop</h3>
+        <div class="hero-button">
+          <a href="#adopt">Meet the Pack!</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <div class="about">
+      <h4 id="about">About Us</h4>
+      <p>We are a non-profit organization dedicated to rescuing and rehoming abandoned and abused animals. Our mission
+        is to provide a safe haven for these animals and find them loving forever homes.</p>
+    </div>
+
+    <section id="adopt">
+      <div class="card-section">
+        <div class="card">
+          <img class="card-image" 
+          src="/Images/sebastian-herrmann-yEmTlB3CdS8-unsplash.jpg" 
+          alt="Dog Image">
+          <h5>Nala</h5>
+          <p>Female</p>
+          <a href="#adopt">Read more</a>
+        </div>
+
+        <div class="card">
+          <img class="card-image" 
+          src="/Images/g-l-q3XE0HnCEGc-unsplash.jpg" 
+          alt="Dog Image">
+          <h5>Willow</h5>
+          <p>Female</p>
+          <a href="#adopt">Read more</a>
+        </div>
+
+        <div class="card">
+          <img class="card-image" 
+          src="/Images/haberdoedas-Zc3fR4AiH4U-unsplash.jpg" 
+          alt="Dog Image">
+          <h5>Billy</h5>
+          <p>Male</p>
+          <a href="#adopt">Read more</a>
+        </div>
+
+        <div class="card">
+          <img class="card-image" 
+          src="/Images/natalia-gusakova-oWiWdIO1rfQ-unsplash.jpg" 
+          alt="Dog Image">
+          <h5>Zeke</h5>
+          <p>Male</p>
+          <a href="#adopt">Read more</a>
+        </div>
+    </section>
+
+    <div class="view-all-button">
+      <a href="#adopt">View All Pets</a>
+    </div>
+
+    <div class="contact-section">
+      <div class="contact-text">
+        <h4>Contact Us</h4>
+        <p>
+          If you have any questions or would like to learn more about our organization, please don't hesitate to reach
+          out.
+          We would love to hear from you!
+        </p>
+      </div>
+
+
+      <div class="contact-form" id="contact">
+        <form action="http://httpbin.org/anything" method="POST">
+
+          <div class="name-email">
+            <input 
+            required
+            type="text" 
+            id="name" 
+            name="name" 
+            placeholder="Name" 
+            style="width: 100%;">
+
+            <input 
+            required
+            type="email" 
+            id="email" 
+            name="email" 
+            placeholder="Email"
+            style="width: 100%;">
+          </div>
+
+          <div class="subject-message">
+            <input 
+            required
+            type="text" 
+            id="subject" 
+            name="subject" 
+            placeholder="Subject">
+
+            <textarea 
+            required
+            name="message" 
+            id="message" 
+            cols="30" 
+            rows="5" 
+            placeholder="Message"></textarea>
+          </div>
+
+          <div class="subscribe-checkbox">
+            <label class="checkbox-container">Subscribe to our monthly newsletter?
+              <input type="checkbox" checked>
+              <span class="custom-checkbox"></span>
+            </label>
+          </div>
+          <button class="send-button">Send</button>
+
+        </form>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <footer class="footer">
+      <p>&copy; 2025 Paws of Hope. All rights reserved.</p>
+    </footer>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,28 @@
+const navbar = document.getElementById('navbarLinks')
+
+// Makes the sidebar open and close when clicking the buttons
+function openSidebar() {
+  navbar.classList.add('show')
+}
+
+function closeSidebar() {
+  navbar.classList.remove('show')
+}
+
+
+// Overlay functionality to close the sidebar when clicking outside of it
+function openSidebar() {
+  document.querySelector('.nav-links').classList.add('show');
+  document.body.classList.add('menu-open');
+}
+
+function closeSidebar() {
+  document.querySelector('.nav-links').classList.remove('show');
+  document.body.classList.remove('menu-open');
+}
+
+// Close sidebar when clicking on a navigation link
+const navLinks = document.querySelectorAll('.nav-links a');
+navLinks.forEach(link => {
+  link.addEventListener('click', closeSidebar);
+});