C

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

30 March 2025

Sito web reattivo con dati sugli studenti

23 May 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

Consigliato

Un codice di ytr3d3

Sito web reattivo con dati sugli studenti

Accesso con carta

HTML

CSS

JS

Consigliato

Un codice di ytr3d3

Sito web reattivo con dati sugli studenti

Accesso con carta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS