c

Abrir no Editor Video Publique Seu Código

Recomendado

25 November 2025

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Curso HTML</title>
  <link href="https://fonts.googleapis.com/css2?family=Chicle&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      font-family: 'Arial', sans-serif;
      background: #E3F2FD; /* Fondo suave color azul pastel */
      overflow-x: hidden;
    }

.titulo {
      background: linear-gradient(to right, #1E90FF,#778899);
      color: white;
      font-family: 'Chicle', cursive;
      text-align: center;
      font-size: 90px;
      padding: 35px 0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
</script>

.barra-lateral {
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.85);
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      transition: top 0.5s ease-in-out;
      z-index: 2;
    }

.barra-lateral.mostrar {
      top: 120px;
    }

.modulo-btn {
      background-color: black;
      color: white;
      border: 0px;
      padding: 12.5px 25px;
      font-size: 9px; 
      cursor: pointer;
      border-radius: 0px;
      transition: all 0.5s ease-in-out;
      text-size: 10px; /* Aumentamos el tamaño del texto */
    
    }

.modulo-btn:hover,
    .modulo-btn.active {
      background-color: white;
  
      color: black;
    }
  </style>
</head>
<body>

<div class="titulo">Curso HTML</div>
  <div class="barra lateral" r>
   <div class="barra-lateral" id="barraModulos">
    
    <button class="modulo-btn">Módulo 1</button><button class="modulo-btn">Módulo 2</button><button class="modulo-btn">Módulo 3</button><button class="modulo-btn">Módulo 4</button><button class="modulo-btn">Módulo 5</button><button class="modulo-btn">Módulo 6</button><button class="modulo-btn">Módulo 7</button>
    </div>

<div class="barra-lateral" id="barraModulos">
  
  <script>
    function mostrarBarra() {
      document.getElementById("barraModulos").classList.toggle("mostrar");
    }
  </script>

</body>
</html>

c

Recomendado

Cultive um jardim

Formulário de login incrível

informações do cartão

HTML

CSS

JS

Recomendado

Cultive um jardim

Formulário de login incrível

informações do cartão

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS