diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f4d732b --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +raw/ +CLAUDE.md +.claude/ +.DS_Store +node_modules/ +*.log +Thumbs.db diff --git a/README.txt b/README.txt index e69de29..f4e7aef 100644 --- a/README.txt +++ b/README.txt @@ -0,0 +1,13 @@ +SaborFlow Da Nang +================= +Website for the Latin dance community in Da Nang, Vietnam. + +A non-profit initiative supporting social dancers in Da Nang and Hoi An. +Salsa · Bachata · Kizomba · Zouk + +Instagram: @saborflowdanang +https://www.instagram.com/saborflowdanang/ + +--- +Tech: HTML + CSS + JS (no build tools required) +Deploy: commit to master branch diff --git a/assets/logo.jpg b/assets/logo.jpg new file mode 100644 index 0000000..47acda3 Binary files /dev/null and b/assets/logo.jpg differ diff --git a/classes.html b/classes.html new file mode 100644 index 0000000..ccec989 --- /dev/null +++ b/classes.html @@ -0,0 +1,205 @@ + + + + + + Dance Classes — SaborFlow Da Nang + + + + + + + + +
+
+

Dance Classes

+

Whether you’re just starting out or looking to sharpen your moves — there’s a class for you.

+
+ +
+ + + + + + + +
+ +
+ + +
+
+
Lucho Giraldes — Salsa
+
+ Salsa On1 + Salsa On2 + Beginner + Intermediate + Advanced +
+
+ 👨‍🏫 Lucho Giraldes — 20+ years experience +
+
+ 📍 Various venues in Da Nang (see website for details) +
+
+ 📅 Check website for current schedule +
+
+ 🌐 salsadanang.com + 📸 @salsadanang +
+
+
+ + +
+
+
Daisy Nguyen
+
+ Bachata + Kizomba + Intermediate +
+
+ 👩‍🏫 Daisy Nguyen — local instructor & social organizer +
+
+ 📍 Da Nang (venues change — follow for updates) +
+
+ 📅 Tuesday at Caliz Bar (Sensual Night) · Sunday at Corner Bar +
+
+ 📸 Check Instagram +
+
+
+ + +
+
+
Frog Goose — Bachata Workshop
+
+ Bachata + Beginner + Intermediate +
+
+ 👩‍🏫 Luu Nhat Phuong, Phong & Shai +
+
+ 📍 292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang +
+
+ 📅 Every Monday — Workshop 8:30 PM · Social from 9:30 PM +
+
+ 👥 Facebook +
+
+
+ + +
+
+
Sean Kim — Kizomba & Bachata
+
+ Kizomba + Bachata + Intermediate +
+
+ 👨‍🏫 Sean Kim — organizer of the Wednesday Bachata Kiz Night +
+
+ 📍 Ket Fai Bar, Da Nang +
+
+ 📅 Wednesday — Kizomba from 19:30 · Bachata from 21:00 +
+
+ 📩 Contact via SaborFlow +
+
+
+ + +
+
+
50 Decibels
+
+ Kizomba + Zouk + Salsa + Bachata + Beginner-friendly +
+
+ 📍 36 Đ. Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang +
+
+ 📅 Monday 9 PM — Kizomba & Zouk night +
+
+ 📅 Friday 9 PM — Latin Vibes (Salsa, Bachata, Kizomba) +
+
+ 💰 ~$3 USD cover +
+
+
+ +
+ +
+

Teaching in Da Nang and not listed here? Get in touch!

+ 📩 Contact Us +
+
+ + + + + + diff --git a/connect.html b/connect.html new file mode 100644 index 0000000..ca29efb --- /dev/null +++ b/connect.html @@ -0,0 +1,149 @@ + + + + + + Connect — SaborFlow Da Nang + + + + + + + + + +
+
+

Connect with SaborFlow

+

Follow us for the latest socials, photos, and community news.

+
+ + +
+ SaborFlow Da Nang +
@saborflowdanang
+

Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the week!

+ + 📸 Open on Instagram + +
+ + +

Latest Posts

+ + +
+ + +
+
📸
+

Latest posts from the community

+ View on Instagram → +
+ + +
+
🎥
+

