Build a confidential email

This is the project

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Confidential Email</title>

</head>

<body>
  <main id="email">
    <div id="confidential">confidential</div>
    <div id="top-secret">top secret</div>
    <p><span class="blurred">Lorem ipsum odor amet</span>, consectetuer adipiscing elit. Nibh laoreet mattis senectus malesuada natoque venenatis consectetur. Ac justo neque eleifend conubia sagittis turpis nisl nisl. Facilisi vestibulum torquent suscipit auctor sem. Gravida imperdiet himenaeos vehicula cras curae dapibus imperdiet. Porttitor semper rutrum cras; pulvinar convallis eget feugiat. Egestas tristique at a aliquam aliquam hac fames vel.</p>
    <p>Torquent torquent ridiculus enim ut magnis. Per sollicitudin malesuada per nibh quis nam; platea quisque tortor. Sit euismod eu rutrum habitasse praesent. Facilisi maecenas turpis volutpat suspendisse fermentum scelerisque dis cursus. Et dictum id blandit feugiat senectus dui dui vivamus. Aliquet turpis venenatis sodales eu; <span class="blurred">nunc tempus mollis taciti ut.</span></p>
    <p><span class="blurred">Mattis vivamus a netus himenaeos nascetur, sodales scelerisque himenaeos. Sit velit donec eleifend tristique fermentum posuere. Proin nec ultrices faucibus proin tempus ad mollis gravida id. Parturient rhoncus phasellus; vehicula porta id suspendisse. Purus consectetur suscipit metus nisl dictum efficitur laoreet leo convallis. Iaculis conubia mus mattis in, venenatis felis dictumst.</span></p>
  </mail>
</body>

</html>
#email {
  padding: 50px;
  margin-top: 50px;
  width: 500px;
  border: 2px solid black;
  background-color: #f2e0c1;
  color: #0d1f3e;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relativ;
}
#confidential, #top-secret {
  display: inline-block;
  margin-left: 1rem;
  padding: 1rem;
  border: 4px solid red;
  color: red;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 700;
}
#confidential {
  position: absolute;
  transform: rotate(-20deg)
}
#top-secret {
  position: absolute;
  bottom: 40px;
  right: 20px;
  transform: rotate(20deg)
}
.blurred {
  filter: blur(3px)
}

this is failing on strp 9 and 10 where it asks for #confidential and #top-secret to have display set to inline-block. I have also tried adding the display to them individually but it still fails.

you have a spelling error here

For your situation, I have no idea, the computed style comes out as display: block

Oh, it’s position: absolute that makes the display change to display: block, it seems it is not compatible with display: inline-block

1 Like