diff --git a/website/about.html b/website/about.html new file mode 100644 index 0000000..4dd76cb --- /dev/null +++ b/website/about.html @@ -0,0 +1,66 @@ + + + + + + About • My New Website + + + + + + + + + +
+
+ + + My New Website + + +
+ + +
+
+
+
+
+

About

+

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.

+
+
+
+

Philosophy

+

Keep it simple, fast, and accessible. Add only what you need.

+
+
+

Tech

+

No frameworks required. Works on any static host out of the box.

+
+
+

Customize

+

Update colors, spacing, and components in a single stylesheet.

+
+
+
+ + + + diff --git a/website/assets/css/styles.css b/website/assets/css/styles.css new file mode 100644 index 0000000..593a699 --- /dev/null +++ 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 new file mode 100644 index 0000000..f8496ab --- /dev/null +++ b/website/assets/img/favicon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/website/assets/js/main.js b/website/assets/js/main.js new file mode 100644 index 0000000..37805cb --- /dev/null +++ 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 new file mode 100644 index 0000000..d0b1c32 --- /dev/null +++ b/website/contact.html @@ -0,0 +1,72 @@ + + + + + + Contact • My New Website + + + + + + + + + +
+
+ + + My New Website + + +
+ + +
+
+
+
+
+

Contact

+

We usually reply within one business day.

+
+
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+
+
+
+ + + + diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..cbe624d --- /dev/null +++ b/website/index.html @@ -0,0 +1,70 @@ + + + + + + My New Website + + + + + + + + + +
+
+ + + My New Website + + +
+ + +
+
+
+
+
+

Build something great.

+

Modern, responsive starter with dark mode, ready to customize.

+
+ Learn more + Contact us +
+
+
+
+

Fast

+

Lightweight static site with clean CSS.

+
+
+

Responsive

+

Looks great on phones, tablets, and desktops.

+
+
+

Accessible

+

Semantic HTML with keyboard-friendly controls.

+
+
+
+ + + + diff --git a/website/robots.txt b/website/robots.txt new file mode 100644 index 0000000..c2a49f4 --- /dev/null +++ b/website/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Allow: /