Menú selector de redes sociales Tutorial del proyecto JavaScript

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

social-media-selector-menu/

<!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>Social Media Selector Menu</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
      integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="menu">
      <p>Social Media</p>
      <i class="fas fa-angle-down"></i>
    </div>
    <ul class="social-lists hide">
      <li>
        <i class="fab fa-facebook" style="color: blue"></i>
        <p>Facebook</p>
      </li>
      <li>
        <i class="fab fa-youtube" style="color: red"></i>
        <p>YouTube</p>
      </li>
      <li>
        <i class="fab fa-twitter" style="color: blue"></i>
        <p>Twitter</p>
      </li>
      <li>
        <i class="fab fa-linkedin" style="color: blue"></i>
        <p>Linkedin</p>
      </li>
    </ul>
    <script src="index.js"></script>
  </body>
</html>

Menú selector de redes sociales

Menú selector de redes sociales

Créalo a partir del código fuente

Practica con proyectos relacionados

Barra de progreso de pasos

Clasificación de emojis

Interfaz de usuario de comentarios

Barra de progreso de pasos

Clasificación de emojis

Interfaz de usuario de comentarios