Tul xxx Tul

Viewing: index.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Landing page vibrante para raperos latinos, shows, batallas y lanzamientos exclusivos.">
    <meta name="keywords" content="rap, hip hop, raperos, freestyle, música urbana">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Raperos Unidos | Ritmo Callejero</title>
    <meta name="theme-color" content="#ff4f81">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="icon" type="image/png" href="img/favicon.png">
    <link rel="manifest" href="manifest.webmanifest">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Css Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="css/barfiller.css" type="text/css">
    <link rel="stylesheet" href="css/nowfont.css" type="text/css">
    <link rel="stylesheet" href="css/rockville.css" type="text/css">
    <link rel="stylesheet" href="css/magnific-popup.css" type="text/css">
    <link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">

    <style>
        .track__filter {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .track__tab {
            background: rgba(255, 255, 255, 0.18);
            border: 1.5px solid rgba(255, 255, 255, 0.45);
            color: #0d0d0d;
            padding: 10px 28px;
            border-radius: 999px;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
        }

        .track__tab:not(.active) {
            opacity: 0.95;
            color: #0d0d0d;
        }

        .track__tab:hover,
        .track__tab.active {
            background: #ff4f81;
            border-color: #ff4f81;
            color: #0d0d0d;
            opacity: 1;
            box-shadow: 0 12px 28px rgba(255, 79, 129, 0.35);
        }

        .track__list {
            display: none;
        }

        .track__list.active {
            display: block;
        }

        .footer.footer--normal {
            margin-top: 0 !important;
            height: auto;
            padding-top: 180px;
        }

        .footer__logo {
            text-align: center;
            margin-bottom: 50px;
        }

        .footer__logo img {
            max-width: 180px;
            width: 100%;
            height: auto;
        }

        .footer__install {
            text-align: center;
            margin-top: 40px;
        }

        .pwa-install-btn {
            display: none;
            align-items: center;
            gap: 12px;
            padding: 14px 28px;
            background: linear-gradient(135deg, #ff4f81, #ff8058);
            border: none;
            border-radius: 999px;
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 1px;
            text-transform: uppercase;
            box-shadow: 0 12px 24px rgba(255, 79, 129, 0.35);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .pwa-install-btn i {
            font-size: 18px;
            color: inherit;
        }

        .pwa-install-btn.active {
            display: inline-flex;
        }

        .pwa-install-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 28px rgba(255, 79, 129, 0.45);
        }

        .pwa-install-btn:active {
            transform: translateY(0);
            box-shadow: 0 10px 20px rgba(255, 79, 129, 0.35);
        }

        /* Services video vertical */
        .services__left--video {
            height: 640px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(1200px 600px at 50% 0%, rgba(92,0,206,0.25), transparent 60%), #0d0720;
        }

        .services__video_frame {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .services__video {
            height: 100%;
            width: auto;
            max-width: 100%;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.35);
        }

        .video-sound-toggle {
            position: absolute;
            right: 16px;
            bottom: 16px;
            width: 38px;
            height: 38px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.08);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
            cursor: pointer;
            transition: background .2s ease, transform .2s ease;
        }

        .video-sound-toggle:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
        .video-sound-toggle i { font-size: 16px; }

        .header__logo img {
            max-width: 220px;
            width: 100%;
            height: auto;
        }

        @media (max-width: 991.98px) {
            .header__logo {
                padding: 12px 0 15px;
            }

            .header__logo img {
                max-width: 160px;
            }
        }

        @media (max-width: 767.98px) {
            .header__logo {
                padding: 8px 0 10px;
            }

            .header__logo img {
                max-width: 120px;
            }

            .slicknav_menu {
                position: absolute;
                top: 0;
                right: 10px;
                height: 100%;
                display: flex;
                align-items: center;
                padding: 0 6px;
                background: transparent;
            }

            .slicknav_btn {
                position: relative;
                top: 0;
                right: 0;
                margin: 0;
                padding: 9px 14px;
                border-radius: 999px;
                background: #ff4f81;
                box-shadow: 0 6px 18px rgba(255, 79, 129, 0.35);
            }

            .services__left--video {
                height: auto;
                padding: 0;
            }

            .services__video_frame {
                padding: 0;
            }

            .services__video {
                width: 100%;
                height: auto;
                max-height: 82vh;
                border-radius: 0;
            }

            .video-sound-toggle {
                right: 16px;
                bottom: 16px;
            }
        }

        @media (max-width: 575.98px) {
            .header__logo img {
                max-width: 90px;
            }

            .services__video {
                max-height: 88vh;
            }
        }
    </style>
</head>

<body>
    <!-- Page Preloder -->
    <div id="preloder">
        <div class="loader"></div>
    </div>

    <!-- Header Section Begin -->
    <header class="header">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-2">
                    <div class="header__logo">
                        <a href="./index.html"><img src="img/logo.png" alt=""></a>
                    </div>
                </div>
                <div class="col-lg-10 col-md-10">
                    <div class="header__nav">
                        <nav class="header__menu mobile-menu">
                            <ul>
                                <li class="active"><a href="./index.html">Inicio</a></li>
                                <li><a href="./about.html">Nosotros</a></li>
                                <li><a href="./tours.html">Tours</a></li>
                                <li><a href="./videos.html">Videos</a></li>
                                <li><a href="./contact.html">Contactos</a></li>
                            </ul>
                        </nav>
                        <div class="header__right__social">
                            <a href="#"><i class="fa-brands fa-whatsapp"></i></a>
                            <a href="#"><i class="fa-brands fa-tiktok"></i></a>
                            <a href="#"><i class="fa-brands fa-instagram"></i></a>
                            <a href="#"><i class="fa-brands fa-facebook"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="mobile-menu-wrap"></div>
        </div>
    </header>
    <!-- Header Section End -->

    <!-- Hero Section Begin -->
    <section class="hero spad set-bg" data-setbg="img/hero-bg.png">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="hero__text">
                        <h1>Siente el latido del barrio</h1>
                        <p>Sube el volumen y deja que el flow ilumine la noche. Rimas afiladas, beats
                            pesados y una vibra que enciende cualquier esquina.</p>
                        <a href="https://www.youtube.com/watch?v=hpaBG68l-Vk" class="play-btn video-popup"><i class="fa fa-play"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="linear__icon">
            <i class="fa fa-angle-double-down"></i>
        </div>
    </section>
    <!-- Hero Section End -->

    <!-- Event Section Begin -->
    <section class="event spad">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title">
                        <h2>Próximos shows</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="event__slider owl-carousel">
                    <div class="col-lg-4">
                        <div class="event__item">
                            <div class="event__item__pic set-bg" data-setbg="img/events/event-1.avif">
                                <div class="tag-date">
                                    <span>Nov 20, 2025</span>
                                </div>
                            </div>
                            <div class="event__item__text">
                                <h4>Batalla de titanes</h4>
                                <p><i class="fa fa-map-marker"></i> Teatro al Aire Libre La Media Torta, Cra. 1 Este #18-01, Bogotá</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="event__item">
                            <div class="event__item__pic set-bg" data-setbg="img/events/event-2.jpg">
                                <div class="tag-date">
                                    <span>Dic 05, 2025</span>
                                </div>
                            </div>
                            <div class="event__item__text">
                                <h4>Noches de barrio</h4>
                                <p><i class="fa fa-map-marker"></i> Plaza de los Artesanos, Cra. 60 #63a-52, Bogotá</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="event__item">
                            <div class="event__item__pic set-bg" data-setbg="img/events/event-3.jpg">
                                <div class="tag-date">
                                    <span>Dic 18, 2025</span>
                                </div>
                            </div>
                            <div class="event__item__text">
                                <h4>Flow a la luna</h4>
                                <p><i class="fa fa-map-marker"></i> Bronx Distrito Creativo, Cl. 10 #15-18, Bogotá</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="event__item">
                            <div class="event__item__pic set-bg" data-setbg="img/events/event-2.jpg">
                                <div class="tag-date">
                                    <span>Ene 10, 2026</span>
                                </div>
                            </div>
                            <div class="event__item__text">
                                <h4>Versos sin cadenas</h4>
                                <p><i class="fa fa-map-marker"></i> Armando Records, Cra. 14a #83-38, Bogotá</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Event Section End -->

    <!-- About Section Begin -->
    <section class="about spad">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="about__pic">
                        <img src="img/about/about.png" alt="">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about__text">
                        <div class="section-title">
                            <h2>MC Luna Roja</h2>
                            <h1>Sobre mí</h1>
                        </div>
                        <p>Del underground a los escenarios más grandes, mantengo vivo el pulso del rap latino. Mis rimas cuentan historias reales, mis beats llevan el fuego del asfalto y cada show es un ritual de energía.</p>
                        <a href="contact.html" class="primary-btn">CONTÁCTAME</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- About Section End -->

    <!-- Services Section Begin -->
    <section class="services">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 p-0">
                    <div class="services__left services__left--video">
                        <div class="services__video_frame">
                            <video id="servicesVideo" class="services__video" src="img/video.mp4" autoplay muted loop playsinline webkit-playsinline></video>
                            <button id="servicesSoundToggle" class="video-sound-toggle" aria-pressed="true" aria-label="Activar o desactivar sonido">
                                <i class="fa-solid fa-volume-xmark"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 p-0">
                    <div class="row services__list">
                        <div class="col-lg-6 p-0 order-lg-1 col-md-6 order-md-1">
                            <div class="service__item deep-bg">
                                <img src="img/services/service-1.png" alt="">
                                <h4>Freestyle sessions</h4>
                                <p>Organizamos rondas de improvisación para que cada MC suelte barras con alma y actitud.</p>
                            </div>
                        </div>
                        <div class="col-lg-6 p-0 order-lg-2 col-md-6 order-md-2">
                            <div class="service__item">
                                <img src="img/services/service-2.png" alt="">
                                <h4>Clubs & rooftop</h4>
                                <p>Encendemos cualquier spot con sets cargados de hip hop, trap y ritmos urbanos.</p>
                            </div>
                        </div>
                        <div class="col-lg-6 p-0 order-lg-4 col-md-6 order-md-4">
                            <div class="service__item deep-bg">
                                <img src="img/services/service-4.png" alt="">
                                <h4>Talleres de lírica</h4>
                                <p>Pulimos tu pluma para que cada punchline conecte y cada verso deje huella.</p>
                            </div>
                        </div>
                        <div class="col-lg-6 p-0 order-lg-3 col-md-6 order-md-3">
                            <div class="service__item">
                                <img src="img/services/service-3.png" alt="">
                                <h4>Eventos urbanos</h4>
                                <p>Curamos experiencias culturales con grafiti, breakdance y música consciente.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Services Section End -->

    <!-- Track Section Begin -->
    <section class="track spad">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="section-title">
                        <h2>Últimos tracks</h2>
                        <h1>Podcast callejero</h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="track__filter">
                        <button class="track__tab active" data-target="canciones"><i class="fa-solid fa-music"></i> Canciones</button>
                        <button class="track__tab" data-target="pistas"><i class="fa-solid fa-headphones"></i> Pistas</button>
                    </div>
                </div>
            </div>
            <br>
            <div class="row justify-content-center">
                <div class="col-xl-10 col-lg-12 col-md-12 p-0">
                    <div class="track__content nice-scroll track__list active" data-list="canciones">
                        <div class="single_player_container">
                            <h4>BZRP: Esto lo hago pa' divertirme</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_c1"
                                data-url="music-files/canciones/BZRP Esto lo hago pa divertirme.mp3"></div>
                            <div class="jp-audio jp_container_c1" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>Canserbero - Es Épico</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_c2"
                                data-url="music-files/canciones/Canserbero - Es Épico.mp3"></div>
                            <div class="jp-audio jp_container_c2" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>Drake - God's Plan</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_c3"
                                data-url="music-files/canciones/Drake - God's Plan.mp3"></div>
                            <div class="jp-audio jp_container_c3" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>Eminem - Without Me</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_c4"
                                data-url="music-files/canciones/Eminem - Without Me.mp3"></div>
                            <div class="jp-audio jp_container_c4" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>LMFAO - Party Rock Anthem</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_c5"
                                data-url="music-files/canciones/party.mp3"></div>
                            <div class="jp-audio jp_container_c5" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>LMFAO - Sexy and I Know It</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_c6"
                                data-url="music-files/canciones/LMFAO - Sexy and I Know It.mp3"></div>
                            <div class="jp-audio jp_container_c6" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="track__content nice-scroll track__list" data-list="pistas">
                        <div class="single_player_container">
                            <h4>Beat 01 - Amanecer en Usaquén</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_p1"
                                data-url="music-files/pistas/1.mp3"></div>
                            <div class="jp-audio jp_container_p1" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>Beat 02 - Subterráneo Suba</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_p2"
                                data-url="music-files/pistas/2.mp3"></div>
                            <div class="jp-audio jp_container_p2" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>Beat 03 - Calle 85 Bounce</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_p3"
                                data-url="music-files/pistas/3.mp3"></div>
                            <div class="jp-audio jp_container_p3" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>Beat 04 - Bicicletas y versos</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_p4"
                                data-url="music-files/pistas/4.mp3"></div>
                            <div class="jp-audio jp_container_p4" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>Beat 05 - Parque Virrey Vibes</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_p5"
                                data-url="music-files/pistas/5.mp3"></div>
                            <div class="jp-audio jp_container_p5" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_player_container">
                            <h4>Beat 06 - Medianoche en la Séptima</h4>
                            <div class="jp-jplayer jplayer" data-ancestor=".jp_container_p6"
                                data-url="music-files/pistas/6.mp3"></div>
                            <div class="jp-audio jp_container_p6" role="application" aria-label="media player">
                                <div class="jp-gui jp-interface">
                                    <div class="player_controls_box">
                                        <button class="jp-play player_button" tabindex="0"></button>
                                    </div>
                                    <div class="player_bars">
                                        <div class="jp-progress">
                                            <div class="jp-seek-bar">
                                                <div>
                                                    <div class="jp-play-bar">
                                                        <div class="jp-current-time" role="timer" aria-label="time">0:00</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="jp-duration ml-auto" role="timer" aria-label="duration">00:00</div>
                                    </div>
                                    <div class="jp-volume-controls">
                                        <button class="jp-mute" tabindex="0"><i class="fa fa-volume-down"></i></button>
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value" style="width: 0%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Track Section End -->

    <!-- Footer Section Begin -->
    <footer class="footer footer--normal spad set-bg" data-setbg="img/footer-bg.png">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="footer__address">
                        <ul>
                            <li>
                                <i class="fa fa-phone"></i>
                                <p>Teléfono</p>
                                <h6>+57 350 5849143</h6>
                            </li>
                            <li>
                                <i class="fa fa-envelope"></i>
                                <p>Email</p>
                                <h6>raperosunidos@gmail.com</h6>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 offset-lg-1 col-md-6">
                    <div class="footer__social">
                        <h2>Raperos Unidos</h2>
                        <div class="footer__social__links">
                            <a href="#"><i class="fa fa-whatsapp"></i></a>
                            <a href="#"><i class="fa fa-tiktok"></i></a>
                            <a href="#"><i class="fa fa-instagram"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 offset-lg-1 col-md-6">
                    <div class="footer__logo">
                        <img src="img/logo.png" alt="Logo de Raperos Unidos">
                    </div>
                </div>
            </div>
            <div class="footer__install">
                <button class="pwa-install-btn" type="button" hidden>
                    <i class="fa-solid fa-mobile-screen-button"></i>
                    Instalar app
                </button>
            </div>
            <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
			<div class="footer__copyright__text">
				<p>Copyright &copy; <script>document.write(new Date().getFullYear());</script> Raperos Unidos. <i aria-hidden="true"></i> Creado por <a href="https://aircan.me" target="_blank">Aircan</a></p>
			</div>
			<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
        </div>
    </footer>
    <!-- Footer Section End -->

    <!-- Js Plugins -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <script src="js/jquery.barfiller.js"></script>
    <script src="js/jquery.countdown.min.js"></script>
    <script src="js/jquery.slicknav.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/main.js"></script>

    <!-- Music Plugin -->
    <script src="js/jquery.jplayer.min.js"></script>
    <script src="js/jplayerInit.js"></script>
    <script src="js/pwa.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tabs = document.querySelectorAll('.track__tab');
            const lists = document.querySelectorAll('.track__list');

            tabs.forEach((tab) => {
                tab.addEventListener('click', () => {
                    const target = tab.dataset.target;

                    tabs.forEach((t) => t.classList.toggle('active', t === tab));
                    lists.forEach((list) => {
                        list.classList.toggle('active', list.dataset.list === target);
                    });
                });
            });
        });
    </script>
</body>

</html>
User / IP	: 216.73.216.227
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64