También les presento el código dónde lo hice yo mismo en el Visual Studio Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reportar</title>
<link rel="stylesheet" href="report.css">
<script src="https://kit.fontawesome.com/fa2c0fcebd.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
</head>
<body>
<button class="boton"><div class="crusor"><i class="fa-solid fa-triangle-exclamation"></i> Reportar usuario</div></button>
<div class="menu">
<button class="cerrar"><div class="crusor"><i class="fa-solid fa-xmark"></i></div></button>
<h2>Reportar al usuario <span>Jordy Drake</span>.</h2>
<input type="text" placeholder="Diga la razón de la infracción del usuario.">
<button class="aceptar"><div class="crusor">Enviar reporte</div></button>
</div>
<div class="aviso">
<div class="check"><i class="fa-solid fa-user-check"></i></div>
<h1>Reporte enviado.</h1>
<p class="aviso">Los reportes serán tomados a criterio del Moderador que las aplique.</p>
</div>
<div class="tapar"></div>
<script>
$(".cerrar").click(function(){
$(".menu, .aviso").hide();
})
$(".boton").click(function(){
$(".menu").show();
$("h2, p, input, .aceptar").show();
$(".aviso").hide();
})
$(".aviso").hide();
$(".aceptar").click(function(){
$("h2, p, input, .aceptar").hide();
$(".aviso").show();
})
</script>
</body>
</html>
*{
border: 0;
margin: 0;
padding: 0;
}
html, body{
background-image: url(reportado.jpg);
background-repeat: no-repeat;
background-size: 1280px;
}
.boton{
position: absolute;
right: 19.5rem;
top: 17rem;
padding: 5px;
border-radius: 5px;
background-color: red;
color: white;
font-size: 9px;
}
.cerrar{
width: fit-content;
height: fit-content;
padding: 5px;
position: relative;
left: 30.5rem;
background-color: red;
color: white;
border-radius: 1px;
font-weight: bolder;
}
.menu{
width: 500px;
height: 200px;
background-image: url(back-inv.png);
position: relative;
top: 19rem;
left: 27.6rem;
display: flex;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-align: center;
padding: 1rem;
border-radius: 5px;
display: flex;
justify-content: flex-start;
line-height: 2rem;
border: 2px solid black;
}
h2, p{
position: relative;
top: 10px;
}
span{
color: orange;
}
input{
width: 250px;
padding: 10px;
position: relative;
top: 2rem;
left: 7rem;
}
.aceptar{
width: fit-content;
padding: 10px;
background-color: green;
font-weight: bold;
color: white;
border-radius: 10px;
position: relative;
top: 4rem;
left: 12rem;
}
.check{
position: relative;
width: fit-content;
top: 6rem;
left: 43rem;
font-size: 5rem;
color: lime;
}
.aviso{
display: flex;
flex-direction: column;
}
.aviso h1{
position: relative;
width: fit-content;
top: 7rem;
left: 37rem;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.aviso p{
width: fit-content;
top: 8rem;
left: 29rem;
color: white;
font-family: Arial, Helvetica, sans-serif;
color: limegreen;
}
.crusor{
cursor: default;
}
.crusor{
cursor: url(./cursor.png),auto;
}
.tapar{
position: absolute;
width: 32px;
height: 32px;
top: 27rem;
right: 24rem;
background-image: url(back-inv.png);
}
