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

Add Playlists page with Spotify and YouTube Music links for BSKZ

Browse Source 
New page at /playlists listing 40 curated playlists (5 Spotify + 5 YouTube Music
per dance style) for Bachata, Salsa, Kizomba and Zouk. Each card shows mood tags
and links directly to the playlist or search. Navigation updated across all pages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Javier Blanco
2026-05-02 15:07:28 +07:00
parent f7e43a57fe
commit 9b13ac93de
8 changed files with 673 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
classes/index.html
View File

@@ -13,7 +13,7 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=d31dc0aa"> <link rel="stylesheet" href="../css/style.css?v=b859151d">
</head> </head>
<body> <body>
@@ -44,6 +44,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes" class="active">Classes</a> <a href="/classes" class="active">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
@@ -58,6 +59,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes" class="active">Classes</a> <a href="/classes" class="active">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="topbar-right"> <div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -369,13 +371,14 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=d31dc0aa"></script> <script src="../js/main.js?v=b859151d"></script>
</body> </body>
</html> </html>

7
connect/index.html
View File

@@ -13,7 +13,7 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=d31dc0aa"> <link rel="stylesheet" href="../css/style.css?v=b859151d">
</head> </head>
<body> <body>
@@ -44,6 +44,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
@@ -58,6 +59,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="topbar-right"> <div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -187,13 +189,14 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=d31dc0aa"></script> <script src="../js/main.js?v=b859151d"></script>
</body> </body>
</html> </html>

105
css/style.css
View File

