Tell us what’s happening:
Edited - I figured it out, I missed something incredibly simple.
This is failing every single test case. I honestly can’t figure out what is wrong with the first one, let alone any of the others.
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>
</head>
<body>
<main id="email">
<div id="confidential">CONFIDENTIAL</div>
<div id="top-secret">TOP SECRET</div>
<p>This is a highly sensitive document. <span class="blurred">The target is moving</span> to the secondary location.</p>
<p>Please ensure that <span class="blurred">Agent Smith</span> is notified immediately upon arrival.</p>
<p>The password for the encrypted file is <span class="blurred">Alpha-99-Beta</span>. Do not share this.</p>
</main>
</body>
</html>
/* file: styles.css */
#email {
box-sizing: border-box;
width: 500px;
padding: 50px;
margin-top: 50px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
background-color: beige;
font-family: fantasy;
}
#confidential, #top-secret {
display: inline-block;
padding: 10px;
margin-left: 15px;
border: 3px solid red;
color: red;
font-weight: bold;
transform: rotate(-15deg);
}
#top-secret {
transform: rotate(10deg);
border-color: darkred;
color: darkred;
}
.blurred {
filter: blur(3px);
background-color: #333;
color: transparent;
user-select: none;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Challenge Information:
Build a Confidential Email Page - Build a Confidential Email Page