c

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 August 2024

Galerie de sites avec effet de survol et de flou

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

Recommandé

Galerie de sites avec effet de survol et de flou

Un code par constantcc607

Application météo

HTML

CSS

JS

Recommandé

Galerie de sites avec effet de survol et de flou

Un code par constantcc607

Application météo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS