viernes, 31 de agosto de 2018

HTML: Práctica 3

 <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Los Meses del A&ntilde;o y Refranes</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background: linear-gradient(90deg, #FFFAE6, #FFF1CC);
      color: #333;
      margin: 0;
      padding: 20px;
    }

    h1, h3 {
      color: #0056b3;
      text-align: center;
    }

    h1 {
      background-color: #FFD700;
      padding: 10px;
      border-radius: 10px;
    }

    h3 {
      border-bottom: 2px solid #0056b3;
      padding-bottom: 5px;
      margin-top: 30px;
    }

    ul, ol {
      padding-left: 30px;
      margin-bottom: 20px;
    }

    ul li, ol li {
      margin: 5px 0;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    table, th, td {
      border: 1px solid #ccc;
    }

    th {
      background-color: #0056b3;
      color: white;
      padding: 10px;
    }

    td {
      padding: 10px;
      text-align: left;
      background-color: #f9f9f9;
    }

    dl {
      margin: 20px 0;
    }

    dt {
      font-weight: bold;
      margin-top: 10px;
      color: #0056b3;
    }

    dd {
      margin-left: 20px;
      color: #666;
    }

    .highlight {
      background-color: #FFD700;
      color: #333;
      font-weight: bold;
      padding: 5px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <h1>Los Meses del A&ntilde;o y Refranes</h1>

  <h3>Los meses de primavera</h3>
  <ul>
    <li>Abril</li>
    <li>Mayo</li>
    <li>Junio</li>
  </ul>

  <h3>Los meses de verano</h3>
  <ol>
    <li>Julio</li>
    <li>Agosto</li>
    <li>Septiembre</li>
  </ol>

  <h3>Los meses del a&ntilde;o</h3>
  <ul>
    <li>Los meses de primavera
      <ol>
        <li>Abril</li>
        <li>Mayo</li>
        <li>Junio</li>
      </ol>
    </li>
    <li>Los meses de verano
      <ol>
        <li>Julio</li>
        <li>Agosto</li>
        <li>Septiembre</li>
      </ol>
    </li>
  </ul>

  <h3>Refranes de los meses</h3>
  <dl>
    <dt>Enero</dt>
    <dd>En enero, fr&iacute;o matutino y heladas al camino.</dd>
    <dt>Febrero</dt>
    <dd>Febrero loco, marzo otro poco.</dd>
    <dt>Marzo</dt>
    <dd>El sol de marzo da con el mazo.</dd>
    <dt>Abril</dt>
    <dd>En abril, aguas mil.</dd>
    <dt>Mayo</dt>
    <dd>Hasta el 40 de mayo no te quites el sayo.</dd>
    <dt>Junio</dt>
    <dd>Junio soleado y brillante, te pone en adelante.</dd>
    <dt>Julio</dt>
    <dd>Por San Ferm&iacute;n, el calor no tiene fin.</dd>
    <dt>Agosto</dt>
    <dd>Agosto seca las fuentes y septiembre se lleva las corrientes.</dd>
    <dt>Septiembre</dt>
    <dd>Septiembre, mes de lluvia y sol, para que madure la uva y el mel&oacute;n.</dd>
  </dl>

  <h3>Refranes Destacados</h3>
  <table>
    <thead>
      <tr>
        <th>Mes</th>
        <th>Refr&aacute;n</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="highlight">Enero</td>
        <td>En enero, fr&iacute;o matutino y heladas al camino.</td>
      </tr>
      <tr>
        <td>Febrero</td>
        <td>Febrero loco, marzo otro poco.</td>
      </tr>
      <tr>
        <td>Marzo</td>
        <td>El sol de marzo da con el mazo.</td>
      </tr>
      <tr>
        <td>Abril</td>
        <td>En abril, aguas mil.</td>
      </tr>
      <tr>
        <td>Mayo</td>
        <td>Hasta el 40 de mayo no te quites el sayo.</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

No hay comentarios.:

Publicar un comentario