सी

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

अनुशंसित

16 November 2023

टेलविंड सीएसएस के साथ वास्तुकला और डिज़ाइन वेबसाइट

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>

सी

अनुशंसित

सीएसएस ओटीपी पेज

सीएसएस सर्कल एनीमेशन संग्रह

टेलविंड सीएसएस के साथ वास्तुकला और डिज़ाइन वेबसाइट

HTML

CSS

JS

अनुशंसित

सीएसएस ओटीपी पेज

सीएसएस सर्कल एनीमेशन संग्रह

टेलविंड सीएसएस के साथ वास्तुकला और डिज़ाइन वेबसाइट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS