Build a Confidential Email Page - Build a Confidential Email Page

Tell us what’s happening:

Hello

Can someone please help me identify the mistake. I’ve written it several times and keeps giving the same error, is there a typo or am I missing something? all the other settings are applied, why it doesn’t assume the display setting?

thanks

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</div>
    <h2>To whom it may concern:</h2>
    <p>Confidential information refers to any sensitive data, materials, or knowledge that is shared between parties (such as individuals, businesses, or organizations) with the understanding that it will not be disclosed or made public without proper authorization.<span class="blurred"> This information may include business plans, trade secrets, financial data, customer lists, intellectual property, and any other proprietary or privileged information </span>that could harm the disclosing party if made accessible to others. Confidential information is typically protected by non-disclosure agreements (NDAs) or other legal contracts to ensure its security and prevent unauthorized access or use.</p>
    <p>Imagine a technology startup developing a new mobile application. The company shares its app design and features with a potential investor under the condition that the information is kept confidential. <span class="blurred">The investor signs a non-disclosure agreement (NDA) that defines the app's code, user interface, and development plans as confidential information.</span> By doing so, the startup ensures that the investor cannot use or disclose the app's design to competitors or the public.</p>
    
    <div id="top-secret">TOP SECRET</div>
    <p>Confidential information is essential for maintaining the integrity, competitiveness, and security of a business or organization. Properly defining and protecting this information ensures that <span class="blurred">sensitive data remains secure, fostering trust and preventing unauthorized use or disclosure.</span> Whether in business agreements, employment contracts, or collaborations, clear guidelines for handling confidential information are crucial for safeguarding valuable assets and maintaining confidentiality.</p>
    </main>
    </body>

</html>
/* file: styles.css */
#email {
  padding: 50px;
  margin-top: 50px;
  width: 500px;
  border: 2px;
  box-sizing: border-box;
  background-color: seashell;
}

#confidential {
  display: inline-block;
  padding: 20px;
  border: 6px solid red;
  color: red;
  font-weight: bold;
  font-size: 30px;
  margin-left: 20px;
  transform: rotate(20deg);
  position: absolute;
  top: 100px;
  left: 190px;
}

#top-secret {
  display:inline-block;
  padding: 20px;
  border: 6px solid red;
  color: red;
  font-weight: bold;
  font-size: 30px;
  margin-left: 20px;
  transform: rotate(-20deg);
  position: absolute;
  left: 100px;
  bottom: 180px
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a Confidential Email Page - Build a Confidential Email Page

Something went wrong…"

are you seeing this as well?

probably its due to this!! perhaps tryign again later would resolve this issue, happy coding :slight_smile:

hello! When you use position: absolute; it removes the element from the normal flow of the document, therefore setting display: inline-block; does not work.

Hello! Didn’t know that. So how can I place the “div” on top of the text or change it’s positon? If I remove the position property the “confidential” div will stay before the 1st paragraph.

No I didn’t get that. the issue was the one mention in the comment bellow.

Look at the example app. The confidential div is at the top and the top secret div is at the bottom. You can move your top secret div to the bottom inside main to make your app look similar, but the tests will pass by just removing position: absolute as @sampatee suggested.