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> <title>Dance Classes — Sabor Flow Da Nang</title>
<meta name="description" <meta name="description"
content="Latin dance classes in Da Nang. Find Salsa, Bachata, Kizomba, and Zouk classes for all levels."> 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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms"> <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-tl" src="../assets/palm-fronds-left.png" alt=""
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<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-tr" src="../assets/palm-fronds-right.png" alt=""
<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)"> style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<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-bl" src="../assets/palm-fronds-left.png" alt=""
<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)"> style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--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-br" src="../assets/palm-fronds-right.png" alt=""
<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)"> 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>
</div> </div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button> <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html" class="active">Classes</a> <a href="/classes" class="active">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
<a href="/" class="logo"> <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> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
</a> </a>
<nav class="sfB-nav"> <nav class="sfB-nav">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html" class="active">Classes</a> <a href="/classes" class="active">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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">
@@ -197,7 +205,7 @@
<div class="row"><span class="ic">📅</span><span>Wednesday &mdash; Kizomba 7:30 PM · Bachata 9 PM</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="links"> <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" <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"> 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" /> <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"> <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" <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"> 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" /> <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" />
</svg> </svg>
YouTube YouTube
@@ -295,7 +304,8 @@
</div> </div>
<div class="info"> <div class="info">
<div class="row"><span class="ic">📍</span><span>Da Nang, Vietnam</span></div> <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>
<div class="links"> <div class="links">
<a href="https://www.facebook.com/soulkizdanang" target="_blank" rel="noopener"> <a href="https://www.facebook.com/soulkizdanang" target="_blank" rel="noopener">
@@ -348,26 +358,27 @@
<div class="sfB-suggest"> <div class="sfB-suggest">
<p>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="sfB-btn ghost">Contact Us</a> <a href="/connect" class="sfB-btn ghost">Contact Us</a>
</div> </div>
</main> </main>
<footer class="sfB-foot"> <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"> <nav class="foot-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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"></script> <script src="../js/main.js"></script>
</body> </body>
</html> </html>

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

@@ -5,53 +5,62 @@
<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"
<link rel="icon" type="image/jpeg" href="assets/logo.jpg"> 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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms"> <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-tl" src="../assets/palm-fronds-left.png" alt=""
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<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-tr" src="../assets/palm-fronds-right.png" alt=""
<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)"> style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<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-bl" src="../assets/palm-fronds-left.png" alt=""
<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)"> style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--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-br" src="../assets/palm-fronds-right.png" alt=""
<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)"> 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>
</div> </div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button> <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html" class="active">Connect</a> <a href="/connect" class="active">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
<a href="/" class="logo"> <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> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
</a> </a>
<nav class="sfB-nav"> <nav class="sfB-nav">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html" class="active">Connect</a> <a href="/connect" class="active">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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">
@@ -81,11 +90,12 @@
<!-- Instagram profile hero --> <!-- Instagram profile hero -->
<div class="sfB-connect-hero"> <div class="sfB-connect-hero">
<div class="ch-left"> <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>
<div class="h">@saborflowdanang</div> <div class="h">@saborflowdanang</div>
<h2>The Instagram is the source of truth.</h2> <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> week.</p>
</div> </div>
</div> </div>
@@ -171,21 +181,22 @@
</main> </main>
<footer class="sfB-foot"> <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"> <nav class="foot-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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"></script> <script src="../js/main.js"></script>
</body> </body>
</html> </html>

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

@@ -7,52 +7,60 @@
<title>Festivals — Sabor Flow Da Nang</title> <title>Festivals — Sabor Flow Da Nang</title>
<meta name="description" <meta name="description"
content="Latin dance festivals in Da Nang, Vietnam. Multi-day events with international artists, workshops, and social dancing."> 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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms"> <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-tl" src="../assets/palm-fronds-left.png" alt=""
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<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-tr" src="../assets/palm-fronds-right.png" alt=""
<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)"> style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<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-bl" src="../assets/palm-fronds-left.png" alt=""
<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)"> style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--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-br" src="../assets/palm-fronds-right.png" alt=""
<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)"> 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>
</div> </div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button> <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html" class="active">Festivals</a> <a href="/festivals" class="active">Festivals</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
<a href="/" class="logo"> <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> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
</a> </a>
<nav class="sfB-nav"> <nav class="sfB-nav">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html" class="active">Festivals</a> <a href="/festivals" class="active">Festivals</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">
@@ -81,7 +89,8 @@
<!-- Latin Escape Da Nang 2026 --> <!-- Latin Escape Da Nang 2026 -->
<div class="sfB-fest"> <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> <span class="pill">Festival · 2026</span>
<div> <div>
<div class="name">Latin <em>Escape</em></div> <div class="name">Latin <em>Escape</em></div>
@@ -148,7 +157,8 @@
<!-- Vietnam Latin Xperience 2026 --> <!-- Vietnam Latin Xperience 2026 -->
<div class="sfB-fest"> <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> <span class="pill">Festival · 2026</span>
<div> <div>
<div class="name">Vietnam Latin <em>Xperience</em></div> <div class="name">Vietnam Latin <em>Xperience</em></div>
@@ -217,7 +227,7 @@
<div class="sfB-suggest"> <div class="sfB-suggest">
<p>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="sfB-btn ghost">Tell Us About It</a> <a href="/connect" class="sfB-btn ghost">Tell Us About It</a>
</div> </div>
</main> </main>
@@ -226,18 +236,18 @@
</div> </div>
<nav class="foot-links"> <nav class="foot-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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"></script> <script src="../js/main.js"></script>
</body> </body>
</html> </html>

44
index.html
View File

@@ -23,19 +23,19 @@
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt=""
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s"> 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"> style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" <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)"> 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)"> 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="" <img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt=""
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt="" <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)"> 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"> 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)"> style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
</div> </div>
</div> </div>
@@ -44,11 +44,11 @@
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation"> <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> <button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
<a href="/" class="active">Home</a> <a href="/" class="active">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</a>
</nav> </nav>
<!-- Topbar --> <!-- Topbar -->
@@ -63,11 +63,11 @@
<nav class="sfB-nav" aria-label="Main navigation"> <nav class="sfB-nav" aria-label="Main navigation">
<a href="/" class="active">Home</a> <a href="/" class="active">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</a>
</nav> </nav>
<div class="topbar-right"> <div class="topbar-right">
@@ -105,7 +105,7 @@
</p> </p>
<div class="ctas"> <div class="ctas">
<a href="schedule.html" class="sfB-btn primary"> <a href="/schedule" class="sfB-btn primary">
Weekly Schedule Weekly Schedule
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
@@ -113,7 +113,7 @@
<polyline points="12 5 19 12 12 19" /> <polyline points="12 5 19 12 12 19" />
</svg> </svg>
</a> </a>
<a href="festivals.html" class="sfB-btn ghost">Upcoming Festivals</a> <a href="/festivals" class="sfB-btn ghost">Upcoming Festivals</a>
</div> </div>
<div class="meta-row"> <div class="meta-row">
@@ -225,7 +225,7 @@
<section class="sfB-coming"> <section class="sfB-coming">
<div class="head"> <div class="head">
<h2>Coming up <em>this week</em></h2> <h2>Coming up <em>this week</em></h2>
<a href="schedule.html"> <a href="/schedule">
Full schedule Full schedule
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
@@ -265,11 +265,11 @@
</div> </div>
<nav class="foot-links"> <nav class="foot-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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>

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

