Cuéntanos qué está pasando:
No logro resolver las últimas dos pruebas del test. Ayuda por favor
Tu código hasta el momento
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selection Feature Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
<label class="feature-card">
<input type="checkbox">
<p>API Access</p>
</label>
<label class="feature-card">
<input type="checkbox">
<p>API Access</p>
</label>
<label class="feature-card">
<input type="checkbox">
<p>API Access</p>
</label>
<label class="feature-card">
<input type="checkbox">
<p>API Access</p>
</label>
</div>
</body>
</html>
/* file: styles.css */
body {
text-align:center;
}
.feature-card-container {
width:600px;
margin:10px auto;
}
.feature-card {
border:2px solid lightgray;
border-radius:8px;
display:block;
width:200px;
margin: 30px auto;
height:50px;
padding:10px 0;
font-weight:bold;
transition: all 0.2s ease;
}
.feature-card:hover {
border:2px solid rgb(243, 174, 47);
box-shadow: 0px 5px 10px rgba(243, 174, 47, 0.608);
}
.feature-card p {
position:relative;
top:-35px;
}
input[type="checkbox"] {
position: relative;
appearance: none;
border: 2px solid lightgray;
border-radius: 3px;
width: 18px;
height: 18px;
transition: all 0.2s ease;
margin: 5px;
background-color: purple; /* estado normal */
}
input[type="checkbox"]:checked {
background-color: rgb(76, 47, 243); /* fondo */
border-color: rgb(47, 243, 99); /* borde */
}
input[type="checkbox"]:checked::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 14px;
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0
Información del Desafío:
Diseñar una Página de Selección de Características - Diseña una Página de Selección de Funciones