Videos, reels, and social dance moments

+ View on Instagram → +
+ + +
+
💃
+

Workshops, festivals, and special events

+ View on Instagram → +
+ +
+ + +
+

Get in Touch

+

+ Want to host a social? Suggest a venue? Collaborate on an event? Or just say hi? + We’d love to hear from you — we don’t bite, we just dance! 🕺 +

+
+ + 📸 DM on Instagram + + + 👥 Join the Facebook Group + +
+
+
+ + + + + + + + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..a26d50e --- /dev/null +++ b/css/style.css @@ -0,0 +1,741 @@ +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Dancing+Script:wght@600&display=swap'); + +/* ===== RESET & BASE ===== */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + --bg: #141414; + --card: #1e1e1e; + --border: #2a2a2a; + --orange: #e8572a; + --gold: #f5b800; + --teal: #1bbcbc; + --coral: #e05b7e; + --white: #ffffff; + --subtle: #aaaaaa; + --radius: 12px; + --tr: 0.25s ease; + --shadow: 0 4px 24px rgba(0,0,0,0.4); + --max-w: 1200px; +} + +html { scroll-behavior: smooth; } + +body { + background: var(--bg); + color: var(--white); + font-family: 'Lato', sans-serif; + font-size: 16px; + line-height: 1.6; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +a { color: inherit; text-decoration: none; } +img { max-width: 100%; height: auto; display: block; } +ul { list-style: none; } + +.container { + width: 100%; + max-width: var(--max-w); + margin: 0 auto; + padding: 0 1.5rem; +} + +/* ===== TYPOGRAPHY ===== */ +h1, h2, h3, h4 { + font-family: 'Oswald', sans-serif; + font-weight: 600; + line-height: 1.2; + letter-spacing: 0.02em; +} + +h1 { font-size: clamp(2rem, 5vw, 3.5rem); } +h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); } +h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); } + +.accent { color: var(--gold); } +.accent-orange { color: var(--orange); } +.accent-teal { color: var(--teal); } +.script { + font-family: 'Dancing Script', cursive; + font-size: 1.15em; +} + +/* ===== NAVIGATION ===== */ +.nav { + position: sticky; + top: 0; + z-index: 100; + background: rgba(20,20,20,0.96); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--border); +} + +.nav-container { + max-width: var(--max-w); + margin: 0 auto; + padding: 0 1.5rem; + height: 70px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.nav-logo img { + height: 48px; + width: 48px; + border-radius: 50%; + object-fit: cover; +} + +.nav-links { + display: flex; + align-items: center; + gap: 0.15rem; +} + +.nav-links a { + padding: 0.4rem 0.8rem; + border-radius: 6px; + font-family: 'Oswald', sans-serif; + font-size: 0.9rem; + font-weight: 500; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--subtle); + transition: color var(--tr), background var(--tr); + white-space: nowrap; +} + +.nav-links a:hover { color: var(--white); background: var(--border); } +.nav-links a.active { color: var(--gold); background: rgba(245,184,0,0.1); } + +.nav-hamburger { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 8px; +} + +.nav-hamburger span { + display: block; + width: 24px; + height: 2px; + background: var(--white); + border-radius: 2px; + transition: var(--tr); +} + +/* ===== BUTTONS ===== */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.7rem 1.4rem; + border-radius: 8px; + font-family: 'Oswald', sans-serif; + font-size: 0.95rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + cursor: pointer; + border: 2px solid transparent; + transition: transform var(--tr), box-shadow var(--tr), background var(--tr), border-color var(--tr), color var(--tr); +} + +.btn-primary { background: var(--orange); color: var(--white); } +.btn-primary:hover { + background: #d04a22; + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(232,87,42,0.35); +} + +.btn-secondary { background: transparent; border-color: var(--gold); color: var(--gold); } +.btn-secondary:hover { background: var(--gold); color: var(--bg); transform: translateY(-2px); } + +.btn-ghost { background: transparent; border-color: var(--border); color: var(--subtle); } +.btn-ghost:hover { border-color: var(--white); color: var(--white); } + +.btn-teal { background: transparent; border-color: var(--teal); color: var(--teal); } +.btn-teal:hover { background: var(--teal); color: var(--bg); transform: translateY(-2px); } + +/* ===== SECTION COMMON ===== */ +section { padding: 4rem 0; } + +.section-title { + font-family: 'Oswald', sans-serif; + font-size: 1.4rem; + font-weight: 600; + color: var(--gold); + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 2rem; + display: flex; + align-items: center; + gap: 1rem; +} +.section-title::after { + content: ''; + flex: 1; + height: 1px; + background: var(--border); +} + +.page-header { + padding: 3.5rem 0 2rem; + text-align: center; +} +.page-header h1 { margin-bottom: 0.5rem; } +.page-header .subtitle { + color: var(--subtle); + font-size: 1.05rem; + max-width: 580px; + margin: 0 auto; +} + +/* ===== CARDS ===== */ +.card { + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius); + overflow: hidden; + transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr); +} +.card:hover { + border-color: var(--orange); + transform: translateY(-4px); + box-shadow: var(--shadow); +} +.card-body { padding: 1.5rem; } +.card-title { font-family: 'Oswald', sans-serif; font-size: 1.2rem; font-weight: 600; margin-bottom: 0.4rem; } +.card-text { color: var(--subtle); font-size: 0.9rem; } + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); + gap: 1.5rem; +} + +/* ===== TAG PILLS ===== */ +.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; } +.tag { + padding: 0.2rem 0.65rem; + border-radius: 100px; + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + white-space: nowrap; +} +.tag-salsa { background: rgba(232,87,42,0.18); color: var(--orange); } +.tag-bachata { background: rgba(224,91,126,0.18); color: var(--coral); } +.tag-kizomba { background: rgba(27,188,188,0.18); color: var(--teal); } +.tag-zouk { background: rgba(245,184,0,0.18); color: var(--gold); } +.tag-tango { background: rgba(170,170,170,0.12);color: var(--subtle); } +.tag-beginner { background: rgba(27,188,188,0.18); color: var(--teal); } +.tag-intermediate { background: rgba(245,184,0,0.18); color: var(--gold); } +.tag-advanced { background: rgba(232,87,42,0.18); color: var(--orange); } + +/* ===== FILTER PILLS ===== */ +.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; } + +.filter-pill { + padding: 0.45rem 1.1rem; + border-radius: 100px; + border: 2px solid var(--border); + background: transparent; + color: var(--subtle); + font-family: 'Oswald', sans-serif; + font-size: 0.82rem; + font-weight: 500; + letter-spacing: 0.06em; + text-transform: uppercase; + cursor: pointer; + transition: border-color var(--tr), color var(--tr), background var(--tr); +} +.filter-pill:hover { border-color: var(--orange); color: var(--white); } +.filter-pill.active { background: var(--orange); border-color: var(--orange); color: var(--white); } + +/* ===== CARD LINKS (studios/classes) ===== */ +.card-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } + +.card-link { + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.3rem 0.7rem; + border: 1px solid var(--border); + border-radius: 6px; + font-size: 0.8rem; + color: var(--subtle); + transition: border-color var(--tr), color var(--tr); +} +.card-link:hover { border-color: var(--orange); color: var(--orange); } + +.card-info { color: var(--subtle); font-size: 0.875rem; margin-top: 0.5rem; line-height: 1.5; } +.card-info strong { color: var(--white); } + +/* ===== HERO (index.html) ===== */ +.hero { + min-height: calc(100vh - 70px); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + position: relative; + overflow: hidden; + background: linear-gradient(-45deg, #141414, #1e1e1e, #2d1a0e, #0d2626, #1a0d1a); + background-size: 400% 400%; + animation: gradientShift 18s ease infinite; +} + +@keyframes gradientShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.hero::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(ellipse at center, rgba(232,87,42,0.07) 0%, transparent 65%); + pointer-events: none; +} + +.hero-content { position: relative; z-index: 1; padding: 2rem 1.5rem; } + +.hero-logo { + width: min(220px, 50vw); + height: min(220px, 50vw); + border-radius: 50%; + object-fit: cover; + margin: 0 auto 2rem; + box-shadow: 0 0 60px rgba(232,87,42,0.25), 0 0 120px rgba(245,184,0,0.08); + border: 3px solid rgba(232,87,42,0.25); +} + +.hero-tagline { + font-family: 'Oswald', sans-serif; + font-size: clamp(1rem, 3vw, 1.75rem); + font-weight: 400; + color: var(--subtle); + text-transform: uppercase; + letter-spacing: 0.12em; + margin-bottom: 0.5rem; +} + +.hero-sub { + font-family: 'Dancing Script', cursive; + font-size: clamp(1rem, 2.5vw, 1.3rem); + color: var(--gold); + margin-bottom: 2.5rem; + opacity: 0.85; +} + +.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } + +/* ===== ABOUT (index.html) ===== */ +.about-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 1.5rem; +} + +.about-card { + background: var(--card); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 2rem 1.5rem; + text-align: center; + transition: border-color var(--tr), transform var(--tr); +} +.about-card:hover { border-color: var(--gold); transform: translateY(-4px); } +.about-card .icon { font-size: 2.5rem; margin-bottom: 1rem; } +.about-card h3 { font-size: 1.15rem; color: var(--gold); margin-bottom: 0.6rem; } +.about-card p { color: var(--subtle); font-size: 0.88rem; } + +/* ===== TEASER CARDS (index.html) ===== */ +.teaser-card { + background: var(--card); + border: 1px solid var(--border); + border-left: 4px solid var(--orange); + border-radius: var(--radius); + padding: 1.2rem 1.4rem; + transition: background var(--tr), border-color var(--tr); +} +.teaser-card:hover { + background: rgba(232,87,42,0.05); + border-color: var(--orange); +} +.teaser-day { + font-family: 'Oswald', sans-serif; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--orange); + margin-bottom: 0.2rem; +} +.teaser-social { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; } +.teaser-meta { font-size: 0.82rem; color: var(--subtle); } + +/* ===== IG BANNER (index.html) ===== */ +.ig-banner { + background: linear-gradient(135deg, rgba(232,87,42,0.1), rgba(245,184,0,0.06)); + border: 1px solid rgba(232,87,42,0.25); + border-radius: 20px; + padding: 3rem 2rem; + text-align: center; +} +.ig-banner h2 { margin-bottom: 0.6rem; } +.ig-banner p { color: var(--subtle); margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; } + +/* ===== SCHEDULE TABLE ===== */ +.schedule-note { + background: rgba(27,188,188,0.08); + border: 1px solid rgba(27,188,188,0.25); + border-radius: var(--radius); + padding: 1rem 1.25rem; + color: var(--teal); + font-size: 0.88rem; + margin-bottom: 2rem; + display: flex; + align-items: flex-start; + gap: 0.6rem; + line-height: 1.5; +} + +.schedule-table-wrap { + overflow-x: auto; + border-radius: var(--radius); + border: 1px solid var(--border); +} + +.schedule-table { + width: 100%; + border-collapse: collapse; + font-size: 0.88rem; +} + +.schedule-table thead th { + background: var(--card); + padding: 0.9rem 1.1rem; + text-align: left; + font-family: 'Oswald', sans-serif; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.09em; + color: var(--gold); + border-bottom: 1px solid var(--border); + white-space: nowrap; +} + +.schedule-table tbody tr { + border-bottom: 1px solid var(--border); + transition: background var(--tr); +} +.schedule-table tbody tr:last-child { border-bottom: none; } +.schedule-table tbody tr:hover { background: rgba(255,255,255,0.02); } + +.schedule-table td { + padding: 0.9rem 1.1rem; + vertical-align: middle; +} + +.day-badge { + display: inline-block; + padding: 0.2rem 0.6rem; + border-radius: 6px; + font-family: 'Oswald', sans-serif; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + white-space: nowrap; +} +.day-monday { background: rgba(232,87,42,0.18); color: var(--orange); } +.day-tuesday { background: rgba(245,184,0,0.18); color: var(--gold); } +.day-wednesday { background: rgba(27,188,188,0.18); color: var(--teal); } +.day-thursday { background: rgba(224,91,126,0.18); color: var(--coral); } +.day-friday { background: rgba(232,87,42,0.18); color: var(--orange); } +.day-saturday { background: rgba(245,184,0,0.18); color: var(--gold); } +.day-sunday { background: rgba(27,188,188,0.18); color: var(--teal); } + +.social-name { font-weight: 700; } +.venue-name { color: var(--subtle); } +.music-text { color: var(--subtle); font-size: 0.82rem; } +.city-badge { font-size: 0.8rem; font-weight: 700; color: var(--teal); } +.organizer-text{ color: var(--subtle); font-size: 0.82rem; } + +/* Mobile: table → cards */ +@media (max-width: 768px) { + .schedule-table-wrap { border: none; overflow: visible; } + + .schedule-table, + .schedule-table thead, + .schedule-table tbody, + .schedule-table tr, + .schedule-table th, + .schedule-table td { display: block; width: 100%; } + + .schedule-table thead { display: none; } + + .schedule-table tbody tr { + background: var(--card); + border: 1px solid var(--border); + border-left: 4px solid var(--orange); + border-radius: var(--radius); + padding: 1rem 1.25rem; + margin-bottom: 1rem; + } + + .schedule-table td { padding: 0.3rem 0; border: none; } + + .schedule-table td::before { + content: attr(data-label); + display: block; + font-size: 0.68rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--gold); + margin-bottom: 0.1rem; + font-family: 'Oswald', sans-serif; + } +} + +/* ===== CONNECT PAGE ===== */ +.ig-profile-card { + background: linear-gradient(135deg, var(--card), rgba(232,87,42,0.04)); + border: 1px solid rgba(232,87,42,0.25); + border-radius: 20px; + padding: 3rem 2rem; + text-align: center; + margin-bottom: 3rem; +} +.ig-avatar { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + margin: 0 auto 1rem; + border: 3px solid var(--orange); +} +.ig-handle { + font-family: 'Oswald', sans-serif; + font-size: 1.75rem; + color: var(--gold); + margin-bottom: 0.5rem; +} +.ig-desc { color: var(--subtle); margin-bottom: 1.5rem; max-width: 460px; margin-left: auto; margin-right: auto; } + +.ig-embeds { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 1.5rem; + align-items: start; + margin-bottom: 3rem; +} + +.contact-box { + background: var(--card); + border: 1px solid var(--border); + border-radius: 20px; + padding: 2.5rem 2rem; + text-align: center; +} +.contact-box h2 { margin-bottom: 0.75rem; } +.contact-box p { color: var(--subtle); margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; } + +/* ===== STUDIO / CLASS CARDS ===== */ +.studio-card .card-stripe { + height: 6px; + background: linear-gradient(90deg, var(--orange), var(--gold)); +} + +/* ===== FESTIVAL CARDS ===== */ +.festival-card { + background: var(--card); + border: 1px solid var(--border); + border-radius: 20px; + overflow: hidden; + margin-bottom: 2.5rem; + transition: border-color var(--tr), box-shadow var(--tr); +} +.festival-card:hover { border-color: var(--orange); box-shadow: var(--shadow); } + +.festival-poster { + height: 220px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 2rem; + position: relative; + overflow: hidden; +} +.festival-poster::before { + content: ''; + position: absolute; + inset: 0; + opacity: 0.55; +} + +.festival-card-le .festival-poster { + background: linear-gradient(135deg, #1a0a20, #2d1040, #0d1a30); +} +.festival-card-le .festival-poster::before { + background: radial-gradient(ellipse at center, rgba(224,91,126,0.5), transparent 70%); +} + +.festival-card-vlx .festival-poster { + background: linear-gradient(135deg, #0d1a0d, #1a2d0d, #0d1a2d); +} +.festival-card-vlx .festival-poster::before { + background: radial-gradient(ellipse at center, rgba(27,188,188,0.5), transparent 70%); +} + +.festival-poster-content { position: relative; z-index: 1; } +.festival-poster h2 { + font-size: clamp(1.4rem, 4vw, 2.2rem); + color: var(--white); + text-shadow: 0 2px 20px rgba(0,0,0,0.6); + margin-bottom: 0.4rem; +} +.festival-dates { + font-family: 'Oswald', sans-serif; + font-size: 1rem; + color: var(--gold); + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.festival-body { padding: 2rem; } + +.festival-meta { + display: flex; + flex-wrap: wrap; + gap: 1.25rem; + margin-bottom: 1.25rem; + padding-bottom: 1.25rem; + border-bottom: 1px solid var(--border); +} +.festival-meta-item { + display: flex; + align-items: center; + gap: 0.4rem; + font-size: 0.875rem; + color: var(--subtle); +} +.festival-meta-item strong { color: var(--white); } + +.festival-desc { color: var(--subtle); margin-bottom: 1.5rem; line-height: 1.7; font-size: 0.92rem; } + +.festival-links { display: flex; flex-wrap: wrap; gap: 0.75rem; } + +/* ===== FOOTER ===== */ +.footer { + margin-top: auto; + background: var(--card); + border-top: 1px solid var(--border); + padding: 3rem 0 2rem; +} + +.footer-content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 1.5rem; +} + +.footer-logo img { + height: 56px; + width: 56px; + border-radius: 50%; + object-fit: cover; +} + +.footer-nav { + display: flex; + flex-wrap: wrap; + gap: 0.2rem; + justify-content: center; +} + +.footer-nav a { + padding: 0.3rem 0.7rem; + color: var(--subtle); + font-family: 'Oswald', sans-serif; + font-size: 0.82rem; + text-transform: uppercase; + letter-spacing: 0.05em; + border-radius: 6px; + transition: color var(--tr), background var(--tr); +} +.footer-nav a:hover { color: var(--white); background: var(--border); } + +.footer-tagline { color: var(--subtle); font-size: 0.875rem; } + +.footer-ig { + display: inline-flex; + align-items: center; + gap: 0.35rem; + color: var(--orange); + font-family: 'Oswald', sans-serif; + font-weight: 600; + letter-spacing: 0.05em; + transition: color var(--tr); +} +.footer-ig:hover { color: var(--gold); } + +/* ===== RESPONSIVE ===== */ +@media (max-width: 768px) { + .nav-hamburger { display: flex; } + + .nav-links { + display: none; + position: absolute; + top: 70px; + left: 0; + right: 0; + background: rgba(20,20,20,0.98); + backdrop-filter: blur(12px); + flex-direction: column; + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--border); + gap: 0.2rem; + } + .nav-links.open { display: flex; } + .nav-links li { width: 100%; } + .nav-links a { display: block; padding: 0.7rem 1rem; } + + .hero-ctas { flex-direction: column; align-items: center; } + + .ig-embeds { grid-template-columns: 1fr; } + + .festival-meta { flex-direction: column; gap: 0.5rem; } + + section { padding: 2.5rem 0; } +} + +@media (max-width: 480px) { + .card-grid { grid-template-columns: 1fr; } + .about-grid { grid-template-columns: 1fr; } +} + +/* ===== UTILITY ===== */ +.hidden { display: none !important; } +.text-center { text-align: center; } +.mt-1 { margin-top: 1rem; } +.mt-2 { margin-top: 1.5rem; } +.mt-3 { margin-top: 2rem; } diff --git a/festivals.html b/festivals.html new file mode 100644 index 0000000..5f70a2f --- /dev/null +++ b/festivals.html @@ -0,0 +1,140 @@ + + + + + + Festivals — SaborFlow Da Nang + + + + + + + + +
+
+

