Build a Confidential Email Page - Build a Confidential Email Page

HTML-CSS
1

Tell us what’s happening:

Failed test:

  • Your #confidential element should have its display set to inline-block.
  • Your #top-secret element should have its display set to inline-block.

I have tried everything, i don`t understand why it wont pass.

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">
  <title>Confidential Email</title>
  <link rel='stylesheet' href='styles.css'>

</head>

<body>
 <main id='email'>
   <p>Dear Agent <span class='blurred'>S'more,</span></p>

<p>We have an emergency. The secret formula for our <span class='blurred'>Mega Marshmallow</span> has been compromised. This formula is what makes our marshmallows the fluffiest and most delicious.</p>

<p>We suspect that <span class='blurred'>Professor Puff</span> is behind this. He has taken the formula to his hidden laboratory. Your mission is to <span class='blurred'>infiltrate the lab and secure the formula</span> before it's too late.</p>
<p>
Be sure to keep the lab's location confidential. Any leak of this information could jeopardize the entire operation.</p>
   
   <div id="confidential">CONFIDENTIAL</div>
   <div id="top-secret">TOP SECRET</div>
   </main>
</body>

</html>

/* file: styles.css */
#email {
  position: relative;
  padding: 50px;
  margin: 50px auto 0 auto;
  width: 500px;
  border: 2px solid black;
  box-sizing: border-box;
  box-shadow: 7px 3px 7px 1px rgba(0, 0, 0, 0.5);
  background-color: #faece8;
}

#confidential {
  display: inline-block;
  border: 5px solid red;
  color: red;
  font-weight: bold;
  padding: 7px;
  margin-left: 4px;
  transform: rotate(-18deg);
  position: absolute;
  top: 40px;
  right: 100px;
  z-index: 10;
}

#top-secret {
  display: inline-block;
  border: 5px solid red;
  color: red;
  font-weight: bold;
  padding: 10px;
  margin-left: 4px;
  position: absolute;
  bottom: 20px;
  right: 80px;
  transform: rotate(18deg);
  z-index: 10;
  
}

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

#email > p {
  margin: 25px 0;
  line-height: 1.4;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Confidential Email Page - Build a Confidential Email Page

2

Hi there. By setting position to absolute, it might be possible you are positioning it relative to the block paragraph elements thus causing the elements display’s to be read as block. Either way, the absolute positioning is causing the tests to fail.

Read more: position - CSS: Cascading Style Sheets | MDN

3

Thank you! Changed the position to relative and all tests passed.