Build a Confidential Email Page - Build a Confidential Email Page

Curriculum Help
,
1

Tell us what’s happening:

From what I understood, according to the requirements I’m unable to pass (17, 18, 21);

  • We are to have (maybe some hypothetical) text within the element, that’s to be CONFIDENTIAL and TOP SECRET. With that in mind, I just decided to go with some generic espionage government type report-document.

In this fictional doc I wrote up, I just blurred some of the words, as if it were a sec-clearance gov doc. Anyone able to tell me where I’m going wrong? Any help would be greatly appreciated.

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">
    <div id="confidential">
      CONFIDENTIAL

      <p>The area was found to be <span class="blurred">dangerous</span>.</p>
      <p>We still had found none of the <span class="blurred">valuable minerals and/or assets</span></p>
    </div>

    <div id="top-secret">
      TOP SECRET

      <p>The operators were forced to <span class="blurred">perform hostile defensive actions.</span>This ensured mission satisfactory results. This was confirmed by <span class="blurred">Gen. Bob Bobberson</span></p>
    </div>

  </main>

</body>

</html>

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

#confidential,
#top-secret {
  display: inline-block;
  padding: 10px;
  margin-left: 20px;
  border: dotted black 5px;
  transform: rotate(0.9deg);
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Challenge Information:

Build a Confidential Email Page - Build a Confidential Email Page

GitHub Link: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-confidential-email-page/66bba6fff611169359d9d36a.md

2

Hey @danger-crypt

You should have two div elements with text CONFIDENTIAL and TOP SECRET and those two elements should be on top of the text like in below image

So everything is fine but CONFIDENTIAL and TOP SECRET should be separate div elements from the text.

image
image501×465 83.9 KB

3

Awesome. Thank you for clearing that up. The image really gave me a good idea on what the goal was.

My finished code:

HTML

code removed by moderator

4

Any particular reason for having CONFIDENTIAL in p tag? paragraph element is used to display blocks of text.

5

Welcome to the forum @danger-crypt,

Congratulations on solving the challenge! You should be proud of your achievement…we are! But we are removing your working solution, so it is not available to others who have not yet done the work to get there. Again, congrats!

Happy coding