Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Javi:e4f8d9f8f05320bac4eaffbf03716279866595b7
Branches Tags
Javi:master
...
compare: Javi:c96e098f387d17dd376469c746df72a6243cadbf
Branches Tags
Javi:master

5 Commits
e4f8d9f8f0 ... c96e098f38

Author SHA1 Message Date
Javier Blanco
c96e098f38 Redesign 2026-05-01 10:06:52 +07:00
Javier Blanco
fc3327d1ce Constrain marquee to 1300px with fade masks on sides 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-05-01 10:03:37 +07:00
Javier Blanco
5fb9372c89 Fix marquee loop gap on ultra-wide screens 
4 repetitions (was 2) + translateX(-25%) so one cycle always shifts exactly
one set of items. Covers monitors up to ~4800px without a visible seam.
Perceived scroll speed unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-05-01 10:01:09 +07:00
Javier Blanco
461bea46cc Constrain layout for ultra-wide screens 
Add --sf-max-w (1280px) and --sf-pad (40px) tokens. Full-bleed sections
(topbar, footer) use max() padding to keep backgrounds edge-to-edge while
centering content. Content sections (hero, pillars, coming, cta, page)
use max-width + margin-inline: auto. Mobile/tablet breakpoints unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-05-01 09:49:10 +07:00
Javier Blanco
3d353ed00f Redesign: Tropical Heat (Direction B) visual overhaul 
Full aesthetic rewrite across all pages — new design system based on
the Claude Design handoff (Direction B). New color tokens, Bricolage
Grotesque + Caveat Brush typography, blob backgrounds, sticky blur nav,
responsive grid layouts, JS-driven schedule renderer, filter pills,
marquee, and connect page with ig grid and collab banner.
All internal Home links use href=/.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-05-01 09:42:34 +07:00
8 changed files with 2423 additions and 1536 deletions
Expand all files Collapse all files

338
classes.html
View File

@@ -1,43 +1,75 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dance Classes — Sabor Flow Da Nang</title> <title>Dance Classes — Sabor Flow Da Nang</title>
<meta name="description" content="Latin dance classes in Da Nang. Find Salsa, Bachata, Kizomba, and Zouk classes for all levels."> <meta name="description"
content="Latin dance classes in Da Nang. Find Salsa, Bachata, Kizomba, and Zouk classes for all levels.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg"> <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<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=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<nav class="nav"> <div class="sfB-bg" aria-hidden="true"></div>
<div class="nav-container">
<a href="index.html" class="nav-brand"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG"> <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span> <a href="/">Home</a>
</a> <a href="schedule.html">Schedule</a>
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false"> <a href="connect.html">Connect</a>
<span></span><span></span><span></span> <a href="studios.html">Studios</a>
</button> <a href="classes.html" class="active">Classes</a>
<ul class="nav-links" id="nav-links"> <a href="festivals.html">Festivals</a>
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="connect.html">Connect</a></li>
<li><a href="studios.html">Studios</a></li>
<li><a href="classes.html" class="active">Classes</a></li>
<li><a href="festivals.html">Festivals</a></li>
</ul>
</div>
</nav> </nav>
<div class="container"> <header class="sfB-topbar">
<div class="page-header"> <a href="/" class="logo">
<p class="section-label">Da Nang &middot; Hoi An</p> <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<h1>Dance Classes</h1> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
<p class="subtitle">Whether you&rsquo;re just starting out or looking to sharpen your moves &mdash; there&rsquo;s a class for you.</p> </a>
<nav class="sfB-nav">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html" class="active">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
@saborflowdanang
</a>
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main class="sfB-page">
<div class="sfB-page-head">
<h1>Dance <em>Classes</em></h1>
<div class="info">
Whether you're just starting out or looking to sharpen your moves &mdash; there's a class for you in Da Nang and
Hoi An.
</div>
</div> </div>
<div class="filter-bar"> <div class="sfB-toolbar">
<div class="sfB-pills">
<button class="filter-pill active" data-filter="all">All</button> <button class="filter-pill active" data-filter="all">All</button>
<button class="filter-pill" data-filter="salsa">Salsa</button> <button class="filter-pill" data-filter="salsa">Salsa</button>
<button class="filter-pill" data-filter="bachata">Bachata</button> <button class="filter-pill" data-filter="bachata">Bachata</button>
@@ -46,209 +78,169 @@
<button class="filter-pill" data-filter="beginner">Beginner</button> <button class="filter-pill" data-filter="beginner">Beginner</button>
<button class="filter-pill" data-filter="advanced">Advanced</button> <button class="filter-pill" data-filter="advanced">Advanced</button>
</div> </div>
</div>
<div class="card-grid"> <div class="sfB-cards two">
<!-- Lucho Giraldes — Salsa --> <!-- Lucho Giraldes — Salsa -->
<div class="card filterable-card" data-styles="salsa,beginner,intermediate,advanced"> <div class="sfB-card-x filterable-card" data-styles="salsa,beginner,intermediate,advanced">
<div class="card-body"> <div class="stripe salsa"></div>
<div class="card-title">Lucho Giraldes — Salsa</div> <h3>Lucho Giraldes — Salsa</h3>
<div class="tags"> <div class="ts">
<span class="tag tag-salsa">Salsa On1</span> <span class="sfB-chip salsa">Salsa On1</span>
<span class="tag tag-salsa">Salsa On2</span> <span class="sfB-chip salsa">Salsa On2</span>
<span class="tag tag-beginner">Beginner</span>
<span class="tag tag-intermediate">Intermediate</span>
<span class="tag tag-advanced">Advanced</span>
</div> </div>
<div class="card-info"> <div class="info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> <div class="row"><span class="ic">👤</span><span>Lucho Giraldes &mdash; 20+ years experience</span></div>
<span>Lucho Giraldes &mdash; 20+ years experience</span> <div class="row"><span class="ic">📍</span><span>Various venues in Da Nang (see website)</span></div>
<div class="row"><span class="ic">📅</span><span>Check website for current schedule</span></div>
<div class="row"><span class="ic">🎓</span><span>Beginner · Intermediate · Advanced</span></div>
</div> </div>
<div class="card-info"> <div class="links">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> <a href="https://salsadanang.com" target="_blank" rel="noopener">
<span>Various venues in Da Nang (see website for details)</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
</div> stroke-linecap="round" stroke-linejoin="round">
<div class="card-info"> <circle cx="12" cy="12" r="10" />
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> <line x1="2" y1="12" x2="22" y2="12" />
<span>Check website for current schedule</span> <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</div> </svg>
<div class="card-links">
<a href="https://salsadanang.com" target="_blank" rel="noopener" class="card-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
salsadanang.com salsadanang.com
</a> </a>
<a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link"> <a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
@salsadanang @salsadanang
</a> </a>
</div> </div>
</div> </div>
</div>
<!-- Daisy Nguyen --> <!-- Daisy Nguyen -->
<div class="card filterable-card" data-styles="bachata,kizomba,intermediate"> <div class="sfB-card-x filterable-card" data-styles="bachata,kizomba,intermediate">
<div class="card-body"> <div class="stripe bachata"></div>
<div class="card-title">Daisy Nguyen</div> <h3>Daisy Nguyen</h3>
<div class="tags"> <div class="ts">
<span class="tag tag-bachata">Bachata</span> <span class="sfB-chip bachata">Bachata</span>
<span class="tag tag-kizomba">Kizomba</span> <span class="sfB-chip kizomba">Kizomba</span>
<span class="tag tag-intermediate">Intermediate</span>
</div> </div>
<div class="card-info"> <div class="info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> <div class="row"><span class="ic">👤</span><span>Daisy Nguyen &mdash; local instructor &amp; social
<span>Daisy Nguyen &mdash; local instructor &amp; social organizer</span> organizer</span></div>
<div class="row"><span class="ic">📍</span><span>Da Nang (venues change &mdash; follow for updates)</span>
</div> </div>
<div class="card-info"> <div class="row"><span class="ic">📅</span><span>Tuesday at Caliz Bar · Sunday at Corner Bar</span></div>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>Da Nang (venues change &mdash; follow for updates)</span>
</div> </div>
<div class="card-info"> <div class="links">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">
<span>Tuesday at Caliz Bar &middot; Sunday at Corner Bar</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
</div> stroke-linecap="round" stroke-linejoin="round">
<div class="card-links"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="card-link"> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
Check Instagram Check Instagram
</a> </a>
</div> </div>
</div> </div>
</div>
<!-- Frog Goose — Bachata Workshop --> <!-- Frog Goose — Bachata Workshop -->
<div class="card filterable-card" data-styles="bachata,beginner,intermediate"> <div class="sfB-card-x filterable-card" data-styles="bachata,beginner,intermediate">
<div class="card-body"> <div class="stripe bachata"></div>
<div class="card-title">Frog Goose — Bachata Workshop</div> <h3>Frog Goose — Bachata Workshop</h3>
<div class="tags"> <div class="ts">
<span class="tag tag-bachata">Bachata</span> <span class="sfB-chip bachata">Bachata</span>
<span class="tag tag-beginner">Beginner</span>
<span class="tag tag-intermediate">Intermediate</span>
</div> </div>
<div class="card-info"> <div class="info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> <div class="row"><span class="ic">👥</span><span>Luu Nhat Phuong, Phong &amp; Shai</span></div>
<span>Luu Nhat Phuong, Phong &amp; Shai</span> <div class="row"><span class="ic">📍</span><span>292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang</span></div>
<div class="row"><span class="ic">📅</span><span>Every Monday &mdash; Workshop 8:30 PM · Social 9:30 PM</span>
</div> </div>
<div class="card-info"> <div class="row"><span class="ic">🎓</span><span>Beginner · Intermediate</span></div>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang</span>
</div> </div>
<div class="card-info"> <div class="links">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> <a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener">
<span>Every Monday &mdash; Workshop 8:30 PM &middot; Social from 9:30 PM</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
</div> stroke-linecap="round" stroke-linejoin="round">
<div class="card-links"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link"> </svg>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Facebook Facebook
</a> </a>
</div> </div>
</div> </div>
</div>
<!-- Sean Kim — Kizomba & Bachata --> <!-- Sean Kim — Kizomba & Bachata -->
<div class="card filterable-card" data-styles="kizomba,bachata,intermediate"> <div class="sfB-card-x filterable-card" data-styles="kizomba,bachata,intermediate">
<div class="card-body"> <div class="stripe kizomba"></div>
<div class="card-title">Sean Kim — Kizomba &amp; Bachata</div> <h3>Sean Kim — Kizomba &amp; Bachata</h3>
<div class="tags"> <div class="ts">
<span class="tag tag-kizomba">Kizomba</span> <span class="sfB-chip kizomba">Kizomba</span>
<span class="tag tag-bachata">Bachata</span> <span class="sfB-chip bachata">Bachata</span>
<span class="tag tag-intermediate">Intermediate</span>
</div> </div>
<div class="card-info"> <div class="info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> <div class="row"><span class="ic">👤</span><span>Sean Kim &mdash; organizer of the Wednesday Bachata Kiz
<span>Sean Kim &mdash; organizer of the Wednesday Bachata Kiz Night</span> Night</span></div>
<div class="row"><span class="ic">📍</span><span>Ket Fai Bar, Da Nang</span></div>
<div class="row"><span class="ic">📅</span><span>Wednesday &mdash; Kizomba 7:30 PM · Bachata 9 PM</span></div>
</div> </div>
<div class="card-info"> <div class="links">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> <a href="connect.html">
<span>Ket Fai Bar, Da Nang</span> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
</div> stroke-linecap="round" stroke-linejoin="round">
<div class="card-info"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> <polyline points="22,6 12,13 2,6" />
<span>Wednesday &mdash; Kizomba from 19:30 &middot; Bachata from 21:00</span> </svg>
</div> Contact via Sabor Flow
<div class="card-links">
<a href="connect.html" class="card-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
Contact via Sabor Flow Da Nang
</a> </a>
</div> </div>
</div> </div>
</div>
<!-- 50 Decibels --> <!-- 50 Decibels -->
<div class="card filterable-card" data-styles="kizomba,zouk,salsa,bachata,beginner"> <div class="sfB-card-x filterable-card" data-styles="kizomba,zouk,salsa,bachata,beginner">
<div class="card-body"> <div class="stripe multi"></div>
<div class="card-title">50 Decibels</div> <h3>50 Decibels</h3>
<div class="tags"> <div class="ts">
<span class="tag tag-kizomba">Kizomba</span> <span class="sfB-chip kizomba">Kizomba</span>
<span class="tag tag-zouk">Zouk</span> <span class="sfB-chip zouk">Zouk</span>
<span class="tag tag-salsa">Salsa</span> <span class="sfB-chip salsa">Salsa</span>
<span class="tag tag-bachata">Bachata</span> <span class="sfB-chip bachata">Bachata</span>
<span class="tag tag-beginner">Beginner-friendly</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>36 Đ. Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Monday 9 PM &mdash; Kizomba &amp; Zouk night</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>Friday 9 PM &mdash; Latin Vibes (Salsa, Bachata, Kizomba)</span>
</div>
<div class="card-info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
<span>~$3 USD cover</span>
</div> </div>
<div class="info">
<div class="row"><span class="ic">📍</span><span>36 Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang</span></div>
<div class="row"><span class="ic">📅</span><span>Monday 9 PM &mdash; Kizomba &amp; Zouk night</span></div>
<div class="row"><span class="ic">📅</span><span>Friday 9 PM &mdash; Latin Vibes (Salsa, Bachata,
Kizomba)</span></div>
<div class="row"><span class="ic">💵</span><span>~$3 USD cover · Beginner-friendly</span></div>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-3" style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center"> <div class="sfB-suggest">
<p style="color:var(--muted);margin-bottom:1rem">Teaching in Da Nang and not listed here? Get in touch.</p> <p>Teaching in Da Nang and not listed here? Get in touch.</p>
<a href="connect.html" class="btn btn-ghost"> <a href="connect.html" class="sfB-btn ghost">Contact Us</a>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<span>Contact Us</span>
</a>
</div>
</div> </div>
</main>
<footer class="footer" style="margin-top:4rem"> <footer class="sfB-foot">
<div class="container"> <div><strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span></div>
<div class="footer-inner"> <nav class="foot-links">
<div> <a href="/">Home</a>
<a href="index.html" class="footer-brand">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
<span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
</a>
<p class="footer-tagline">Da Nang's Latin dance community</p>
</div>
<nav class="footer-nav">
<a href="index.html">Home</a>
<a href="schedule.html">Schedule</a> <a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a> <a href="connect.html">Connect</a>
<a href="studios.html">Studios</a> <a href="studios.html">Studios</a>
<a href="classes.html">Classes</a> <a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a> <a href="festivals.html">Festivals</a>
</nav> </nav>
<div class="footer-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
@saborflowdanang
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Da Nang SBK Group
</a>
</div>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
</div> </div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

262
connect.html
View File

@@ -1,140 +1,190 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connect — Sabor Flow Da Nang</title> <title>Connect — Sabor Flow Da Nang</title>
<meta name="description" content="Follow Sabor Flow Da Nang on Instagram and get in touch with the Latin dance community."> <meta name="description" content="Follow Sabor Flow Da Nang on Instagram and get in touch with the Latin dance community.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg"> <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<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=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<nav class="nav"> <div class="sfB-bg" aria-hidden="true"></div>
<div class="nav-container">
<a href="index.html" class="nav-brand"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG"> <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span> <a href="/">Home</a>
</a> <a href="schedule.html">Schedule</a>
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false"> <a href="connect.html" class="active">Connect</a>
<span></span><span></span><span></span> <a href="studios.html">Studios</a>
</button> <a href="classes.html">Classes</a>
<ul class="nav-links" id="nav-links"> <a href="festivals.html">Festivals</a>
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="connect.html" class="active">Connect</a></li>
<li><a href="studios.html">Studios</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="festivals.html">Festivals</a></li>
</ul>
</div>
</nav> </nav>
<div class="container"> <header class="sfB-topbar">
<div class="page-header"> <a href="/" class="logo">
<p class="section-label">Stay in the loop</p> <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<h1>Connect</h1> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
<p class="subtitle">Follow for the latest socials, photos, and community news.</p>
</div>
<!-- Instagram profile card -->
<div class="ig-profile-card">
<img src="assets/logo.jpg" alt="Sabor Flow Da Nang" class="ig-avatar">
<div class="ig-handle">@saborflowdanang</div>
<p class="ig-desc">Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the week.</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
<span>Open on Instagram</span>
</a> </a>
</div> <nav class="sfB-nav">
<a href="/">Home</a>
<!-- Latest posts --> <a href="schedule.html">Schedule</a>
<p class="section-label" style="margin-bottom:1.5rem">Latest posts</p> <a href="connect.html" class="active">Connect</a>
<a href="studios.html">Studios</a>
<!-- <a href="classes.html">Classes</a>
HOW TO ADD REAL INSTAGRAM EMBEDS: <a href="festivals.html">Festivals</a>
1. Open instagram.com and go to any post from @saborflowdanang </nav>
2. Click the three dots on the post → "Embed" <div class="topbar-right">
3. Copy the embed code and paste it here, replacing one of the placeholders below. <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
The <script> tag at the bottom of the page loads them automatically. <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
--> stroke-linecap="round" stroke-linejoin="round">
<div class="ig-embeds"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<div class="ig-placeholder"> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> </svg>
<p>Latest posts from the community</p> @saborflowdanang
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
</div>
<div class="ig-placeholder">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
<p>Videos, reels, and social dance moments</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
</div>
<div class="ig-placeholder">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<p>Workshops, festivals, and special events</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
</div>
</div>
<!-- Contact -->
<div class="contact-box">
<p class="section-label">Get in touch</p>
<h2 style="margin-bottom:1rem">Want to collaborate?</h2>
<p style="color:var(--muted);max-width:540px;margin:0 auto 2rem">
Want to host a social? Suggest a venue? Collaborate on an event? Or just say hi?
We&rsquo;d love to hear from you &mdash; we don&rsquo;t bite, we just dance.
</p>
<div class="contact-ctas">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
<span>DM on Instagram</span>
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="btn btn-ghost">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
<span>Join the Facebook Group</span>
</a> </a>
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div> </div>
</header>
<main class="sfB-page">
<div class="sfB-page-head">
<h1>Stay <em>Connected</em></h1>
<div class="info">
Sabor Flow lives on Instagram and inside a few group chats. There's no app, no email list, no spam &mdash; just
messages from real dancers about real parties. Pick whichever channel fits.
</div> </div>
</div> </div>
<footer class="footer" style="margin-top:4rem"> <!-- Instagram profile hero -->
<div class="container"> <div class="sfB-connect-hero">
<div class="footer-inner"> <div class="ch-left">
<div class="ava"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<div> <div>
<a href="index.html" class="footer-brand"> <div class="h">@saborflowdanang</div>
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG"> <h2>The Instagram is the source of truth.</h2>
<span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span> <p>Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the
</a> week.</p>
<p class="footer-tagline">Da Nang's Latin dance community</p>
</div> </div>
<nav class="footer-nav"> </div>
<a href="index.html">Home</a> <div class="ch-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn primary">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
Follow on Instagram
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
Join Facebook Group
</a>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
</svg>
DM Us
</a>
</div>
</div>
<!-- Instagram grid -->
<div style="margin-top: 48px;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
<h2
style="font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -1px;">
Latest from the <em
style="font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; color: var(--sf-coral);">floor</em>
</h2>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener"
style="font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--sf-gold); letter-spacing: 1px; text-decoration: none;">VIEW
ALL ↗</a>
</div>
<div class="sfB-igrid">
<div class="ig">
<span class="heart">♡ 142</span>
<span class="lbl">// caliz · sensual night</span>
</div>
<div class="ig">
<span class="heart">♡ 89</span>
<span class="lbl">// shai · workshop</span>
</div>
<div class="ig">
<span class="heart">♡ 211</span>
<span class="lbl">// hoi an · la riva</span>
</div>
<div class="ig">
<span class="heart">♡ 67</span>
<span class="lbl">// malibu · salsa</span>
</div>
<div class="ig">
<span class="heart">♡ 178</span>
<span class="lbl">// bachata party</span>
</div>
<div class="ig">
<span class="heart">♡ 93</span>
<span class="lbl">// ket fai · kizomba</span>
</div>
<div class="ig">
<span class="heart">♡ 134</span>
<span class="lbl">// last call · sunday</span>
</div>
<div class="ig">
<span class="heart">♡ 256</span>
<span class="lbl">// vlx · da nang</span>
</div>
</div>
</div>
<!-- Collaborate banner -->
<div class="sfB-collab">
<div class="l">/ COLLABORATE</div>
<h2>Run a venue? <em>Teach?</em><br>DJ Latin?</h2>
<p>We're always looking to expand the floor. If you're an instructor, DJ, or you run a bar that wants to host a
Latin night &mdash; let's talk. Sabor Flow is non-profit and connects people, never charges.</p>
<div class="acts">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn primary">Get
in touch ↗</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener"
class="sfB-btn ghost">Facebook Group ↗</a>
</div>
</div>
</main>
<footer class="sfB-foot">
<div><strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span></div>
<nav class="foot-links">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a> <a href="connect.html">Connect</a>
<a href="studios.html">Studios</a> <a href="studios.html">Studios</a>
<a href="classes.html">Classes</a> <a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a> <a href="festivals.html">Festivals</a>
</nav> </nav>
<div class="footer-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
@saborflowdanang
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Da Nang SBK Group
</a>
</div>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
</div> </div>
</footer> </footer>
<script async src="//www.instagram.com/embed.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

1945
css/style.css
View File

File diff suppressed because it is too large Load Diff

301
festivals.html
View File

@@ -1,83 +1,135 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Festivals — Sabor Flow Da Nang</title> <title>Festivals — Sabor Flow Da Nang</title>
<meta name="description" content="Latin dance festivals in Da Nang, Vietnam. Multi-day events with international artists, workshops, and social dancing."> <meta name="description"
content="Latin dance festivals in Da Nang, Vietnam. Multi-day events with international artists, workshops, and social dancing.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg"> <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<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=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<nav class="nav"> <div class="sfB-bg" aria-hidden="true"></div>
<div class="nav-container">
<a href="index.html" class="nav-brand"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG"> <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span> <a href="/">Home</a>
</a> <a href="schedule.html">Schedule</a>
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false"> <a href="connect.html">Connect</a>
<span></span><span></span><span></span> <a href="studios.html">Studios</a>
</button> <a href="classes.html">Classes</a>
<ul class="nav-links" id="nav-links"> <a href="festivals.html" class="active">Festivals</a>
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="connect.html">Connect</a></li>
<li><a href="studios.html">Studios</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="festivals.html" class="active">Festivals</a></li>
</ul>
</div>
</nav> </nav>
<div class="container"> <header class="sfB-topbar">
<div class="page-header"> <a href="/" class="logo">
<p class="section-label">Da Nang 2026</p> <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<h1>Festivals</h1> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
<p class="subtitle">Multi-day Latin dance events right here in Da Nang &mdash; workshops, performances, and non-stop social dancing.</p> </a>
<nav class="sfB-nav">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html" class="active">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
@saborflowdanang
</a>
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main class="sfB-page">
<div class="sfB-page-head">
<h1>Da Nang <em>Festivals</em></h1>
<div class="info">
Multi-day Latin dance events right here in Da Nang &mdash; workshops, performances, and non-stop social dancing
with international artists.
</div>
</div> </div>
<!-- Latin Escape Da Nang 2026 --> <!-- Latin Escape Da Nang 2026 -->
<div class="festival-card festival-card-le"> <div class="sfB-fest">
<div class="festival-poster"> <div class="poster coral">
<div class="festival-poster-content"> <span class="pill">Festival · 2026</span>
<h2>Latin Escape Da Nang</h2> <div>
<div class="festival-dates">May 15 &ndash; 17, 2026</div> <div class="name">Latin <em>Escape</em></div>
<div class="dates">May 15 – 17, 2026</div>
</div>
<div class="big">LE</div>
</div>
<div class="body">
<div class="meta">
<div class="item">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
<line x1="16" y1="2" x2="16" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" />
</svg>
<span><b>May 15–17, 2026</b></span>
</div>
<div class="item">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
<span>Royal Lotus Hotel · <b>My Khe Beach, Da Nang</b></span>
</div> </div>
</div> </div>
<div class="festival-body"> <div class="styles">
<div class="festival-meta"> <span class="sfB-chip bachata">Bachata</span>
<div class="festival-meta-item"> <span class="sfB-chip kizomba">Kizomba</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<strong>May 15&ndash;17, 2026</strong>
</div> </div>
<div class="festival-meta-item"> <p>A destination-style festival set against the backdrop of Da Nang's stunning beach. Three days of workshops,
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> social parties, and performances with international artists. The perfect excuse to combine dancing with a
Royal Lotus Hotel &middot; <strong>My Khe Beach, Da Nang</strong> beach getaway.</p>
</div> <div class="acts">
<div class="festival-meta-item"> <a href="https://www.facebook.com/latin.escape.danang/" target="_blank" rel="noopener">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
<strong>Bachata &middot; Kizomba</strong> stroke-linecap="round" stroke-linejoin="round">
</div> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</div> </svg>
<div class="tags" style="margin-bottom:1rem">
<span class="tag tag-bachata">Bachata</span>
<span class="tag tag-kizomba">Kizomba</span>
</div>
<p class="festival-desc">
A destination-style festival set against the backdrop of Da Nang&rsquo;s stunning beach. Three days of workshops, social parties, and performances with international artists. The perfect excuse to combine dancing with a beach getaway.
</p>
<div class="festival-links">
<a href="https://www.facebook.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Facebook Facebook
</a> </a>
<a href="https://www.instagram.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost"> <a href="https://www.instagram.com/latin.escape.danang/" target="_blank" rel="noopener">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
Instagram Instagram
</a> </a>
<a href="https://www.tickettailor.com/events/latinescapedanang" target="_blank" rel="noopener" class="btn btn-primary"> <a href="https://www.tickettailor.com/events/latinescapedanang" target="_blank" rel="noopener"
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg> class="primary">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z" />
</svg>
Buy Tickets Buy Tickets
</a> </a>
</div> </div>
@@ -85,98 +137,97 @@
</div> </div>
<!-- Vietnam Latin Xperience 2026 --> <!-- Vietnam Latin Xperience 2026 -->
<div class="festival-card festival-card-vlx"> <div class="sfB-fest">
<div class="festival-poster"> <div class="poster teal">
<div class="festival-poster-content"> <span class="pill">Festival · 2026</span>
<h2>Vietnam Latin Xperience</h2> <div>
<div class="festival-dates">October 2 &ndash; 4, 2026</div> <div class="name">Vietnam Latin <em>Xperience</em></div>
<div class="dates">October 2 – 4, 2026</div>
</div>
<div class="big">VLX</div>
</div>
<div class="body">
<div class="meta">
<div class="item">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
<line x1="16" y1="2" x2="16" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" />
</svg>
<span><b>October 2–4, 2026</b></span>
</div>
<div class="item">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
<circle cx="12" cy="10" r="3" />
</svg>
<span>Da Nang Beach · <b>Da Nang</b></span>
</div> </div>
</div> </div>
<div class="festival-body"> <div class="styles">
<div class="festival-meta"> <span class="sfB-chip salsa">Salsa</span>
<div class="festival-meta-item"> <span class="sfB-chip bachata">Bachata</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> <span class="sfB-chip kizomba">Kizomba</span>
<strong>October 2&ndash;4, 2026</strong> <span class="sfB-chip zouk">Zouk</span>
</div> </div>
<div class="festival-meta-item"> <p>Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> Asia's most beloved Latin festivals. Three days of workshops, bootcamps, and social parties with a warm,
Da Nang Beach &middot; <strong>Da Nang</strong> family-like community vibe.</p>
</div> <div class="acts">
<div class="festival-meta-item"> <a href="https://vietnamlatinxperience.com" target="_blank" rel="noopener">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
<strong>Salsa &middot; Bachata &middot; Kizomba &middot; Zouk &amp; more</strong> stroke-linecap="round" stroke-linejoin="round">
</div> <circle cx="12" cy="12" r="10" />
</div> <line x1="2" y1="12" x2="22" y2="12" />
<div class="tags" style="margin-bottom:1rem"> <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
<span class="tag tag-salsa">Salsa</span> </svg>
<span class="tag tag-bachata">Bachata</span>
<span class="tag tag-kizomba">Kizomba</span>
<span class="tag tag-zouk">Zouk</span>
<span class="tag tag-tango">Urban Kiz</span>
<span class="tag tag-tango">Konpa</span>
</div>
<p class="festival-desc">
Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast Asia&rsquo;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.
</p>
<div class="festival-links">
<a href="https://vietnamlatinxperience.com" target="_blank" rel="noopener" class="btn btn-ghost">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
Website Website
</a> </a>
<a href="https://www.facebook.com/VietnamLatinXperience/" target="_blank" rel="noopener" class="btn btn-ghost"> <a href="https://www.facebook.com/VietnamLatinXperience/" target="_blank" rel="noopener">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
Facebook Facebook
</a> </a>
<a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="btn btn-primary"> <a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="primary">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z" />
</svg>
Buy Tickets Buy Tickets
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center"> <div class="sfB-suggest">
<p style="color:var(--muted);margin-bottom:1rem">Know of a festival we should add? Or organizing one yourself?</p> <p>Know of a festival we should add? Or organizing one yourself?</p>
<a href="connect.html" class="btn btn-ghost"> <a href="connect.html" class="sfB-btn ghost">Tell Us About It</a>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<span>Tell Us About It</span>
</a>
</div>
</div> </div>
</main>
<footer class="footer" style="margin-top:4rem"> <footer class="sfB-foot">
<div class="container"> <div><strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span></div>
<div class="footer-inner"> <nav class="foot-links">
<div> <a href="/">Home</a>
<a href="index.html" class="footer-brand">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
<span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
</a>
<p class="footer-tagline">Da Nang's Latin dance community</p>
</div>
<nav class="footer-nav">
<a href="index.html">Home</a>
<a href="schedule.html">Schedule</a> <a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a> <a href="connect.html">Connect</a>
<a href="studios.html">Studios</a> <a href="studios.html">Studios</a>
<a href="classes.html">Classes</a> <a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a> <a href="festivals.html">Festivals</a>
</nav> </nav>
<div class="footer-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
@saborflowdanang
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Da Nang SBK Group
</a>
</div>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
</div> </div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

393
index.html
View File

@@ -1,175 +1,274 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sabor Flow Da Nang — Latin Dance Community</title> <title>Sabor Flow Da Nang — Dance community</title>
<meta name="description" content="Da Nang's Latin dance community. Weekly socials, studios, classes, and festivals for Salsa, Bachata, Kizomba, and Zouk."> <meta name="description"
content="Da Nang's Latin dance community. Weekly socials, studios, classes, and festivals for Salsa, Bachata, Kizomba, and Zouk.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg"> <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<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=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<nav class="nav"> <!-- Background blobs -->
<div class="nav-container"> <div class="sfB-bg" aria-hidden="true"></div>
<a href="index.html" class="nav-brand">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
<span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
</a>
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" id="nav-links">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="connect.html">Connect</a></li>
<li><a href="studios.html">Studios</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="festivals.html">Festivals</a></li>
</ul>
</div>
</nav>
<!-- HERO --> <!-- Mobile nav overlay -->
<section class="hero"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
<div class="hero-content"> <button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
<p class="hero-eyebrow">Da Nang &middot; Vietnam</p> <a href="/" class="active">Home</a>
<img src="assets/logo.jpg" alt="Sabor Flow Da Nang" class="hero-logo">
<h1 class="hero-title">Sabor Flow<span class="hero-title-city">Da Nang</span></h1>
<div class="hero-rule"></div>
<p class="hero-subtitle">Latin Dance Community</p>
<div class="hero-ctas">
<a href="schedule.html" class="btn btn-primary">
<span>Weekly Schedule</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
<div class="hero-divider"></div>
<a href="studios.html" class="cta-link">
Studios
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
<div class="hero-divider"></div>
<a href="festivals.html" class="cta-link">
Festivals
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
</section>
<!-- ABOUT -->
<section>
<div class="container">
<p class="section-label">What We Are</p>
<h2 style="margin-bottom:2.5rem">Community. Music. Dance.</h2>
<div class="grid-tight about-grid">
<div class="about-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<h3>Social Dancing</h3>
<p>Almost-daily gatherings at bars, clubs, and restaurants in Da Nang and Hoi An. Everyone is welcome — beginner or seasoned pro, no judgment.</p>
</div>
<div class="about-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
<h3>Salsa &middot; Bachata &middot; Kizomba</h3>
<p>The best Latin rhythms all week long. Salsa, Bachata, Kizomba, and the fast-growing Zouk. Great music, warm people, genuine connection.</p>
</div>
<div class="about-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
<h3>Community First</h3>
<p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da Nang's Latin dance scene.</p>
</div>
</div>
</div>
</section>
<!-- COMING UP -->
<section>
<div class="container">
<p class="section-label">This Week</p>
<h2 style="margin-bottom:2.5rem">Coming Up</h2>
<div class="grid-tight teaser-grid" id="schedule-teaser"></div>
<div class="mt-3">
<a href="schedule.html" class="cta-link">
View full schedule
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
</section>
<!-- INSTAGRAM -->
<section>
<div class="container">
<div class="ig-banner">
<p class="section-label" style="justify-content:center">Stay Connected</p>
<h2 style="margin-bottom:0.65rem">Follow the Community</h2>
<p>Catch the latest social dance photos, videos, and event announcements.</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
<span>@saborflowdanang</span>
</a>
</div>
</div>
</section>
<!-- EXPLORE -->
<section>
<div class="container">
<p class="section-label">Explore</p>
<h2 style="margin-bottom:2.5rem">Find Your Scene</h2>
<div class="grid-tight explore-grid">
<a href="studios.html" class="explore-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M8 10h.01M16 10h.01"/></svg>
<div class="card-title">Dance Studios</div>
<p class="card-text">Dedicated schools offering Salsa, Bachata, Kizomba and more in Da Nang.</p>
</a>
<a href="classes.html" class="explore-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
<div class="card-title">Dance Classes</div>
<p class="card-text">From total beginner to advanced — find the right class for your level.</p>
</a>
<a href="festivals.html" class="explore-card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<div class="card-title">Festivals</div>
<p class="card-text">Multi-day events with international artists, workshops, and socials.</p>
</a>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-inner">
<div>
<a href="index.html" class="footer-brand">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
<span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
</a>
<p class="footer-tagline">Da Nang's Latin dance community</p>
</div>
<nav class="footer-nav">
<a href="index.html">Home</a>
<a href="schedule.html">Schedule</a> <a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a> <a href="connect.html">Connect</a>
<a href="studios.html">Studios</a> <a href="studios.html">Studios</a>
<a href="classes.html">Classes</a> <a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a> <a href="festivals.html">Festivals</a>
</nav> </nav>
<div class="footer-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link"> <!-- Topbar -->
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <header class="sfB-topbar">
<a href="/" class="logo">
<div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<div class="name">
Sabor Flow
<span class="city">Da Nang</span>
</div>
</a>
<nav class="sfB-nav" aria-label="Main navigation">
<a href="/" class="active">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
@saborflowdanang @saborflowdanang
</a> </a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link"> <button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg> <span></span><span></span><span></span>
Da Nang SBK Group </button>
</div>
</header>
<!-- Hero -->
<section class="sfB-hero">
<div class="left">
<div class="kicker">
<span class="dot"></span>
Dance Community · Da Nang · Hoi An
</div>
<h1>
<em class="glow">Sabor Flow</em>
<span class="vn"><span>DA NANG</span></span>
</h1>
<p class="lead">
Latin social dance almost every night of the week. Salsa, Bachata, Kizomba, Zouk — at bars and restaurants
across Da Nang and Hoi An. Everyone welcome, no partner needed.
</p>
<div class="ctas">
<a href="schedule.html" class="sfB-btn primary">
Weekly Schedule
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" />
</svg>
</a>
<a href="festivals.html" class="sfB-btn ghost">Upcoming Festivals</a>
</div>
<div class="meta-row">
<div class="item">
<div class="v">10+</div>
<div class="l">Socials/week</div>
</div>
<div class="item">
<div class="v">4</div>
<div class="l">Dance styles</div>
</div>
<div class="item">
<div class="v">2</div>
<div class="l">Cities</div>
</div>
<div class="item">
<div class="v">∞</div>
<div class="l">Good vibes</div>
</div>
</div>
</div>
<!-- Card stack (decorative) -->
<div class="hero-right" aria-hidden="true">
<div class="sfB-stack-card c1">
<div class="ph"></div>
<span class="tag">Salsa</span>
<span class="ph-label">Every Thursday · Malibu</span>
</div>
<div class="sfB-stack-card c2">
<div class="ph"></div>
<span class="tag">Kizomba</span>
<span class="ph-label">Every Wednesday · Ket Fai</span>
</div>
<div class="sfB-stack-card c3">
<div class="ph"></div>
<span class="tag">Bachata</span>
<span class="ph-label">Every Monday · Webe Coffee</span>
</div>
<div class="badge">
<div class="ic">🎶</div>
<div>
<div class="t">Socials almost every night</div>
<div class="s">Da Nang · Hoi An</div>
</div>
</div>
</div>
</section>
<!-- Marquee -->
<div class="sfB-marquee" aria-hidden="true">
<div class="track">
<span>Salsa</span>
<span>Bachata</span>
<span>Kizomba</span>
<span>Zouk</span>
<span>Da Nang</span>
<span>Hoi An</span>
<span>Salsa</span>
<span>Bachata</span>
<span>Kizomba</span>
<span>Zouk</span>
<span>Da Nang</span>
<span>Hoi An</span>
<span>Salsa</span>
<span>Bachata</span>
<span>Kizomba</span>
<span>Zouk</span>
<span>Da Nang</span>
<span>Hoi An</span>
<span>Salsa</span>
<span>Bachata</span>
<span>Kizomba</span>
<span>Zouk</span>
<span>Da Nang</span>
<span>Hoi An</span>
</div>
</div>
<!-- Pillars -->
<section class="sfB-pillars">
<div class="head">
<h2>What we <em>do</em></h2>
<span class="num">— 01 / 03</span>
</div>
<div class="sfB-grid3">
<div class="sfB-pcard c1">
<span class="num">01</span>
<div class="arr">→</div>
<h3>Social <em>Dancing</em></h3>
<p>Almost-daily gatherings at bars, clubs, and restaurants. Small cover charge, great music, warm people.
Beginner or pro — everyone is welcome.</p>
</div>
<div class="sfB-pcard c2">
<span class="num">02</span>
<div class="arr">→</div>
<h3>4 <em>Styles</em></h3>
<p>Salsa, Bachata, Kizomba, and the fast-growing Zouk. Each night has its own vibe and music ratio — find the
scene that moves you.</p>
</div>
<div class="sfB-pcard c3">
<span class="num">03</span>
<div class="arr">→</div>
<h3><em>Community</em> First</h3>
<p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da
Nang's Latin dance scene.</p>
</div>
</div>
</section>
<!-- Coming up teaser -->
<section class="sfB-coming">
<div class="head">
<h2>Coming up <em>this week</em></h2>
<a href="schedule.html">
Full schedule
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" />
</svg>
</a>
</div>
<div class="sfB-coming-row" id="sfB-coming-row"></div>
</section>
<!-- CTA block -->
<div class="sfB-cta">
<div>
<div class="quote">
Dance is how we <em>connect</em> — no language needed.
</div>
<div class="who">Sabor Flow Da Nang</div>
</div>
<div class="cta-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">
Follow on Instagram
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="alt">
Join Facebook Group
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
</a> </a>
</div> </div>
</div> </div>
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
<!-- Footer -->
<footer class="sfB-foot">
<div>
<strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span>
</div>
<nav class="foot-links">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
</div> </div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

