सी

841 juanestebandominguezrojas9

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

4 December 2025

सैमसंग गैलेक्सी S24 अल्ट्रा लैंडिंग पेज

20 September 2025

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

27 January 2025

डिजिटल मार्केटिंग एजेंसी लैंडिंग पेज

HTML

<!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>

सी

अनुशंसित

सैमसंग गैलेक्सी S24 अल्ट्रा लैंडिंग पेज

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

डिजिटल मार्केटिंग एजेंसी लैंडिंग पेज

HTML

CSS

JS

अनुशंसित

सैमसंग गैलेक्सी S24 अल्ट्रा लैंडिंग पेज

सीएसएस एनिमेटेड आतिशबाज़ी, जुगनू, सूरजमुखी

डिजिटल मार्केटिंग एजेंसी लैंडिंग पेज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS