芝麻web文件管理V1.00

编辑当前文件:/home/qrafawbu/afrobeatsandbrunch.com/index.html

<!DOCTYPE html>
<html data-wf-domain="www.afrobeatsandbrunch.com" data-wf-page="6699316a1d5b43a75ce02d3e" data-wf-site="664ca9f72f08b4a579c93221" lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Afrobeats & Brunch™ | NYC’s #1 Sunday Night Party </title>
        <meta name="description" content="Experience the ultimate Sunday night vibes with Afrobeats & Brunch™. NYC’s top Afrobeats party featuring great music, delicious food, and unforgettable celebrations. Book your tickets now!">
        <meta name="keywords" content="Afrobeats brunch NYC, NYC Sunday night party, Afrobeats event NYC, brunch party New York, NYC Afrobeats vibes, Sunday night celebration, party in New York, top Afrobeats event NYC, live music NYC events, Sunday nightlife NYC">
        <meta name="author" content="Afrobeats & Brunch™">
        
        <meta property="og:type" content="website" />
        <meta content="summary_large_image" name="twitter:card" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <link href="https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/css/foams-staging.webflow.f98e8b881.min.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            !(function (o, c) {
                var n = c.documentElement,
                    t = " w-mod-";
                (n.className += t + "js"), ("ontouchstart" in o || (o.DocumentTouch && c instanceof DocumentTouch)) && (n.className += t + "touch");
            })(window, document);
        </script>
        <link href="./assets/favicon.png" rel="shortcut icon" type="image/x-icon" />
        <link href="./assets/favicon.png" rel="apple-touch-icon" />
       
        <style>
            html,
            body {
                width: 100%;
                height: auto !important;
                min-height: 100%;
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            html.lenis {
                height: auto;
            }

.lenis.lenis-smooth {
                scroll-behavior: auto;
            }

.lenis.lenis-smooth [data-lenis-prevent] {
                overscroll-behavior: contain;
            }

.lenis.lenis-stopped {
                overflow: hidden;
            }

.lenis.lenis-scrolling iframe {
                pointer-events: none;
            }
        </style>
        <style>
            .nav-inner {
                transform: translate3d(0px, -200%, 0px);
            }
            .nav-bottom {
                transform: translate3d(0px, 250%, 0px);
            }
            .hero-col__title {
                transform: translate3d(0px, 110%, 0px);
            }
            main.is-loading {
                position: fixed;
                z-index: 2;
                top: 0;
                left: 0;
                right: 0;
            }
        </style>
    </head>
    <body class="body">
        <div class="page-w">
            <div class="global">
                <div class="w-embed">
                    <style>
                        :root {
                            --color--mustard: color(display-p3 1 0.75 0.075);
                        }

::-webkit-scrollbar {
                            width: 0px;
                            display: none !important;
                        }

::selection {
                            background: #ed357f;
                            color: var(--color--smoke);
                            background: var(--color--mustard);
                        }

img::selection {
                            background: none;
                        }

body {
                            -webkit-font-smoothing: antialiased;
                            -moz-osx-font-smoothing: grayscale;
                            font-size: 1.1111111111111112vw;
                            --expo-out: cubic-bezier(0.19, 1, 0.22, 1);
                            color: #ed357f;
                            /*color: var(--color--mustard);*/
                        }

@media screen and (min-width: 1920px) {
                            body {
                                font-size: 1.3333333333333333rem;
                            }
                        }

a {
                            color: inherit;
                            text-decoration: none;
                        }

.pointer-off {
                            pointer-events: none;
                        }

.field-area {
                            resize: none;
                        }

@keyframes texture {
                            0% {
                                transform: rotate(0deg) scale(1.1);
                            }
                            19% {
                                transform: rotate(0deg) scale(1.1);
                            }
                            20% {
                                transform: rotate(183deg) scale(1.1);
                            }
                            39% {
                                transform: rotate(183deg) scale(1.1);
                            }
                            40% {
                                transform: rotate(-180deg) scale(1.1);
                            }
                            59% {
                                transform: rotate(-180deg) scale(1.1);
                            }
                            60% {
                                transform: rotate(0deg) scale(1.1);
                            }
                            79% {
                                transform: rotate(0deg) scale(1.1);
                            }
                            80% {
                                transform: rotate(180deg) scale(1.1);
                            }
                            99% {
                                transform: rotate(180deg) scale(1.1);
                            }
                            100% {
                                transform: rotate(-185deg) scale(1.1);
                            }
                        }

@media screen and (min-width: 768px) {
                            .texture {
                                animation: texture 0.8s linear infinite;
                            }
                        }

.img-w.test img {
                            width: 100% !important;
                            height: 100% !important;
                            object-fit: cover !important;
                        }

a.text-link::after {
                            content: "";
                            position: absolute;
                            background: currentColor;
                            width: 4px;
                            height: 4px;
                            left: calc(50% - 2px);
                            bottom: -4px;
                            transform-origin: center center;
                            transform: scale(0) translate(0px, 50%);
                            transition: transform 0.4s var(--expo-out);
                        }

a.text-link:hover::after {
                            transform: scale(1) translate(0px, 0%);
                        }

@keyframes rotateCenter {
                            0% {
                                transform: rotate(0deg);
                            }
                            100% {
                                transform: rotate(-360deg);
                            }
                        }

.overlay-center {
                            animation: 3s infinite linear rotateCenter;
                        }

.verse-child .line-wrapper:first-of-type .line {
                            text-indent: 1.25em;
                        }

.vinyl-cta:hover .arrow.is--rel {
                            transform: translate3d(150%, -150%, 0px);
                        }
                        .vinyl-cta:hover .arrow.is--abs {
                            transform: translate3d(0%, 0%, 0px);
                        }
                        .vinyl-cta:hover .arrow-w {
                            transform: scale(0.85);
                        }

[data-draw] {
                            position: relative;
                        }

svg.cursor-svg {
                            position: absolute;
                            z-index: 1000;
                            top: 0;
                            left: 0;
                            height: 100%;
                            width: 100%;
                            pointer-events: none;
                            mix-blend-mode: difference;
                        }

svg.cursor-svg line {
                            stroke: #ed357f;
                            stroke-width: 10;
                            stroke-linecap: round;
                            stroke-linejoin: round;
                        }
                    </style>
                </div>
                <div class="w-embed">
                    <style>
                        .single-vimeo-player iframe {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            pointer-events: none;
                        }

/* Overlay Dark */

.single-vimeo-player .vimeo-overlay-dark {
                            background: black;
                            transition: opacity 0.3s ease-in-out;
                            opacity: 0;
                            z-index: 2;
                            pointer-events: none;
                        }

.single-vimeo-player[data-vimeo-status-activated="true"] .vimeo-overlay-dark {
                            opacity: 0.2;
                        }

.single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-loaded="true"] .vimeo-overlay-dark {
                            opacity: 0;
                        }

