diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..2ba7cb4
Binary files /dev/null and b/.DS_Store differ
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..0f9429a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5503
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 57e6d16..28bed92 100644
--- a/README.md
+++ b/README.md
@@ -7,3 +7,5 @@ A basic web server template focused on web accessibility practices.
 1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
 
 2. Clone your forked repository
+
+created form javascript
\ No newline at end of file
diff --git a/about.html b/about.html
deleted file mode 100644
index 5adbad6..0000000
--- a/about.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>About</title>
-    <link rel="stylesheet" href="css/styles.css" />
-  </head>
-  <body></body>
-</html>
diff --git a/booking.html b/booking.html
new file mode 100644
index 0000000..e0c2d98
--- /dev/null
+++ b/booking.html
@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta
+    name="description"
+    content="booking page for events."
+  />
+  <meta charset="UTF-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>Booking</title>
+  <link
+    rel="stylesheet"
+    href="css/styles.css"
+  />
+</head>
+
+<body>
+  <a
+    href="#main-content"
+    class="skip-link"
+  >Skip to main content</a>
+
+  <header role="banner">
+    <div class="header-left">
+      <h1>Event Booking</h1>
+      <nav
+        role="navigation"
+        aria-label="Main navigation"
+      >
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="#events">Events</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+
+    <div class="text-settings-wrapper">
+      <button
+        id="text-settings-button"
+        aria-haspopup="true"
+        aria-expanded="false"
+        aria-controls="text-settings-panel"
+        aria-label="Text settings"
+      >
+        ⚙️
+      </button>
+
+      <section
+        id="text-settings-panel"
+        class="text-settings-panel"
+        hidden
+        aria-label="Text customization"
+      >
+        <h2 class="visually-hidden">Text customization</h2>
+
+        <div class="text-control">
+          <label for="font-size">Font size:</label>
+          <select
+            id="font-size"
+            aria-label="Font size"
+          >
+            <option value="default">Default</option>
+            <option value="large">Large</option>
+            <option value="x-large">Extra Large</option>
+          </select>
+        </div>
+
+        <div class="text-control">
+          <label for="line-height">Line height:</label>
+          <select
+            id="line-height"
+            aria-label="Line height"
+          >
+            <option value="default">Default</option>
+            <option value="wide">Wide</option>
+            <option value="x-wide">Extra Wide</option>
+          </select>
+        </div>
+      </section>
+    </div>
+  </header>
+
+  <main id="ticket-booking">
+    <h2>Book tickets</h2>
+    <form id="booking-form">
+      <div class="form-control">
+        <label
+          for="name"
+          class="form-text"
+        >Name:</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          required
+          aria-required="true"
+        >
+      </div>
+
+      <div class="form-control">
+        <label
+          for="email"
+          class="form-text"
+        >Email:</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+          aria-required="true"
+        >
+      </div>
+
+      <div class="form-control">
+        <label
+          for="events"
+          class="form-text"
+        >Choose your event</label>
+        <select id="events">
+          <option>Art Exhibition</option>
+          <option>Live Concert</option>
+          <option>Food Festival</option>
+          <option>Tech Conference</option>
+        </select>
+      </div>
+
+      <div class="form-control">
+        <label
+          for="event-date"
+          class="form-text"
+        >Event date:</label>
+        <input
+          type="date"
+          id="event-date"
+          name="event-date"
+        >
+      </div>
+
+      <fieldset>
+        <legend class="form-text">Accessibility options</legend>
+    <div class="header-top">
+      <h1>Event Booking</h1>
+      <button id="contrast-toggle" aria-label="Toggle high contrast mode" title="Toggle high contrast mode" class="contrast-btn">
+        High Contrast
+      </button>
+    </div>
+    <nav
+      role="navigation"
+      aria-label="Main navigation"
+    >
+      <ul>
+        <li><a href="/index.html">Return to Homepage</a></li>
+        <li><a href="#events">Events</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main id="ticket-booking">
+    <h2>Book tickets</h2>
+    <form id="booking-form">
+      <div class="form-control">
+        <label
+          for="name"
+          class="form-text"
+        >Name:</label>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          required
+          aria-required="true"
+        >
+      </div>
+
+      <div class="form-control">
+        <label
+          for="email"
+          class="form-text"
+        >Email:</label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          required
+          aria-required="true"
+        >
+      </div>
+
+      <div class="form-control">
+        <label
+          for="events"
+          class="form-text"
+        >Choose your event</label>
+        <select id="events">
+          <option>Art Exhibition</option>
+          <option>Live Concert</option>
+          <option>Food Festival</option>
+          <option>Tech Conference</option>
+        </select>
+      </div>
+
+      <div class="form-control">
+        <label
+          for="event-date"
+          class="form-text"
+        >Event date:</label>
+        <input
+          type="date"
+          id="event-date"
+          name="event-date"
+        >
+      </div>
+
+      <fieldset>
+        <legend class="form-text">Accessibility options</legend>
+        <div class="radio-group">
+          <input
+            type="radio"
+            name="radio"
+            id="wheelchair"
+            value="wheelchair-chosen"
+          />
+          <label
+            for="wheelchair"
+            class="form-text"
+          >Wheelchair accessibility</label>
+        </div>
+        <div class="radio-group">
+          <input
+            type="radio"
+            name="radio"
+            id="scared-of-heights"
+            value="virtigo-chosen"
+          />
+          <label
+            for="scared-of-heights"
+            class="form-text"
+          >Scared of heights</label>
+        </div>
+        <div class="radio-group">
+          <input
+            type="radio"
+            name="radio"
+            id="wheelchair"
+            value="wheelchair-chosen"
+          />
+          <label
+            for="wheelchair"
+            class="form-text"
+          >Wheelchair accessibility</label>
+        </div>
+        <div class="radio-group">
+          <input
+            type="radio"
+            name="radio"
+            id="scared-of-heights"
+            value="virtigo-chosen"
+          />
+          <label
+            for="scared-of-heights"
+            class="form-text"
+          >Scared of heights</label>
+        </div>
+        <div class="radio-group">
+          <input
+            type="radio"
+            name="radio"
+            id="no-preference"
+            value="no-disability"
+          />
+          <label
+            for="no-preference"
+            class="form-text"
+          >No preference</label>
+        </div>
+            id="no-preference"
+            value="no-disability"
+          />
+          <label
+            for="no-preference"
+            class="form-text"
+          >No preference</label>
+        </div>
+      </fieldset>
+      <button type="submit">Book event</button>
+
+
+        <fieldset>
+          <legend class="form-text">Accessibility options</legend>
+          <div class="radio-group">
+            <input
+              type="radio"
+              name="radio"
+              id="wheelchair"
+              value="wheelchair-chosen"
+            />
+            <label for="wheelchair" class="form-text">Wheelchair accessibility</label>
+          </div>
+          <div class="radio-group">
+            <input
+              type="radio"
+              name="radio"
+              id="scared-of-heights"
+              value="virtigo-chosen"
+            />
+            <label for="scared-of-heights" class="form-text">Scared of heights</label>
+          </div>
+          <div class="radio-group">
+            <input
+              type="radio"
+              name="radio"
+              id="no-preference"
+              value="no-disability"
+            />
+            <label for="no-preference" class="form-text">No preference</label>
+          </div>
+        </fieldset>
+        <button type="submit">Book event</button>
+
+
+      </form>
+
+      <section id="results" hidden>
+		<h2>Thank you for order. The ticket will be sent to the email provided</h2>
+		<div id="results-content"></div>
+	  </section>
+    </main>
+
+
+  <footer>
+    <section
+      class="contact-section"
+      id="contact"
+    >
+      <div class="contact-information">
+        <h4>Contact</h4>
+        <p><b>Phone:</b> +46 00 000 00 00</p>
+        <p><b>Mail:</b> mail@mail.com</p>
+      </div>
+
+      <div class="social-media-information">
+        <h4>Social media</h4>
+        <a href="https://www.facebook.com/"><img
+            class="facebook-icon"
+            src="icons/facebook.png"
+            alt="link to facebook"
+          ></a>
+        <a href="https://www.instagram.com/"><img
+            class="instagram-icon"
+            src="icons/instagram.png"
+            alt="link to instagram"
+          ></a>
+      </div>
+    </section>
+
+    <section id="results" aria-live="polite" hidden>
+  <h2 id="results-title">Thank you for your order</h2>
+  <div id="results-content"></div>
+</section>
+
+  </footer>
+
+<script src="js/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index 86b5727..a158584 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,832 +1,674 @@
-/* Base styles with accessibility considerations */
-@import 'modal.css';
-
-:root {
-  --primary-color: #2c3e50;
-  --background-color: #ffffff;
-  --accent-color: #0040a3; /* Darker blue for better contrast */
-  --error-color: #e74c3c;
-  --success-color: #27ae60;
-  --focus-outline: 3px solid var(--accent-color);
-  --focus-ring-color: rgba(0, 86, 179, 0.5);
-  --progress-bg: #edf2f7;
-  --modal-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
-  --text-color: #2c3e50;
-  --border-color: #e2e8f0;
-  --hover-bg: rgba(0, 0, 0, 0.05);
-  --transition-speed: 0.3s;
-}
-
-/* Apply box-sizing border-box to all elements */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Checkbox styling */
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.checkbox-container input[type='checkbox'] {
-  width: auto;
-  margin-right: 0.5rem;
-}
-
-select {
-  width: 100%;
-  padding: 0.5rem;
-  font-size: 1rem;
-  border-radius: 4px;
-  border: 1px solid var(--primary-color);
+#ticket-booking h2 {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.checkbox-container label {
-  margin-bottom: 0;
+/* Padding for h1 and h2 on booking page */
+#ticket-booking h1,
+#ticket-booking h2 {
+  padding-left: var(--space-lg);
+  padding-right: var(--space-lg);
 }
 
-.intro-section {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  justify-content: space-between;
+:root {
+  /* Color palette: high contrast, color-blind friendly */
+  --color-bg: #ffffff;
+  --color-fg: #1a1a1a;
+  --color-primary: #005a9e;
+  --color-primary-hover: #003d6a;
+  --color-accent: #e60050;
+  --color-border: #cccccc;
+  --color-focus: #ffbf47;
+  --color-error: #b00020;
+
+  /* Font and sizing */
+  --font-family: 'Segoe UI', Arial, sans-serif;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-sm: 0.95rem;
+  --line-height: 1.5;
+
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 2rem;
+}
+
+/* High Contrast Mode */
+:root.high-contrast {
+  /* High contrast color palette - WCAG AAA compliant */
+  --color-bg: #ffffff;
+  --color-fg: #000000;
+  --color-primary: #000080;
+  --color-primary-hover: #0066cc;
+  --color-accent: #f3c42a;
+  --color-border: #000000;
+  --color-focus: #ffffff;
+  --color-error: #cc0000;
+}
+
+html {
+  font-size: 100%;
+  background: var(--color-bg);
+  color: var(--color-fg);
+  font-family: var(--font-family);
+  line-height: var(--line-height);
 }
 
-/* Base styles for readability */
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
-    sans-serif;
-  line-height: 1.6;
-  color: var(--primary-color);
-  background-color: var(--background-color);
   margin: 0;
-  font-size: 16px;
-  max-width: 800px;
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-/* Skip link with enhanced visibility */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--accent-color);
-  color: white;
-  padding: 8px;
-  z-index: 100;
-  transition: top 0.3s;
+  padding: 0;
+  background: var(--color-bg);
+  color: var(--color-fg);
 }
 
