Skip to main content

Exercise 6: Create an HTML and CSS mockup with headings and paragraphs

Create a mockup of headings and paragraphs using HTML and CSS based on the following image. Implement heading and paragraph tags.

CSS titles and paragraphs

Interactive Solution​

Solution with complete HTML and CSS code​

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

🔎Review the following sections where you will find more information on this topic: