Build a Confidential Email Page - Build a Confidential Email Page

HTML-CSS
1

Tell us what’s happening: Keep showing below massage:

  1. You should have at least three span elements with a class of blurred within your paragraphs.
  2. Your .blurred elements should not be empty.

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 href="styles.css" rel="stylesheet">


</head>

<body>
<main id="email">
  <div id="confidential">CONFIDENTIAL</div>
  <div id="top-secret">TOP SECRET</div>
  <p>WebKit is an open-source browser engine developed primarily by Apple Inc. It is used in Apple's 
     <span calss="blurred">BLURRRREED</span>It is used in Apple's
  </p>
  <p>WebKit is an open-source browser engine developed primarily by Apple Inc. It is used in Apple's 
    <span calss="blurred">BLURRRREED</span>It is used in Apple's</p>
  <p>
    WebKit is an open-source browser engine developed primarily by Apple Inc. 
    <span calss="blurred">BLURRRREED       </span>
    It is used in Apple's</p>
</main>
</body>

</html>

/* file: styles.css */
#email{
  padding:50px;
  margin-top:50px;
  width:500px;
  border:2px solid red;
  box-sizing:border-box;
}
#confidential, #top-secret
{
  display:inline-block;
  padding:5px;
  margin-left:10px;
  border:5px solid black;
  transform:rotate(-20deg);
}
.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 Edg/143.0.0.0

Challenge Information:

Build a Confidential Email Page - Build a Confidential Email Page

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.

1 Like
3

  1. Are there any errors or messages in the console?

  2. What is the requirement of the first failing test?

  3. Check the related User Story and ensure it’s followed precisely.

  4. What line of code implements this?

  5. What is the result of the code and does it match the requirement?

4

sorted thanks a lot……………………….

5

it looks like you repeated the questions instead of answering them, the questions are provided so you try to answer them