-.skip-link:focus {
-  top: 0;
-  outline: var(--focus-outline);
-  outline-offset: 2px;
+a {
+  color: var(--color-primary);
+  text-decoration: underline;
 }
 
-/* Enhanced focus styles */
-:focus-visible {
-  outline: var(--focus-outline);
-  outline-offset: 2px;
-  border-radius: 2px;
+a:hover,
+a:focus {
+  color: var(--color-primary-hover);
+  outline: none;
 }
 
-/* Progress bar styles */
-.quiz-progress {
-  margin: 2rem 0;
-}
-/* Images */
-.decorative-image,
-.info-image {
-  max-width: 15rem;
-  height: auto;
-  margin: 1rem 0;
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--color-fg);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  padding: var(--space-sm) var(--space-md);
   border-radius: 4px;
 }
 
-.progress-bar {
-  background-color: var(--progress-bg);
-  border-radius: 8px;
-  height: 20px;
-  overflow: hidden;
-  position: relative;
-}
-
-.progress-fill {
-  background-color: var(--primary-color);
-  height: 100%;
-  transition: width 0.3s ease;
-  border-radius: 8px;
+button {
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s;
 }
 
-.progress-text {
-  margin-top: 0.5rem;
-  text-align: center;
-  font-weight: 500;
+button:hover,
+button:focus {
+  background: var(--color-primary-hover);
+  outline: 3px solid var(--color-focus);
+  outline-offset: 2px;
 }
 
-/* Question groups */
-.question-group {
-  margin-bottom: 2rem;
-  padding: 1rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  background-color: #f8fafc;
+input:focus,
+select:focus,
+textarea:focus {
+  outline: 3px solid var(--color-focus);
+  outline-offset: 2px;
 }
 
-.question-heading {
-  color: var(--primary-color);
-  margin-bottom: 1rem;
-  font-size: 1.1rem;
+label {
+  font-size: var(--font-size-base);
+  margin-bottom: var(--space-xs);
+  display: block;
 }
 
-/* Form elements */
 fieldset {
-  border: 1px solid var(--primary-color);
-  margin: 1em 0;
-  padding: 1em;
-  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  padding: var(--space-md);
+  margin-bottom: var(--space-md);
 }
 
 legend {
   font-weight: bold;
-  padding: 0.5em 1em;
-  color: var(--primary-color);
-  background-color: #f8fafc;
-  border: 1px solid var(--primary-color);
-  border-radius: 4px;
+  font-size: var(--font-size-lg);
 }
 
-.radio-group {
-  margin: 1em 0;
+.skip-link {
+  position: absolute;
+  left: -999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  background: var(--color-focus);
+  color: #000;
+  padding: var(--space-sm) var(--space-md);
+  z-index: 1000;
 }
 
-/* Enhanced radio button styling */
-.radio-option {
-  position: relative;
-  padding: 0.75em;
-  margin: 0.5em 0;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-  display: flex;
-  align-items: center;
+.skip-link:focus {
+  left: 0;
+  top: 0;
+  width: auto;
+  height: auto;
+  outline: 3px solid var(--color-accent);
+  padding: var(--space-sm) var(--space-md);
+  z-index: 1001;
 }
 
-.radio-option:hover {
-  background-color: rgba(44, 62, 80, 0.1);
+/* Layout and Section Styles */
+header[role="banner"] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  flex-direction: row;
+  background: var(--color-primary);
+  color: #fff;
+  padding: var(--space-lg) var(--space-lg) var(--space-md) var(--space-lg);
+  margin-bottom: var(--space-lg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
-/* Custom radio button styling */
-input[type='radio'] {
-  margin-right: 0.75em;
-  width: 20px;
-  height: 20px;
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-md);
 }
 
-input[type='radio']:focus-visible + label {
-  outline: var(--focus-outline);
-  outline-offset: 2px;
-  border-radius: 2px;
+header[role="banner"] h1 {
+  margin: 0;
+  font-size: 2rem;
+  letter-spacing: 1px;
 }
 
-input[type='radio'] + label {
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-  flex: 1;
+.header-left {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: var(--space-sm);
 }
 
-/* Instructions section */
-.quiz-instructions {
-  background-color: #f8f9fa;
-  padding: 1em;
-  margin: 1em 0;
-  border-left: 4px solid var(--accent-color);
-  border-radius: 0 4px 4px 0;
+nav[role="navigation"] ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: var(--space-md);
+  flex-wrap: wrap;
 }
 
-/* Submit button */
-.form-controls {
-  margin-top: 2rem;
-  text-align: center;
+nav[role="navigation"] li {
+  margin: 0;
 }
 
-.submit-button {
-  background-color: var(--primary-color);
-  color: white;
-  border: none;
-  padding: 12px 24px;
-  font-size: 1rem;
-  cursor: pointer;
+nav[role="navigation"] a {
+  color: #fff;
+  background: transparent;
+  padding: var(--space-xs) var(--space-sm);
   border-radius: 4px;
-  transition: background-color 0.2s, transform 0.1s;
   font-weight: 500;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s;
 }
 
-.submit-button:hover {
-  background-color: #34495e;
+nav[role="navigation"] a:focus,
+nav[role="navigation"] a:hover {
+  background: var(--color-focus);
+  color: var(--color-fg);
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
-.submit-button:active {
-  transform: scale(0.98);
+.contrast-btn {
+  background: #fff;
+  color: var(--color-primary);
+  border: 2px solid #fff;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: 4px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  font-size: var(--font-size-sm);
 }
 
-.submit-button:focus-visible {
-  outline: var(--focus-outline);
+.contrast-btn:hover, .contrast-btn:focus {
+  background: var(--color-focus);
+  color: #000;
+  outline: 2px solid var(--color-accent);
   outline-offset: 2px;
 }
 
-/* Results section */
-#results {
-  margin-top: 2rem;
-  padding: 1.5rem;
-  border-radius: 8px;
-  background-color: #f8fafc;
-  border: 1px solid var(--primary-color);
-  margin-bottom: 3rem;
+.contrast-btn.active {
+  background: var(--color-accent);
+  color: #000;
+  border-color: var(--color-accent);
 }
 
-.feedback-details {
-  margin-top: 1rem;
-  padding: 1rem;
-  border-radius: 4px;
+footer {
+  background: var(--color-primary);
+  color: #fff;
+  padding: var(--space-md) 0;
+  text-align: left;
+  margin-top: var(--space-lg);
 }
 
-#feedback-form {
-  margin-bottom: 3rem;
+footer h4 {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: var(--font-size-lg);
 }
 
-/* Utility classes */
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+footer svg {
+  vertical-align: middle;
+  margin-left: var(--space-xs);
 }
 
-/* High contrast mode */
-@media (prefers-contrast: more) {
-  :root {
-    --primary-color: #000000;
-    --background-color: #ffffff;
-    --accent-color: #0000ff;
-    --error-color: #ff0000;
-    --success-color: #008000;
-    --text-color: #000000;
-    --border-color: #000000;
-    --hover-bg: #000000;
-    --focus-outline: 3px solid #000000;
-    --focus-ring-color: #000000;
-    --progress-bg: #ffffff;
-  }
-
-  body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-  }
-
-  a {
-    color: var(--accent-color);
-    text-decoration: underline;
-  }
-
-  button,
-  input,
-  select,
-  textarea {
-    border: 2px solid var(--text-color);
-    background-color: var(--background-color);
-    color: var(--text-color);
-  }
-
-  fieldset {
-    border: 2px solid var(--text-color);
-  }
-
-  legend {
-    border: 2px solid var(--text-color);
-    background-color: var(--background-color);
-  }
-
-  .radio-option:hover,
-  .checkbox-container:hover {
-    background-color: var(--hover-bg);
-  }
-
-  .progress-bar {
-    border: 2px solid var(--text-color);
-  }
-
-  .progress-fill {
-    background-color: var(--text-color);
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-
-  .progress-fill {
-    transition: none;
-  }
-
-  .skip-link {
-    transition: none;
-  }
-
-  button,
-  input,
-  select,
-  textarea {
-    transition: none;
-  }
+.contact-section {
+  display: flex;
+  gap: 40px;
+  padding-left: 20px;
+  justify-content: center;
 }
 
-/* Add a class for manual high contrast toggle */
-.high-contrast-mode {
-  --primary-color: #000000 !important;
-  --background-color: #ffffff !important;
-  --accent-color: #0000ff !important;
-  --error-color: #ff0000 !important;
-  --success-color: #008000 !important;
-  --text-color: #000000 !important;
-  --border-color: #000000 !important;
-  --hover-bg: #000000 !important;
-  --focus-outline: 3px solid #000000 !important;
-  --focus-ring-color: #000000 !important;
-  --progress-bg: #ffffff !important;
-  --modal-shadow: 0 0 0 2px #000000 !important;
+.facebook-icon,
+.instagram-icon {
+  width: 40px;
 }
 
-/* Basic responsive design */
-@media (max-width: 600px) {
-  fieldset {
-    padding: 0.5em;
-  }
-
-  header {
-    padding: 1.25rem;
-  }
-
-  nav ul {
-    gap: 0.75rem;
-  }
+.social-media-information {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
 
-/* User Info Form */
-#user-info {
-  margin-bottom: 2rem;
-  padding: 1.5rem;
-  background-color: #f8fafc;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
+.contact-information {
+  display: flex;
+  flex-direction: column;
 }
 
+/* Component Styles */
 .form-control {
-  margin-bottom: 1.5rem;
-  position: relative;
+  margin-bottom: var(--space-md);
 }
 
-.form-control label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--primary-color);
-}
-
-.form-control input {
-  width: 100%;
-  padding: 0.75rem;
-  font-size: 1rem;
-  border: 1px solid var(--primary-color);
-  border-radius: 4px;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  box-sizing: border-box;
+form {
+  max-width: 400px;
+  margin: 0 auto;
+  background: var(--color-primary);
+  color: #fff;
+  padding: var(--space-lg) var(--space-md);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
-.form-control input:focus {
-  outline: none;
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px var(--focus-ring-color);
+form input,
+form select,
+form textarea {
+  background: #fff;
+  color: var(--color-fg);
+  border: 1px solid var(--color-border);
 }
 
-.form-control input[aria-invalid='true'] {
-  border-color: var(--error-color);
+form input:focus,
+form select:focus,
+form textarea:focus {
+  outline: 3px solid var(--color-focus);
+  outline-offset: 2px;
 }
 
-.form-control input[aria-invalid='true']:focus {
-  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.25);
+form button[type="submit"] {
+  background: #fff;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+  font-weight: bold;
+  transition: background 0.2s, color 0.2s;
 }
 
-.error {
-  color: var(--error-color);
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
+form button[type="submit"]:hover,
+form button[type="submit"]:focus {
+  background: var(--color-primary-hover);
+  color: #fff;
+  border-color: var(--color-primary-hover);
 }
 
-.hint {
-  color: var(--secondary-color);
-  font-size: 0.875rem;
-  margin-top: 0.25rem;
+form label,
+form legend,
+form .form-text {
+  color: #fff !important;
 }
 
-/* Introduction section and images */
-#introduction {
-  padding: 2rem;
-  margin-bottom: 2rem;
-  background-color: #f8fafc;
-  border-radius: 12px;
+.form-control {
+  margin-bottom: var(--space-md);
 }
 
-#introduction h2 {
-  color: var(--primary-color);
-  font-size: 2rem;
-  margin-bottom: 1.5rem;
+input[type="text"],
+input[type="email"],
+input[type="date"],
+select {
+  width: 100%;
+  box-sizing: border-box;
 }
 
-#introduction p {
-  max-width: 800px;
-  margin: 0 auto 2rem;
+input[type="radio"] {
+  margin-right: var(--space-xs);
 }
 
-.hero-images {
+.radio-group {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 2rem;
-  margin: 2rem 0;
+  margin-bottom: var(--space-xs);
 }
 
-.decorative-image,
-.info-image {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+fieldset {
+  margin-top: var(--space-md);
 }
 
-.info-image {
-  padding: 1rem;
-  background: white;
+button[type="submit"] {
+  width: 100%;
+  font-size: var(--font-size-base);
+  margin-top: var(--space-md);
 }
 
-@media (min-width: 768px) {
-  .hero-images {
-    flex-direction: row;
-    justify-content: center;
-    gap: 3rem;
-  }
-
-  .decorative-image,
-  .info-image {
-    width: 45%;
-    max-width: 400px;
-  }
+#hero {
+  text-align: center;
+  margin-bottom: var(--space-lg);
 }
 
-/* Full-width banner */
-#banner {
-  margin: -20px -20px 2rem;
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-  overflow: hidden;
+#hero h2 {
+  font-size: 1.7rem;
+  margin-bottom: var(--space-md);
 }
 
-#banner img {
+#hero img {
+  max-width: 750px;
   width: 100%;
-  height: 200px;
-  object-fit: cover;
-}
-
-h1,
-h2 {
-  margin-bottom: 1rem;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+  margin: 0 auto var(--space-md) auto;
+  display: block;
 }
 
-nav ul {
-  list-style: none;
-  padding: 0;
+.event {
+  background: #f9f9f9;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: var(--space-lg);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
+  max-width: 350px;
+  margin: 0 auto;
   display: flex;
-  gap: 1rem;
-}
-
-nav a {
-  color: var(--accent-color);
-  text-decoration: none;
-}
-
-nav a:hover {
-  text-decoration: underline;
-}
-
-/* About page specific styles */
-#about {
-  padding: 3rem;
-  background-color: #f8fafc;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-#about h2 {
-  color: #2c3e50;
-  font-size: 2.5rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 3px solid #3498db;
-  padding-bottom: 0.5rem;
-  display: inline-block;
-}
-
-#about p {
-  font-size: 1.2rem;
-  line-height: 1.8;
-  color: #34495e;
-  margin-bottom: 2rem;
-  max-width: 700px;
+  flex-direction: column;
+  align-items: center;
+  transition: box-shadow 0.2s;
 }
 
-#about .hero-images {
-  margin: 3rem 0;
-  display: flex;
-  justify-content: center;
+.event:focus-within,
+.event:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  outline: 3px solid var(--color-focus);
+  outline-offset: 2px;
 }
 
-#about .hero-images img {
-  max-width: 100%;
+.event img {
+  width: 100%;
   height: auto;
-  border-radius: 12px;
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
+  border-radius: 6px;
+  margin-bottom: var(--space-md);
+  display: block;
 }
 
-#about .hero-images img:hover {
-  transform: scale(1.02);
+.event h3 {
+  font-size: var(--font-size-lg);
+  margin-top: 0;
+  margin-bottom: var(--space-sm);
 }
 
-/* Header improvements */
-#header {
-  width: 100vw;
-  margin-left: calc(-50vw + 50%);
-  margin-right: calc(-50vw + 50%);
-  background-color: var(--primary-color);
-  color: white;
-  padding: 2rem 0;
+.event p {
+  margin: 0 0 var(--space-xs) 0;
+  font-size: var(--font-size-base);
 }
 
-#header .header-content {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 0 1rem;
+.event button {
+  margin-top: auto;
+  width: 100%;
+  font-size: var(--font-size-base);
 }
 
-#header h1 {
-  color: white;
-  margin-bottom: 1rem;
+/* Accessibility/Focus Styles */
+:focus:not(:focus-visible) {
+  outline: none;
 }
 
-#header nav ul {
-  list-style: none;
-  padding: 0;
-  margin: 1rem 0;
-  display: flex;
-  gap: 2rem;
+.text-settings-wrapper {
+  position: relative;
+  display: inline-block;
+  margin-top: var(--space-md);
+  padding-left: var(--space-xs);
 }
 
-#header nav a {
-  color: white;
-  text-decoration: none;
-  font-size: 1.1rem;
+#text-settings-button {
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  padding: 0.8rem 1.5rem;
+  border-radius: 4px;
+  font-size: var(--font-size-base);
+  cursor: pointer;
   font-weight: 500;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  transition: opacity var(--transition-speed);
-}
-
-#header nav a:hover {
-  opacity: 0.8;
-  background-color: rgba(255, 255, 255, 0.1);
+  transition: background 0.2s;
 }
 
-@media (max-width: 600px) {
-  #header {
-    padding: 1.5rem 0;
-  }
-
-  #header nav ul {
-    gap: 1rem;
-  }
+#text-settings-button:hover,
+#text-settings-button:focus {
+  background: var(--color-primary-hover);
+  color: var(--color-fg);
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
-/* Accordion Styles */
-.accordion-container {
-  margin: 2rem 0;
-  max-width: 800px;
+.text-settings-panel {
+  position: fixed;
+  top: 60px;
+  right: 10px;
+  width: 200px;
+  background: var(--color-primary);
+  color: #fff;
+  padding: 1rem;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
 }
 
-.accordion-container h3 {
+.text-settings-panel .text-control {
+  display: flex;
+  flex-direction: column;
   margin-bottom: 1rem;
-  color: var(--primary-color);
-}
-
-.accordion {
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
 }
 
-.accordion-item {
-  border-bottom: 1px solid var(--border-color);
-}
-
-.accordion-item:last-child {
-  border-bottom: none;
-}
-
-/* Remove margins from h4 in accordion items */
-.accordion-item h4 {
-  margin: 0;
+.text-settings-panel label {
+  margin-bottom: 0.25rem;
+  font-weight: 500;
 }
 
-.accordion-button {
-  width: 100%;
-  padding: 2rem;
-  background: none;
+.text-settings-panel select {
+  padding: 0.4rem 0.6rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  font-size: var(--font-size-base);
   border: none;
-  text-align: left;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--primary-color);
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: background-color var(--transition-speed) ease;
+  background: #fff;
+  color: var(--color-fg);
+  transition: background 0.2s;
+  display: inline-block;
 }
 
-.accordion-button:hover {
-  background-color: var(--hover-bg);
+#text-settings-button:focus-visible,
+.text-settings-panel select:focus {
+  outline: 3px solid var(--color-focus);
+  outline-offset: 2px;
 }
 
-.accordion-button:focus-visible {
-  outline: var(--focus-outline);
-  outline-offset: -2px;
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+  clip-path: inset(50%);
 }
 
-.accordion-icon {
-  display: inline-block;
-  width: 1.2rem;
-  height: 1.2rem;
-  position: relative;
-  transition: transform var(--transition-speed) ease;
+/* Responsive font size */
+@media (max-width: 600px) {
+  html {
+    font-size: 90%;
+  }
 }
 
-.accordion-icon::before,
-.accordion-icon::after {
-  content: '';
-  position: absolute;
-  background-color: currentColor;
-  transition: transform var(--transition-speed) ease;
-}
+@media (min-width: 700px) {
+  header[role="banner"] {
+    flex-wrap: nowrap;
+  }
 
-.accordion-icon::before {
-  width: 2px;
-  height: 1.2rem;
-  left: 50%;
-  transform: translateX(-50%);
-}
+  nav[role="navigation"] ul {
+    margin-bottom: var(--space-md);
+  }
 
-.accordion-icon::after {
-  width: 1.2rem;
-  height: 2px;
-  top: 50%;
-  transform: translateY(-50%);
-}
 
-.accordion-button[aria-expanded='true'] .accordion-icon::before {
-  transform: translateX(-50%) rotate(90deg);
+/* Grid layout for events */
+/* Grid layout for events */
+#events {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4rem;
+  align-items: start;
+  grid-auto-rows: min-content;
+  padding-left: var(--space-lg);
+  padding-right: var(--space-lg);
+  width: 100%;
+  margin-bottom: var(--space-lg);
+  box-sizing: border-box;
 }
 
-.accordion-content {
-  padding: 0 1rem;
-  overflow: hidden;
-  transition: max-height var(--transition-speed) ease-out;
-}
+@media (max-width: 1100px) {
+  #events {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-lg);
+    justify-content: center;
+  }
 
-.accordion-content[hidden] {
-  display: none;
-}
+  .event {
+    flex: 1 1 300px;
+    max-width: 350px;
+  }
 
-.accordion-content:not([hidden]) {
-  padding-bottom: 1rem;
-}
+  .text-settings-wrapper {
+    margin-top: 0;
+  }
 
-/* High contrast mode support */
-.high-contrast-mode .accordion-button {
-  border: 2px solid var(--primary-color);
-  margin: 0.5rem;
-}
+  .text-settings-panel {
+    position: absolute;
+    top: 100%;
+    right: 0;
+  }
 
-.high-contrast-mode .accordion-button:hover {
-  background-color: var(--primary-color);
-  color: white;
-}
+  #text-settings select {
+    padding: 0.25rem 0.5rem;
+  }
 
-/* Footer styles */
-footer {
-  width: 100vw;
-  margin-left: calc(-50vw + 50%);
-  margin-right: calc(-50vw + 50%);
-  background-color: var(--primary-color);
-  color: white;
-  padding: 2rem 0;
-  margin-top: auto;
-}
+  #text-settings label {
+    margin: 0;
+    font-weight: 500;
+    display: inline-block;
+    white-space: nowrap;
+  }
 
-.footer-content {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  display: grid;
-  gap: 2rem;
+  #text-settings-button {
+    margin-top: 1rem;
+    font-size: 1.5rem;
+    padding: 0.5rem 1rem;
+    margin-right: 2rem;
+  }
 }
 
-.footer-content nav {
-  margin-bottom: 1rem;
-}
 
-.footer-content h3 {
-  color: white;
-  margin-bottom: 1rem;
-  font-size: 1.2rem;
-}
+/* Modal styling below */
 
-.footer-content ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.modal {
+  display: none;
+  /* Hidden by default*/
+  position: fixed;
+  /* Stay in place*/
+  z-index: 1000;
+  /* Sit on top*/
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  /* Enable scroll if needed*/
+  background-color: rgb(0, 0, 0);
+  /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.4);
+  /* Black w/ opacity */
+}
+
+/* Visual cue for invalid inputs */
+.invalid { outline: 2px solid #d33; }
+
+/* Simple “ticket” look */
+.ticket { border: 2px dashed #999; padding: 1rem; border-radius: .5rem; }
+.ticket-head { display: flex; justify-content: space-between; margin-bottom: .5rem; }
+.ticket-body { display: grid; gap: .25rem; }
+.ticket-body dt { font-weight: 600; display: inline; margin-right: .5rem; }
+.ticket-body dd { display: inline; margin: 0; }
+.ticket-foot { margin-top: .5rem; font-size: .95rem; opacity: .9; }
+/* Modal content box */
+.modal-content {
+  background-color: #ffffff;
+  margin: 15% auto;
+  /* 15% from the top and centered*/
+  padding: 20px;
+  border: 1px solid #005a9e;
+  width: 40%;
+  /* Could be more or less, depending on screen size*/
+}
+
+/* Close button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
 }
 
-.footer-content a {
-  color: white;
+.close:hover,
+.close:focus {
+  color: black;
   text-decoration: none;
-  padding: 0.5rem 0;
-  display: block;
-  transition: opacity var(--transition-speed);
+  cursor: pointer;
 }
 
-.footer-content a:hover {
-  opacity: 0.8;
+.news-letter-info {
+  text-align: center;
 }
 
-.footer-info {
-  grid-column: 1 / -1;
-  text-align: center;
-  padding-top: 1rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+.modal-text {
+  margin-top: 0;
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @media (max-width: 600px) {
-  footer {
-    padding-bottom: 4rem;
-  }
-  .footer-info {
-    margin-bottom: 10rem;
-  }
-  .footer-content {
+  #events {
     grid-template-columns: 1fr;
-    text-align: center;
-  }
-
-  .footer-content nav {
-    margin-bottom: 2rem;
+    padding-left: var(--space-md);
+    padding-right: var(--space-md);
   }
 }
 
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .accordion-button,
-  .accordion-icon,
-  .accordion-icon::before,
-  .accordion-icon::after,
-  .accordion-content {
-    transition: none;
-  }
+.newsletter-confirmation {
+  font-size: 20px;
 }
diff --git a/doc/reference code/indexref.html b/doc/reference code/indexref.html
new file mode 100644
index 0000000..4dba157
--- /dev/null
+++ b/doc/reference code/indexref.html	
@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Discover and create memorable experiences with events happening near you">
+    <title>EventFinder - Find Your Next Experience</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Skip to main content link -->
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+
+    <!-- Header -->
+    <header role="banner" class="header">
+        <div class="container">
+            <nav aria-label="Main navigation" class="nav">
+                <!-- Logo -->
+                <div class="nav-left">
+                    <a href="/" class="logo" aria-label="EventFinder - Home">
+                        <svg class="logo-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="M2 9a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3"></path>
+                            <path d="M2 9h20"></path>
+                            <path d="M2 15a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3"></path>
+                            <path d="M2 15h20"></path>
+                            <path d="m10 3-1 9"></path>
+                            <path d="m15 3 1 9"></path>
+                        </svg>
+                        <span class="logo-text">EventFinder</span>
+                    </a>
+
+                    <!-- Desktop Navigation -->
+                    <ul class="nav-links desktop-nav">
+                        <li><a href="#browse">Browse Events</a></li>
+                        <li><a href="#create">Create Event</a></li>
+                        <li><a href="#help">Help Center</a></li>
+                    </ul>
+                </div>
+
+                <!-- Desktop Actions -->
+                <div class="nav-right desktop-nav">
+                    <button class="btn-icon" aria-label="View liked events">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
+                        </svg>
+                    </button>
+                    <button class="btn btn-outline" aria-label="Sign in to your account">Sign In</button>
+                    <button class="btn btn-primary" aria-label="Sign up for an account">Sign Up</button>
+                </div>
+
+                <!-- Mobile Menu Button -->
+                <button class="btn-icon mobile-menu-btn" id="mobile-menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <line x1="4" x2="20" y1="12" y2="12"></line>
+                        <line x1="4" x2="20" y1="6" y2="6"></line>
+                        <line x1="4" x2="20" y1="18" y2="18"></line>
+                    </svg>
+                </button>
+            </nav>
+
+            <!-- Mobile Menu -->
+            <div id="mobile-menu" class="mobile-menu" role="navigation" aria-label="Mobile navigation" hidden>
+                <ul class="mobile-menu-list">
+                    <li><a href="#browse">Browse Events</a></li>
+                    <li><a href="#create">Create Event</a></li>
+                    <li><a href="#help">Help Center</a></li>
+                    <li class="mobile-menu-divider">
+                        <button class="btn btn-outline btn-full" aria-label="Sign in to your account">Sign In</button>
+                    </li>
+                    <li>
+                        <button class="btn btn-primary btn-full" aria-label="Sign up for an account">Sign Up</button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main id="main-content">
+        <!-- Search Section -->
+        <section class="search-section" aria-labelledby="search-heading">
+            <div class="container">
+                <div class="search-content">
+                    <h1 id="search-heading">Find your next experience</h1>
+                    <p class="search-subtitle">Discover amazing events happening near you</p>
+
+                    <form class="search-form" role="search" aria-label="Event search form" id="search-form">
+                        <div class="search-input-wrapper">
+                            <label for="event-search" class="sr-only">Search for events</label>
+                            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <circle cx="11" cy="11" r="8"></circle>
+                                <path d="m21 21-4.3-4.3"></path>
+                            </svg>
+                            <input type="search" id="event-search" class="search-input" placeholder="Search for events" aria-required="false">
+                        </div>
+
+                        <div class="search-input-wrapper">
+                            <label for="location-search" class="sr-only">Location</label>
+                            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
+                                <circle cx="12" cy="10" r="3"></circle>
+                            </svg>
+                            <input type="search" id="location-search" class="search-input" placeholder="City, state, or zip code" aria-required="false">
+                        </div>
+
+                        <button type="submit" class="btn btn-primary search-btn" aria-label="Search for events">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <circle cx="11" cy="11" r="8"></circle>
+                                <path d="m21 21-4.3-4.3"></path>
+                            </svg>
+                            <span class="search-btn-text">Search</span>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </section>
+
+        <!-- Category Navigation -->
+        <nav class="category-nav" aria-label="Event categories">
+            <div class="container">
+                <h2 id="categories-heading" class="sr-only">Browse by category</h2>
+                <ul class="category-grid" role="list" aria-labelledby="categories-heading">
+                    <li>
+                        <button class="category-btn" aria-label="Browse Music events">
+                            <svg class="category-icon music-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path d="M9 18V5l12-2v13"></path>
+                                <circle cx="6" cy="18" r="3"></circle>
+                                <circle cx="18" cy="16" r="3"></circle>
+                            </svg>
+                            <span>Music</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="category-btn" aria-label="Browse Food & Drink events">
+                            <svg class="category-icon food-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path>
+                                <path d="M7 2v20"></path>
+                                <path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path>
+                            </svg>
+                            <span>Food & Drink</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="category-btn" aria-label="Browse Business events">
+                            <svg class="category-icon business-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
+                                <rect width="20" height="14" x="2" y="6" rx="2"></rect>
+                            </svg>
+                            <span>Business</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="category-btn" aria-label="Browse Arts events">
+                            <svg class="category-icon arts-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
+                                <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
+                                <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
+                                <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
+                                <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path>
+                            </svg>
+                            <span>Arts</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="category-btn" aria-label="Browse Sports events">
+                            <svg class="category-icon sports-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
+                                <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
+                                <path d="M4 22h16"></path>
+                                <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path>
+                                <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path>
+                                <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path>
+                            </svg>
+                            <span>Sports</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="category-btn" aria-label="Browse Theater events">
+                            <svg class="category-icon theater-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path d="M2 10s3-3 3-8"></path>
+                                <path d="M22 10s-3-3-3-8"></path>
+                                <path d="M10 2c0 4.4-3.6 8-8 8"></path>
+                                <path d="M14 2c0 4.4 3.6 8 8 8"></path>
+                                <path d="M2 10s2 2 2 5"></path>
+                                <path d="M22 10s-2 2-2 5"></path>
+                                <path d="M8 15h8"></path>
+                                <path d="M2 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1"></path>
+                                <path d="M14 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1"></path>
+                            </svg>
+                            <span>Theater</span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+
+        <!-- Featured Events -->
+        <section class="events-section" aria-labelledby="featured-events-heading">
+            <div class="container">
+                <div class="section-header">
+                    <h2 id="featured-events-heading">Featured Events</h2>
+                    <a href="#see-more" class="see-all-link">See all</a>
+                </div>
+                <div class="events-grid" id="featured-events" role="list">
+                    <!-- Events will be injected by JavaScript -->
+                </div>
+            </div>
+        </section>
+
+        <!-- Upcoming Events -->
+        <section class="events-section" aria-labelledby="upcoming-events-heading">
+            <div class="container">
+                <div class="section-header">
+                    <h2 id="upcoming-events-heading">Upcoming Events</h2>
+                    <a href="#see-more" class="see-all-link">See all</a>
+                </div>
+                <div class="events-grid" id="upcoming-events" role="list">
+                    <!-- Events will be injected by JavaScript -->
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer role="contentinfo" class="footer" aria-label="Site footer">
+        <div class="container">
+            <div class="footer-grid">
+                <!-- Company Info -->
+                <div class="footer-column">
+                    <div class="footer-logo">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="M2 9a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3"></path>
+                            <path d="M2 9h20"></path>
+                            <path d="M2 15a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3"></path>
+                            <path d="M2 15h20"></path>
+                            <path d="m10 3-1 9"></path>
+                            <path d="m15 3 1 9"></path>
+                        </svg>
+                        <span>EventFinder</span>
+                    </div>
+                    <p class="footer-description">Discover and create memorable experiences with events happening near you.</p>
+                    <nav aria-label="Social media links">
+                        <ul class="social-links">
+                            <li>
+                                <a href="#facebook" aria-label="Visit our Facebook page">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+                                    </svg>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#twitter" aria-label="Visit our Twitter profile">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                        <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
+                                    </svg>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#instagram" aria-label="Visit our Instagram profile">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                        <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
+                                        <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+                                        <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
+                                    </svg>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#linkedin" aria-label="Visit our LinkedIn page">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                                        <rect width="4" height="12" x="2" y="9"></rect>
+                                        <circle cx="4" cy="4" r="2"></circle>
+                                    </svg>
+                                </a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+
+                <!-- Use EventFinder -->
+                <div class="footer-column">
+                    <h3>Use EventFinder</h3>
+                    <nav aria-label="Use EventFinder">
+                        <ul class="footer-links">
+                            <li><a href="#browse">Browse Events</a></li>
+                            <li><a href="#create">Create Event</a></li>
+                            <li><a href="#organizer">Event Organizers</a></li>
+                            <li><a href="#pricing">Pricing</a></li>
+                        </ul>
+                    </nav>
+                </div>
+
+                <!-- Plan Events -->
+                <div class="footer-column">
+                    <h3>Plan Events</h3>
+                    <nav aria-label="Plan Events">
+                        <ul class="footer-links">
+                            <li><a href="#sell-tickets">Sell Tickets Online</a></li>
+                            <li><a href="#solutions">Event Solutions</a></li>
+                            <li><a href="#registration">Event Registration</a></li>
+                            <li><a href="#resources">Resources</a></li>
+                        </ul>
+                    </nav>
+                </div>
+
+                <!-- Connect With Us -->
+                <div class="footer-column">
+                    <h3>Connect With Us</h3>
+                    <nav aria-label="Connect With Us">
+                        <ul class="footer-links">
+                            <li><a href="#contact">Contact Support</a></li>
+                            <li><a href="#help">Help Center</a></li>
+                            <li><a href="#about">About Us</a></li>
+                            <li><a href="#blog">Blog</a></li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+
+            <!-- Bottom Bar -->
+            <div class="footer-bottom">
+                <p>&copy; 2025 EventFinder. All rights reserved.</p>
+                <nav aria-label="Legal links">
+                    <ul class="footer-legal-links">
+                        <li><a href="#terms">Terms of Service</a></li>
+                        <li><a href="#privacy">Privacy Policy</a></li>
+                        <li><a href="#accessibility">Accessibility</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/doc/reference code/scriptref.js b/doc/reference code/scriptref.js
new file mode 100644
index 0000000..d5a9bc3
--- /dev/null
+++ b/doc/reference code/scriptref.js	
@@ -0,0 +1,368 @@
+// ==================== Event Data ====================
+const featuredEvents = [
+    {
+        id: "1",
+        title: "Summer Music Festival 2025",
+        image: "https://images.unsplash.com/photo-1700087209989-5a83d1a7c484?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb25jZXJ0JTIwbXVzaWMlMjBwZXJmb3JtYW5jZXxlbnwxfHx8fDE3NjE2NTE2NTd8MA&ixlib=rb-4.1.0&q=80&w=1080",
+        date: "2025-06-15",
+        dateDisplay: "June 15, 2025",
+        time: "6:00 PM",
+        location: "Central Park, New York, NY",
+        price: "$45 - $120",
+        category: "Music",
+        isFeatured: true
+    },
+    {
+        id: "2",
+        title: "Food & Wine Festival",
+        image: "https://images.unsplash.com/photo-1551883709-2516220df0bc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmb29kJTIwZmVzdGl2YWwlMjBvdXRkb29yfGVufDF8fHx8MTc2MTU2NjQ2Mnww&ixlib=rb-4.1.0&q=80&w=1080",
+        date: "2025-05-20",
+        dateDisplay: "May 20, 2025",
+        time: "12:00 PM",
+        location: "Downtown Plaza, Chicago, IL",
+        price: "$30 - $85",
+        category: "Food & Drink",
+        isFeatured: true
+    },
+    {
+        id: "3",
+        title: "Tech Innovation Summit",
+        image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGNvbmZlcmVuY2V8ZW58MXx8fHwxNzYxNTY0NDkxfDA&ixlib=rb-4.1.0&q=80&w=1080",
+        date: "2025-07-08",
+        dateDisplay: "July 8, 2025",
+        time: "9:00 AM",
+        location: "Convention Center, San Francisco, CA",
+        price: "$299 - $599",
+        category: "Business",
+        isFeatured: false
+    },
+    {
+        id: "4",
+        title: "Modern Art Exhibition",
+        image: "https://images.unsplash.com/photo-1719398026703-0d3f3d162e51?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBleGhpYml0aW9uJTIwZ2FsbGVyeXxlbnwxfHx8fDE3NjE2NDM5NTh8MA&ixlib=rb-4.1.0&q=80&w=1080",
+        date: "2025-05-01",
+        dateDisplay: "May 1, 2025",
+        time: "10:00 AM",
+        location: "City Art Gallery, Los Angeles, CA",
+        price: "Free",
+        category: "Arts",
+        isFeatured: false
+    }
+];
+
+const upcomingEvents = [
+    {
+        id: "5",
+        title: "Championship Finals",
+        image: "https://images.unsplash.com/photo-1760508737418-a7add7ee3871?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcG9ydHMlMjBzdGFkaXVtJTIwZXZlbnR8ZW58MXx8fHwxNzYxNTc5NTQ0fDA&ixlib=rb-4.1.0&q=80&w=1080",
+        date: "2025-06-25",
+        dateDisplay: "June 25, 2025",
+        time: "7:00 PM",
+        location: "Stadium Arena, Boston, MA",
+        price: "$75 - $250",
+        category: "Sports",
+        isFeatured: false
+    },
+    {
+        id: "6",
+        title: "Broadway Musical Night",
+        image: "https://images.unsplash.com/photo-1539964604210-db87088e0c2c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0aGVhdGVyJTIwcGVyZm9ybWFuY2UlMjBzdGFnZXxlbnwxfHx8fDE3NjE1ODA4NzN8MA&ixlib=rb-4.1.0&q=80&w=1080",
+        date: "2025-05-18",
+        dateDisplay: "May 18, 2025",
+        time: "8:00 PM",
+        location: "Grand Theater, New York, NY",
+        price: "$89 - $195",
+        category: "Theater",
+        isFeatured: false
+    },
+    {
+        id: "7",
+        title: "Jazz & Blues Night",
+        image: "https://images.unsplash.com/photo-1700087209989-5a83d1a7c484?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb25jZXJ0JTIwbXVzaWMlMjBwZXJmb3JtYW5jZXxlbnwxfHx8fDE3NjE2NTE2NTd8MA&ixlib=rb-4.1.0&q=80&w=1080",
+        date: "2025-05-28",
+        dateDisplay: "May 28, 2025",
+        time: "7:30 PM",
+        location: "Blue Note Club, New Orleans, LA",
+        price: "$35 - $75",
+        category: "Music",
+        isFeatured: false
+    },
+    {
+        id: "8",
+        title: "Startup Pitch Competition",
+        image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGNvbmZlcmVuY2V8ZW58MXx8fHwxNzYxNTY0NDkxfDA&ixlib=rb-4.1.0&q=80&w=1080",
+        date: "2025-06-10",
+        dateDisplay: "June 10, 2025",
+        time: "2:00 PM",
+        location: "Tech Hub, Austin, TX",
+        price: "$25 - $50",
+        category: "Business",
+        isFeatured: false
+    }
+];
+
+// ==================== Helper Functions ====================
+
+/**
+ * Creates an event card HTML element
+ * @param {Object} event - Event data object
+ * @returns {string} HTML string for event card
+ */
+function createEventCard(event) {
+    const featuredBadge = event.isFeatured 
+        ? `<span class="event-featured-badge" aria-label="Featured event">Featured</span>` 
+        : '';
+    
+    return `
+        <div class="event-card" role="listitem">
+            <article role="article" aria-labelledby="event-title-${event.id}">
+                <div class="event-image-wrapper">
+                    <img 
+                        src="${event.image}" 
+                        alt="${event.title} event image" 
+                        class="event-image"
+                        loading="lazy"
+                    />
+                    <button 
+                        class="event-like-btn" 
+                        data-event-id="${event.id}"
+                        aria-label="Add ${event.title} to favorites"
+                        aria-pressed="false"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
+                        </svg>
+                    </button>
+                    ${featuredBadge}
+                </div>
+                <div class="event-content">
+                    <div>
+                        <span class="event-category" aria-label="Category: ${event.category}">
+                            ${event.category}
+                        </span>
+                    </div>
+                    <h3 id="event-title-${event.id}" class="event-title">
+                        <a href="#event/${event.id}">${event.title}</a>
+                    </h3>
+                    <div class="event-info">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
+                            <line x1="16" x2="16" y1="2" y2="6"></line>
+                            <line x1="8" x2="8" y1="2" y2="6"></line>
+                            <line x1="3" x2="21" y1="10" y2="10"></line>
+                        </svg>
+                        <time datetime="${event.date}">
+                            ${event.dateDisplay} • ${event.time}
+                        </time>
+                    </div>
+                    <div class="event-info">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
+                            <circle cx="12" cy="10" r="3"></circle>
+                        </svg>
+                        <address>${event.location}</address>
+                    </div>
+                    <div class="event-footer">
+                        <span class="event-price" aria-label="Price: ${event.price}">
+                            ${event.price}
+                        </span>
+                        <button class="btn btn-primary event-details-btn" aria-label="View details for ${event.title}">
+                            View Details
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                                <polyline points="15 3 21 3 21 9"></polyline>
+                                <line x1="10" x2="21" y1="14" y2="3"></line>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </article>
+        </div>
+    `;
+}
+
+/**
+ * Renders events to a container
+ * @param {string} containerId - ID of the container element
+ * @param {Array} events - Array of event objects
+ */
+function renderEvents(containerId, events) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    
+    container.innerHTML = events.map(event => createEventCard(event)).join('');
+}
+
+/**
+ * Handles like button click
+ * @param {Event} e - Click event
+ */
+function handleLikeClick(e) {
+    const button = e.currentTarget;
+    const eventId = button.dataset.eventId;
+    const isLiked = button.getAttribute('aria-pressed') === 'true';
+    
+    // Toggle liked state
+    button.setAttribute('aria-pressed', !isLiked);
+    button.classList.toggle('liked');
+    
+    // Update aria-label
+    const eventTitle = document.getElementById(`event-title-${eventId}`).textContent.trim();
+    const newLabel = !isLiked 
+        ? `Remove ${eventTitle} from favorites` 
+        : `Add ${eventTitle} to favorites`;
+    button.setAttribute('aria-label', newLabel);
+    
+    // Toggle fill on the heart icon
+    const svg = button.querySelector('svg path');
+    if (svg) {
+        svg.setAttribute('fill', !isLiked ? 'currentColor' : 'none');
+    }
+}
+
+/**
+ * Attaches event listeners to like buttons
+ */
+function attachLikeButtonListeners() {
+    const likeButtons = document.querySelectorAll('.event-like-btn');
+    likeButtons.forEach(button => {
+        button.addEventListener('click', handleLikeClick);
+    });
+}
+
+// ==================== Mobile Menu ====================
+
+/**
+ * Toggles mobile menu visibility
+ */
+function toggleMobileMenu() {
+    const mobileMenu = document.getElementById('mobile-menu');
+    const menuButton = document.getElementById('mobile-menu-toggle');
+    
+    if (!mobileMenu || !menuButton) return;
+    
+    const isHidden = mobileMenu.hasAttribute('hidden');
+    
+    if (isHidden) {
+        mobileMenu.removeAttribute('hidden');
+        menuButton.setAttribute('aria-expanded', 'true');
+        menuButton.setAttribute('aria-label', 'Close menu');
+    } else {
+        mobileMenu.setAttribute('hidden', '');
+        menuButton.setAttribute('aria-expanded', 'false');
+        menuButton.setAttribute('aria-label', 'Open menu');
+    }
+}
+
+// ==================== Search Form ====================
+
+/**
+ * Handles search form submission
+ * @param {Event} e - Submit event
+ */
+function handleSearchSubmit(e) {
+    e.preventDefault();
+    
+    const searchInput = document.getElementById('event-search');
+    const locationInput = document.getElementById('location-search');
+    
+    const searchQuery = searchInput.value.trim();
+    const location = locationInput.value.trim();
+    
+    if (searchQuery || location) {
+        console.log('Searching for:', searchQuery, 'in', location);
+        // In a real application, this would trigger a search/filter operation
+        alert(`Searching for "${searchQuery}" in "${location}"`);
+    }
+}
+
+// ==================== Keyboard Navigation ====================
+
+/**
+ * Enhances keyboard navigation for better accessibility
+ */
+function setupKeyboardNavigation() {
+    // Allow Escape key to close mobile menu
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            const mobileMenu = document.getElementById('mobile-menu');
+            const menuButton = document.getElementById('mobile-menu-toggle');
+            
+            if (mobileMenu && !mobileMenu.hasAttribute('hidden')) {
+                mobileMenu.setAttribute('hidden', '');
+                menuButton.setAttribute('aria-expanded', 'false');
+                menuButton.setAttribute('aria-label', 'Open menu');
+                menuButton.focus(); // Return focus to menu button
+            }
+        }
+    });
+}
+
+// ==================== Initialization ====================
+
+/**
+ * Initialize the application
+ */
+function init() {
+    // Render events
+    renderEvents('featured-events', featuredEvents);
+    renderEvents('upcoming-events', upcomingEvents);
+    
+    // Attach event listeners
+    attachLikeButtonListeners();
+    
+    // Mobile menu toggle
+    const menuButton = document.getElementById('mobile-menu-toggle');
+    if (menuButton) {
+        menuButton.addEventListener('click', toggleMobileMenu);
+    }
+    
+    // Search form
+    const searchForm = document.getElementById('search-form');
+    if (searchForm) {
+        searchForm.addEventListener('submit', handleSearchSubmit);
+    }
+    
+    // Keyboard navigation
+    setupKeyboardNavigation();
+    
+    // Announce page load to screen readers
+    console.log('EventFinder application loaded successfully');
+}
+
+// Run initialization when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}
+
+// ==================== Additional Accessibility Features ====================
+
+/**
+ * Announces dynamic content changes to screen readers
+ * @param {string} message - Message to announce
+ */
+function announceToScreenReader(message) {
+    const announcement = document.createElement('div');
+    announcement.setAttribute('role', 'status');
+    announcement.setAttribute('aria-live', 'polite');
+    announcement.setAttribute('aria-atomic', 'true');
+    announcement.className = 'sr-only';
+    announcement.textContent = message;
+    
+    document.body.appendChild(announcement);
+    
+    // Remove after announcement
+    setTimeout(() => {
+        document.body.removeChild(announcement);
+    }, 1000);
+}
+
+// Export functions for potential use in other scripts
+window.EventFinder = {
+    renderEvents,
+    announceToScreenReader,
+    featuredEvents,
+    upcomingEvents
+};
diff --git a/doc/reference code/stylesref.css b/doc/reference code/stylesref.css
new file mode 100644
index 0000000..76fcdd6
--- /dev/null
+++ b/doc/reference code/stylesref.css	
@@ -0,0 +1,817 @@
+/* ==================== CSS Variables ==================== */
+:root {
+    --font-size: 16px;
+    --background: #ffffff;
+    --foreground: #252525;
+    --card: #ffffff;
+    --card-foreground: #252525;
+    --primary: #030213;
+    --primary-foreground: #ffffff;
+    --secondary: #f4f4f6;
+    --secondary-foreground: #030213;
+    --muted: #ececf0;
+    --muted-foreground: #717182;
+    --accent: #e9ebef;
+    --accent-foreground: #030213;
+    --destructive: #d4183d;
+    --destructive-foreground: #ffffff;
+    --border: rgba(0, 0, 0, 0.1);
+    --input-background: #f3f3f5;
+    --ring: #b5b5b5;
+    --radius: 0.625rem;
+    
+    /* Category colors */
+    --music-color: #ea580c;
+    --food-color: #16a34a;
+    --business-color: #2563eb;
+    --arts-color: #9333ea;
+    --sports-color: #dc2626;
+    --theater-color: #db2777;
+}
+
+/* ==================== Reset & Base Styles ==================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: var(--font-size);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    background-color: var(--background);
+    color: var(--foreground);
+    line-height: 1.5;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+/* ==================== Typography ==================== */
+h1 {
+    font-size: 2.25rem;
+    font-weight: 500;
+    line-height: 1.5;
+}
+
+h2 {
+    font-size: 1.875rem;
+    font-weight: 500;
+    line-height: 1.5;
+}
+
+h3 {
+    font-size: 1.25rem;
+    font-weight: 500;
+    line-height: 1.5;
+}
+
+p {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+}
+
+/* ==================== Utilities ==================== */
+.container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+/* Skip link for keyboard navigation */
+.skip-link {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    z-index: 100;
+    padding: 0.5rem 1rem;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius);
+    text-decoration: none;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.skip-link:focus {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+/* ==================== Buttons ==================== */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-decoration: none;
+}
+
+.btn:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+}
+
+.btn-primary {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+}
+
+.btn-primary:hover {
+    opacity: 0.9;
+}
+
+.btn-outline {
+    background-color: transparent;
+    border: 1px solid var(--border);
+    color: var(--foreground);
+}
+
+.btn-outline:hover {
+    background-color: var(--accent);
+}
+
+.btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    border-radius: var(--radius);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.btn-icon:hover {
+    background-color: var(--accent);
+}
+
+.btn-icon:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+}
+
+.btn-full {
+    width: 100%;
+}
+
+/* ==================== Header ==================== */
+.header {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+}
+
+.nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 0;
+}
+
+.nav-left {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.nav-right {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: var(--primary);
+    font-weight: 500;
+    transition: opacity 0.2s;
+    border-radius: var(--radius);
+    padding: 0.25rem;
+}
+
+.logo:hover {
+    opacity: 0.8;
+}
+
+.logo:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+}
+
+.logo-icon {
+    width: 2rem;
+    height: 2rem;
+}
+
+.logo-text {
+    font-size: 1.125rem;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    list-style: none;
+}
+
+.nav-links a {
+    color: var(--foreground);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.nav-links a:hover {
+    color: var(--primary);
+}
+
+.nav-links a:focus {
+    outline: none;
+    text-decoration: underline;
+}
+
+.desktop-nav {
+    display: none;
+}
+
+.mobile-menu-btn {
+    display: flex;
+}
+
+.mobile-menu {
+    padding: 1rem 0;
+    border-top: 1px solid var(--border);
+}
+
+.mobile-menu-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    list-style: none;
+}
+
+.mobile-menu-list a {
+    display: block;
+    padding: 0.5rem 0;
+    color: var(--foreground);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.mobile-menu-list a:hover {
+    color: var(--primary);
+}
+
+.mobile-menu-list a:focus {
+    outline: none;
+    text-decoration: underline;
+}
+
+.mobile-menu-divider {
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border);
+}
+
+/* ==================== Search Section ==================== */
+.search-section {
+    background: linear-gradient(135deg, rgba(3, 2, 19, 0.02) 0%, rgba(233, 235, 239, 0.3) 50%, rgba(3, 2, 19, 0.02) 100%);
+    padding: 4rem 0;
+}
+
+.search-content {
+    max-width: 56rem;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.search-content h1 {
+    margin-bottom: 1.5rem;
+}
+
+.search-subtitle {
+    color: var(--muted-foreground);
+    margin-bottom: 2rem;
+}
+
+.search-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    background-color: var(--background);
+    border-radius: var(--radius);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    padding: 0.5rem;
+}
+
+.search-input-wrapper {
+    position: relative;
+    flex: 1;
+}
+
+.search-icon {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--muted-foreground);
+}
+
+.search-input {
+    width: 100%;
+    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
+    border: none;
+    border-radius: var(--radius);
+    background-color: var(--input-background);
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.search-input:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 0;
+}
+
+.search-btn {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.search-btn-text {
+    display: none;
+}
+
+/* ==================== Category Navigation ==================== */
+.category-nav {
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+    padding: 1rem 0;
+}
+
+.category-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    list-style: none;
+}
+
+.category-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    background-color: transparent;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.2s;
+    width: 100%;
+}
+
+.category-btn:hover {
+    border-color: var(--primary);
+    background-color: var(--accent);
+}
+
+.category-btn:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 0;
+}
+
+.category-icon {
+    width: 2rem;
+    height: 2rem;
+}
+
+.music-icon { color: var(--music-color); }
+.food-icon { color: var(--food-color); }
+.business-icon { color: var(--business-color); }
+.arts-icon { color: var(--arts-color); }
+.sports-icon { color: var(--sports-color); }
+.theater-icon { color: var(--theater-color); }
+
+/* ==================== Events Section ==================== */
+.events-section {
+    padding: 3rem 0;
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+}
+
+.see-all-link {
+    color: var(--primary);
+    text-decoration: none;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+.see-all-link:hover {
+    text-decoration: underline;
+}
+
+.see-all-link:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+}
+
+.events-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+}
+
+/* ==================== Event Card ==================== */
+.event-card {
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    transition: box-shadow 0.3s;
+}
+
+.event-card:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.event-card:focus-within {
+    outline: 2px solid var(--ring);
+    outline-offset: 0;
+}
+
+.event-image-wrapper {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    background-color: var(--muted);
+}
+
+.event-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s;
+}
+
+.event-card:hover .event-image {
+    transform: scale(1.05);
+}
+
+.event-like-btn {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(4px);
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.event-like-btn:hover {
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.event-like-btn:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+}
+
+.event-like-btn.liked {
+    color: #ef4444;
+}
+
+.event-like-btn svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.event-featured-badge {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+}
+
+.event-content {
+    padding: 1rem;
+}
+
+.event-category {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+}
+
+.event-title {
+    margin-bottom: 0.5rem;
+}
+
+.event-title a {
+    color: var(--foreground);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.event-title a:hover {
+    color: var(--primary);
+}
+
+.event-title a:focus {
+    outline: none;
+    text-decoration: underline;
+}
+
+.event-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    color: var(--muted-foreground);
+    margin-bottom: 0.5rem;
+}
+
+.event-info svg {
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.125rem;
+    flex-shrink: 0;
+}
+
+.event-info time,
+.event-info address {
+    flex: 1;
+    font-style: normal;
+}
+
+.event-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.event-price {
+    color: var(--primary);
+    font-weight: 500;
+}
+
+.event-details-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+}
+
+.event-details-btn svg {
+    width: 1rem;
+    height: 1rem;
+}
+
+/* ==================== Footer ==================== */
+.footer {
+    background-color: rgba(236, 236, 240, 0.3);
+    border-top: 1px solid var(--border);
+    margin-top: 4rem;
+    padding: 3rem 0;
+}
+
+.footer-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.footer-column h3 {
+    margin-bottom: 1rem;
+}
+
+.footer-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--primary);
+    font-weight: 500;
+    margin-bottom: 1rem;
+}
+
+.footer-logo svg {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.footer-description {
+    color: var(--muted-foreground);
+    margin-bottom: 1rem;
+}
+
+.social-links {
+    display: flex;
+    gap: 0.75rem;
+    list-style: none;
+}
+
+.social-links a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 9999px;
+    background-color: var(--accent);
+    color: var(--foreground);
+    text-decoration: none;
+    transition: background-color 0.2s;
+}
+
+.social-links a:hover {
+    background-color: var(--muted);
+}
+
+.social-links a:focus {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+}
+
+.footer-links {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.footer-links a {
+    color: var(--muted-foreground);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.footer-links a:hover {
+    color: var(--primary);
+}
+
+.footer-links a:focus {
+    outline: none;
+    text-decoration: underline;
+}
+
+.footer-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border);
+}
+
+.footer-bottom p {
+    color: var(--muted-foreground);
+}
+
+.footer-legal-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    list-style: none;
+}
+
+.footer-legal-links a {
+    color: var(--muted-foreground);
+    text-decoration: none;
+    transition: color 0.2s;
+}
+
+.footer-legal-links a:hover {
+    color: var(--primary);
+}
+
+.footer-legal-links a:focus {
+    outline: none;
+    text-decoration: underline;
+}
+
+/* ==================== Responsive Design ==================== */
+@media (min-width: 768px) {
+    .desktop-nav {
+        display: flex;
+    }
+    
+    .mobile-menu-btn {
+        display: none;
+    }
+    
+    .mobile-menu {
+        display: none !important;
+    }
+    
+    .search-form {
+        flex-direction: row;
+    }
+    
+    .search-btn-text {
+        display: inline;
+    }
+    
+    .category-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    
+    .events-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .footer-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .footer-bottom {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}
+
+@media (min-width: 1024px) {
+    .category-grid {
+        grid-template-columns: repeat(6, 1fr);
+    }
+    
+    .events-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+    
+    .footer-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+@media (min-width: 1280px) {
+    .events-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+/* ==================== Print Styles ==================== */
+@media print {
+    .header,
+    .footer,
+    .search-section,
+    .category-nav {
+        display: none;
+    }
+}
diff --git a/doc/stylesincase.css b/doc/stylesincase.css
new file mode 100644
index 0000000..86b5727
--- /dev/null
+++ b/doc/stylesincase.css
@@ -0,0 +1,832 @@
+/* Base styles with accessibility considerations */
+@import 'modal.css';
+
+:root {
+  --primary-color: #2c3e50;
+  --background-color: #ffffff;
+  --accent-color: #0040a3; /* Darker blue for better contrast */
+  --error-color: #e74c3c;
+  --success-color: #27ae60;
+  --focus-outline: 3px solid var(--accent-color);
+  --focus-ring-color: rgba(0, 86, 179, 0.5);
+  --progress-bg: #edf2f7;
+  --modal-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  --text-color: #2c3e50;
+  --border-color: #e2e8f0;
+  --hover-bg: rgba(0, 0, 0, 0.05);
+  --transition-speed: 0.3s;
+}
+
+/* Apply box-sizing border-box to all elements */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Checkbox styling */
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.checkbox-container input[type='checkbox'] {
+  width: auto;
+  margin-right: 0.5rem;
+}
+
+select {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border-radius: 4px;
+  border: 1px solid var(--primary-color);
+}
+
+.checkbox-container label {
+  margin-bottom: 0;
+}
+
+.intro-section {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Base styles for readability */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial,
+    sans-serif;
+  line-height: 1.6;
+  color: var(--primary-color);
+  background-color: var(--background-color);
+  margin: 0;
+  font-size: 16px;
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Skip link with enhanced visibility */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--accent-color);
+  color: white;
+  padding: 8px;
+  z-index: 100;
+  transition: top 0.3s;
+}
+
+.skip-link:focus {
+  top: 0;
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Enhanced focus styles */
+:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Progress bar styles */
+.quiz-progress {
+  margin: 2rem 0;
+}
+/* Images */
+.decorative-image,
+.info-image {
+  max-width: 15rem;
+  height: auto;
+  margin: 1rem 0;
+  border-radius: 4px;
+}
+
+.progress-bar {
+  background-color: var(--progress-bg);
+  border-radius: 8px;
+  height: 20px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-fill {
+  background-color: var(--primary-color);
+  height: 100%;
+  transition: width 0.3s ease;
+  border-radius: 8px;
+}
+
+.progress-text {
+  margin-top: 0.5rem;
+  text-align: center;
+  font-weight: 500;
+}
+
+/* Question groups */
+.question-group {
+  margin-bottom: 2rem;
+  padding: 1rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background-color: #f8fafc;
+}
+
+.question-heading {
+  color: var(--primary-color);
+  margin-bottom: 1rem;
+  font-size: 1.1rem;
+}
+
+/* Form elements */
+fieldset {
+  border: 1px solid var(--primary-color);
+  margin: 1em 0;
+  padding: 1em;
+  border-radius: 4px;
+}
+
+legend {
+  font-weight: bold;
+  padding: 0.5em 1em;
+  color: var(--primary-color);
+  background-color: #f8fafc;
+  border: 1px solid var(--primary-color);
+  border-radius: 4px;
+}
+
+.radio-group {
+  margin: 1em 0;
+}
+
+/* Enhanced radio button styling */
+.radio-option {
+  position: relative;
+  padding: 0.75em;
+  margin: 0.5em 0;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+}
+
+.radio-option:hover {
+  background-color: rgba(44, 62, 80, 0.1);
+}
+
+/* Custom radio button styling */
+input[type='radio'] {
+  margin-right: 0.75em;
+  width: 20px;
+  height: 20px;
+}
+
+input[type='radio']:focus-visible + label {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+input[type='radio'] + label {
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  flex: 1;
+}
+
+/* Instructions section */
+.quiz-instructions {
+  background-color: #f8f9fa;
+  padding: 1em;
+  margin: 1em 0;
+  border-left: 4px solid var(--accent-color);
+  border-radius: 0 4px 4px 0;
+}
+
+/* Submit button */
+.form-controls {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.submit-button {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s, transform 0.1s;
+  font-weight: 500;
+}
+
+.submit-button:hover {
+  background-color: #34495e;
+}
+
+.submit-button:active {
+  transform: scale(0.98);
+}
+
+.submit-button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: 2px;
+}
+
+/* Results section */
+#results {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  border-radius: 8px;
+  background-color: #f8fafc;
+  border: 1px solid var(--primary-color);
+  margin-bottom: 3rem;
+}
+
+.feedback-details {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 4px;
+}
+
+#feedback-form {
+  margin-bottom: 3rem;
+}
+
+/* Utility classes */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* High contrast mode */
+@media (prefers-contrast: more) {
+  :root {
+    --primary-color: #000000;
+    --background-color: #ffffff;
+    --accent-color: #0000ff;
+    --error-color: #ff0000;
+    --success-color: #008000;
+    --text-color: #000000;
+    --border-color: #000000;
+    --hover-bg: #000000;
+    --focus-outline: 3px solid #000000;
+    --focus-ring-color: #000000;
+    --progress-bg: #ffffff;
+  }
+
+  body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+
+  a {
+    color: var(--accent-color);
+    text-decoration: underline;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    border: 2px solid var(--text-color);
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+
+  fieldset {
+    border: 2px solid var(--text-color);
+  }
+
+  legend {
+    border: 2px solid var(--text-color);
+    background-color: var(--background-color);
+  }
+
+  .radio-option:hover,
+  .checkbox-container:hover {
+    background-color: var(--hover-bg);
+  }
+
+  .progress-bar {
+    border: 2px solid var(--text-color);
+  }
+
+  .progress-fill {
+    background-color: var(--text-color);
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .progress-fill {
+    transition: none;
+  }
+
+  .skip-link {
+    transition: none;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    transition: none;
+  }
+}
+
+/* Add a class for manual high contrast toggle */
+.high-contrast-mode {
+  --primary-color: #000000 !important;
+  --background-color: #ffffff !important;
+  --accent-color: #0000ff !important;
+  --error-color: #ff0000 !important;
+  --success-color: #008000 !important;
+  --text-color: #000000 !important;
+  --border-color: #000000 !important;
+  --hover-bg: #000000 !important;
+  --focus-outline: 3px solid #000000 !important;
+  --focus-ring-color: #000000 !important;
+  --progress-bg: #ffffff !important;
+  --modal-shadow: 0 0 0 2px #000000 !important;
+}
+
+/* Basic responsive design */
+@media (max-width: 600px) {
+  fieldset {
+    padding: 0.5em;
+  }
+
+  header {
+    padding: 1.25rem;
+  }
+
+  nav ul {
+    gap: 0.75rem;
+  }
+}
+
+/* User Info Form */
+#user-info {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background-color: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+}
+
+.form-control {
+  margin-bottom: 1.5rem;
+  position: relative;
+}
+
+.form-control label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--primary-color);
+}
+
+.form-control input {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  border: 1px solid var(--primary-color);
+  border-radius: 4px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-sizing: border-box;
+}
+
+.form-control input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 3px var(--focus-ring-color);
+}
+
+.form-control input[aria-invalid='true'] {
+  border-color: var(--error-color);
+}
+
+.form-control input[aria-invalid='true']:focus {
+  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.25);
+}
+
+.error {
+  color: var(--error-color);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+.hint {
+  color: var(--secondary-color);
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+}
+
+/* Introduction section and images */
+#introduction {
+  padding: 2rem;
+  margin-bottom: 2rem;
+  background-color: #f8fafc;
+  border-radius: 12px;
+}
+
+#introduction h2 {
+  color: var(--primary-color);
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+#introduction p {
+  max-width: 800px;
+  margin: 0 auto 2rem;
+}
+
+.hero-images {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  margin: 2rem 0;
+}
+
+.decorative-image,
+.info-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.info-image {
+  padding: 1rem;
+  background: white;
+}
+
+@media (min-width: 768px) {
+  .hero-images {
+    flex-direction: row;
+    justify-content: center;
+    gap: 3rem;
+  }
+
+  .decorative-image,
+  .info-image {
+    width: 45%;
+    max-width: 400px;
+  }
+}
+
+/* Full-width banner */
+#banner {
+  margin: -20px -20px 2rem;
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  overflow: hidden;
+}
+
+#banner img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+h1,
+h2 {
+  margin-bottom: 1rem;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 1rem;
+}
+
+nav a {
+  color: var(--accent-color);
+  text-decoration: none;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+/* About page specific styles */
+#about {
+  padding: 3rem;
+  background-color: #f8fafc;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+#about h2 {
+  color: #2c3e50;
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 3px solid #3498db;
+  padding-bottom: 0.5rem;
+  display: inline-block;
+}
+
+#about p {
+  font-size: 1.2rem;
+  line-height: 1.8;
+  color: #34495e;
+  margin-bottom: 2rem;
+  max-width: 700px;
+}
+
+#about .hero-images {
+  margin: 3rem 0;
+  display: flex;
+  justify-content: center;
+}
+
+#about .hero-images img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+#about .hero-images img:hover {
+  transform: scale(1.02);
+}
+
+/* Header improvements */
+#header {
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  background-color: var(--primary-color);
+  color: white;
+  padding: 2rem 0;
+}
+
+#header .header-content {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+#header h1 {
+  color: white;
+  margin-bottom: 1rem;
+}
+
+#header nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0;
+  display: flex;
+  gap: 2rem;
+}
+
+#header nav a {
+  color: white;
+  text-decoration: none;
+  font-size: 1.1rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  transition: opacity var(--transition-speed);
+}
+
+#header nav a:hover {
+  opacity: 0.8;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 600px) {
+  #header {
+    padding: 1.5rem 0;
+  }
+
+  #header nav ul {
+    gap: 1rem;
+  }
+}
+
+/* Accordion Styles */
+.accordion-container {
+  margin: 2rem 0;
+  max-width: 800px;
+}
+
+.accordion-container h3 {
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.accordion {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+.accordion-item {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.accordion-item:last-child {
+  border-bottom: none;
+}
+
+/* Remove margins from h4 in accordion items */
+.accordion-item h4 {
+  margin: 0;
+}
+
+.accordion-button {
+  width: 100%;
+  padding: 2rem;
+  background: none;
+  border: none;
+  text-align: left;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--primary-color);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color var(--transition-speed) ease;
+}
+
+.accordion-button:hover {
+  background-color: var(--hover-bg);
+}
+
+.accordion-button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: -2px;
+}
+
+.accordion-icon {
+  display: inline-block;
+  width: 1.2rem;
+  height: 1.2rem;
+  position: relative;
+  transition: transform var(--transition-speed) ease;
+}
+
+.accordion-icon::before,
+.accordion-icon::after {
+  content: '';
+  position: absolute;
+  background-color: currentColor;
+  transition: transform var(--transition-speed) ease;
+}
+
+.accordion-icon::before {
+  width: 2px;
+  height: 1.2rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.accordion-icon::after {
+  width: 1.2rem;
+  height: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.accordion-button[aria-expanded='true'] .accordion-icon::before {
+  transform: translateX(-50%) rotate(90deg);
+}
+
+.accordion-content {
+  padding: 0 1rem;
+  overflow: hidden;
+  transition: max-height var(--transition-speed) ease-out;
+}
+
+.accordion-content[hidden] {
+  display: none;
+}
+
+.accordion-content:not([hidden]) {
+  padding-bottom: 1rem;
+}
+
+/* High contrast mode support */
+.high-contrast-mode .accordion-button {
+  border: 2px solid var(--primary-color);
+  margin: 0.5rem;
+}
+
+.high-contrast-mode .accordion-button:hover {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+/* Footer styles */
+footer {
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  background-color: var(--primary-color);
+  color: white;
+  padding: 2rem 0;
+  margin-top: auto;
+}
+
+.footer-content {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: grid;
+  gap: 2rem;
+}
+
+.footer-content nav {
+  margin-bottom: 1rem;
+}
+
+.footer-content h3 {
+  color: white;
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
+}
+
+.footer-content ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-content a {
+  color: white;
+  text-decoration: none;
+  padding: 0.5rem 0;
+  display: block;
+  transition: opacity var(--transition-speed);
+}
+
+.footer-content a:hover {
+  opacity: 0.8;
+}
+
+.footer-info {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 600px) {
+  footer {
+    padding-bottom: 4rem;
+  }
+  .footer-info {
+    margin-bottom: 10rem;
+  }
+  .footer-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .footer-content nav {
+    margin-bottom: 2rem;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .accordion-button,
+  .accordion-icon,
+  .accordion-icon::before,
+  .accordion-icon::after,
+  .accordion-content {
+    transition: none;
+  }
+}
diff --git a/icons/facebook.png b/icons/facebook.png
new file mode 100644
index 0000000..f93cd37
Binary files /dev/null and b/icons/facebook.png differ
diff --git a/icons/instagram.png b/icons/instagram.png
new file mode 100644
index 0000000..6181afa
Binary files /dev/null and b/icons/instagram.png differ
diff --git a/icons/mail.png b/icons/mail.png
new file mode 100644
index 0000000..3c4a075
Binary files /dev/null and b/icons/mail.png differ
diff --git a/icons/phone-receiver-silhouette.png b/icons/phone-receiver-silhouette.png
new file mode 100644
index 0000000..12b0e09
Binary files /dev/null and b/icons/phone-receiver-silhouette.png differ
diff --git a/images/hero-1.png b/images/hero-1.png
new file mode 100644
index 0000000..a95f33b
Binary files /dev/null and b/images/hero-1.png differ
diff --git a/images/hero-2.png b/images/hero-2.png
new file mode 100644
index 0000000..f4f9030
Binary files /dev/null and b/images/hero-2.png differ
diff --git a/images/hero-3.png b/images/hero-3.png
new file mode 100644
index 0000000..205c07c
Binary files /dev/null and b/images/hero-3.png differ
diff --git a/images/hero.png b/images/hero.png
new file mode 100644
index 0000000..643910a
Binary files /dev/null and b/images/hero.png differ
diff --git a/index.html b/index.html
index a9a33db..71c3d8d 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,307 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title</title>
-    <link rel="stylesheet" href="css/styles.css" />
-  </head>
-  <body>
-    <p>This is the starting point.</p>
-    <script src="js/main.js"></script>
-  </body>
-</html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <meta
+    name="description"
+    content="Find events happening around you easily."
+  />
+  <title>Event Finder - Home</title>
+  <link
+    rel="stylesheet"
+    href="css/styles.css"
+  />
+</head>
+
+<body>
+
+  <!-- modal -->
+  <div
+    id="myModal"
+    class="modal"
+  >
+
+    <section
+      class="modal-content"
+      id="modalContent"
+      role="dialog"
+      aria-modal="true"
+    >
+      <span class="close">&times;</span>
+      <div class="news-letter-info">
+        <h2>Be the first to know!</h2>
+        <p class="modal-text">Subscribe to our newsletter to find out when we release tickets</p>
+      </div>
+
+      <form id="event-info-form">
+        <div class="event-info-control">
+          <label for="nameSubscribe">Name</label>
+          <input
+            type="text"
+            id="nameSubscribe"
+            name="nameSubscribe"
+            aria-required="true"
+          >
+        </div>
+        <div class="event-info-control">
+          <label for="emailSubscribe">Email</label>
+          <input
+            type="email"
+            id="emailSubscribe"
+            name="emailSubscribe"
+            aria-required="true"
+          >
+        </div>
+        <div class="event-info-control">
+          <button type="submit">Subscribe</button>
+        </div>
+      </form>
+    </section>
+  </div>
+  <!-- End of modal -->
+
+  <a
+    href="#main-content"
+    class="skip-link"
+  >Skip to main content</a>
+
+  <header role="banner">
+    <div class="header-left">
+      <h1>Event Finder</h1>
+      <nav
+        role="navigation"
+        aria-label="Main navigation"
+      >
+        <ul>
+          <li><a href="booking.html">Book ticket</a></li>
+          <li><a href="#events">Events</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+
+    <div class="text-settings-wrapper">
+      <!-- Button to open the panel -->
+      <button
+        id="text-settings-button"
+        aria-haspopup="true"
+        aria-expanded="false"
+        aria-controls="text-settings-panel"
+        aria-label="Text settings"
+      >
+        ⚙️
+      </button>
+
+      <!-- Panel with dropdowns -->
+      <section
+        id="text-settings-panel"
+        class="text-settings-panel"
+        hidden
+        aria-label="Text customization"
+      >
+        <h2 class="visually-hidden">Text customization</h2>
+
+        <div class="text-control">
+          <label for="font-size">Font size:</label>
+          <select
+            id="font-size"
+            aria-label="Font size"
+          >
+            <option value="default">Default</option>
+            <option value="large">Large</option>
+            <option value="x-large">Extra Large</option>
+          </select>
+        </div>
+
+        <div class="text-control">
+          <label for="line-height">Line height:</label>
+          <select
+            id="line-height"
+            aria-label="Line height"
+          >
+            <option value="default">Default</option>
+            <option value="wide">Wide</option>
+            <option value="x-wide">Extra Wide</option>
+          </select>
+        </div>
+      </section>
+    </div>
+  </header>
+
+    <div class="header-top">
+      <h1>Event Finder</h1>
+      <button id="contrast-toggle" aria-label="Toggle high contrast mode" title="Toggle high contrast mode" class="contrast-btn">
+        High Contrast
+      </button>
+    </div>
+    <nav
+      role="navigation"
+      aria-label="Main navigation"
+    >
+      <ul>
+        <li><a href="booking.html">Book ticket</a></li>
+        <li><a href="#events">Events</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+    <!-- Open modal button -->
+    <button id="myBtn">Newsletter
+    </button>
+    <!-- end of open modal button -->
+
+  </header>
+
+  <main
+    id="main-content"
+    role="main"
+  >
+    <section id="hero">
+      <h2>Discover Events Near You</h2>
+      <img
+        src="images/hero-3.png"
+        alt="image not created yet"
+      />
+    </section>
+
+    <section id="events">
+
+      <article class="event">
+        <img
+          src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=600&q=80"
+          alt="Visitors admiring framed artwork at a modern art exhibition"
+        />
+        <h3>Art Exhibition</h3>
+        <p>Date: June 20, 2024</p>
+        <p>Location: Downtown Gallery</p>
+        <a href="booking.html"><button aria-label="Book ticket for Art Exhibition">Book Now</button></a>
+      </article>
+
+      <article class="event">
+        <img
+          src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=600&q=80"
+          alt="Musician performing on stage with audience at a live concert"
+        />
+        <h3>Live Concert</h3>
+        <p>Date: July 5, 2024</p>
+        <p>Location: City Arena</p>
+        <a href="booking.html"><button aria-label="Book ticket for Live Concert">Book Now</button></a>
+      </article>
+
+      <article class="event">
+        <img
+          src="https://images.unsplash.com/photo-1502741338009-cac2772e18bc?auto=format&fit=crop&w=600&q=80"
+          alt="People sampling food at outdoor food festival stalls"
+        />
+        <h3>Food Festival</h3>
+        <p>Date: August 12, 2024</p>
+        <p>Location: Central Park</p>
+        <a href="booking.html"><button aria-label="Book ticket for Food Festival">Book Now</button></a>
+      </article>
+
+      <article class="event">
+        <img
+          src="https://images.unsplash.com/photo-1461344577544-4e5dc9487184?auto=format&fit=crop&w=600&q=80"
+          alt="Speaker giving a presentation at a technology conference"
+        />
+        <h3>Tech Conference</h3>
+        <p>Date: September 15, 2024</p>
+        <p>Location: Convention Center</p>
+        <a href="booking.html"><button aria-label="Book ticket for Tech Conference">Book Now</button></a>
+      </article>
+
+      <article class="event">
+        <img
+          src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=600&q=80"
+          alt="People browsing books at a book fair with tables of books"
+        />
+        <h3>Book Fair</h3>
+        <p>Date: October 10, 2024</p>
+        <p>Location: City Library</p>
+        <a href="/booking.html"><button aria-label="Book ticket for Book Fair">Book Now</button></a>
+      </article>
+
+      <article class="event">
+        <img
+          src="https://images.unsplash.com/photo-1467987506553-8f3916508521?auto=format&fit=crop&w=600&q=80"
+          alt="Audience watching a film at an indoor film festival"
+        />
+        <h3>Film Festival</h3>
+        <p>Date: November 2, 2024</p>
+        <p>Location: Grand Cinema</p>
+        <a href="/booking.html"><button aria-label="Book ticket for Film Festival">Book Now</button></a>
+      </article>
+
+      <article class="event">
+        <img
+          src="https://images.unsplash.com/photo-1503676382389-4809596d5290?auto=format&fit=crop&w=600&q=80"
+          alt="Children and adults exploring interactive science exhibits"
+        />
+        <h3>Science Expo</h3>
+        <p>Date: November 20, 2024</p>
+        <p>Location: Science Center</p>
+        <a href="/booking.html"><button aria-label="Book ticket for Science Expo">Book Now</button></a>
+      </article>
+
+      <article class="event">
+        <img
+          src="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&w=600&q=80"
+          alt="Group of runners participating in a charity run outdoors"
+        />
+        <h3>Charity Run</h3>
+        <p>Date: December 5, 2024</p>
+        <p>Location: Riverside Park</p>
+        <a href="/booking.html"><button aria-label="Book ticket for Charity Run">Book Now</button></a>
+      </article>
+
+    </section>
+
+    
+  </main>
+
+  <footer>
+    <section
+      class="contact-section"
+      id="contact"
+    >
+      <div class="contact-information">
+        <h4>Contact</h4>
+        <p><b>Phone:</b> +46 00 000 00 00</p>
+        <p><b>Mail:</b> mail@mail.com</p>
+      </div>
+
+      <div class="social-media-information">
+        <h4>Social media</h4>
+        <a href="https://www.facebook.com/"><img
+            class="facebook-icon"
+            src="icons/facebook.png"
+            alt="link to facebook"
+          ></a>
+        <a href="https://www.instagram.com/"><img
+            class="instagram-icon"
+            src="icons/instagram.png"
+            alt="link to instagram"
+          ></a>
+      </div>
+    </section>
+  </footer>
+
+  <script src="js/main.js"></script>
+</body>
+
+
+
+
+
+
+
+
+
+
+
+
+</html>
\ No newline at end of file
diff --git a/js/clipboard.txt b/js/clipboard.txt
new file mode 100644
index 0000000..e69de29
diff --git a/js/main.js b/js/main.js
index e69de29..8af06ac 100644
--- a/js/main.js
+++ b/js/main.js
@@ -0,0 +1,244 @@
+
+document.addEventListener("DOMContentLoaded", () => {
+  // Form & fields
+  const form = document.getElementById("booking-form");
+  const nameInput = document.getElementById("name");
+  const emailInput = document.getElementById("email");
+  const eventSelect = document.getElementById("events");
+  const dateInput = document.getElementById("event-date");
+
+  // Results (explicitly scope to the one in <main>)
+  const resultsSection = document.querySelector("main #results");
+  const resultsTitle = resultsSection.querySelector("#results-title") || resultsSection.querySelector("h2");
+  const resultsContent = resultsSection.querySelector("#results-content");
+
+  // Utilities
+  const escapeHtml = (str) =>
+    String(str).replace(/[&<>"']/g, (m) => ({ "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;" }[m]));
+
+  const setInvalid = (el, msg) => {
+    el.setCustomValidity(msg);
+    el.reportValidity();
+    el.classList.add("invalid");
+    el.setAttribute("aria-invalid", "true");
+  };
+
+  const clearInvalid = (el) => {
+    el.setCustomValidity("");
+    el.classList.remove("invalid");
+    el.removeAttribute("aria-invalid");
+  };
+
+  // Clear validation styling live
+  [nameInput, emailInput].forEach((el) => {
+    el.addEventListener("input", () => clearInvalid(el));
+  });
+
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+
+    // Validate name
+    if (!nameInput.value.trim()) {
+      setInvalid(nameInput, "Please enter your name.");
+      nameInput.focus();
+      return;
+    } else {
+      clearInvalid(nameInput);
+    }
+
+    // Validate email
+    if (!emailInput.value.trim()) {
+      setInvalid(emailInput, "Please enter your email address.");
+      emailInput.focus();
+      return;
+    }
+    if (emailInput.validity.typeMismatch) {
+      setInvalid(emailInput, "Please enter a valid email (e.g., name@example.com).");
+      emailInput.focus();
+      return;
+    } else {
+      clearInvalid(emailInput);
+    }
+
+    // Gather selections
+    const name = nameInput.value.trim();
+    const email = emailInput.value.trim();
+    const chosenEvent = eventSelect.value;
+    const dateNice = dateInput.value
+      ? new Date(dateInput.value).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })
+      : "Not selected";
+
+    const accChecked = document.querySelector('input[name="radio"]:checked');
+    const accText = accChecked
+      ? (document.querySelector(`label[for="${accChecked.id}"]`)?.textContent || accChecked.value)
+      : "No preference";
+
+    // Simple ref code
+    const ref = Math.random().toString(36).slice(2, 8).toUpperCase();
+
+    // Fill response
+    resultsTitle.textContent = `Thank you, ${name}! Please check your email for your ticket.`;
+    resultsContent.innerHTML = `
+      <article class="ticket" role="status" aria-live="polite">
+        <header class="ticket-head">
+          <strong>Booking Summary</strong>
+          <span class="ticket-ref">Ref: ${ref}</span>
+        </header>
+        <dl class="ticket-body">
+          <div><dt>Name</dt><dd>${escapeHtml(name)}</dd></div>
+          <div><dt>Email</dt><dd>${escapeHtml(email)}</dd></div>
+          <div><dt>Event</dt><dd>${escapeHtml(chosenEvent)}</dd></div>
+          <div><dt>Date</dt><dd>${escapeHtml(dateNice)}</dd></div>
+          <div><dt>Accessibility</dt><dd>${escapeHtml(accText)}</dd></div>
+        </dl>
+        <footer class="ticket-foot">
+          We appreciate your business. A confirmation has been sent to <strong>${escapeHtml(email)}</strong>.
+        </footer>
+      </article>
+    `;
+
+    // Reveal and scroll into view
+    resultsSection.hidden = false;
+    resultsSection.scrollIntoView({ behavior: "smooth", block: "start" });
+
+    // If you want to clear the form after submit, uncomment:
+    // form.reset();
+  });
+const button = document.getElementById('text-settings-button');
+const panel = document.getElementById('text-settings-panel');
+const fontSizeSelect = document.getElementById('font-size');
+const lineHeightSelect = document.getElementById('line-height');
+
+
+button.addEventListener('click', (event) => {
+  event.stopPropagation();
+  const isExpanded = button.getAttribute('aria-expanded') === 'true';
+  button.setAttribute('aria-expanded', String(!isExpanded));
+  panel.hidden = isExpanded;
+});
+
+panel.addEventListener('click', (event) => {
+  event.stopPropagation();
+});
+
+// Click outside closes the panel
+document.addEventListener('click', () => {
+  button.setAttribute('aria-expanded', 'false');
+  panel.hidden = true;
+});
+
+// Escape closes the panel
+panel.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') {
+    button.setAttribute('aria-expanded', 'false');
+    panel.hidden = true;
+    button.focus(); // set focus back to the button
+  }
+});
+
+fontSizeSelect.addEventListener('change', () => {
+  const value = fontSizeSelect.value;
+
+  switch (value) {
+    case 'default':
+      document.documentElement.style.fontSize = '100%';
+      break;
+    case 'large':
+      document.documentElement.style.fontSize = '120%';
+      break;
+    case 'x-large':
+      document.documentElement.style.fontSize = '130%';
+      break;
+  }
+});
+
+lineHeightSelect.addEventListener('change', () => {
+  const value = lineHeightSelect.value;
+
+  switch (value) {
+    case 'default':
+      document.documentElement.style.lineHeight = '1.5';
+      break;
+    case 'wide':
+      document.documentElement.style.lineHeight = '1.75';
+      break;
+    case 'x-wide':
+      document.documentElement.style.lineHeight = '2.0';
+      break;
+const modal = document.getElementById('myModal')
+const btn = document.getElementById('myBtn')
+const span = document.getElementsByClassName('close')[0]
+
+// When button is clicked, modal opens 
+btn.onclick = () => {
+  modal.style.display = 'block'
+}
+
+// When x is clicked, modal closes
+span.onclick = () => {
+  modal.style.display = 'none'
+}
+
+// When outside of modal is clicked, modal closes
+window.onclick = (event) => {
+  if (event.target === modal) {
+    modal.style.display = 'none'
+  }
+}
+
+const eventInfoForm = document.getElementById('event-info-form')
+const modalContent = document.getElementById('modalContent')
+const eventSubscribe = document.getElementById('eventSubscribe')
+let eventUserName = ''
+
+eventInfoForm.addEventListener('submit', (e) => {
+  e.preventDefault()
+  eventUserName = document.getElementById('nameSubscribe').value.trim()
+
+  modalContent.innerHTML = `
+  <p class="newsletter-confirmation">Thank you <b>${eventUserName}</b>! Next time tickets go live, you will be the first to know.</p>`
+})
+// High Contrast Mode Toggle
+document.addEventListener('DOMContentLoaded', function() {
+  const contrastBtn = document.getElementById('contrast-toggle');
+  const htmlElement = document.documentElement;
+  const storageKey = 'high-contrast-mode';
+
+  // Check if high contrast mode is saved in localStorage
+  function loadContrastMode() {
+    const savedMode = localStorage.getItem(storageKey);
+    if (savedMode === 'enabled') {
+      htmlElement.classList.add('high-contrast');
+      contrastBtn.classList.add('active');
+    }
+  }
+
+  // Toggle high contrast mode
+  function toggleContrastMode() {
+    const isActive = htmlElement.classList.contains('high-contrast');
+    
+    if (isActive) {
+      htmlElement.classList.remove('high-contrast');
+      contrastBtn.classList.remove('active');
+      localStorage.setItem(storageKey, 'disabled');
+      contrastBtn.setAttribute('aria-pressed', 'false');
+    } else {
+      htmlElement.classList.add('high-contrast');
+      contrastBtn.classList.add('active');
+      localStorage.setItem(storageKey, 'enabled');
+      contrastBtn.setAttribute('aria-pressed', 'true');
+    }
+  }
+
+  // Add click event listener to the button
+  if (contrastBtn) {
+    contrastBtn.addEventListener('click', toggleContrastMode);
+    
+    // Load saved preference on page load
+    loadContrastMode();
+    
+    // Set initial aria-pressed state
+    const isActive = htmlElement.classList.contains('high-contrast');
+    contrastBtn.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+  }
+});
