Build a Confidential Email Page - Build a Confidential Email Page

HTML-CSS
1

Tell us what’s happening:

Je ne comprends pas… les tests 7, 8, 17, 18 et 21 ne fonctionnent pas. Pourtant j’ai l’impression d’avoir rempli les critères ! Est-ce que vous pourriez me dire ce qui ne va pas ?

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 class="global">
    <div id="confidential">
      <p>CONFIDENTIAL</p>
    </div>
    <div id="top-secret">
      <p>TOP SECRET</p>
    </div>
    <p>Très cher espion <span class="blurred">007</span> 
    <p>Nous avons le plaisir de vous informer que la mission <span class="blurred">Infilter</span> a réussi avec brio.</p>
    <p>Revenez à <span class="blurred">la planque</span>.</p>
    <p>À très bientôt,</p>
    <p><span class="blurred">Agent 001</span></p>
      </div>
    </main>

</body>

</html>

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

body{
  background-color: grey;
  box-shadow: 12px black 0 13%;
}


#confidential{
  width: 400px;
  border: 5px solid red;
  background-color: white;
  text-align: center;
  transform: rotate(34deg) translate(50px, -50px);
  padding: 3px 3px 3px 3px;
  display: inline-block;
  margin-left: 3px;
} 


#top-secret{
  width: 300px;
  border: 3px solid red;
  background-color: white;
  text-align: center;
  transform: rotate(-23deg) translate(-50px, 250px);
  padding: 3px 3px 3px 3px;
  display: inline-block;
  margin-left: 3px;
}

.blurred{
  filter: blur(3px);
}
  
.global {
  width: auto;
  background-color:grey;
  margin: auto;
  display: block;
  box-shadow: 0 5px 8px 0 black;
  filter: sepia(80%);
  text-align: center;
  border-radius: 10px;
  padding: 10px;
}

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/145.0.7632.108 Mobile/15E148 Safari/604.1

Challenge Information:

Build a Confidential Email Page - Build a Confidential Email Page

2

Is global class mentioned in any of the user stories? If not, why would you need it?

3

C’est vrai merci, c’était prendre la facilité mais je pouvais très bien faire sans. Maintenant il ne me reste que le 17 et 18 ! Je vais chercher sur le forum, merci pour votre aide !