146
js/main.js
View File

@@ -1,81 +1,117 @@
// ============================================================ // ============================================================
// Sabor Flow Da Nang — main.js // Sabor Flow Da Nang — main.js
// Update SCHEDULE array monthly when the weekly program changes. // Update SCHEDULE array monthly when the weekly program changes.
// ============================================================ // ============================================================
const SCHEDULE = [ const SCHEDULE = [
{ day: 'Monday', venue: 'Webe Coffee', social: 'BOM', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai', mapUrl: 'https://maps.app.goo.gl/jvaQgcNt4doYwZ2N7' }, { day: 'Monday', when: '8:30 pm', venue: 'Webe Coffee', social: 'BOM', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai', mapUrl: 'https://maps.app.goo.gl/jvaQgcNt4doYwZ2N7' },
{ day: 'Tuesday', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' }, { day: 'Tuesday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
{ day: 'Tuesday', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/place/C%C3%A1liz+Wine+Bar/@16.0485026,108.2470699,17z' }, { day: 'Tuesday', when: '9 pm', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/place/C%C3%A1liz+Wine+Bar/@16.0485026,108.2470699,17z' },
{ day: 'Wednesday', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 19:30 · Bachata 21:00', city: 'Da Nang', organizer: 'Sean Kim', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Ket+Fai+Bar+Da+Nang+Vietnam' }, { day: 'Wednesday', when: '7:30 pm', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 7:30 · Bachata 9 pm', city: 'Da Nang', organizer: 'Sean Kim', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Ket+Fai+Bar+Da+Nang+Vietnam' },
{ day: 'Thursday', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Malibu+Beach+Club+Da+Nang+Vietnam' }, { day: 'Thursday', when: '9 pm', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Malibu+Beach+Club+Da+Nang+Vietnam' },
{ day: 'Friday', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' }, { day: 'Friday', when: '9 pm', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
{ day: 'Saturday', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' }, { day: 'Saturday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
{ day: 'Saturday', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' }, { day: 'Saturday', when: '9 pm', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
{ day: 'Sunday', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Last+Call+Bar+Da+Nang+Vietnam' }, { day: 'Sunday', when: '9 pm', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Last+Call+Bar+Da+Nang+Vietnam' },
{ day: 'Sunday', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Corner+Bar+Da+Nang+Vietnam' }, { day: 'Sunday', when: '9 pm', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Corner+Bar+Da+Nang+Vietnam' },
]; ];
// ---- Navigation ---- const DAYS_ORDER = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
function getTodayName() {
return DAYS_ORDER[new Date().getDay()];
}
// Parse "2 Salsa · 3 Bachata · 1 Kizomba" into sfB-chip spans
function musicToChips(music) {
const styleMap = { salsa: 'salsa', bachata: 'bachata', kizomba: 'kizomba', zouk: 'zouk' };
return music.split('·').map(s => s.trim()).filter(Boolean).map(segment => {
let cls = '';
for (const [key, val] of Object.entries(styleMap)) {
if (segment.toLowerCase().includes(key)) { cls = val; break; }
}
return `<span class="sfB-chip ${cls}">${segment}</span>`;
}).join('');
}
// ---- Nav (mobile) ----
function initNav() { function initNav() {
const hamburger = document.getElementById('hamburger'); const hamburger = document.getElementById('sfB-hamburger');
const navLinks = document.getElementById('nav-links'); const mobileNav = document.getElementById('sfB-mobile-nav');
if (!hamburger || !navLinks) return; const closeBtn = document.getElementById('sfB-mobile-nav-close');
hamburger.addEventListener('click', () => { if (!hamburger || !mobileNav) return;
const isOpen = navLinks.classList.toggle('open');
hamburger.setAttribute('aria-expanded', String(isOpen)); hamburger.addEventListener('click', () => mobileNav.classList.add('open'));
if (closeBtn) closeBtn.addEventListener('click', () => mobileNav.classList.remove('open'));
mobileNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => mobileNav.classList.remove('open'));
}); });
navLinks.querySelectorAll('a').forEach(link => { // close on backdrop click
link.addEventListener('click', () => navLinks.classList.remove('open')); mobileNav.addEventListener('click', e => {
if (e.target === mobileNav) mobileNav.classList.remove('open');
}); });
} }
// ---- Schedule: full table ---- // ---- Schedule: full list (schedule.html) ----
function renderScheduleTable() { function renderScheduleList() {
const tbody = document.getElementById('schedule-tbody'); const list = document.getElementById('sfB-schedule-list');
if (!tbody) return; if (!list) return;
tbody.innerHTML = SCHEDULE.map(row => ` const today = getTodayName();
<tr>
<td data-label="Day"> list.innerHTML = SCHEDULE.map(row => {
<span class="day-badge day-${row.day.toLowerCase()}">${row.day}</span> const isToday = row.day === today;
</td> const cityClass = row.city === 'Hoi An' ? 'hoian' : 'danang';
<td data-label="Venue" class="venue-name"> const venueEl = row.mapUrl
${row.mapUrl ? `<a href="${row.mapUrl}" target="_blank" rel="noopener">${row.venue}</a>`
? `<a href="${row.mapUrl}" target="_blank" rel="noopener" class="venue-map-link">${row.venue}<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></a>` : row.venue;
: row.venue}
</td> return `
<td data-label="Social" class="social-name">${row.social}</td> <div class="sfB-row${isToday ? ' today' : ''}">
<td data-label="Music" class="music-text">${row.music}</td> <div class="col-day">
<td data-label="City"><span class="city-badge">${row.city}</span></td> <span class="name">${row.day}</span>
<td data-label="Organizer" class="organizer-text">${row.organizer}</td> <span class="when">${row.when || ''}</span>
</tr> ${isToday ? '<span class="tonight-label">▶ Tonight</span>' : ''}
`).join(''); </div>
<div class="col-venue">
<span class="pin">📍</span>
${venueEl}
</div>
<div class="col-social">
${row.social}
<span class="sub">${row.organizer}</span>
</div>
<div class="col-music">${musicToChips(row.music)}</div>
<div><span class="col-city ${cityClass}">${row.city}</span></div>
<div class="col-org">${row.organizer}</div>
</div>`;
}).join('');
} }
// ---- Home: "Coming up this week" teaser (3 events starting from today) ---- // ---- Home: "Coming up" teaser (4 cards starting from today) ----
function renderScheduleTeaser() { function renderScheduleTeaser() {
const container = document.getElementById('schedule-teaser'); const container = document.getElementById('sfB-coming-row');
if (!container) return; if (!container) return;
const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const today = getTodayName();
const today = DAYS[new Date().getDay()]; const startIdx = DAYS_ORDER.indexOf(today);
const startIdx = DAYS.indexOf(today); const order = [...DAYS_ORDER.slice(startIdx), ...DAYS_ORDER.slice(0, startIdx)];
const order = [...DAYS.slice(startIdx), ...DAYS.slice(0, startIdx)];
const sorted = [...SCHEDULE].sort( const sorted = [...SCHEDULE].sort(
(a, b) => order.indexOf(a.day) - order.indexOf(b.day) (a, b) => order.indexOf(a.day) - order.indexOf(b.day)
); );
container.innerHTML = sorted.slice(0, 3).map(row => ` container.innerHTML = sorted.slice(0, 4).map(row => `
<div class="teaser-card"> <a href="schedule.html" class="sfB-tcard">
<div class="teaser-day">${row.day}</div> <div class="day">${row.day}</div>
<div class="teaser-social">${row.social}</div> <div class="when">${row.when || ''}</div>
<div class="teaser-venue">@ ${row.venue}</div> <h4>${row.social}</h4>
<div class="teaser-meta">${row.music} &middot; ${row.city}</div> <div class="at">@ ${row.venue} · ${row.city}</div>
</div> <div class="chips">${musicToChips(row.music)}</div>
</a>
`).join(''); `).join('');
} }
@@ -107,7 +143,9 @@ function initFilters() {
// ---- Init ---- // ---- Init ----
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initNav(); initNav();
renderScheduleTable(); renderScheduleList();
renderScheduleTeaser(); renderScheduleTeaser();
initFilters(); initFilters();
const yearEl = document.getElementById('footer-year');
if (yearEl) yearEl.textContent = new Date().getFullYear();
}); });

175
schedule.html
View File

@@ -1,99 +1,130 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Schedule — Sabor Flow Da Nang</title> <title>Weekly Schedule — Sabor Flow Da Nang</title>
<meta name="description" content="The weekly Latin social dance schedule in Da Nang and Hoi An. Salsa, Bachata, Kizomba, Zouk — every day of the week."> <meta name="description"
content="The weekly Latin social dance schedule in Da Nang and Hoi An. Salsa, Bachata, Kizomba, Zouk — every day of the week.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg"> <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<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=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<nav class="nav"> <div class="sfB-bg" aria-hidden="true"></div>
<div class="nav-container">
<a href="index.html" class="nav-brand"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG"> <button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
<span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span> <a href="/">Home</a>
</a> <a href="schedule.html" class="active">Schedule</a>
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false"> <a href="connect.html">Connect</a>
<span></span><span></span><span></span> <a href="studios.html">Studios</a>
</button> <a href="classes.html">Classes</a>
<ul class="nav-links" id="nav-links"> <a href="festivals.html">Festivals</a>
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html" class="active">Schedule</a></li>
<li><a href="connect.html">Connect</a></li>
<li><a href="studios.html">Studios</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="festivals.html">Festivals</a></li>
</ul>
</div>
</nav> </nav>
<div class="container"> <header class="sfB-topbar">
<div class="page-header"> <a href="/" class="logo">
<p class="section-label">Da Nang &middot; Hoi An</p> <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<h1>Weekly Schedule</h1> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
<p class="subtitle">Your guide to social dancing — every single week.</p>
</div>
<div class="schedule-note">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
<span>Music ratios (e.g. <strong style="color:var(--text)">2 Salsa · 2 Bachata · 2 Kizomba</strong>) show approximate songs per style per rotation. Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal)">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" style="color:var(--teal)">Da Nang SBK group</a> for real-time updates. Pop-up parties for <strong style="color:var(--text)">Zouk</strong> and <strong style="color:var(--text)">Tango</strong> are announced there too.</span>
</div>
<div class="schedule-table-wrap">
<table class="schedule-table">
<thead>
<tr>
<th>Day</th>
<th>Venue</th>
<th>Social</th>
<th>Music</th>
<th>City</th>
<th>Organizer</th>
</tr>
</thead>
<tbody id="schedule-tbody"></tbody>
</table>
</div>
<p class="mt-3" style="color:var(--muted);font-size:.78rem">Schedule updated monthly &mdash; last update: <strong style="color:var(--text);font-weight:500">April 2026</strong></p>
</div>
<footer class="footer" style="margin-top:4rem">
<div class="container">
<div class="footer-inner">
<div>
<a href="index.html" class="footer-brand">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
<span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
</a> </a>
<p class="footer-tagline">Da Nang's Latin dance community</p> <nav class="sfB-nav">
<a href="/">Home</a>
<a href="schedule.html" class="active">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
@saborflowdanang
</a>
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div> </div>
<nav class="footer-nav"> </header>
<a href="index.html">Home</a>
<main class="sfB-page">
<div class="sfB-page-head">
<h1>Weekly <em>Schedule</em></h1>
<div class="info">
Music ratios (e.g. <b>2 Salsa · 2 Bachata · 2 Kizomba</b>) show approximate songs per style per rotation.
Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank"
rel="noopener">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/"
target="_blank" rel="noopener">Da Nang SBK group</a> for real-time updates. Pop-up parties for <b>Zouk</b> and
<b>Tango</b> are announced there too.
</div>
</div>
<div class="sfB-toolbar">
<div class="sfB-pills">
<button class="filter-pill active" data-filter="all">All</button>
<button class="filter-pill" data-filter="salsa">Salsa</button>
<button class="filter-pill" data-filter="bachata">Bachata</button>
<button class="filter-pill" data-filter="kizomba">Kizomba</button>
<button class="filter-pill" data-filter="zouk">Zouk</button>
<button class="filter-pill" data-filter="danang">Da Nang</button>
<button class="filter-pill" data-filter="hoian">Hoi An</button>
</div>
</div>
<div class="sfB-list" id="sfB-schedule-list"></div>
<p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)">May
2026</strong></p>
</main>
<footer class="sfB-foot">
<div><strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span></div>
<nav class="foot-links">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a> <a href="connect.html">Connect</a>
<a href="studios.html">Studios</a> <a href="studios.html">Studios</a>
<a href="classes.html">Classes</a> <a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a> <a href="festivals.html">Festivals</a>
</nav> </nav>
<div class="footer-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
@saborflowdanang
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Da Nang SBK Group
</a>
</div>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
</div> </div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script>
// Schedule-page filter by city / style
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.sfB-pills .filter-pill').forEach(pill => {
pill.addEventListener('click', () => {
document.querySelectorAll('.sfB-pills .filter-pill').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
const f = pill.dataset.filter;
document.querySelectorAll('.sfB-row').forEach(row => {
if (f === 'all') { row.style.display = ''; return; }
const music = row.querySelector('.col-music')?.textContent.toLowerCase() || '';
const city = row.querySelector('.col-city')?.textContent.toLowerCase() || '';
const show = music.includes(f) || city.includes(f === 'danang' ? 'da nang' : f);
row.style.display = show ? '' : 'none';
});
});
});
});
</script>
</body> </body>
</html> </html>

263
studios.html
View File

@@ -1,191 +1,222 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dance Studios — Sabor Flow Da Nang</title> <title>Dance Studios — Sabor Flow Da Nang</title>
<meta name="description" content="Latin dance studios in Da Nang, Vietnam. Find schools teaching Salsa, Bachata, Kizomba, and Zouk."> <meta name="description"
content="Latin dance studios in Da Nang, Vietnam. Find schools teaching Salsa, Bachata, Kizomba, and Zouk.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg"> <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<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=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<nav class="nav"> <div class="sfB-bg" aria-hidden="true"></div>
<div class="nav-container">
<a href="index.html" class="nav-brand"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG"> <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span> <a href="/">Home</a>
</a> <a href="schedule.html">Schedule</a>
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false"> <a href="connect.html">Connect</a>
<span></span><span></span><span></span> <a href="studios.html" class="active">Studios</a>
</button> <a href="classes.html">Classes</a>
<ul class="nav-links" id="nav-links"> <a href="festivals.html">Festivals</a>
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="connect.html">Connect</a></li>
<li><a href="studios.html" class="active">Studios</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="festivals.html">Festivals</a></li>
</ul>
</div>
</nav> </nav>
<div class="container"> <header class="sfB-topbar">
<div class="page-header"> <a href="/" class="logo">
<p class="section-label">Da Nang</p> <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<h1>Dance Studios</h1> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
<p class="subtitle">Dedicated schools and venues where you can take Latin dance lessons.</p> </a>
<nav class="sfB-nav">
<a href="/">Home</a>
<a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a>
<a href="studios.html" class="active">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
@saborflowdanang
</a>
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main class="sfB-page">
<div class="sfB-page-head">
<h1>Dance <em>Studios</em></h1>
<div class="info">
Dedicated schools and venues where you can take Latin dance lessons in Da Nang. Filter by style to find your
perfect fit.
</div>
</div> </div>
<div class="filter-bar"> <div class="sfB-toolbar">
<div class="sfB-pills">
<button class="filter-pill active" data-filter="all">All</button> <button class="filter-pill active" data-filter="all">All</button>
<button class="filter-pill" data-filter="salsa">Salsa</button> <button class="filter-pill" data-filter="salsa">Salsa</button>
<button class="filter-pill" data-filter="bachata">Bachata</button> <button class="filter-pill" data-filter="bachata">Bachata</button>
<button class="filter-pill" data-filter="kizomba">Kizomba</button> <button class="filter-pill" data-filter="kizomba">Kizomba</button>
<button class="filter-pill" data-filter="zouk">Zouk</button> <button class="filter-pill" data-filter="zouk">Zouk</button>
</div> </div>
</div>
<div class="card-grid"> <div class="sfB-cards">
<!-- Frog Goose Bachata School --> <!-- Frog Goose Bachata School -->
<div class="card studio-card filterable-card" data-styles="bachata"> <div class="sfB-card-x filterable-card" data-styles="bachata">
<div class="card-stripe"></div> <div class="stripe bachata"></div>
<div class="card-body"> <h3>Frog Goose Bachata School</h3>
<div class="card-title">Frog Goose Bachata School</div> <div class="ts">
<div class="tags"> <span class="sfB-chip bachata">Bachata</span>
<span class="tag tag-bachata">Bachata</span>
</div> </div>
<div class="card-info"> <div class="info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> <div class="row">
<span class="ic">📍</span>
<span>292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang</span> <span>292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang</span>
</div> </div>
<div class="card-info"> <div class="row">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> <span class="ic">🕘</span>
<span>Monday workshops 8:30 PM &middot; Social from 9:30 PM</span> <span>Monday workshops 8:30 PM &middot; Social from 9:30 PM</span>
</div> </div>
<div class="card-info"> <div class="row">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> <span class="ic">👥</span>
<span>Luu Nhat Phuong, Phong &amp; Shai</span> <span>Luu Nhat Phuong, Phong &amp; Shai</span>
</div> </div>
<div class="card-links"> </div>
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link"> <div class="links">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg> <a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
Facebook Facebook
</a> </a>
</div> </div>
</div> </div>
</div>
<!-- Salsa Da Nang --> <!-- Salsa Da Nang -->
<div class="card studio-card filterable-card" data-styles="salsa"> <div class="sfB-card-x filterable-card" data-styles="salsa">
<div class="card-stripe"></div> <div class="stripe salsa"></div>
<div class="card-body"> <h3>Salsa Da Nang</h3>
<div class="card-title">Salsa Da Nang</div> <div class="ts">
<div class="tags"> <span class="sfB-chip salsa">Salsa On1</span>
<span class="tag tag-salsa">Salsa On1</span> <span class="sfB-chip salsa">Salsa On2</span>
<span class="tag tag-salsa">Salsa On2</span>
</div> </div>
<div class="card-info"> <div class="info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> <div class="row">
<span>Da Nang (various venues &mdash; check website for current location)</span> <span class="ic">📍</span>
<span>Da Nang (various venues &mdash; check website)</span>
</div> </div>
<div class="card-info"> <div class="row">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> <span class="ic">👤</span>
<span>Lucho Giraldes &mdash; 20+ years experience, professional performer</span> <span>Lucho Giraldes &mdash; 20+ years experience, professional performer</span>
</div> </div>
<div class="card-info"> <div class="row">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg> <span class="ic">📖</span>
<span>Beginner &middot; Intermediate &middot; Advanced</span> <span>Beginner · Intermediate · Advanced</span>
</div> </div>
<div class="card-links"> </div>
<a href="https://salsadanang.com" target="_blank" rel="noopener" class="card-link"> <div class="links">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> <a href="https://salsadanang.com" target="_blank" rel="noopener">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />
<line x1="2" y1="12" x2="22" y2="12" />
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</svg>
Website Website
</a> </a>
<a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link"> <a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
Instagram Instagram
</a> </a>
</div> </div>
</div> </div>
</div>
<!-- LearnToDanceDANANG --> <!-- LearnToDance Da Nang -->
<div class="card studio-card filterable-card" data-styles="salsa,bachata,kizomba,zouk"> <div class="sfB-card-x filterable-card" data-styles="salsa,bachata,kizomba,zouk">
<div class="card-stripe"></div> <div class="stripe multi"></div>
<div class="card-body"> <h3>LearnToDance Da Nang</h3>
<div class="card-title">LearnToDance Da Nang</div> <div class="ts">
<div class="tags"> <span class="sfB-chip salsa">Salsa</span>
<span class="tag tag-salsa">Salsa</span> <span class="sfB-chip bachata">Bachata</span>
<span class="tag tag-bachata">Bachata</span> <span class="sfB-chip kizomba">Kizomba</span>
<span class="tag tag-kizomba">Kizomba</span> <span class="sfB-chip zouk">Zouk</span>
<span class="tag tag-zouk">Zouk</span>
</div> </div>
<div class="card-info"> <div class="info">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> <div class="row">
<span class="ic">📍</span>
<span>Da Nang</span> <span>Da Nang</span>
</div> </div>
<div class="card-info"> <div class="row">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.7 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.61 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg> <span class="ic">📞</span>
<span><a href="tel:+84855085903" style="color:var(--orange)">+84 85 508 5903</a></span> <span><a href="tel:+84855085903">+84 85 508 5903</a></span>
</div> </div>
<div class="card-info"> <div class="row">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> <span class="ic">✉️</span>
<span><a href="mailto:LearnToDanceDANANG@gmail.com" style="color:var(--orange)">LearnToDanceDANANG@gmail.com</a></span> <span><a href="mailto:LearnToDanceDANANG@gmail.com">LearnToDanceDANANG@gmail.com</a></span>
</div> </div>
<div class="card-links"> </div>
<a href="mailto:LearnToDanceDANANG@gmail.com" class="card-link"> <div class="links">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> <a href="mailto:LearnToDanceDANANG@gmail.com">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<polyline points="22,6 12,13 2,6" />
</svg>
Email Email
</a> </a>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="mt-3" style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center"> <div class="sfB-suggest">
<p style="color:var(--muted);margin-bottom:1rem">Know a studio we&rsquo;re missing? Let us know.</p> <p>Know a studio we're missing? Let us know.</p>
<a href="connect.html" class="btn btn-ghost"> <a href="connect.html" class="sfB-btn ghost">Contact Us</a>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
<span>Contact Us</span>
</a>
</div>
</div> </div>
</main>
<footer class="footer" style="margin-top:4rem"> <footer class="sfB-foot">
<div class="container"> <div><strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span></div>
<div class="footer-inner"> <nav class="foot-links">
<div> <a href="/">Home</a>
<a href="index.html" class="footer-brand">
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
<span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
</a>
<p class="footer-tagline">Da Nang's Latin dance community</p>
</div>
<nav class="footer-nav">
<a href="index.html">Home</a>
<a href="schedule.html">Schedule</a> <a href="schedule.html">Schedule</a>
<a href="connect.html">Connect</a> <a href="connect.html">Connect</a>
<a href="studios.html">Studios</a> <a href="studios.html">Studios</a>
<a href="classes.html">Classes</a> <a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a> <a href="festivals.html">Festivals</a>
</nav> </nav>
<div class="footer-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg> <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
@saborflowdanang
</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
Da Nang SBK Group
</a>
</div>
</div>
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
</div> </div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>