Página de Inicio

Que produciras hoy?

Beat Personalizado Mix & Master Próximamente…

Genera un ticket que sera atendido por un socio productor cuanto antes.

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


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página de Inicio</title>

<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=Kanit&display=swap" rel="stylesheet">


  <style>
 * {
      box-sizing: border-box;
    }


  

    body {
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-style: normal;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0px;
      text-align: center; 
      align-items: center;
      background-color: white ;
      }

    .container22 {
      width: 100%;
      max-width: 1200px;
      margin: 0px;
      text-align: left ;
      align-items: center;
       background-color: white ;
    }


    .container61 {
      width: 100%;
      max-width: 1200px;
      margin: 0px;
      text-align: left ;
      align-items: center;
       background-color: #240f03;
    }

 .container66 { color:white;
      width: 100%;
      max-width: 1200px;
      margin: 0px;
      text-align: left ;
      align-items: center;
       background-color: #bd7a22;
    }


    .container78 {
      width: 100%;
      max-width: 1200px;
      margin: 0px;
      text-align: left ;
      align-items: center;
       background-color: #240f03;
      color: white;
    }

    .header {
      kanit-regular 
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

      background-color: #f0f0f0;
      color: black;
      margin-bottom: 7px;
    }


 .p {
           font-family: sans-serif;    
           font-size: 6px ;  
           color: grey;
           margin-bottom: 10px;
 }


    .button1 {

font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
      background-color: #df621c;
      color: white ;
      border: none ;
      padding: 10px 10px ;
      font-size: 18px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.1s ease;
      width: 80%;
      max-width: 1000px;
      margin: 20px 15px;
      text-align: center;
    }

.button65 {

       font-family: "Kanit", sans-serif;
      font-weight: 400;
     font-style: normal;
      background-color: whithe;
      color: grey ;
      border: 4px ;
      border-color: black ;
      padding: 5px 8px ;
      font-size: 9px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.1s ease;
      width: 28vw ;
      max-width: 32vw;
       height: 36vw;
      max-height: 40vw;
      margin: 10px 5px;
      text-align: center;
    }


       .button22 {
        font-family: "Kanit", sans-serif;
        font-weight: 400;
        font-style: normal;
      background-color: #e79022;
      color: white;
      border: none;
      padding: 10px 0px;
      font-size: 18px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      width: 80%;
      max-width: 1000px;
      margin: 10px 15px;
      text-align: center;
    }
    .button25 {
        font-family: "Kanit", sans-serif;
        font-weight: 400;
        font-style: normal;
      background-color: #e79022;
      color: white;
      border: none;
      padding: 10px 0px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      width: 37vw ;
      max-width: 40vw;
      margin: 10px 15px;
      text-align: center;
    }

    .button1:hover {
      background-color: #4b2409;
    }
   .button22:hover {
      background-color: #4b2409;
    }
   .button65:hover {
      background-color: #4b2409;
    }
   .button25:hover {
      background-color: #4b2409;
    }


    .subheader {
      kanit-regular 
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
      text-align: left;
      background-color: white ;
      color: black ;
      margin-bottom: 7px;
    }

.subheader22 {
      kanit-regular 
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
      text-align: left;
      background-color: #1f1f1;
      color: #e79022;
      margin-bottom: 7px;
    }


         
      .carousel-container {
      background-color: white;
      position: relative;
      width: 100vw;
      overflow: hidden;
      padding: 10px 0;
    }

    .carousel {
      background-color: white;
      display: flex;
      gap: 10px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding: 10px;
    }

    .carousel::-webkit-scrollbar {
      display: none;
    }

    .carousel img {
      width: 20vw;
      height: 20vw;
      max-width: 80px;
      max-height: 80px;
      min-width: 50px;
      min-height: 50px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }

    .nav-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: #fff;
      border: none;
      padding: 8px 12px;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .nav-left {
      left: 5px;
    }

    .nav-right {
      right: 5px;
    }



   


 }
  </style>
</head>
<body>










  

  <div class="container">
  <header>
  <h1>Que produciras hoy?</h1> 
  </header>

<a href="go:beat-solic"><button class="button65"><img src="https://gomusiclabs.music.blog/wp-content/uploads/2023/08/1693090976760.png?w=1024" width=90vw 90vw 
 </a>

 <h4>Beat Personalizado
</h4>
 <p>Solicita un beat
</p>
</button>

 
<a href=go:"mixing"><button class="button65"><img src="https://gomusiclabs.music.blog/wp-content/uploads/2023/08/1693094914008.png?w=1024" width=90vw 90vw 
</a>
 <h4>Mix & Master
</h4>
 <p>Solicita un productor
</p>
</button>

<a href=go:"estudio"><button class="button65"><img src="https://gomusiclabs.music.blog/wp-content/uploads/2023/08/1693095181973.png?w=449" width=90vw 90vw  

<h4>Grabar Voz
</h4>
<p>Estudios asociados
</p> 

</button>
</a>
<br>

<p> Genera un ticket que sera atendido por un socio productor cuanto antes.</p> </div>




<div class="container66">
<subheader> <h2>Beats Exclusivos</h2> </subheader> </div>






  <div class="carousel-container">
    <button class="nav-button nav-left" onclick="scrollCarousel(-1)">⟨</button>
    <div class="carousel" id="carousel">
      <img src="https://placekitten.com/101/101" alt="gatito">
      <img src="https://placekitten.com/102/102" alt="gatito">
      <img src="https://placekitten.com/103/103" alt="gatito">
      <img src="https://placekitten.com/104/104" alt="gatito">
      <img src="https://placekitten.com/105/105" alt="gatito">
      <img src="https://placekitten.com/106/106" alt="gatito">
    <button class="nav-button nav-right" onclick="scrollCarousel(1)">⟩</button>

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



<div class="container61">
<subheader class="subheader22">
<h4>Productores Destacados </h4> 
<p> Solicita un beat a un productor destacado. Productores de esta seccion validan la calidad de su trabajo enviando sus portfolios a Beat Labs.  
</subheader> 


  <div class="carousel-container">
    <button class="nav-button nav-left" onclick="scrollCarousel(-1)">⟨</button>
    <div class="carousel" id="carousel">
      <img src="https://placekitten.com/101/101" alt="gatito">
      <img src="https://placekitten.com/102/102" alt="gatito">
      <img src="https://placekitten.com/103/103" alt="gatito">
      <img src="https://placekitten.com/104/104" alt="gatito">
      <img src="https://placekitten.com/105/105" alt="gatito">
      <img src="https://placekitten.com/106/106" alt="gatito">
    </div>
    <button class="nav-button nav-right" onclick="scrollCarousel(1)">⟩</button>
  </div>
</div>

  


    





  <script>
    function scrollCarousel(direction) {
      const carousel = document.getElementById('carousel');
      const scrollAmount = carousel.offsetWidth * 0.5; // desplaza la mitad del ancho visible
      carousel.scrollBy({
        left: direction * scrollAmount,
        behavior: 'smooth'
      });
    }
  </script>

</body>
</html>

Que hace BEAT LABS por vos?Descubre más

Problemas con el pedidoCONTACTARNOS

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


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página de Inicio</title>

<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=Kanit&display=swap" rel="stylesheet">


  <style>


    body {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
     
 

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0px;
      text-align: center; 
      align-items: center;
      background-color: white ;
      }

    .container22 {
      width: 100%;
      max-width: 1200px;
      margin: 0px;
      text-align: left ;
      align-items: center;
       background-color: white ;
    }

    .header {
      kanit-regular 
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

      background-color: #f0f0f0;
      color: black;
      margin-bottom: 7px;
    }

    .button1 {

font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;

      background-color: #CC3300 ;
      color: white ;
      border: none ;
      padding: 10px 10px ;
      font-size: 18px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.1s ease;
      width: 80%;
      max-width: 1000px;
      margin: 20px 15px;
      text-align: center;
    }

       .button22 {
font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;

      background-color: pink;
      color: white;
      border: none;
      padding: 10px 0px;
      font-size: 18px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      width: 80%;
      max-width: 1000px;
      margin: 10px 15px;
      text-align: center;
    }

    .button:hover {
      background-color: orange ;
    }

    .subheader {
      kanit-regular 
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-style: normal;
}

      text-align: left;
      background-color: white ;
      color: black ;
      margin-bottom: 7px;
    }

    .carousel {
      width: 100%;
      overflow: hidden;
      margin-top: 10px;
    }

    .carousel-images {
      display: flex;
      transition: transform 1s ease;
    }

    .carousel-images img {
      width: 40%;
      max-width: 100%;
    }

    .carousel-controls {
      position: absolute;
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }

    .carousel-controls button {
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
      border-radius: 50%;
    }

    .carousel-controls button:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    .carousel-container {
      position: relative;
    } 
  </style>
</head>
<body>

    <header> 
<h1>Solicita un Beat Personalizado</h1> <br>
<div>
 <p>Genera un pedido a un productor de un beat personalizado.Revisa las licencias que ofrecemos.Al tocar "Solicitar" iniciaras el proceso de pago. El pago de la tarifa genera un pedido que sera antendido por un productor asignado por BEAT LABS. Los precios reflejan el pago final sin impuestos.</p>
    </header>

    <!-- Carrusel -->


    <div class="carousel-container">
      <div class="carousel">
        <div class="carousel-images">
          <img src="https://gomusiclabs.music.blog/wp-content/uploads/2025/04/copia-de-beat.png?w=1024alt="Imagen 1">

          <img src="https://gomusiclabs.music.blog/wp-content/uploads/2025/04/copia-de-beat.png?w=1024alt="Imagen 2"> 

<br>

          <img src="https://gomusiclabs.music.blog/wp-content/uploads/2025/04/copia-de-beat.png?w=1024alt="Imagen 3">

          <img src="https://gomusiclabs.music.blog/wp-content/uploads/2025/04/copia-de-beat.png?w=1024alt="Imagen 4">

        </div>
        <div class="carousel-controls">
          <button id="prevBtn">❮</button>
          <button id="nextBtn">❯</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentIndex = 0;

    const images = document.querySelectorAll('.carousel-images img');
    const totalImages = images.length;

    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');

    nextBtn.addEventListener('click', () => {
      currentIndex = (currentIndex + 1) % totalImages;
      updateCarousel();
    });

    prevBtn.addEventListener('click', () => {
      currentIndex = (currentIndex - 1 + totalImages) % totalImages;
      updateCarousel();
    });

    function updateCarousel() {
      const carousel = document.querySelector('.carousel-images');
      carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
    }
  </script>

</body>
</html>