Saltar al contenido principal

Ejercicio 6: Crear una maqueta html y css con títulos y párrafos

Crea una maqueta de títulos y párrafos con HTML y CSS a partir de la siguiente imagen. Implementa etiquetas de encabezado y de párrafo.

Títulos y párrafos css

Solución interactiva​

Solución con el código HTML y CSS completo​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Ejercicio 2</title>
    <style>
      /* Escribe tu CSS aquí */
      body {
        margin: 0; /* Quita el margen por defecto */
        font-family: sans-serif;
      }
      .container {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 32px;
        background: #e1d9ff;
        min-width: fit-content;
      }
      article {
        width: 100%;
        box-sizing: border-box;
        padding: 18px;
        background: #fff;
      }
      article h2 {
        font-size: 20px;
        font-weight: 600;
        margin: 0 0 16px;
      }
      article p {
        font-size: 14px;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <article>
        <h2>Title 1</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          commodo metus a sapien rhoncus tempor. Cras id viverra arcu. Quisque
          maximus elementum rhoncus. Suspendisse et luctus lectus. Duis
          vulputate a est hendrerit congue. Suspendisse scelerisque dolor nec
          lectus convallis fermentum. Phasellus ultricies orci et nulla blandit,
          sed mattis sem consectetur.
        </p>
      </article>
      <article>
        <h2>Title 2</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
          commodo metus a sapien rhoncus tempor. Cras id viverra arcu. Quisque
          maximus elementum rhoncus. Suspendisse et luctus lectus. Duis
          vulputate a est hendrerit congue. Suspendisse scelerisque dolor nec
          lectus convallis fermentum. Phasellus ultricies orci et nulla blandit,
          sed mattis sem consectetur.
        </p>
      </article>
    </div>
  </body>
</html>
info

🔎 Revisa las siguientes secciones donde econtrarás más información sobre este tema: