Tutorial del proyecto JavaScript de página de destino doble

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

double-landing-page/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Double Landing Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="split left">
        <h1>Apple</h1>
        <button class="btn">Buy Now</button>
      </div>
      <div class="split right">
        <h1>Samsung</h1>
        <button class="btn">Buy Now</button>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Doble página de destino

Doble página de destino

Créalo a partir del código fuente

Practica con proyectos relacionados

Animación del rastro del corazón

Efecto dominó del botón

Evento del ratón

Animación del rastro del corazón

Efecto dominó del botón

Evento del ratón