Upcoming Festivals

+

Multi-day Latin dance events right here in Da Nang — workshops, performances, and non-stop social dancing.

+
+ + +
+
+
+

Latin Escape Da Nang

+
May 15 – 17, 2026
+
+
+
+
+
+ 📅 May 15–17, 2026 +
+
+ 📍 Royal Lotus Hotel · My Khe Beach, Da Nang +
+
+ 🎵 Bachata · Kizomba +
+
+
+ Bachata + Kizomba +
+

+ A destination-style festival set against the backdrop of Da Nang’s stunning beach. Three days of workshops, social parties, and performances with international artists. The perfect excuse to combine dancing with a beach getaway! +

+
+ 👥 Facebook + 📸 Instagram + 🎟️ Buy Tickets +
+
+
+ + +
+
+
+

Vietnam Latin Xperience

+
October 2 – 4, 2026
+
+
+
+
+
+ 📅 October 2–4, 2026 +
+
+ 📍 Da Nang Beach · Da Nang +
+
+ 🎵 Salsa · Bachata · Kizomba · Zouk & more +
+
+
+ Salsa + Bachata + Kizomba + Zouk + Urban Kiz + Konpa +
+

+ Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast Asia’s most beloved Latin festivals. Three days of workshops, bootcamps, and social parties with a warm, family-like community vibe. International artists, beautiful beach setting, unforgettable nights. +

+
+ 🌐 Website + 👥 Facebook + 🎟️ Buy Tickets +
+
+
+ +
+

Know of a festival we should add? Or organizing one yourself?

+ 📩 Tell Us About It +
+
+ + + + + + diff --git a/index.html b/index.html index fc4957e..3fa11e3 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,146 @@ - + - Hola Mundo - + SaborFlow Da Nang — Latin Dance Community + + + - -
-
-

Hola Mundo 2

-

-

-
+ - + +
+
+ +

Da Nang's Latin Dance Community

+

where the music never stops

+
+ 📅 Weekly Schedule + 🏫 Studios & Classes + 🎉 Festivals +
+
+
+ + +
+
+

What is SaborFlow?

+
+
+
💃
+

Social Dancing

+

Almost-daily gatherings at bars, clubs, and restaurants in Da Nang and Hoi An. Everyone is welcome — whether you’re a total beginner or a seasoned pro.

+
+
+
🎵
+

Salsa · Bachata · Kizomba

+

We dance to the best Latin rhythms. Salsa, Bachata, Kizomba, and the fast-growing Zouk. Good music, great vibes, amazing people.

+
+
+
🌴
+

Community First

+

SaborFlow is a free, non-profit initiative created to support and grow the Da Nang Latin dance scene. No drama, just dancing.