@@ -1503,3 +1503,108 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.sfB-palm { animation: none !important; } .sfB-palm { animation: none !important; }
} }
/* ── Playlists page ── */
.sfB-pl-section {
margin-top: 40px;
}
.sfB-pl-section + .sfB-pl-section {
padding-top: 32px;
border-top: 1px solid rgba(255,246,232,0.06);
}
.sfB-pl-section-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.sfB-pl-title {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800;
font-size: 48px;
letter-spacing: -1.5px;
line-height: 1;
}
.sfB-pl-platform-group {
margin-bottom: 14px;
}
.sfB-pl-platform-label {
display: flex;
align-items: center;
gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 10px;
}
.sfB-pl-platform-label .pdot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.sfB-pl-platform-label .pdot.spotify { background: #1DB954; box-shadow: 0 0 6px #1DB954; }
.sfB-pl-platform-label .pdot.ytmusic { background: #FF4444; box-shadow: 0 0 6px #FF4444; }
.sfB-pl-platform-label.spotify { color: rgba(29,185,84,0.85); }
.sfB-pl-platform-label.ytmusic { color: rgba(255,80,80,0.85); }
.sfB-pl-grid5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.sfB-pl-card {
padding: 16px;
border-radius: 14px;
background: rgba(255,246,232,0.04);
border: 1px solid rgba(255,246,232,0.08);
display: flex;
flex-direction: column;
gap: 12px;
transition: all .2s;
text-decoration: none;
}
.sfB-pl-card:hover { background: rgba(255,246,232,0.07); transform: translateY(-2px); }
.sfB-pl-card.spotify:hover { border-color: rgba(29,185,84,0.45); }
.sfB-pl-card.ytmusic:hover { border-color: rgba(255,68,68,0.4); }
.sfB-pl-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
flex: 1;
}
.sfB-pl-tag {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 3px 7px;
border-radius: 4px;
background: rgba(255,246,232,0.08);
color: rgba(255,246,232,0.6);
}
.sfB-pl-open {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
padding: 7px 11px;
border-radius: 8px;
transition: all .15s;
align-self: flex-start;
}
.sfB-pl-card.spotify .sfB-pl-open { background: rgba(29,185,84,0.12); color: #1DB954; }
.sfB-pl-card.spotify .sfB-pl-open:hover { background: rgba(29,185,84,0.22); }
.sfB-pl-card.ytmusic .sfB-pl-open { background: rgba(255,68,68,0.12); color: #FF7070; }
.sfB-pl-card.ytmusic .sfB-pl-open:hover { background: rgba(255,68,68,0.22); }
@media (max-width: 960px) {
.sfB-pl-grid5 { grid-template-columns: repeat(3, 1fr); }
.sfB-pl-title { font-size: 36px; }
}
@media (max-width: 600px) {
.sfB-pl-grid5 { grid-template-columns: repeat(2, 1fr); }
.sfB-pl-title { font-size: 28px; }
}

7
festivals/index.html
View File

@@ -13,7 +13,7 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=d31dc0aa"> <link rel="stylesheet" href="../css/style.css?v=b859151d">
</head> </head>
<body> <body>
@@ -44,6 +44,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals" class="active">Festivals</a> <a href="/festivals" class="active">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
@@ -58,6 +59,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals" class="active">Festivals</a> <a href="/festivals" class="active">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="topbar-right"> <div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -238,13 +240,14 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=d31dc0aa"></script> <script src="../js/main.js?v=b859151d"></script>
</body> </body>
</html> </html>

7
index.html
View File

@@ -13,7 +13,7 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="css/style.css?v=d31dc0aa"> <link rel="stylesheet" href="css/style.css?v=b859151d">
</head> </head>
<body> <body>
@@ -46,6 +46,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<!-- Topbar --> <!-- Topbar -->
@@ -65,6 +66,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="topbar-right"> <div class="topbar-right">
@@ -267,13 +269,14 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
</div> </div>
</footer> </footer>
<script src="js/main.js?v=d31dc0aa"></script> <script src="js/main.js?v=b859151d"></script>
</body> </body>
</html> </html>

538
playlists/index.html Normal file
View File

@@ -0,0 +1,538 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playlists — Sabor Flow Da Nang</title>
<meta name="description"
content="Curated Spotify and YouTube Music playlists for Bachata, Salsa, Kizomba and Zouk. Practice, social dance, or just enjoy.">
<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?v=b859151d">
</head>
<body>
<div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt=""
style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div>
</div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<a href="/">Home</a>
<a href="/schedule">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</a>
<a href="/playlists" class="active">Playlists</a>
</nav>
<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">
<a href="/">Home</a>
<a href="/schedule">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</a>
<a href="/playlists" class="active">Playlists</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>Playlists</em></h1>
<div class="info">
Curated playlists for every mood and level — practice at home, warm up before a social, or just enjoy the music.
Available on <b>Spotify</b> and <b>YouTube Music</b>.
</div>
</div>
<!-- BACHATA -->
<section class="sfB-pl-section">
<div class="sfB-pl-section-head">
<span class="sfB-chip bachata">Bachata</span>
<h2 class="sfB-pl-title">Bachata</h2>
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-platform-label spotify">
<span class="pdot spotify"></span>
Spotify
</div>
<div class="sfB-pl-grid5">
<a href="https://open.spotify.com/playlist/4Q2CbhspYFBsTaD36HAS4d" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Sensual</span>
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Most Popular</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/playlist/5S8iBOJ0odEbDualqddqYh" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Social Dance</span>
<span class="sfB-pl-tag">Advanced</span>
<span class="sfB-pl-tag">Modern</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/playlist/7pGyWX0OvBGpEkIe8K0cyw" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Current</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">New Trends</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/playlist/37i9dQZF1DX65py6HnnlE1" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Most Popular</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/playlist/4mnzoOQ7FUV4YVMaZJT4TO" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Sensual</span>
<span class="sfB-pl-tag">Couples</span>
<span class="sfB-pl-tag">Night Out</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
</div>
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-platform-label ytmusic">
<span class="pdot ytmusic"></span>
YouTube Music
</div>
<div class="sfB-pl-grid5">
<a href="https://music.youtube.com/search?q=bachata+sensual+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Sensual</span>
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Couples</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=bachata+social+dance+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Social Dance</span>
<span class="sfB-pl-tag">Danceable</span>
<span class="sfB-pl-tag">Intermediate</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=best+bachata+love+songs+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Slow</span>
<span class="sfB-pl-tag">Chill</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=bachata+remix+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Remixes</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Current</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=bachata+beginner+practice+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Easy Tempo</span>
<span class="sfB-pl-tag">Practice</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
</div>
</div>
</section>
<!-- SALSA -->
<section class="sfB-pl-section">
<div class="sfB-pl-section-head">
<span class="sfB-chip salsa">Salsa</span>
<h2 class="sfB-pl-title">Salsa</h2>
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-platform-label spotify">
<span class="pdot spotify"></span>
Spotify
</div>
<div class="sfB-pl-grid5">
<a href="https://open.spotify.com/search/salsa%20essentials/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Most Popular</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/salsa%20romantica/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Couples</span>
<span class="sfB-pl-tag">Melodic</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/salsa%20dura/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Fast</span>
<span class="sfB-pl-tag">High Energy</span>
<span class="sfB-pl-tag">Advanced</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/modern%20salsa%20hits/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Current</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Modern</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/salsa%20social%20dance/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Social Dance</span>
<span class="sfB-pl-tag">Danceable</span>
<span class="sfB-pl-tag">DJs</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
</div>
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-platform-label ytmusic">
<span class="pdot ytmusic"></span>
YouTube Music
</div>
<div class="sfB-pl-grid5">
<a href="https://music.youtube.com/search?q=salsa+para+bailar+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Danceable</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=salsa+romantica+mix" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Couples</span>
<span class="sfB-pl-tag">Chill</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=salsa+clasica+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Traditional</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=fast+salsa+dance+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Fast</span>
<span class="sfB-pl-tag">Workout</span>
<span class="sfB-pl-tag">Energy</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=beginner+salsa+practice+songs" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Practice</span>
<span class="sfB-pl-tag">Clear Tempo</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
</div>
</div>
</section>
<!-- KIZOMBA -->
<section class="sfB-pl-section">
<div class="sfB-pl-section-head">
<span class="sfB-chip kizomba">Kizomba</span>
<h2 class="sfB-pl-title">Kizomba</h2>
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-platform-label spotify">
<span class="pdot spotify"></span>
Spotify
</div>
<div class="sfB-pl-grid5">
<a href="https://open.spotify.com/search/kizomba%20essentials/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Essentials</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/urban%20kiz/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">Sensual</span>
<span class="sfB-pl-tag">Current</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/romantic%20kizomba/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Slow</span>
<span class="sfB-pl-tag">Night Out</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/tarraxo%20playlist" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Deep</span>
<span class="sfB-pl-tag">Sensual</span>
<span class="sfB-pl-tag">Underground</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/kizomba%20social%20dance/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Danceable</span>
<span class="sfB-pl-tag">DJs</span>
<span class="sfB-pl-tag">Social Dance</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
</div>
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-platform-label ytmusic">
<span class="pdot ytmusic"></span>
YouTube Music
</div>
<div class="sfB-pl-grid5">
<a href="https://music.youtube.com/search?q=top+kizomba+hits+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Social</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=kizomba+love+songs" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Sensual</span>
<span class="sfB-pl-tag">Chill</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=urban+kiz+practice+mix" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">Technique</span>
<span class="sfB-pl-tag">Practice</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=tarraxinha+session" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Slow</span>
<span class="sfB-pl-tag">Deep</span>
<span class="sfB-pl-tag">Sensual</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=kizomba+party+night" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">DJs</span>
<span class="sfB-pl-tag">Medium Energy</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
</div>
</div>
</section>
<!-- ZOUK -->
<section class="sfB-pl-section">
<div class="sfB-pl-section-head">
<span class="sfB-chip zouk">Zouk</span>
<h2 class="sfB-pl-title">Zouk</h2>
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-platform-label spotify">
<span class="pdot spotify"></span>
Spotify
</div>
<div class="sfB-pl-grid5">
<a href="https://open.spotify.com/search/brazilian%20zouk%20essentials/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Social Dance</span>
<span class="sfB-pl-tag">Danceable</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/zouk%20love/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Slow</span>
<span class="sfB-pl-tag">Sensual</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/modern%20brazilian%20zouk/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Current</span>
<span class="sfB-pl-tag">Technique</span>
<span class="sfB-pl-tag">Flow</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/deep%20zouk/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Sensual</span>
<span class="sfB-pl-tag">Couples</span>
<span class="sfB-pl-tag">Night Out</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://open.spotify.com/search/zouk%20party/playlists" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">DJs</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
</div>
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-platform-label ytmusic">
<span class="pdot ytmusic"></span>
YouTube Music
</div>
<div class="sfB-pl-grid5">
<a href="https://music.youtube.com/search?q=brazilian+zouk+dance+practice" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Technique</span>
<span class="sfB-pl-tag">Practice</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=romantic+zouk+love+playlist" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Slow</span>
<span class="sfB-pl-tag">Connection</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=zouk+flow+session" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Sensual</span>
<span class="sfB-pl-tag">Couples</span>
<span class="sfB-pl-tag">Flow</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=modern+brazilian+zouk+hits" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Current</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Modern</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
<a href="https://music.youtube.com/search?q=zouk+night+party" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">DJs</span>
<span class="sfB-pl-tag">Night Mood</span>
</div>
<span class="sfB-pl-open">Listen →</span>
</a>
</div>
</div>
</section>
<div class="sfB-suggest">
<p>Got a playlist we should add? Share it with us!</p>
<a href="/connect" class="sfB-btn ghost">Contact Us</a>
</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">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav>
<div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
</div>
</footer>
<script src="../js/main.js?v=b859151d"></script>
</body>
</html>

7
schedule/index.html
View File

@@ -13,7 +13,7 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=d31dc0aa"> <link rel="stylesheet" href="../css/style.css?v=b859151d">
</head> </head>
<body> <body>
@@ -44,6 +44,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
@@ -58,6 +59,7 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="topbar-right"> <div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -113,13 +115,14 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=d31dc0aa"></script> <script src="../js/main.js?v=b859151d"></script>
<script> <script>
// Dynamic last-update label // Dynamic last-update label
(function () { (function () {

7
studios/index.html
View File

@@ -13,7 +13,7 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=d31dc0aa"> <link rel="stylesheet" href="../css/style.css?v=b859151d">
</head> </head>
<body> <body>
@@ -44,6 +44,7 @@
<a href="/studios" class="active">Studios</a> <a href="/studios" class="active">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
@@ -58,6 +59,7 @@
<a href="/studios" class="active">Studios</a> <a href="/studios" class="active">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="topbar-right"> <div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -231,13 +233,14 @@
<a href="/studios">Studios</a> <a href="/studios">Studios</a>
<a href="/classes">Classes</a> <a href="/classes">Classes</a>
<a href="/festivals">Festivals</a> <a href="/festivals">Festivals</a>
<a href="/playlists">Playlists</a>
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=d31dc0aa"></script> <script src="../js/main.js?v=b859151d"></script>
</body> </body>
</html> </html>