@media (hover: hover) {
                            .single-vimeo-player [data-vimeo-status-hover="true"]:hover .vimeo-overlay-dark {
                                opacity: 0.3 !important;
                            }
                        }

/* Interface */

.single-vimeo-player .vimeo-overlay-interface {
                            pointer-events: none;
                            z-index: 4;
                            opacity: 0;
                            transition: opacity 0.3s ease-in-out;
                            display: flex;
                            align-items: flex-end;
                            padding: 2rem;
                            gap: 1rem;
                        }

.single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-play="false"] .vimeo-overlay-interface,
                        .single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-hover="true"]:hover .vimeo-overlay-interface {
                            opacity: 1;
                        }

@media screen and (max-width: 1024px) {
                            .single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-play="true"] .vimeo-overlay-interface {
                                opacity: 0 !important;
                            }
                        }

.single-vimeo-player .vimeo-overlay-interface * {
                            pointer-events: all;
                        }

.single-vimeo-player .vimeo-mute {
                            height: 1.5em;
                            width: 1.5em;
                            position: relative;
                            cursor: pointer;
                            flex-shrink: 0;
                        }

.single-vimeo-player .vimeo-mute svg {
                            width: 100%;
                            display: block;
                        }

.single-vimeo-player .vimeo-mute svg path {
                            fill: white;
                        }

.single-vimeo-player .vimeo-mute svg:nth-child(2) {
                            display: none;
                        }

.single-vimeo-player[data-vimeo-status-muted="true"] .vimeo-mute svg:nth-child(1) {
                            display: none;
                        }

.single-vimeo-player[data-vimeo-status-muted="true"] .vimeo-mute svg:nth-child(2) {
                            display: block;
                        }

.single-vimeo-player .vimeo-duration {
                            display: flex;
                            align-items: baseline;
                            flex-shrink: 0;
                        }

.single-vimeo-player .vimeo-duration span {
                            color: white;
                            font-weight: 600;
                            white-space: nowrap;
                            font-size: 0.75rem;
                        }

/* Timeline */

.single-vimeo-player .vimeo-timeline {
                            height: 1.5em;
                            width: 100%;
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            --timeline-rounded-corners: 0px;
                            --progress-value: white;
                            --progress-background: rgba(255, 255, 255, 0.2);
                            --progress-height: 2px;
                            --dot-height: 0.75em;
                            --dot-color: white;
                        }

.single-vimeo-player .vimeo-timeline > input {
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            appearance: none;
                            position: absolute;
                            display: block;
                            background: transparent;
                            position: relative;
                            z-index: 2;
                            width: 100%;
                            height: 100%;
                            cursor: pointer;
                        }

.single-vimeo-player .vimeo-timeline > progress {
                            width: 100%;
                            position: absolute;
                            left: 0;
                            height: var(--progress-height);
                            margin: 0;
                            padding: 0;
                            vertical-align: top;
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            appearance: none;
                            border-radius: 0px;
                            overflow: hidden;
                            z-index: 0;
                            background: transparent;
                            border: none;
                            color: var(--progress-value);
                            cursor: pointer;
                        }

/* Progress */

.single-vimeo-player progress::-webkit-progress-bar {
                            border-radius: var(--timeline-rounded-corners);
                            background-color: var(--progress-background);
                            box-shadow: 0;
                        }

.single-vimeo-player progress::-webkit-progress-value {
                            background: var(--progress-value);
                        }

.single-vimeo-player progress::-moz-progress-bar {
                            border-radius: var(--timeline-rounded-corners);
                            background: var(--progress-value);
                            box-shadow: 0;
                        }

.single-vimeo-player progress::-ms-fill {
                            border-radius: var(--timeline-rounded-corners);
                        }

/* Range */

.single-vimeo-player [type="range"]::-webkit-slider-thumb {
                            -webkit-appearance: none;
                        }

.single-vimeo-player [type="range"]:focus {
                            outline: none;
                        }

.single-vimeo-player [type="range"]::-ms-track {
                            width: 100%;
                            cursor: pointer;
                            background: transparent;
                            border-color: transparent;
                            color: transparent;
                        }

.single-vimeo-player [type="range"].time::-webkit-slider-runnable-track {
                            width: 100%;
                            height: var(--progress-height);
                            cursor: pointer;
                            background: var(--progress-background);
                            border-radius: var(--timeline-rounded-corners);
                        }

.single-vimeo-player [type="range"]::-webkit-slider-thumb {
                            box-shadow: 0;
                            height: var(--dot-height);
                            width: var(--dot-height);
                            border-radius: var(--timeline-rounded-corners);
                            background: var(--dot-color);
                            cursor: pointer;
                            -webkit-appearance: none;
                        }

.single-vimeo-player [type="range"]:focus::-webkit-slider-runnable-track {
                            background: transparent;
                        }

.single-vimeo-player [type="range"]::-moz-range-track {
                            width: 100%;
                            height: var(--progress-height);
                            cursor: pointer;
                            background: var(--progress-background);
                            border-radius: 0;
                            border: 0;
                            border-radius: var(--timeline-rounded-corners);
                            overflow: hidden;
                        }

.single-vimeo-player [type="range"]::-moz-range-thumb {
                            box-shadow: 0;
                            border: 0;
                            height: var(--dot-height);
                            width: var(--dot-height);
                            border-radius: var(--timeline-rounded-corners);
                            background: var(--dot-color);
                            cursor: pointer;
                            box-shadow: 0;
                        }

/* Icon (Play + Pause) */

.single-vimeo-player .icon {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 3em;
                            transform: scale(1) rotate(0.001deg);
                            transition: opacity 0.3s ease-in-out;
                            background: rgba(255, 255, 255, 0.12);
                            backdrop-filter: blur(16px);
                            border-radius: 50%;
                            aspect-ratio: 1/1;
                        }

.single-vimeo-player .icon svg {
                            width: 60%;
                        }

/* Play */

.single-vimeo-player .vimeo-overlay-play {
                            z-index: 2;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            opacity: 1;
                        }

.single-vimeo-player[data-vimeo-status-play="true"] .vimeo-overlay-play {
                            opacity: 0;
                        }

.single-vimeo-player .vimeo-overlay-play .icon svg path {
                            fill: var(--color-dark);
                        }

/* Pause */

.single-vimeo-player .vimeo-overlay-pause {
                            z-index: 3;
                            display: none;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                        }

.single-vimeo-player[data-vimeo-status-play="true"] .vimeo-overlay-pause {
                            display: flex;
                        }

.single-vimeo-player .vimeo-overlay-pause .icon {
                            opacity: 0;
                        }

.single-vimeo-player .vimeo-overlay-pause .icon svg path {
                            stroke: var(--color-dark);
                        }

.single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-play="false"] .vimeo-overlay-pause .icon,
                        .single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-hover="true"]:hover .vimeo-overlay-pause .icon {
                            opacity: 1;
                        }

@media screen and (max-width: 1024px) {
                            .single-vimeo-player[data-vimeo-status-activated="true"][data-vimeo-status-play="true"] .vimeo-overlay-pause .icon {
                                opacity: 0 !important;
                            }
                        }

/*  Loading */

.single-vimeo-player .vimeo-overlay-loading {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            z-index: 9;
                            transition: all 0.3s ease-in-out 0.5s;
                            opacity: 0;
                            pointer-events: none;
                            background-color: rgba(var(--color-dark-rgb), 0.5);
                        }

.single-vimeo-player[data-vimeo-status-play="true"] .vimeo-overlay-loading {
                            opacity: 1;
                        }

.single-vimeo-player[data-vimeo-status-play="true"][data-vimeo-status-loaded="true"] .vimeo-overlay-loading {
                            opacity: 0;
                        }

.single-vimeo-player .vimeo-overlay-loading svg {
                            width: 8em;
                        }

.single-vimeo-player .vimeo-overlay-loading svg path {
                            fill: var(--color--cream);
                        }
                    </style>
                </div>
            </div>
            <img
                src="https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture.webp"
                loading="eager"
                sizes="100vw"
                srcset="
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-500.webp   500w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-800.webp   800w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-1080.webp 1080w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-1600.webp 1600w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-2000.webp 2000w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture-p-2600.webp 2600w,
                    https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/669e22711feb7d0f9d3d08f9_Texture.webp        2880w
                "
                alt=""
                class="texture"
            />
            <nav class="nav-w">
                <div class="nav-inner">
                    <ul role="list" class="nav-list w-list-unstyled"> 
                    
                        <li><a href="menu.html" target="_blank" class="text-link">Menu</a></li>
                        <li><div class="text-link">.</div></li>
                        <li><a href="#" target="_blank" class="text-link">Gallery</a></li>
                        <li><div class="text-link">.</div></li>
                        <li><a href="book-a-section.html" target="_blank" class="text-link">Book A Section</a></li>
                        <li class="xs--show"><div class="text-link">.</div></li>
                        <li class="xs--show"><a href="#" target="_blank" class="text-link">Tickets</a></li>
                    </ul>
                    <a aria-label="home" href="index.html" aria-current="page" class="nav-logo w-inline-block w--current">
                        <img src="./assets/logo-color.png" loading="lazy" alt="logo" class="nav-logo w-inline-block w--current" /> 
                    </a>
                    <ul role="list" class="nav-list is--end xs--hide w-list-unstyled">
                        <li><a href="#" class="text-link">Tickets</a></li>
                        
                        
                        <li><div class="text-link">.</div></li>
                        <li><a href="our-story.html" target="_blank" class="text-link">Our Story</a></li>
                    </ul>
                </div>
                <div class="nav-bottom">
                    <ul role="list" class="nav-list w-list-unstyled">
                        <li><a href="our-story.html" target="_blank" class="text-link">Our Story</a></li>
                        <li><div class="text-link">.</div></li>
                        <li><a href="https://www.instagram.com/afrobeatsandbrunch?igsh=eGZoZzB3ZWd2cHBh" target="_blank" class="text-link">Instagram</a></li>
                    </ul>
                    <ul role="list" class="nav-list is--end w-list-unstyled">
                        
                        
                        <li><div class="text-link">Terms</div></li>
                        <li><div class="text-link">.</div></li>
                        <li><div class="text-link">privacy</div></li>
                    </ul>
                </div>
            </nav>
            <div class="overlay-w">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1440 1440" fill="none" class="overlay-circle">
                    <path
                        d="M883.5 720C883.5 741.471 879.271 762.732 871.054 782.569C862.838 802.405 850.794 820.43 835.612 835.612C820.43 850.794 802.405 862.838 782.569 871.054C762.732 879.271 741.471 883.5 720 883.5C698.529 883.5 677.268 879.271 657.431 871.054C637.595 862.838 619.57 850.794 604.388 835.612C589.206 820.43 577.162 802.405 568.946 782.569C560.729 762.732 556.5 741.471 556.5 720C556.5 698.529 560.729 677.268 568.946 657.431C577.162 637.595 589.206 619.57 604.388 604.388C619.57 589.206 637.595 577.162 657.431 568.946C677.268 560.729 698.529 556.5 720 556.5C741.471 556.5 762.732 560.729 782.569 568.946C802.405 577.162 820.43 589.206 835.612 604.388C850.794 619.57 862.838 637.595 871.054 657.431C879.271 677.268 883.5 698.529 883.5 720L883.5 720Z"
                        stroke="currentColor"
                        stroke-dasharray="1050"
                        stroke-dashoffset="-1050"
                    ></path>
                    <g STYLE="mix-blend-mode:difference" class="c--2">
                        <path
                            d="M720 367.7C766.265 367.7 812.076 376.813 854.819 394.517C897.562 412.222 936.399 438.172 969.114 470.886C1001.83 503.6 1027.78 542.438 1045.48 585.181C1063.19 627.924 1072.3 673.735 1072.3 720C1072.3 766.265 1063.19 812.076 1045.48 854.819C1027.78 897.562 1001.83 936.4 969.113 969.114C936.399 1001.83 897.562 1027.78 854.819 1045.48C812.076 1063.19 766.264 1072.3 720 1072.3C673.735 1072.3 627.923 1063.19 585.18 1045.48C542.437 1027.78 503.6 1001.83 470.886 969.114C438.172 936.4 412.222 897.562 394.517 854.819C376.812 812.076 367.7 766.265 367.7 720C367.7 673.735 376.812 627.924 394.517 585.181C412.222 542.438 438.172 503.6 470.886 470.886C503.6 438.172 542.438 412.222 585.181 394.517C627.924 376.813 673.735 367.7 720 367.7L720 367.7Z"
                            stroke="currentColor"
                            stroke-dasharray="2220"
                            stroke-dashoffset="2220"
                        ></path>
                    </g>
                    <g STYLE="mix-blend-mode:difference">
                        <path
                            d="M1255.39 720C1255.39 790.308 1241.54 859.927 1214.63 924.883C1187.73 989.839 1148.29 1048.86 1098.57 1098.57C1048.86 1148.29 989.839 1187.73 924.883 1214.63C859.927 1241.54 790.308 1255.39 720 1255.39C649.692 1255.39 580.073 1241.54 515.117 1214.63C450.161 1187.73 391.14 1148.29 341.425 1098.57C291.71 1048.86 252.274 989.839 225.368 924.883C198.462 859.927 184.614 790.308 184.614 720C184.614 649.692 198.462 580.073 225.368 515.117C252.274 450.161 291.71 391.14 341.425 341.425C391.14 291.71 450.161 252.274 515.117 225.368C580.073 198.462 649.692 184.614 720 184.614C790.308 184.614 859.927 198.462 924.883 225.368C989.839 252.274 1048.86 291.71 1098.57 341.425C1148.29 391.14 1187.73 450.161 1214.63 515.117C1241.54 580.073 1255.39 649.692 1255.39 720L1255.39 720Z"
                            stroke="currentColor"
                            stroke-dasharray="3400"
                            stroke-dashoffset="-3400"
                        ></path>
                    </g>
                    <g STYLE="mix-blend-mode:difference" class="c--2">
                        <path
                            d="M1439.5 720C1439.5 814.486 1420.89 908.047 1384.73 995.341C1348.57 1082.63 1295.58 1161.95 1228.76 1228.76C1161.95 1295.58 1082.63 1348.57 995.341 1384.73C908.047 1420.89 814.486 1439.5 720 1439.5C625.514 1439.5 531.953 1420.89 444.659 1384.73C357.365 1348.57 278.048 1295.58 211.237 1228.76C144.425 1161.95 91.4269 1082.63 55.2687 995.341C19.1104 908.047 0.499992 814.486 0.5 720C0.500008 625.514 19.1104 531.953 55.2687 444.659C91.427 357.365 144.425 278.048 211.237 211.237C278.048 144.425 357.366 91.4269 444.659 55.2686C531.953 19.1104 625.514 0.499988 720 0.5C814.486 0.500012 908.047 19.1104 995.341 55.2687C1082.63 91.427 1161.95 144.425 1228.76 211.237C1295.58 278.049 1348.57 357.366 1384.73 444.659C1420.89 531.953 1439.5 625.514 1439.5 720L1439.5 720Z"
                            stroke="currentColor"
                            stroke-dasharray="4600"
                            stroke-dashoffset="4600"
                        ></path>
                    </g>
                </svg>
                <div class="overlay-center">
                    <div class="o-center">
                        <div class="o-center__line"></div>
                        <div class="o-center__line is--v"></div>
                    </div>
                </div>
                <div class="load-text">0</div>
            </div>
            <main class="main-w">
                <div class="bg-vid__wrap">
                    <div
                        data-poster-url="./assets/davido-hero-video-one.mp4"
                        data-video-urls="./assets/davido-hero-video-one.mp4
                        ,/assets/davido-hero-video-one.mp4"
                        data-autoplay="true"
                        data-loop="true"
                        data-wf-ignore="true"
                        class="bg-vid w-background-video w-background-video-atom"
                    >
                        <video
                            id="f53d5f73-15b8-7c25-1ddd-078d405a3cc7-video"
                            autoplay=""
                            loop=""
                            style="background-image: url('./assets/homepage-preview.png');"
                            muted=""
                            playsinline=""
                            data-wf-ignore="true"
                            data-object-fit="cover"
                        >
                            <source src="./assets/davido-hero-video-one.mp4" data-wf-ignore="true" />
                            <source src="./assets/davido-hero-video-one.mp4" data-wf-ignore="true" />
                        </video>
                    </div>
                </div>
                <section id="hero" class="hero">
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </section>
                <section class="section">
                    <div class="full-h center">
                        <div class="main-c p-pad">
                            <div data-intro="" class="intro-w">
                                <div class="intro-bracket is--left">(</div>
                                <div class="intro-title__w is--left"><h2 data-split="chars" class="h-med">NYC’s Sunday</h2></div>
                                <div data-draw="" class="intro-img">
                                    <img
                                        src="./assets/669a2107f27a8428fbcbaf95_intro-img-p-500.webp"
                                        loading="lazy"
                                        sizes="(max-width: 479px) 92vw, 24vw"
                                        srcset="
                                            ./assets/669a2107f27a8428fbcbaf95_intro-img-p-500.webp  500w,
                                            ./assets/669a2107f27a8428fbcbaf95_intro-img-p-500.webp  800w,
                                           ./assets/669a2107f27a8428fbcbaf95_intro-img-p-500.webp       1038w
                                        "
                                        alt="lady-with-tongue-out-vibing-to-afro-beat"
                                        class="cover-img"
                                    />
                                </div>
                                <div class="intro-title__w"><h2 data-split="chars" class="h-med">Night Vibe</h2></div>
                                <div class="intro-bracket is--right">)</div>
                            </div>
                        </div>
                    </div>
                    <div class="v-80"></div>
                </section>
                  
                  <section id="music" class="section">
                    <div class="main-c p-pad">
                        <div class="v-160"></div>
                        <div class="vinyl-track">
                            <div class="vinyl-section">
                                <div class="vinyl-inner">
                                    <div class="vinyl-w">
                                        <div
                                            data-poster-url="./assets/video-2-preview.png"
                                            data-video-urls="./assets/home-2.mov,
                                            ./assets/home-2.mov"
                                            data-autoplay="true"
                                            data-loop="true"
                                            data-wf-ignore="true"
                                            class="vinyl-vid w-background-video w-background-video-atom"
                                        >
                                            <video
                                                id="4fa07bad-25f4-a2d9-0be6-65a6b7e5ffbc-video"
                                                autoplay=""
                                                loop=""
                                                style="background-image: url('./assets/video-2-preview.png');"
                                                muted=""
                                                playsinline=""
                                                data-wf-ignore="true"
                                                data-object-fit="cover"
                                            >
                                                <source src="./assets/home-2.mov" data-wf-ignore="true" />
                                                <source src="./assets/home-2.mov" data-wf-ignore="true" />
                                            </video>
                                        </div>
                                        <div class="vinyl-h is--1"><h3 class="vinyl-heading">VIBES</h3></div>
                                        <div class="vinyl-h is--2"><h3 class="vinyl-heading">U</h3></div>
                                        <div class="vinyl-h is--3"><h3 class="vinyl-heading">CAN</h3></div>
                                        <div class="vinyl-h is--4"><h3 class="vinyl-heading">FEEL</h3></div>
                                    </div>
                                    <a href="#" target="_blank" class="vinyl-cta is--br w-inline-block">
                                        <div class="u--rel">
                                            <div>RESERVE<br /></div>
                                            <div>SECTIONS</div>
                                        </div>
                                        <div class="arrow-w">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" class="arrow is--abs">
                                                <path
                                                    fill-rule="evenodd"
                                                    clip-rule="evenodd"
                                                    d="M19.672 0L20 18.4638L15.9549 18.538L15.7486 6.92581L2.85831 20L0 17.091L12.7845 4.12412L1.79856 4.14594L1.79065 0.0355102L19.672 0Z"
                                                    fill="currentColor"
                                                ></path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" class="arrow is--rel">
                                                <path
                                                    fill-rule="evenodd"
                                                    clip-rule="evenodd"
                                                    d="M19.672 0L20 18.4638L15.9549 18.538L15.7486 6.92581L2.85831 20L0 17.091L12.7845 4.12412L1.79856 4.14594L1.79065 0.0355102L19.672 0Z"
                                                    fill="currentColor"
                                                ></path>
                                            </svg>
                                        </div>
                                    </a>
                                    <a href="#" target="_blank" class="vinyl-cta is--tl w-inline-block">
                                        <div class="u--rel">
                                            <div>PURCHASE<br /></div>
                                            <div>TICKET</div>
                                        </div>
                                        <div class="arrow-w">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" class="arrow is--abs">
                                                <path
                                                    fill-rule="evenodd"
                                                    clip-rule="evenodd"
                                                    d="M19.672 0L20 18.4638L15.9549 18.538L15.7486 6.92581L2.85831 20L0 17.091L12.7845 4.12412L1.79856 4.14594L1.79065 0.0355102L19.672 0Z"
                                                    fill="currentColor"
                                                ></path>
                                            </svg>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" class="arrow is--rel">
                                                <path
                                                    fill-rule="evenodd"
                                                    clip-rule="evenodd"
                                                    d="M19.672 0L20 18.4638L15.9549 18.538L15.7486 6.92581L2.85831 20L0 17.091L12.7845 4.12412L1.79856 4.14594L1.79065 0.0355102L19.672 0Z"
                                                    fill="currentColor"
                                                ></path>
                                            </svg>
                                        </div>
                                    </a>

