initial: The Fat Dragon website from Lovable draft
This commit is contained in:
commit
39b102b459
2 changed files with 772 additions and 0 deletions
749
index.html
Normal file
749
index.html
Normal file
|
|
@ -0,0 +1,749 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Fat Dragon — Ashbourne, Co. Meath</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Orbitron:wght@400;600;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #09090f;
|
||||
--bg-2: #10121e;
|
||||
--bg-card: #16192b;
|
||||
--border: #22253d;
|
||||
--gold: #d4a017;
|
||||
--gold-lt: #f0c030;
|
||||
--gold-dk: #9a7510;
|
||||
--crimson: #b03020;
|
||||
--purple: #6d28d9;
|
||||
--text: #ede9e4;
|
||||
--muted: #7a7f99;
|
||||
--font-logo: 'Cinzel Decorative', serif;
|
||||
--font-hud: 'Orbitron', monospace;
|
||||
--font-body: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.65;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ── NAV ─────────────────────────────────────────── */
|
||||
nav {
|
||||
position: sticky; top: 0; z-index: 200;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0.9rem 2.5rem;
|
||||
background: rgba(9, 9, 15, 0.82);
|
||||
backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
text-decoration: none;
|
||||
font-family: var(--font-logo);
|
||||
font-size: 1rem;
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.04em;
|
||||
display: flex; align-items: center; gap: 0.55rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex; align-items: center; gap: 2.25rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-size: 0.8rem; font-weight: 500;
|
||||
letter-spacing: 0.1em; text-transform: uppercase;
|
||||
transition: color 0.18s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--gold); }
|
||||
|
||||
.nav-right {
|
||||
display: flex; align-items: center; gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-find {
|
||||
color: var(--muted); font-size: 0.82rem;
|
||||
text-decoration: none; transition: color 0.18s;
|
||||
}
|
||||
.nav-find:hover { color: var(--gold); }
|
||||
|
||||
.btn-book {
|
||||
background: var(--gold); color: #000;
|
||||
padding: 0.45rem 1.2rem;
|
||||
border-radius: 3px; border: none;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.78rem; font-weight: 700;
|
||||
letter-spacing: 0.1em; text-transform: uppercase;
|
||||
text-decoration: none; cursor: pointer;
|
||||
transition: background 0.18s, transform 0.1s;
|
||||
}
|
||||
.btn-book:hover { background: var(--gold-lt); transform: translateY(-1px); }
|
||||
|
||||
/* ── HERO ────────────────────────────────────────── */
|
||||
#hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex; align-items: center; justify-content: center; text-align: center;
|
||||
padding: 7rem 1.5rem 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute; inset: 0; z-index: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 70% 55% at 50% 105%, rgba(109,40,217,.18) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 50% 40% at 15% 60%, rgba(176,48,32,.12) 0%, transparent 65%),
|
||||
radial-gradient(ellipse 50% 40% at 85% 60%, rgba(212,160,23,.08) 0%, transparent 65%),
|
||||
linear-gradient(180deg, #09090f 0%, #0d0f1e 55%, #09090f 100%);
|
||||
}
|
||||
|
||||
.hero-bg::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background-image:
|
||||
radial-gradient(circle, rgba(212,160,23,.55) 1px, transparent 1px),
|
||||
radial-gradient(circle, rgba(212,160,23,.25) 1px, transparent 1px);
|
||||
background-size: 52px 52px, 88px 88px;
|
||||
background-position: 0 0, 26px 26px;
|
||||
opacity: 0.12;
|
||||
animation: drift 30s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes drift { to { transform: translateY(-80px); } }
|
||||
|
||||
.hero-body {
|
||||
position: relative; z-index: 1;
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
background: rgba(212,160,23,.12);
|
||||
border: 1px solid rgba(212,160,23,.38);
|
||||
color: var(--gold);
|
||||
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
|
||||
padding: 0.35rem 1rem; border-radius: 2px;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.hero-icon {
|
||||
font-size: 4.5rem; line-height: 1; display: block;
|
||||
margin-bottom: 0.9rem;
|
||||
filter: drop-shadow(0 0 24px rgba(212,160,23,.5));
|
||||
animation: glow 3.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%,100% { filter: drop-shadow(0 0 18px rgba(212,160,23,.42)); }
|
||||
50% { filter: drop-shadow(0 0 42px rgba(212,160,23,.85)) drop-shadow(0 0 60px rgba(176,48,32,.3)); }
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-logo);
|
||||
font-size: clamp(2.4rem, 7vw, 4.8rem);
|
||||
color: var(--gold);
|
||||
letter-spacing: 0.04em;
|
||||
text-shadow: 0 0 44px rgba(212,160,23,.35);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.hero-place {
|
||||
font-family: var(--font-hud);
|
||||
font-size: clamp(0.7rem, 1.8vw, 1rem);
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.4em; text-transform: uppercase;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
font-size: 1.05rem; color: var(--text);
|
||||
max-width: 520px; margin: 0 auto 1rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.hero-open {
|
||||
display: inline-block;
|
||||
background: rgba(109,40,217,.18);
|
||||
border: 1px solid rgba(109,40,217,.38);
|
||||
color: #b8a0f8;
|
||||
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
|
||||
padding: 0.38rem 1rem; border-radius: 2px;
|
||||
margin-bottom: 2.8rem;
|
||||
}
|
||||
|
||||
.hero-ctas {
|
||||
display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center;
|
||||
}
|
||||
|
||||
.btn-cta {
|
||||
display: inline-flex; align-items: center; gap: 0.45rem;
|
||||
padding: 0.8rem 1.65rem; border-radius: 3px; border: none;
|
||||
font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
|
||||
letter-spacing: 0.06em; text-transform: uppercase;
|
||||
text-decoration: none; cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-cta-primary { background: var(--gold); color: #000; }
|
||||
.btn-cta-primary:hover {
|
||||
background: var(--gold-lt); transform: translateY(-2px);
|
||||
box-shadow: 0 6px 22px rgba(212,160,23,.38);
|
||||
}
|
||||
|
||||
.btn-cta-ghost {
|
||||
background: transparent; color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.btn-cta-ghost:hover {
|
||||
border-color: var(--gold); color: var(--gold);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 22px rgba(212,160,23,.12);
|
||||
}
|
||||
|
||||
/* ── SECTION BASE ────────────────────────────────── */
|
||||
.section { padding: 5.5rem 2.5rem; }
|
||||
|
||||
.section-inner { max-width: 1120px; margin: 0 auto; }
|
||||
|
||||
.section-label {
|
||||
font-family: var(--font-hud);
|
||||
font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
|
||||
color: var(--gold); margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-logo);
|
||||
font-size: clamp(1.7rem, 3.8vw, 2.7rem);
|
||||
color: var(--text); line-height: 1.2; margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 0.98rem; color: var(--muted);
|
||||
max-width: 520px; line-height: 1.75;
|
||||
}
|
||||
|
||||
/* ── ARCADE ──────────────────────────────────────── */
|
||||
#arcade {
|
||||
background: var(--bg-2);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.two-col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cabinet {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
aspect-ratio: 3/4;
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cabinet-top {
|
||||
background: linear-gradient(135deg, #0d0f1e 0%, #14172c 100%);
|
||||
flex: 1;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 2rem 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cabinet-screen {
|
||||
background: rgba(0,0,0,.65);
|
||||
border: 2px solid var(--gold-dk);
|
||||
border-radius: 3px;
|
||||
padding: 1.5rem 2rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
box-shadow: 0 0 18px rgba(212,160,23,.18), inset 0 0 18px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.screen-title {
|
||||
font-family: var(--font-hud);
|
||||
font-size: 1.25rem; letter-spacing: 0.2em;
|
||||
color: var(--gold);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,100% { text-shadow: 0 0 6px var(--gold); }
|
||||
50% { text-shadow: 0 0 22px var(--gold), 0 0 44px rgba(212,160,23,.5); }
|
||||
}
|
||||
|
||||
.screen-sub {
|
||||
font-family: var(--font-hud);
|
||||
font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase;
|
||||
color: var(--crimson); margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.screen-insert {
|
||||
font-family: var(--font-hud);
|
||||
font-size: 0.48rem; letter-spacing: 0.22em; text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
animation: blink 1.3s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
|
||||
|
||||
.cabinet-controls {
|
||||
background: #1a1d30;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0.9rem 1.5rem;
|
||||
display: flex; align-items: center; justify-content: center; gap: 0.6rem;
|
||||
}
|
||||
|
||||
.stick {
|
||||
width: 18px; height: 18px;
|
||||
background: #2a2d40; border-radius: 50%;
|
||||
border: 2px solid #3a3d55;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.btn-ab {
|
||||
width: 13px; height: 13px; border-radius: 50%;
|
||||
border: 1px solid rgba(255,255,255,.15);
|
||||
}
|
||||
|
||||
.games-list {
|
||||
display: flex; flex-wrap: wrap; gap: 0.5rem;
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
|
||||
.game-tag {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
font-family: var(--font-hud);
|
||||
font-size: 0.58rem; letter-spacing: 0.06em;
|
||||
padding: 0.32rem 0.7rem; border-radius: 3px;
|
||||
transition: border-color 0.18s, color 0.18s;
|
||||
}
|
||||
.game-tag:hover { border-color: var(--gold); color: var(--gold); }
|
||||
|
||||
/* ── BOARD GAMES ─────────────────────────────────── */
|
||||
#board-games { background: var(--bg); }
|
||||
|
||||
.boardgames-visual {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
aspect-ratio: 4/3;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
|
||||
.boardgames-visual::before {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 35% 35%, rgba(109,40,217,.14) 0%, transparent 60%),
|
||||
radial-gradient(circle at 70% 70%, rgba(14,116,144,.10) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
.table-art {
|
||||
position: relative; z-index: 1; text-align: center;
|
||||
}
|
||||
|
||||
.table-art span { font-size: 4rem; display: block; margin-bottom: 0.5rem; }
|
||||
|
||||
.table-art p {
|
||||
font-family: var(--font-hud);
|
||||
font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.game-cats {
|
||||
display: grid; grid-template-columns: 1fr 1fr;
|
||||
gap: 1.25rem; margin-top: 2rem;
|
||||
}
|
||||
|
||||
.game-cat {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px; padding: 1.1rem 1.25rem;
|
||||
transition: border-color 0.18s;
|
||||
}
|
||||
.game-cat:hover { border-color: rgba(212,160,23,.28); }
|
||||
|
||||
.cat-title {
|
||||
font-family: var(--font-hud);
|
||||
font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
|
||||
color: var(--gold); margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.cat-games {
|
||||
list-style: none;
|
||||
}
|
||||
.cat-games li {
|
||||
font-size: 0.85rem; color: var(--muted);
|
||||
padding: 0.18rem 0 0.18rem 1rem; position: relative;
|
||||
}
|
||||
.cat-games li::before {
|
||||
content: '▸'; position: absolute; left: 0;
|
||||
color: var(--gold-dk); font-size: 0.65rem;
|
||||
top: 50%; transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* ── EVENTS ──────────────────────────────────────── */
|
||||
#events {
|
||||
background: var(--bg-2);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 4.5rem 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.events-body { max-width: 620px; margin: 0 auto; }
|
||||
|
||||
.events-badge {
|
||||
display: inline-block;
|
||||
font-family: var(--font-hud);
|
||||
font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase;
|
||||
color: #a78bfa;
|
||||
border: 1px solid rgba(109,40,217,.38);
|
||||
background: rgba(109,40,217,.12);
|
||||
padding: 0.35rem 1rem; border-radius: 2px;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
|
||||
.events-title {
|
||||
font-family: var(--font-logo);
|
||||
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
|
||||
color: var(--text); margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.events-desc {
|
||||
color: var(--muted); font-size: 0.97rem; line-height: 1.75; margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.event-pills {
|
||||
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem;
|
||||
}
|
||||
|
||||
.pill {
|
||||
background: rgba(109,40,217,.14);
|
||||
border: 1px solid rgba(109,40,217,.28);
|
||||
color: #c4b5fd;
|
||||
font-size: 0.78rem; padding: 0.38rem 1rem; border-radius: 99px;
|
||||
}
|
||||
|
||||
/* ── FOOTER ──────────────────────────────────────── */
|
||||
footer {
|
||||
background: #060609;
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 4rem 2.5rem 2rem;
|
||||
}
|
||||
|
||||
.footer-body { max-width: 1120px; margin: 0 auto; }
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||||
gap: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
font-family: var(--font-logo);
|
||||
font-size: 1.1rem; color: var(--gold);
|
||||
display: flex; align-items: center; gap: 0.45rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.footer-tagline {
|
||||
color: var(--muted); font-size: 0.87rem; line-height: 1.65; margin-bottom: 1.1rem;
|
||||
}
|
||||
|
||||
.contact-row {
|
||||
display: flex; align-items: flex-start; gap: 0.5rem;
|
||||
color: var(--muted); font-size: 0.83rem; margin-bottom: 0.45rem;
|
||||
text-decoration: none; transition: color 0.18s;
|
||||
}
|
||||
.contact-row:hover { color: var(--gold); }
|
||||
|
||||
.col-head {
|
||||
font-family: var(--font-hud);
|
||||
font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
|
||||
color: var(--gold); margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.hours-list { list-style: none; }
|
||||
.hours-list li {
|
||||
display: flex; justify-content: space-between; gap: 1rem;
|
||||
font-size: 0.83rem; color: var(--muted); margin-bottom: 0.38rem;
|
||||
}
|
||||
.hours-list .day { color: var(--text); }
|
||||
|
||||
.footer-nav { list-style: none; }
|
||||
.footer-nav li { margin-bottom: 0.45rem; }
|
||||
.footer-nav a {
|
||||
color: var(--muted); font-size: 0.83rem; text-decoration: none;
|
||||
transition: color 0.18s;
|
||||
}
|
||||
.footer-nav a:hover { color: var(--gold); }
|
||||
|
||||
.map-box {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px; height: 90px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.map-box a {
|
||||
color: var(--muted); font-size: 0.8rem; text-decoration: none;
|
||||
display: flex; align-items: center; gap: 0.4rem;
|
||||
transition: color 0.18s;
|
||||
}
|
||||
.map-box a:hover { color: var(--gold); }
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 1.4rem;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
flex-wrap: wrap; gap: 0.75rem;
|
||||
}
|
||||
|
||||
.copyright { font-size: 0.78rem; color: var(--muted); }
|
||||
|
||||
.legal { display: flex; gap: 1.4rem; }
|
||||
.legal a {
|
||||
font-size: 0.78rem; color: var(--muted); text-decoration: none;
|
||||
transition: color 0.18s;
|
||||
}
|
||||
.legal a:hover { color: var(--gold); }
|
||||
|
||||
/* ── RESPONSIVE ──────────────────────────────────── */
|
||||
@media (max-width: 860px) {
|
||||
nav { padding: 0.8rem 1.25rem; flex-wrap: wrap; gap: 0.7rem; }
|
||||
.nav-links { order: 3; width: 100%; gap: 1.5rem; }
|
||||
|
||||
.two-col,
|
||||
.boardgames-layout { grid-template-columns: 1fr; }
|
||||
|
||||
.game-cats { grid-template-columns: 1fr; }
|
||||
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.hero-ctas { flex-direction: column; align-items: center; }
|
||||
.footer-grid { grid-template-columns: 1fr; }
|
||||
.footer-bottom { flex-direction: column; text-align: center; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ── NAV ── -->
|
||||
<nav>
|
||||
<a href="#" class="nav-logo">🐉 The Fat Dragon</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#arcade">Arcade</a></li>
|
||||
<li><a href="#board-games">Board Games</a></li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<a href="#contact" class="nav-find">Find Us</a>
|
||||
<a href="#book" class="btn-book">Book Now</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ── HERO ── -->
|
||||
<section id="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-body">
|
||||
<div class="hero-badge">Coming Soon</div>
|
||||
<span class="hero-icon">🐉</span>
|
||||
<h1 class="hero-title">The Fat Dragon</h1>
|
||||
<p class="hero-place">Ashbourne · Co. Meath · Ireland</p>
|
||||
<p class="hero-copy">
|
||||
A brand-new game shop is coming to Ashbourne — retro arcade cabinets,
|
||||
tabletop strategy, D&D campaigns, and a space built for every kind of player.
|
||||
</p>
|
||||
<span class="hero-open">Opening July 2026 · D&D Bookings Open Now</span>
|
||||
<div class="hero-ctas">
|
||||
<a href="#book" class="btn-cta btn-cta-primary">⚔️ D&D Sessions</a>
|
||||
<a href="#arcade" class="btn-cta btn-cta-ghost">🕹️ Retro Arcade</a>
|
||||
<a href="#board-games" class="btn-cta btn-cta-ghost">🎲 Table Top Games</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── ARCADE ── -->
|
||||
<section id="arcade" class="section">
|
||||
<div class="section-inner">
|
||||
<div class="two-col">
|
||||
<div class="cabinet">
|
||||
<div class="cabinet-top">
|
||||
<div class="cabinet-screen">
|
||||
<div class="screen-title">FAT DRAGON</div>
|
||||
<div class="screen-sub">Arcade · Est. 2026</div>
|
||||
<div class="screen-insert">Insert Coin to Continue</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cabinet-controls">
|
||||
<div class="stick"></div>
|
||||
<div class="btn-ab" style="background:#c0392b; margin-left:10px;"></div>
|
||||
<div class="btn-ab" style="background:#2980b9;"></div>
|
||||
<div class="btn-ab" style="background:#e67e22;"></div>
|
||||
<div class="btn-ab" style="background:#27ae60;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-label">Retro Arcade</div>
|
||||
<h2 class="section-title">Play Against Friends and Rivals</h2>
|
||||
<p class="section-desc">
|
||||
Relive the golden age of gaming with our hand-picked collection of classic
|
||||
arcade cabinets. Challenge friends head-to-head or prove yourself against
|
||||
the machine — the high score board awaits.
|
||||
</p>
|
||||
<div class="games-list">
|
||||
<span class="game-tag">Mortal Kombat II</span>
|
||||
<span class="game-tag">Mortal Kombat III</span>
|
||||
<span class="game-tag">Street Fighter II</span>
|
||||
<span class="game-tag">Street Fighter III</span>
|
||||
<span class="game-tag">Time Crisis</span>
|
||||
<span class="game-tag">Marvel vs. Capcom</span>
|
||||
<span class="game-tag">Pac-Man</span>
|
||||
<span class="game-tag">Space Invaders</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── BOARD GAMES ── -->
|
||||
<section id="board-games" class="section">
|
||||
<div class="section-inner">
|
||||
<div class="two-col" style="direction:rtl;">
|
||||
<div class="boardgames-visual" style="direction:ltr;">
|
||||
<div class="table-art">
|
||||
<span>🎲</span>
|
||||
<p>Board & Card Games</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="direction:ltr;">
|
||||
<div class="section-label">Board & Card Games</div>
|
||||
<h2 class="section-title">Gather Around the Table</h2>
|
||||
<p class="section-desc">
|
||||
From grand strategy to fast-paced card battles, our library has something
|
||||
for every group. Bring your crew or meet new challengers — the table is always open.
|
||||
</p>
|
||||
<div class="game-cats">
|
||||
<div class="game-cat">
|
||||
<div class="cat-title">Strategy Games</div>
|
||||
<ul class="cat-games">
|
||||
<li>Catan</li>
|
||||
<li>Ticket to Ride</li>
|
||||
<li>Village</li>
|
||||
<li>Dune</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="game-cat">
|
||||
<div class="cat-title">Card Games</div>
|
||||
<ul class="cat-games">
|
||||
<li>Magic: The Gathering</li>
|
||||
<li>Pokémon TCG</li>
|
||||
<li>Yu-Gi-Oh!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── EVENTS ── -->
|
||||
<section id="events">
|
||||
<div class="events-body">
|
||||
<div class="events-badge">Events & Tournaments</div>
|
||||
<h2 class="events-title">Compete, Collaborate, Celebrate</h2>
|
||||
<p class="events-desc">
|
||||
Regular tournaments, campaign nights, and community events are coming.
|
||||
Full schedule launches with our opening in July 2026 — stay tuned.
|
||||
</p>
|
||||
<div class="event-pills">
|
||||
<span class="pill">D&D Campaign Nights</span>
|
||||
<span class="pill">Fighting Game Tournaments</span>
|
||||
<span class="pill">Pokémon TCG Events</span>
|
||||
<span class="pill">Board Game Socials</span>
|
||||
<span class="pill">Magic: The Gathering</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── FOOTER ── -->
|
||||
<footer id="contact">
|
||||
<div class="footer-body">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<div class="footer-brand">🐉 The Fat Dragon</div>
|
||||
<p class="footer-tagline">
|
||||
Ashbourne's home for retro arcade gaming, tabletop strategy,
|
||||
and trading card battles. Opening July 2026.
|
||||
</p>
|
||||
<a href="mailto:hello@denofdragons.com" class="contact-row">✉ hello@denofdragons.com</a>
|
||||
<a href="tel:+353899409075" class="contact-row">☎ 089 940 9075</a>
|
||||
<span class="contact-row">📍 Ashbourne, Co. Meath, Ireland</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="col-head">Hours</div>
|
||||
<ul class="hours-list">
|
||||
<li><span class="day">Mon – Fri</span><span>12:00 – 22:00</span></li>
|
||||
<li><span class="day">Saturday</span><span>09:00 – 22:00</span></li>
|
||||
<li><span class="day">Sunday</span><span>09:00 – 21:00</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="col-head">Book</div>
|
||||
<ul class="footer-nav">
|
||||
<li><a href="#book">D&D Sessions</a></li>
|
||||
<li><a href="#arcade">Retro Arcade</a></li>
|
||||
<li><a href="#board-games">Tabletop Games</a></li>
|
||||
<li><a href="#events">Events</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="book">
|
||||
<div class="col-head">Find Us</div>
|
||||
<div class="map-box">
|
||||
<a href="#contact">📍 Ashbourne, Co. Meath</a>
|
||||
</div>
|
||||
<p style="font-size:0.78rem; color:var(--muted); line-height:1.5;">
|
||||
Full address and booking links<br>available at launch (July 2026).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span class="copyright">© 2026 The Fat Dragon. All rights reserved.</span>
|
||||
<div class="legal">
|
||||
<a href="#">Privacy</a>
|
||||
<a href="#">Terms</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue