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

Little fixes

Browse Source
This commit is contained in:
Javier Blanco
2026-05-02 12:17:53 +07:00
parent fafde0a3d2
commit acfc16f9fd
10 changed files with 230 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/palm-fronds-left.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 MiB

After

Width:  |  Height:  |  Size: 979 KiB

BIN
assets/palm-fronds-left2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
assets/palm-fronds-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 974 KiB

0
assets/palm-fronds.png → assets/palm-fronds2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 2.9 MiB

75
classes.html → classes/index.html
View File

@@ -7,52 +7,60 @@
<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.">
<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>
<body>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</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.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>
<a href="/schedule">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes" class="active">Classes</a>
<a href="/festivals">Festivals</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="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.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>
<a href="/schedule">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes" class="active">Classes</a>
<a href="/festivals">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -197,7 +205,7 @@
<div class="row"><span class="ic">📅</span><span>Wednesday &mdash; Kizomba 7:30 PM · Bachata 9 PM</span></div>
</div>
<div class="links">
<a href="connect.html">
<a href="/connect">
<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" />
@@ -249,7 +257,8 @@
<a href="https://youtube.com/@LearnToDanceDANANG" 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="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
<path
d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
<polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" />
</svg>
YouTube
@@ -295,7 +304,8 @@
</div>
<div class="info">
<div class="row"><span class="ic">📍</span><span>Da Nang, Vietnam</span></div>
<div class="row"><span class="ic">📞</span><span><a href="tel:+84776868193">+84 77 686 8193</a> &mdash; WhatsApp &amp; Zalo</span></div>
<div class="row"><span class="ic">📞</span><span><a href="tel:+84776868193">+84 77 686 8193</a> &mdash;
WhatsApp &amp; Zalo</span></div>
</div>
<div class="links">
<a href="https://www.facebook.com/soulkizdanang" target="_blank" rel="noopener">
@@ -348,26 +358,27 @@
<div class="sfB-suggest">
<p>Teaching in Da Nang and not listed here? Get in touch.</p>
<a href="connect.html" class="sfB-btn ghost">Contact Us</a>
<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>
<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>
<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>
</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"></script>
<script src="../js/main.js"></script>
</body>
</html>

73
connect.html → connect/index.html
View File

@@ -5,53 +5,62 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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.">
<link rel="icon" type="image/jpeg" href="assets/logo.jpg">
<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="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>
<body>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</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.html">Schedule</a>
<a href="connect.html" class="active">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
<a href="/schedule">Schedule</a>
<a href="/connect" class="active">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</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="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.html">Schedule</a>
<a href="connect.html" class="active">Connect</a>
<a href="studios.html">Studios</a>
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
<a href="/schedule">Schedule</a>
<a href="/connect" class="active">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -81,11 +90,12 @@
<!-- Instagram profile hero -->
<div class="sfB-connect-hero">
<div class="ch-left">
<div class="ava"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<div class="ava"><img src="../assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
<div>
<div class="h">@saborflowdanang</div>
<h2>The Instagram is the source of truth.</h2>
<p>Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the
<p>Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of
the
week.</p>
</div>
</div>
@@ -171,21 +181,22 @@
</main>
<footer class="sfB-foot">
<div><strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span></div>
<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>
<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>
</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"></script>
<script src="../js/main.js"></script>
</body>
</html>

70
festivals.html → festivals/index.html
View File

@@ -7,52 +7,60 @@
<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.">
<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>
<body>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</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.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>
<a href="/schedule">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals" class="active">Festivals</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="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.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>
<a href="/schedule">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals" class="active">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -81,7 +89,8 @@
<!-- Latin Escape Da Nang 2026 -->
<div class="sfB-fest">
<div class="poster coral" style="background: linear-gradient(160deg, rgba(50,10,10,0.48) 0%, rgba(15,4,4,0.72) 100%), url('assets/latin-escape-danang.jpg') center/cover no-repeat;">
<div class="poster coral"
style="background: linear-gradient(160deg, rgba(50,10,10,0.48) 0%, rgba(15,4,4,0.72) 100%), url('../assets/latin-escape-danang.jpg') center/cover no-repeat;">
<span class="pill">Festival · 2026</span>
<div>
<div class="name">Latin <em>Escape</em></div>
@@ -148,7 +157,8 @@
<!-- Vietnam Latin Xperience 2026 -->
<div class="sfB-fest">
<div class="poster teal" style="background: linear-gradient(160deg, rgba(8,25,30,0.48) 0%, rgba(3,12,16,0.72) 100%), url('assets/xperience.jpg') center/cover no-repeat;">
<div class="poster teal"
style="background: linear-gradient(160deg, rgba(8,25,30,0.48) 0%, rgba(3,12,16,0.72) 100%), url('../assets/xperience.jpg') center/cover no-repeat;">
<span class="pill">Festival · 2026</span>
<div>
<div class="name">Vietnam Latin <em>Xperience</em></div>
@@ -217,7 +227,7 @@
<div class="sfB-suggest">
<p>Know of a festival we should add? Or organizing one yourself?</p>
<a href="connect.html" class="sfB-btn ghost">Tell Us About It</a>
<a href="/connect" class="sfB-btn ghost">Tell Us About It</a>
</div>
</main>
@@ -226,18 +236,18 @@
</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>
<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>
</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"></script>
<script src="../js/main.js"></script>
</body>
</html>

