html:bocetos [GDE Provincia de Santa Cruz]

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
<html>
<!-- Definición de clases CSS -->
<style>
/* Encabezados */
.encabezado-azul {
  color: #2a6ebb;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Tarjetas */
.tarjeta {
  background: #eef;
  border: 2px solid #2a6ebb;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

/* Botones */
.boton-naranja {
  background-color: #ff8800;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin: 5px 0;
}

.boton-naranja:hover {
  background-color: #ff6600;
  cursor: pointer;
}

/* Alertas */
.alerta {
  background-color: #fdebd0;
  border-left: 4px solid #f39c12;
  padding: 10px;
  margin-bottom: 20px;
}

/* Tabla estilizada */
.tabla-estilo {
  border-collapse: collapse;
  width: 100%;
}

.tabla-estilo th, .tabla-estilo td {
  border: 1px solid #2a6ebb;
  padding: 8px;
  text-align: left;
}

.tabla-estilo th {
  background-color: #2a6ebb;
  color: white;
}
</style>

<!-- Ejemplo de tarjeta con encabezado -->
<div class="tarjeta">
  <h2 class="encabezado-azul">Tutorial en Video</h2>
  <iframe width="560" height="315"
          src="https://www.youtube.com/embed/A7ULWD9HuFc"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>
</div>

<!-- Ejemplo de botones -->
<div class="tarjeta">
  <h3 class="encabezado-azul">Acciones rápidas</h3>
  <a href="/doku.php?id=intro" class="boton-naranja">Página de Inicio</a>
  <a href="/doku.php?id:manuales:primer_manual" class="boton-naranja">Manual 1</a>
</div>

<!-- Ejemplo de alerta -->
<div class="alerta">
  Recuerda que este es un área de pruebas. Los estilos se definen solo para esta página.
</div>

<!-- Ejemplo de tabla -->
<div class="tarjeta">
  <h3 class="encabezado-azul">Tabla de prueba</h3>
  <table class="tabla-estilo">
    <tr>
      <th>Nombre</th>
      <th>Modulo</th>
      <th>Estado</th>
    </tr>
    <tr>
      <td>Juan Pérez</td>
      <td>EU</td>
      <td>Activo</td>
    </tr>
    <tr>
      <td>María Gómez</td>
      <td>GEDO</td>
      <td>Inactivo</td>
    </tr>
  </table>
</div>

<style>
.boton-animado {
  background-color: #ff8800;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.3s, background-color 0.3s;
}

.boton-animado:hover {
  background-color: #ff6600;
  transform: scale(1.1);
}

.tarjeta-animada {
  background: #eef;
  border: 2px solid #2a6ebb;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}

.tarjeta-animada:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
</style>

<div class="tarjeta-animada">
  <h2 style="color:#2a6ebb;">Tarjeta con Animación</h2>
  <p>Pasa el mouse sobre esta tarjeta y el borde y sombra se animan.</p>
  <a href="/doku.php?id=intro" class="boton-animado">Ir a Inicio</a>
</div>


<style>
/* --- CSS Animado --- */
.boton-css {
  background-color: #ff8800;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.3s, background-color 0.3s;
}

.boton-css:hover {
  background-color: #ff6600;
  transform: scale(1.2);
}

.tarjeta-css {
  background: #eef;
  border: 2px solid #2a6ebb;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}

.tarjeta-css:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

JS: ejemplo comentado (solo para referencia futura) 
   Cuando tengas acceso al servidor, podrías usar esto para animaciones dinámicas
<script>
function cambiarColor(boton){
  boton.style.backgroundColor = '#ff3300';
  boton.innerText = '¡Click!';
}
</script>


</style>

<!-- Bloque CSS animado -->
<div class="tarjeta-css">
  <h2 style="color:#2a6ebb;">Bloque CSS Animado</h2>
  <p>Pasa el mouse sobre esta tarjeta y el borde y la sombra se animan.</p>
  <a href="/doku.php?id=intro" class="boton-css">Botón Hover</a>
</div>

<!-- Bloque JS simulado (comentado) -->

<div class="tarjeta-css">
  <h2 style="color:#2a6ebb;">Bloque JS Interactivo</h2>
  <p>Con JS real, este botón cambiaría de color y texto al hacer clic.</p>
  <button onclick="cambiarColor(this)">Botón JS</button>
</div>




</html>