+
+
+
+
+ + +
+
+

Coming Up This Week

+
+
+ View Full Schedule → +
+
+
+ + +
+
+
+

Follow us on Instagram

+

Catch the latest social dance photos, videos, and event announcements from the community.

+ + 📸 @saborflowdanang + +
+
+
+ + +
+
+

Explore

+
+ +
+
🏫
+
Dance Studios
+

Dedicated schools offering Salsa, Bachata, Kizomba and more in Da Nang.

+
+ + +
+
📚
+
Dance Classes
+

From total beginner to advanced — find the right class for your level.

+
+ + +
+
🎊
+
Festivals
+

Multi-day Latin dance festivals with international artists, workshops, and socials.

+
+ +
+
+
+ + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..63179f1 --- /dev/null +++ b/js/main.js @@ -0,0 +1,108 @@ +// ============================================================ +// SaborFlow Da Nang — main.js +// Update SCHEDULE array monthly when the weekly program changes. +// ============================================================ + +const SCHEDULE = [ + { day: 'Monday', venue: 'Webe Coffee', social: 'BOM', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai' }, + { day: 'Tuesday', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares' }, + { day: 'Tuesday', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen' }, + { day: 'Wednesday', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 19:30 · Bachata 21:00', city: 'Da Nang', organizer: 'Sean Kim' }, + { day: 'Thursday', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes' }, + { day: 'Friday', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova' }, + { day: 'Saturday', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares' }, + { day: 'Saturday', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya' }, + { day: 'Sunday', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya' }, + { day: 'Sunday', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen' }, +]; + +// ---- Navigation ---- +function initNav() { + const hamburger = document.getElementById('hamburger'); + const navLinks = document.getElementById('nav-links'); + if (!hamburger || !navLinks) return; + + hamburger.addEventListener('click', () => { + const isOpen = navLinks.classList.toggle('open'); + hamburger.setAttribute('aria-expanded', String(isOpen)); + }); + + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => navLinks.classList.remove('open')); + }); +} + +// ---- Schedule: full table ---- +function renderScheduleTable() { + const tbody = document.getElementById('schedule-tbody'); + if (!tbody) return; + + tbody.innerHTML = SCHEDULE.map(row => ` + + + ${row.day} + + ${row.venue} + ${row.social} + ${row.music} + ${row.city} + ${row.organizer} + + `).join(''); +} + +// ---- Home: "Coming up this week" teaser (3 events starting from today) ---- +function renderScheduleTeaser() { + const container = document.getElementById('schedule-teaser'); + if (!container) return; + + const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + const today = DAYS[new Date().getDay()]; + const startIdx = DAYS.indexOf(today); + const order = [...DAYS.slice(startIdx), ...DAYS.slice(0, startIdx)]; + + const sorted = [...SCHEDULE].sort( + (a, b) => order.indexOf(a.day) - order.indexOf(b.day) + ); + + container.innerHTML = sorted.slice(0, 3).map(row => ` +
+
${row.day}
+
${row.social} @ ${row.venue}
+
${row.music} · ${row.city}
+
+ `).join(''); +} + +// ---- Filter pills (studios.html / classes.html) ---- +function initFilters() { + const pills = document.querySelectorAll('.filter-pill'); + if (!pills.length) return; + + pills.forEach(pill => { + pill.addEventListener('click', () => { + pills.forEach(p => p.classList.remove('active')); + pill.classList.add('active'); + + const filter = pill.dataset.filter; + document.querySelectorAll('.filterable-card').forEach(card => { + if (filter === 'all') { + card.classList.remove('hidden'); + } else { + const styles = (card.dataset.styles || '') + .split(',') + .map(s => s.trim().toLowerCase()); + card.classList.toggle('hidden', !styles.includes(filter)); + } + }); + }); + }); +} + +// ---- Init ---- +document.addEventListener('DOMContentLoaded', () => { + initNav(); + renderScheduleTable(); + renderScheduleTeaser(); + initFilters(); +}); diff --git a/schedule.html b/schedule.html new file mode 100644 index 0000000..fd18e73 --- /dev/null +++ b/schedule.html @@ -0,0 +1,86 @@ + + + + + + Weekly Schedule — SaborFlow Da Nang + + + + + + + + +
+
+

Weekly Schedule

+

Your guide to social dancing in Da Nang and Hoi An — every single week.

+
+ +
+ 🎵 + The music ratio (e.g. 2 Salsa · 2 Bachata · 2 Kizomba) shows the approximate number of songs played per style in each rotation. Schedules may change — follow @saborflowdanang and the Da Nang SBK group for real-time updates. Pop-up parties for Zouk and Tango are announced there too! +
+ +
+ + + + + + + + + + + + +
DayVenueSocialMusicCityOrganizer
+
+ +
+ Schedule updated monthly. Last update: April 2026 +
+
+ + + + + + diff --git a/studios.html b/studios.html new file mode 100644 index 0000000..cf6a9be --- /dev/null +++ b/studios.html @@ -0,0 +1,152 @@ + + + + + + Dance Studios — SaborFlow Da Nang + + + + + + + + +
+
+

Dance Studios

+

Dedicated schools and venues where you can take Latin dance lessons in Da Nang.

+
+ +
+ + + + + +
+ +
+ + +
+
+
+
Frog Goose Bachata School
+
+ Bachata +
+
+ 📍 292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang +
+
+ 🕘 Monday workshops 8:30 PM · Social from 9:30 PM +
+
+ 👩‍🏫 Luu Nhat Phuong, Phong & Shai +
+
+ 👥 Facebook +
+
+
+ + +
+
+
+
Salsa Da Nang
+
+ Salsa On1 + Salsa On2 +
+
+ 📍 Da Nang (various venues — check website for current location) +
+
+ 👨‍🏫 Lucho Giraldes — 20+ years experience, professional performer +
+
+ 📚 Beginner · Intermediate · Advanced +
+
+ 🌐 Website + 📸 Instagram +
+
+
+ + +
+
+
+
LearnToDance Da Nang
+
+ Salsa + Bachata + Kizomba + Zouk +
+
+ 📍 Da Nang +
+
+ 📞 +84 85 508 5903 +
+
+ ✉️ LearnToDanceDANANG@gmail.com +
+
+ ✉️ Email +
+
+
+ +
+ +
+

Know a studio we’re missing? Let us know!

+ 📩 Contact Us +
+
+ + + + + +