44
index.html
View File

@@ -23,19 +23,19 @@
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt=""
<img class="sfB-palm corner-tr" src="assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt=""
style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt=""
<img class="sfB-palm corner-br" src="assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt=""
style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt=""
<img class="sfB-palm corner-mr" src="assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt=""
<img class="sfB-palm corner-mr2" src="assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div>
</div>
@@ -44,11 +44,11 @@
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
<button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
<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>
<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>
</nav>
<!-- Topbar -->
@@ -63,11 +63,11 @@
<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>
<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>
</nav>
<div class="topbar-right">
@@ -105,7 +105,7 @@
</p>
<div class="ctas">
<a href="schedule.html" class="sfB-btn primary">
<a href="/schedule" 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">
@@ -113,7 +113,7 @@
<polyline points="12 5 19 12 12 19" />
</svg>
</a>
<a href="festivals.html" class="sfB-btn ghost">Upcoming Festivals</a>
<a href="/festivals" class="sfB-btn ghost">Upcoming Festivals</a>
</div>
<div class="meta-row">
@@ -225,7 +225,7 @@
<section class="sfB-coming">
<div class="head">
<h2>Coming up <em>this week</em></h2>
<a href="schedule.html">
<a href="/schedule">
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">
@@ -265,11 +265,11 @@
</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>
<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>
</nav>
<div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>

68
schedule.html → schedule/index.html
View File

@@ -7,52 +7,60 @@
<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.">
<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>
<body>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div>
</div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
<button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
<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>
<a href="/schedule" class="active">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</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="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.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>
<a href="/schedule" class="active">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -95,25 +103,27 @@
<div class="sfB-list" id="sfB-schedule-list"></div>
<p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)" id="schedule-last-update"></strong></p>
<p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)"
id="schedule-last-update"></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>
<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>
<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>
</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"></script>
<script src="../js/main.js"></script>
<script>
// Dynamic last-update label
(function () {

76
studios.html → studios/index.html
View File

@@ -7,52 +7,60 @@
<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.">
<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>
<body>
<div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds.png" alt="" style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="assets/palm-fronds.png" alt="" style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="assets/palm-fronds.png" alt="" style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.2deg;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:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="../assets/palm-fronds-left.png" alt=""
style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
<img class="sfB-palm corner-mr2" src="../assets/palm-fronds-right.png" alt=""
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</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.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>
<a href="/schedule">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios" class="active">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</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="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.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>
<a href="/schedule">Schedule</a>
<a href="/connect">Connect</a>
<a href="/studios" class="active">Studios</a>
<a href="/classes">Classes</a>
<a href="/festivals">Festivals</a>
</nav>
<div class="topbar-right">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
@@ -101,7 +109,8 @@
<div class="info">
<div class="row">
<span class="ic">📍</span>
<span><a href="https://maps.app.goo.gl/HsLtwAJboR5cEGoC7" target="_blank" rel="noopener">4 Khuê Mỹ Đông 2, Đà Nẵng</a></span>
<span><a href="https://maps.app.goo.gl/HsLtwAJboR5cEGoC7" target="_blank" rel="noopener">4 Khuê Mỹ Đông 2,
Đà Nẵng</a></span>
</div>
<div class="row">
<span class="ic">👥</span>
@@ -146,7 +155,8 @@
<a href="https://www.youtube.com/@FrogGoosedance" 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="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
<path
d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
<polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" />
</svg>
YouTube
@@ -165,7 +175,8 @@
<div class="info">
<div class="row">
<span class="ic">📍</span>
<span><a href="https://maps.app.goo.gl/vtDCvo6mPY1KrYor5" target="_blank" rel="noopener">31 Phạm Cự Lượng, An Hải, Đà Nẵng</a></span>
<span><a href="https://maps.app.goo.gl/vtDCvo6mPY1KrYor5" target="_blank" rel="noopener">31 Phạm Cự Lượng,
An Hải, Đà Nẵng</a></span>
</div>
<div class="row">
<span class="ic">👤</span>
@@ -209,26 +220,27 @@
<div class="sfB-suggest">
<p>Know a studio we're missing? Let us know.</p>
<a href="connect.html" class="sfB-btn ghost">Contact Us</a>
<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>
<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>
<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>
</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"></script>
<script src="../js/main.js"></script>
</body>
</html>