

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>STEAMPUNK DJ'S</title>
    <meta charset="UTF-8" />
    <meta
      name="description"
      content="STEAMPUNK DJ'S - WEDDINGS CORPORATE EVENTS"
    />
    <meta
      name="keywords"
      content="dj, wedding, entertainment, party, master of ceremony, corporate, compair, PA Hire, festiville, stage lighting, Northern Ireland, Co.Down"
    />
   <!-- Favicon para todos los navegadores -->
  <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- formato .ico clásico -->
  <link rel="icon" href="assets/images/icon-y.svg" type="image/png"> <!-- formato PNG -->
  <link rel="icon" href="assets/images/icon-y.svg" type="image/svg+xml"> <!-- formato SVG moderno -->

  <!-- Apple Touch Icon (iOS) -->
  <link rel="apple-touch-icon" href="assets/images/icon-y.svg">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/images/icon1-180.png"> <!-- opcional versión específica -->

  <!-- Favicons para Android y navegadores modernos -->
  <link rel="manifest" href="site.webmanifest"> <!-- opcional, para PWA -->
  <meta name="theme-color" content="#ffffff"> <!-- color de la barra de navegación en móviles -->

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Girassol&family=Rye&family=Tenali+Ramakrishna&display=swap"
      rel="stylesheet"
    />
    <link href="styles/style.css" rel="stylesheet" />
    <link href="cover.css" rel="stylesheet" />
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
    <!-- External JS Scripts Files -->
    <script src="scripts/main.js" type="text/javascript"></script>
    <!-- Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />

    <script>
      $(document).ready(function () {
        $(".navbar-nav .nav-link").on("click", function () {
          $(".navbar-collapse").collapse("hide");
        });
      });
    </script>
  </head>

  <body>
    <!--NAVBAR-->

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
      <div class="container">
        <a
          class="navbar-brand"
          style="color: #bf9250; font-family: 'Rye', cursive"
          href="#"
          >STEAMPUNK DJ'S</a
        >
        <buttonS
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </buttonS>
        <div
          class="collapse navbar-collapse justify-content-end"
          id="navbarNav"
        >
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#experience">About Us</a>
            </li>
          <li class="nav-item">
              <a class="nav-link" href="#packages-section">Services</a>
            </li> 
            <!-- <li class="nav-item">
            <a class="nav-link" href="#artes">Videos</a>
          </li> -->
            <li class="nav-item">
              <a class="nav-link" href="contacto.php">Enquiry</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!--HOME PAGE-->

    <section class="d-flex h-100 bg-blue">
      <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <main class="px-3">
          <div
            class="banner-image position-relative text-center vh-100 bg-cover"
          >
            <div class="content p-3">
              <img
                id="logo"
                class="d-block mx-auto mb-4"
                src="images/logo.svg"
                alt=""
                width="250"
                height="250"
              />
              <h1
                class="name-heading"
                style="
                  color: #bf9250;
                  font-family: 'Rye', cursive;
                  font-size: 3rem;
                "
              >
                STEAMPUNK DJ'S
              </h1>
              <p class="text-center">
                &#x2756; WEDDINGS CORPORATE EVENTS &#x2756;
              </p>
             <div style="text-align: center; margin-top: 20px;">
  <a href="contacto.php"
     class="btn"
     style="
       background-color: #bf9250;
       color: #1a191b;
       font-family: 'Rye', cursive;
       font-size: 1.5rem;
       padding: 0.75rem 2rem;
       border-radius: 10px;
       text-decoration: none;
       display: inline-block;
     ">
    Enquiry
  </a>
</div>


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

    <section id="main-container" class="inner-radius-border inner-shadow">
      <div
        class="inner-yellow-radius-border inner-shadow text-center bg-whitegold"
        style="color: #1a191b"
      >
        <!-- SECTION 1

        <div id="bio">
          <h1 class="page-section-heading text-center title-marker2">
            Celebrating
          </h1>
          
          <h2 class="goldcolor">
            &boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;
          </h2>
        </div>

        <div>
          <img
            id="toast"
            class="d-block mx-auto mb-4"
            src="images/toast.jpg"
            alt=""
            width="400"
            height="auto"
          />
        </div>

        <div>
          <h1 class="page-section-heading text-center title-marker2">Since</h1>
          <h2 style="font-size: 3.5rem">2000</h2>

         
          <h2 class="goldcolor">
            &boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;
          </h2>

       

          Delivering entertainment for <br />
          <span class="text-highlight">Weddings</span>, <br />
          Parties, <br />
          <span class="text-highlight">Corporate events</span>, <br />
          Karaoke bars, <br />
          &amp; <span class="text-highlight">club nights.</span> <br />
          <br />
          <p style="color: #bf9250">&HorizontalLine;</p>
          <br />

          <div>
            <img
              id="globe"
              class="d-block mx-auto mb-4"
              src="images/disco.jpg"
              alt=""
              width="400"
              height="auto"
            />
-->
            <p id="experience" class="goldcolor">&diams;</p>
            <br />

            <div >

              <h1 class="page-section-heading text-center title-marker2"> About Us</h1>
              <h2 class="goldcolor">
                &boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;
              </h2>

              Based in Castlewellan Co. Down in Northern Ireland, we bring
              forth over two decades <br />
              of wedding entertainment experience. <br />
              <br />

              Our experties insures a perfectly constructed bespoke sound track
              and captivating light displays, <br />
              both thoughtfully provided for. <br />
              Our Skills transfer across occasions where entertainment is required, <br />
              ensuring that each event is painted with unforgettable and unique moments.
              <br />
              <br />

              For your convenience, the swiftest route to reach us is through
              <a href="https://steampunkdjs.com/contacto.php" target="_self"
                ><span class="text-highlight">Enquiry</span></a
              >, <br />
              See you on the dance floor.

              <br />
              <br />
              <p class="goldcolor">&diams;</p>
            </div>
          </div>

          <br />
        </div>

          </div>
        </section>
      </div>
    </section>
   
 <!-- ======================= -->
    <!--     NUEVA SECCIÓN DE VIDEO    -->
    <!-- ======================= -->
    <section id="video-section" class="text-center">
      <div class="container">
        <h1 class="page-section-heading text-center title-marker2">See Us In Action</h1>
        <h2 class="goldcolor">
          &boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;
        </h2>
        
        <!-- Contenedor responsive para el video -->
        <div class="ratio ratio-16x9">
          <video 
            controls 
            poster="images/poster-video.jpg"
            preload="metadata">
            <source src="videos/steampunk.mp4" type="video/mp4">
            Tu navegador no soporta el elemento de video.
          </video>
        </div>
      </div>
    </section>
    <h2 class="goldcolor">
          &boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;&boxh;
        </h2>
        
      <!-- ======================= -->
    <!--   SECCIÓN DE PAQUETES   -->
    
  <section id="packages-section" class="bg-blue py-5" style="margin-top: 50px;">
  <div class="container text-center">

    <!-- Paquete Platinum -->
    <div class="package-item my-4">
      <h2 class="package-title" style="color: #bf9250; font-family: 'Rye', cursive; font-size: 3rem;">THE PLATINUM EXPERIENCE</h2>
      <div class="package-details">
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">WALK IN MUSIC</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">MC</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">MUSIC DURING MEAL</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">MEAL ENTERTAINMENT</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">FIRST DANCE</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">DJ ENTIRE NIGHT</p>
      </div>
    </div>

    <!-- Paquete Gold -->
    <div class="package-item my-4">
      <h2 class="package-title" style="color: #bf9250; font-family: 'Rye', cursive; font-size: 3rem;">THE GOLD EXPERIENCE</h2>
      <div class="package-details">
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">WALK IN MUSIC</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">MC</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">MUSIC DURING MEAL</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">MEAL ENTERTAINMENT</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">FIRST DANCE</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">DJ AFTER THE BAND</p>
      </div>
    </div>

    <!-- Paquete Silver -->
    <div class="package-item my-4">
      <h2 class="package-title" style="color: #bf9250; font-family: 'Rye', cursive; font-size: 3rem;">THE SILVER EXPERIENCE</h2>
      <div class="package-details">
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">FIRST DANCE</p>
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">DJ ENTIRE NIGHT</p>
      </div>
    </div>

    <!-- Paquete Copper -->
    <div class="package-item my-4">
      <h2 class="package-title" style="color: #bf9250; font-family: 'Rye', cursive; font-size: 3rem;">THE COPPER EXPERIENCE</h2>
      <div class="package-details">
        <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">DJ AFTER THE BAND</p>
      </div>
    </div>

    <!-- Photo Booth -->
    <div class="package-item my-4">
      <h2 class="package-title" style="color: #bf9250; font-family: 'Rye', cursive; font-size: 3rem;">360 PHOTO BOOTH</h2>
      <p style="color: #bf9250; font-family: 'Rye', cursive; font-size: 1.5rem;">
        COST £350 OR AS ADD ON £250 TO PLATINUM OR GOLD PACKAGE. 2 HOURS AND INCLUDES PROPS.
      </p>
    </div>

  </div>
</section>


    <!-- FOOTER -->

    <footer id="footer" class="text-center">
      <h2
        class="text-uppercase text-center"
        style="color: #bf9250; font-family: 'Rye', cursive"
      >
        STEAMPUNK DJ'S
      </h2>
      <p style="font-variant: small-caps">
        &#x2756; Weddings Corporate Events &#x2756;
      </p>

      <p class="lead mb-0">
  &#9993; 
  <a href="mailto:steampunkinfo@icloud.com" style="color: #bf9250; text-decoration: none;">
    steampunkinfo@icloud.com
  </a>
  <br />
</p>

        &phone; +44 787 488 0406
      </p>

      <div class="text-center">
        <a
          href="https://wa.me/447874880406"
          target="_blank"
          class="fa fa-whatsapp"
        ></a>
        <a
          href="https://www.instagram.com/steampunk_djs/?igsh=MTg1YTF4MWFvM3J4eQ%3D%3D#"
          target="_blank"
          class="fa fa-instagram"
        ></a>
      </div>
<div class="page-section text-sm-center mb-0" id="copyright">
  <div class="container">
    <br>
    <p style="font-size: 1rem">
      by: <a href="https://nommadedigital.cl" target="_blank" rel="noopener noreferrer" style="color: pink;">
        nommadedigital.cl
      </a>
    </p>
    <br>
  </div>
</div>

</div>

      </div>
    </footer>
  </body>
</html>
