Raouldev830 · Raouldev830 · Oct 15, 2025
diff --git a/website/about.html b/website/about.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>About • My New Website</title>
+  <meta name="description" content="Learn more about this responsive starter website." />
+  <meta name="theme-color" content="#2563eb" />
+  <meta property="og:title" content="About • My New Website" />
+  <meta property="og:description" content="Learn more about this responsive starter website." />
+  <meta property="og:type" content="website" />
+  <link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml" />
+  <link rel="stylesheet" href="assets/css/styles.css" />
+</head>
+<body>
+  <header class="site-header">
+    <div class="container navbar">
+      <a href="index.html" class="brand" aria-label="Homepage">
+        <img src="assets/img/favicon.svg" alt="" />
+        <span>My New Website</span>
+      </a>
+      <nav class="nav-links" id="primary-navigation" data-open="false" aria-label="Primary">
+        <a href="index.html">Home</a>
+        <a href="about.html" class="active" aria-current="page">About</a>
+        <a href="contact.html">Contact</a>
+      </nav>
+      <div class="nav-actions">
+        <button id="theme-toggle" class="icon-btn" aria-label="Toggle dark mode" title="Toggle theme">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path d="M12 3a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1Zm0 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm8-7a1 1 0 0 1 1 1h1a1 1 0 1 1 0 2h-1a1 1 0 1 1-2 0 1 1 0 0 1 1-1Zm-8 8a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Zm-9-8a1 1 0 0 1 1-1H5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm13.364-6.364a1 1 0 0 1 1.414 0l.707.707a1 1 0 1 1-1.414 1.414l-.707-.707a1 1 0 0 1 0-1.414ZM5.515 5.515a1 1 0 0 1 1.414 0l.707.707A1 1 0 1 1 6.222 7.64l-.707-.707a1 1 0 0 1 0-1.414Zm10.606 10.606a1 1 0 0 1 1.414 0l.707.707a1 1 0 1 1-1.414 1.414l-.707-.707a1 1 0 0 1 0-1.414Zm-10.606 0a1 1 0 0 1 1.414 0l.707.707A1 1 0 1 1 6.222 18.94l-.707-.707a1 1 0 0 1 0-1.414Z" fill="currentColor"/>
+          </svg>
+        </button>
+        <button id="menu-toggle" class="icon-btn menu-toggle" aria-controls="primary-navigation" aria-expanded="false" aria-label="Toggle menu">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </header>
+  <main class="container">
+    <section class="hero">
+      <h1>About</h1>
+      <p>This starter is built with semantic HTML, modern CSS, and a dash of JavaScript for progressive enhancement. Use it to kick off your next project quickly.</p>
+    </section>
+    <section class="grid cards">
+      <article class="card">
+        <h3>Philosophy</h3>
+        <p>Keep it simple, fast, and accessible. Add only what you need.</p>
+      </article>
+      <article class="card">
+        <h3>Tech</h3>
+        <p>No frameworks required. Works on any static host out of the box.</p>
+      </article>
+      <article class="card">
+        <h3>Customize</h3>
+        <p>Update colors, spacing, and components in a single stylesheet.</p>
+      </article>
+    </section>
+  </main>
+  <footer class="site-footer">
+    <div class="container">© <span id="year"></span> My New Website</div>
+  </footer>
+  <script src="assets/js/main.js"></script>
+</body>
+</html>
diff --git a/website/assets/css/styles.css b/website/assets/css/styles.css
@@ -0,0 +1,112 @@
+/* Base styles for My New Website */
+*, *::before, *::after { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.6;
+  background: var(--color-bg);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  accent-color: var(--color-primary);
+}
+
+:root {
+  color-scheme: light dark;
+  --color-bg: #ffffff;
+  --color-text: #0f172a; /* slate-900 */
+  --color-muted: #475569; /* slate-600 */
+  --color-primary: #2563eb; /* blue-600 */
+  --color-surface: #f8fafc; /* slate-50 */
+  --border: #e2e8f0; /* slate-200 */
+  --radius: 12px;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
+}
+
+html.dark {
+  --color-bg: #0b1220;
+  --color-text: #e5e7eb; /* gray-200 */
+  --color-muted: #94a3b8; /* slate-400 */
+  --color-primary: #60a5fa; /* blue-400 */
+  --color-surface: #0f172a; /* slate-900 */
+  --border: #172554; /* blue-950 */
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30);
+}
+
+img, svg { display: block; max-width: 100%; height: auto; }
+a { color: inherit; text-decoration: none; }
+p { color: var(--color-muted); margin: 0 0 1rem; }
+h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
+
+.container { width: min(1200px, 100% - 2rem); margin-inline: auto; }
+
+/* Header & Navigation */
+.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.8); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--border); }
+html.dark .site-header { background: rgba(11,18,32,.70); }
+
+.navbar { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; gap: 1rem; }
+.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
+.brand img { width: 24px; height: 24px; }
+
+.nav-actions { display: flex; align-items: center; gap: .5rem; }
+.icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 38px; height: 38px; border-radius: 999px;
+  border: 1px solid var(--border); background: var(--color-surface);
+  box-shadow: var(--shadow-sm); cursor: pointer;
+  transition: transform .1s ease, background .2s ease;
+}
+.icon-btn:hover { transform: translateY(-1px); }
+.icon-btn:active { transform: translateY(0); }
+
+.nav-links { display: flex; gap: 1rem; }
+.nav-links a { padding: .5rem .75rem; border-radius: 8px; color: var(--color-muted); }
+.nav-links a.active, .nav-links a:hover { color: var(--color-text); background: rgba(99, 102, 241, 0.10); }
+
+.menu-toggle { display: none; }
+
+@media (max-width: 768px) {
+  .menu-toggle { display: inline-flex; }
+  .nav-links {
+    position: absolute; inset: 64px 0 auto 0; background: var(--color-bg);
+    border-bottom: 1px solid var(--border); padding: .75rem 1rem;
+    display: grid; gap: .25rem; transform-origin: top; transform: scaleY(0);
+    opacity: 0; transition: transform .15s ease, opacity .15s ease;
+  }
+  .nav-links[data-open="true"] { transform: scaleY(1); opacity: 1; }
+}
+
+/* Hero */
+.hero { padding: 4rem 0 3rem; }
+.hero h1 { font-size: clamp(2rem, 3.5vw + 1rem, 3rem); letter-spacing: -0.02em; }
+.hero p { font-size: clamp(1rem, 1.25vw + .5rem, 1.25rem); max-width: 60ch; }
+
+.cta-group { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
+.btn { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-sm); }
+.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.25); }
+
+/* Cards */
+.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
+.cards { margin-top: 2rem; }
+.card { grid-column: span 4; background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow-sm); }
+.card h3 { margin-bottom: .25rem; }
+.card p { margin: 0; }
+@media (max-width: 900px) { .card { grid-column: span 6; } }
+@media (max-width: 600px) { .card { grid-column: span 12; } }
+
+/* Footer */
+.site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 2rem 0; color: var(--color-muted); font-size: .95rem; }
+
+main { min-height: 50vh; }
+
+/* Forms */
+.form { display: grid; gap: .75rem; max-width: 640px; }
+.field { display: grid; gap: .35rem; }
+label { font-weight: 600; }
+input, textarea { width: 100%; padding: .65rem .75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-sm) inset; }
+textarea { min-height: 140px; resize: vertical; }
+
+/* Accessibility helpers */
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
+
diff --git a/website/assets/img/favicon.svg b/website/assets/img/favicon.svg
diff --git a/website/assets/js/main.js b/website/assets/js/main.js
@@ -0,0 +1,68 @@
+// Main interactions: theme toggle, mobile nav, contact form feedback
+(function () {
+  const THEME_KEY = 'theme';
+  const root = document.documentElement;
+
+  function setTheme(theme) {
+    if (theme === 'dark') root.classList.add('dark');
+    else root.classList.remove('dark');
+    try { localStorage.setItem(THEME_KEY, theme); } catch (_) {}
+  }
+
+  function initTheme() {
+    let theme = null;
+    try { theme = localStorage.getItem(THEME_KEY); } catch (_) {}
+    if (theme) {
+      setTheme(theme);
+    } else {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      setTheme(prefersDark ? 'dark' : 'light');
+    }
+  }
+
+  function toggleTheme() {
+    const nowDark = !root.classList.contains('dark');
+    setTheme(nowDark ? 'dark' : 'light');
+  }
+
+  function initMobileNav() {
+    const menuBtn = document.getElementById('menu-toggle');
+    const nav = document.getElementById('primary-navigation');
+    if (!menuBtn || !nav) return;
+    menuBtn.addEventListener('click', () => {
+      const isOpen = nav.getAttribute('data-open') === 'true';
+      nav.setAttribute('data-open', String(!isOpen));
+      menuBtn.setAttribute('aria-expanded', String(!isOpen));
+    });
+  }
+
+  function initContactForm() {
+    const form = document.getElementById('contact-form');
+    if (!form) return;
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const success = document.getElementById('form-success');
+      if (success) {
+        success.textContent = 'Thanks! Your message has been sent.';
+        success.hidden = false;
+      } else {
+        alert('Thanks! Your message has been sent.');
+      }
+      form.reset();
+    });
+  }
+
+  function setYear() {
+    const el = document.getElementById('year');
+    if (el) el.textContent = String(new Date().getFullYear());
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initTheme();
+    setYear();
+    initMobileNav();
+    initContactForm();
+    const themeBtn = document.getElementById('theme-toggle');
+    if (themeBtn) themeBtn.addEventListener('click', toggleTheme);
+  });
+})();
diff --git a/website/contact.html b/website/contact.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Contact • My New Website</title>
+  <meta name="description" content="Get in touch via the simple contact form." />
+  <meta name="theme-color" content="#2563eb" />
+  <meta property="og:title" content="Contact • My New Website" />
+  <meta property="og:description" content="Get in touch via the simple contact form." />
+  <meta property="og:type" content="website" />
+  <link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml" />
+  <link rel="stylesheet" href="assets/css/styles.css" />
+</head>
+<body>
+  <header class="site-header">
+    <div class="container navbar">
+      <a href="index.html" class="brand" aria-label="Homepage">
+        <img src="assets/img/favicon.svg" alt="" />
+        <span>My New Website</span>
+      </a>
+      <nav class="nav-links" id="primary-navigation" data-open="false" aria-label="Primary">
+        <a href="index.html">Home</a>
+        <a href="about.html">About</a>
+        <a href="contact.html" class="active" aria-current="page">Contact</a>
+      </nav>
+      <div class="nav-actions">
+        <button id="theme-toggle" class="icon-btn" aria-label="Toggle dark mode" title="Toggle theme">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path d="M12 3a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1Zm0 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm8-7a1 1 0 0 1 1 1h1a1 1 0 1 1 0 2h-1a1 1 0 1 1-2 0 1 1 0 0 1 1-1Zm-8 8a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Zm-9-8a1 1 0 0 1 1-1H5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm13.364-6.364a1 1 0 0 1 1.414 0l.707.707a1 1 0 1 1-1.414 1.414l-.707-.707a1 1 0 0 1 0-1.414ZM5.515 5.515a1 1 0 0 1 1.414 0l.707.707A1 1 0 1 1 6.222 7.64l-.707-.707a1 1 0 0 1 0-1.414Zm10.606 10.606a1 1 0 0 1 1.414 0l.707.707a1 1 0 1 1-1.414 1.414l-.707-.707a1 1 0 0 1 0-1.414Zm-10.606 0a1 1 0 0 1 1.414 0l.707.707A1 1 0 1 1 6.222 18.94l-.707-.707a1 1 0 0 1 0-1.414Z" fill="currentColor"/>
+          </svg>
+        </button>
+        <button id="menu-toggle" class="icon-btn menu-toggle" aria-controls="primary-navigation" aria-expanded="false" aria-label="Toggle menu">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+            <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </header>
+  <main class="container">
+    <section class="hero">
+      <h1>Contact</h1>
+      <p>We usually reply within one business day.</p>
+    </section>
+    <section>
+      <form id="contact-form" class="form" action="#" method="post">
+        <div class="field">
+          <label for="name">Name</label>
+          <input id="name" name="name" type="text" autocomplete="name" required />
+        </div>
+        <div class="field">
+          <label for="email">Email</label>
+          <input id="email" name="email" type="email" autocomplete="email" required />
+        </div>
+        <div class="field">
+          <label for="message">Message</label>
+          <textarea id="message" name="message" required></textarea>
+        </div>
+        <div id="form-success" role="status" aria-live="polite" hidden></div>
+        <div>
+          <button type="submit" class="btn btn-primary">Send message</button>
+        </div>
+      </form>
+    </section>
+  </main>
+  <footer class="site-footer">
+    <div class="container">© <span id="year"></span> My New Website</div>
+  </footer>
+  <script src="assets/js/main.js"></script>
+</body>
+</html>