Tul xxx Tul

Viewing: contact.html

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

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Conecta con Raperos Unidos para bookings, colaboraciones y experiencias urbanas en toda Latinoamérica.">
    <meta name="keywords" content="rap, contacto, booking, hip hop, raperos">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Raperos Unidos | Contacto</title>

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

    <!-- 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>
        .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; }
        .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); }
        }
        @media (max-width: 575.98px) {
            .header__logo img { max-width: 90px; }
        }
    </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><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 class="active"><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 -->

    <!-- Contact Section Begin -->
    <section class="contact spad">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="contact__address">
                        <div class="section-title">
                            <h2>Info de contacto</h2>
                        </div>
                        <p>Estamos listos para llevar el ritmo callejero a tu escenario. Escríbenos para bookings,
                            colaboraciones o proyectos comunitarios con esencia hip hop.</p>
                        <ul>
                            <li>
                                <i class="fa fa-map-marker"></i>
                                <h5>Dirección</h5>
                                <p>Avenida Jiménez #4-66, Edificio Rimas, Bogotá</p>
                            </li>
                            <li>
                                <i class="fa fa-phone"></i>
                                <h5>Teléfono</h5>
                                <span>+57 350 5849143</span>
                            </li>
                            <li>
                                <i class="fa fa-envelope"></i>
                                <h5>Correo</h5>
                                <p>raperosunidos@gmail.com</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="contact__form">
                        <div class="section-title">
                            <h2>Hablemos de ritmo</h2>
                        </div>
                        <p>Cuéntanos tu idea: desde festivales y batallas freestyle hasta talleres para tu comunidad.
                            Responderemos con la misma pasión con la que subimos al escenario.</p>
                        <form id="contactWhatsappForm">
                            <div class="input__list">
                                <input type="text" id="contactName" name="name" placeholder="Nombre" required>
                                <input type="tel" id="contactPhone" name="phone" placeholder="Tu número de teléfono" required>
                                <input type="text" id="contactProject" name="project" placeholder="Red o proyecto">
                            </div>
                            <textarea id="contactMessage" name="message" placeholder="Cuéntanos los detalles" required></textarea>
                            <button type="submit" class="site-btn">ENVIAR MENSAJE</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Contact 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>
            <!-- 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>
        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('contactWhatsappForm');
            if (!form) return;

            form.addEventListener('submit', (event) => {
                event.preventDefault();

                const name = form.querySelector('#contactName').value.trim();
                const phone = form.querySelector('#contactPhone').value.trim();
                const project = form.querySelector('#contactProject').value.trim();
                const message = form.querySelector('#contactMessage').value.trim();

                if (!name || !phone || !message) {
                    alert('Por favor completa tu nombre, teléfono y mensaje antes de enviar.');
                    return;
                }

                const whatsappNumber = '573505849143';
                const formattedMessage = [
                    '🔥 *Nuevo mensaje desde "Hablemos de ritmo"*',
                    '',
                    `👤 *Nombre:* ${name}`,
                    `📱 *Teléfono:* ${phone}`,
                    `🎤 *Red o proyecto:* ${project || 'No proporcionado'}`,
                    '',
                    '📝 *Mensaje:*',
                    message
                ].join('\n');

                const whatsappURL = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(formattedMessage)}`;
                window.open(whatsappURL, '_blank');
                form.reset();
            });
        });
    </script>
</body>

</html>
User / IP	: 216.73.216.217
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