Build a Confidential Email Page - Build a Confidential Email Page

HTML-CSS
1

Tell us what’s happening:

I don’t see any problems with my code. It runs correctly but the error message says my .blurred elements are empty and that I don’t have a border, which I do.

Your code so far

<!-- file: index.html -->
<!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>This message is part of a 
      <span class="blurred">freecodecamp</span> exercise.
    </p>
    <p>The exercise is part of a course teaching 
      <span class="blurred"> web design, </span>which is offered online.
    </p>
    <p>When one has completed the assigned tasks, one is elegible to receive a <span class="blurred">monetary award </span>for the work done.</p>
    <p>
      <span class="blurred"></span>
    </p>
  </main>

</body>

</html>

/* file: styles.css */
#email {
  padding: 50px;
  margin-top: 50px;
  width: 500px;
  border: 2px solid black;
  box-sizing: border-box;
}

#confidential, #top-secret {
  display: inline-block;
  padding: 25px;
  margin-left: 35px;
  border: 3px;
  transform: rotate(25deg);
}

.blurred {
  filter: blur(3px);
}

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1

Challenge Information:

Build a Confidential Email Page - Build a Confidential Email Page

2

Here you have an empty .blurred element.

This is not the correct syntax for the border property.

3

Thank you! Careless mistakes on my part.