</div>
                            </div>
                        </div>
                    </div>
                </section>

<section class="section">
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
             <section id="videos" class="section clip">
                    <div class="f-track">
                        <div class="f-item is--first">
                            <div class="f-item__inner is--first">
                                <div class="single-video-player">
                                    <div class="cover">
                                        <video 
                                            class="video" 
                                            autoplay 
                                            loop 
                                            muted 
                                            playsinline 
                                         >
                                            <source src="./assets/footer-video-1.mp4" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        <style>
                                            video.video {
                                                position: absolute;
                                                top: 50%;
                                                left: 50%;
                                                width: 100vw;
                                                height: 100vh;
                                                transform: translate(-50%, -50%);
                                            }
                            
                                            @media (min-aspect-ratio: 16/9) {
                                                video.video {
                                                    height: 68vw;
                                                }
                                            }
                                            @media (max-aspect-ratio: 16/9) {
                                                video.video {
                                                    width: 177.78vh;
                                                }
                                            }
                                        </style>
                                    </div>
                                </div>
                            </div>
                            
                        </div>

<div class="f-item">
                            <div class="f-item__inner">
                                <div class="single-video-player">
                                    <div class="cover">
                                        <video 
                                            class="video wide" 
                                            autoplay 
                                            loop 
                                            muted 
                                            playsinline 
                                             >
                                            <source src="./assets/footer-video-2.mp4" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        <style>
                                            video.video.wide {
                                                width: 160vw;
                                                height: 140vh;
                                            }
                        
                                            @media (min-aspect-ratio: 16/9) {
                                                video.video.wide {
                                                    height: 76vw;
                                                }
                                            }
                        
                                            @media (max-aspect-ratio: 16/9) {
                                                video.video.wide {
                                                    width: 240vh;
                                                }
                                            }
                                        </style>
                                    </div>
                                </div>
                            </div>
                        </div>

</div>
                    <div id="store" class="bottom-anchor"></div>
                </section>
            </main>
            <footer class="footer-w">
                <a href="#" target="_blank" class="footer-marquee w-inline-block">
                    <div data-marquee-speed="15" data-marquee-direction="left" data-marquee-status="inverted" class="marquee">
                        <div class="marquee-w">
                            <div class="marquee-inner">
                                <div class="h-marquee">Incredible.Vibes •</div>
                                <div class="h-marquee">Amazing.Food •</div>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="footer-btm">
                    <div class="footer-btm__copy"><div class="text-link">© Afrobeats & Brunch - All Rights Reserved</div></div>
                      <img src="./assets/logo-color.png" loading="lazy" alt="logo" class="nav-logo w-inline-block w--current" /> 
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                </div>
            </footer>
        </div>
        <script
            src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=664ca9f72f08b4a579c93221"
            type="text/javascript"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
            crossorigin="anonymous"
        ></script>
        <script src="https://cdn.prod.website-files.com/664ca9f72f08b4a579c93221/js/webflow.262c203a5.js" type="text/javascript"></script>
        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
        <script defer src="https://unpkg.com/lenis@1.1.5/dist/lenis.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/gh/ilja-van-eck/foams/src/gsap/SplitText.min.js"></script>
        <script defer src="https://player.vimeo.com/api/player.js"></script>
        <script defer src="https://cdn.jsdelivr.net/gh/ilja-van-eck/foams/script/script@1.2.min.js"></script>
        
    </body>
</html>