@@ -7,52 +7,60 @@
<title>Weekly Schedule — Sabor Flow Da Nang</title> <title>Weekly Schedule — Sabor Flow Da Nang</title>
<meta name="description" <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."> 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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms"> <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-tl" src="../assets/palm-fronds-left.png" alt=""
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<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-tr" src="../assets/palm-fronds-right.png" alt=""
<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)"> style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<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-bl" src="../assets/palm-fronds-left.png" alt=""
<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)"> style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--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-br" src="../assets/palm-fronds-right.png" alt=""
<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)"> 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>
</div> </div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation"> <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> <button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html" class="active">Schedule</a> <a href="/schedule" class="active">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
<a href="/" class="logo"> <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> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
</a> </a>
<nav class="sfB-nav"> <nav class="sfB-nav">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html" class="active">Schedule</a> <a href="/schedule" class="active">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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">
@@ -95,25 +103,27 @@
<div class="sfB-list" id="sfB-schedule-list"></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)" 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> </main>
<footer class="sfB-foot"> <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"> <nav class="foot-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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"></script> <script src="../js/main.js"></script>
<script> <script>
// Dynamic last-update label // Dynamic last-update label
(function () { (function () {

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

@@ -7,52 +7,60 @@
<title>Dance Studios — Sabor Flow Da Nang</title> <title>Dance Studios — Sabor Flow Da Nang</title>
<meta name="description" <meta name="description"
content="Latin dance studios in Da Nang, Vietnam. Find schools teaching Salsa, Bachata, Kizomba, and Zouk."> 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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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"> <link rel="stylesheet" href="../css/style.css">
</head> </head>
<body> <body>
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<div class="sfB-palms"> <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-tl" src="../assets/palm-fronds-left.png" alt=""
<img class="sfB-palm corner-tr" src="assets/palm-fronds.png" alt="" style="--sway:3deg;animation-duration:9s;animation-delay:-2s"> style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
<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-tr" src="../assets/palm-fronds-right.png" alt=""
<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)"> style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
<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-bl" src="../assets/palm-fronds-left.png" alt=""
<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)"> style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--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-br" src="../assets/palm-fronds-right.png" alt=""
<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)"> 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>
</div> </div>
<nav class="sfB-mobile-nav" id="sfB-mobile-nav"> <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
<button class="mnav-close" id="sfB-mobile-nav-close">✕</button> <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html" class="active">Studios</a> <a href="/studios" class="active">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</a>
</nav> </nav>
<header class="sfB-topbar"> <header class="sfB-topbar">
<a href="/" class="logo"> <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> <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
</a> </a>
<nav class="sfB-nav"> <nav class="sfB-nav">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html" class="active">Studios</a> <a href="/studios" class="active">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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">
@@ -101,7 +109,8 @@
<div class="info"> <div class="info">
<div class="row"> <div class="row">
<span class="ic">📍</span> <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>
<div class="row"> <div class="row">
<span class="ic">👥</span> <span class="ic">👥</span>
@@ -146,7 +155,8 @@
<a href="https://www.youtube.com/@FrogGoosedance" target="_blank" rel="noopener"> <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" <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"> 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" /> <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" />
</svg> </svg>
YouTube YouTube
@@ -165,7 +175,8 @@
<div class="info"> <div class="info">
<div class="row"> <div class="row">
<span class="ic">📍</span> <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>
<div class="row"> <div class="row">
<span class="ic">👤</span> <span class="ic">👤</span>
@@ -209,26 +220,27 @@
<div class="sfB-suggest"> <div class="sfB-suggest">
<p>Know a studio we're missing? Let us know.</p> <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> </div>
</main> </main>
<footer class="sfB-foot"> <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"> <nav class="foot-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="/schedule">Schedule</a>
<a href="connect.html">Connect</a> <a href="/connect">Connect</a>
<a href="studios.html">Studios</a> <a href="/studios">Studios</a>
<a href="classes.html">Classes</a> <a href="/classes">Classes</a>
<a href="festivals.html">Festivals</a> <a href="/festivals">Festivals</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"></script> <script src="../js/main.js"></script>
</body> </body>
</html> </html>