Cuéntanos qué está pasando:
Establezco mis elementos #confidential y #top-secret con el display: inline-block, pero no me lo acepta como bueno.
Tu código hasta el momento
<!-- 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>
<h1>SUMARIO</h1>
<main id="email">
<div id="confidential">CONFIDENTIAL</div>
<div id="top-secret">TOP SECRET</div>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit taciti aptent penatibus inceptos luctus orci, mattis proin placerat leo fusce platea senectus urna risus volutpat porttitor. <span class="blurred">Pretium tempus sagittis</span> fusce quis justo sapien congue convallis morbi habitasse mauris euismod nisl vel, imperdiet ut rhoncus semper fermentum magna netus commodo lectus neque sem porttitor. Inceptos sollicitudin fusce id suscipit tincidunt praesent vel accumsan eget, cubilia malesuada in semper taciti eleifend nullam quis varius, ante sem volutpat habitasse facilisis nec porta sagittis.</p>
<p>Potenti dictum pellentesque tortor sollicitudin erat sagittis imperdiet rutrum convallis, accumsan facilisis ut nullam libero lobortis dis. <span class="blurred">Etiam purus curae a aenean vivamus nam conubia,</span> potenti arcu fusce fermentum facilisis vestibulum dapibus, ullamcorper non porta diam pellentesque risus. Aliquam tellus justo metus praesent risus morbi integer et, ligula molestie lobortis placerat orci donec conubia, habitasse volutpat cursus tortor netus pharetra ridiculus.</p>
<p>El Lorem Ipsum fue concebido como un texto de relleno, <span class="blurred">formateado de una cierta manera para permitir la presentación de elementos gráficos en documentos,</span> sin necesidad de una copia formal. El uso de Lorem Ipsum permite a los diseñadores reunir los diseños y la forma del contenido antes de que el contenido se haya creado, dando al diseño y al proceso de producción más libertad.</p>
</main>
</body>
</html>
/* file: styles.css */
body {
background-color: bisque;
}
#email {
padding: 50px;
margin-top: 50px;
width: 500px;
border: 2px;
box-sizing: border-box;
}
#confidential {
padding: 10px;
margin-left: 10px;
transform: rotate(-15deg);
position: absolute;
z-index: 1;
top: 250px;
background-color: sandybrown;
border: 2px solid saddlebrown;
border-radius: 6px;
color: red;
font-size: 20px;
display: inline-block;
}
#top-secret {
display: inline-block;
color: red;
padding: 10px;
margin-left: 10px;
transform: rotate(15deg);
background-color: sandybrown;
border: 2px solid saddlebrown;
border-radius: 6px;
position: absolute;
right: 70px;
bottom: 90px;
z-index: 1;
font-size: 20px;
}
.blurred {
filter: blur(3px);
}
p {
display: inline-block;
position: relative;
margin-top: 0;
text-align: justify;
}
h1 {
text-align: center;
margin: 100px auto 0;
color: red;
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0
Información del Desafío:
Construye una Página de Correo Electrónico Confidencial - Construye una Página de Correo Electrónico Confidencial