Diseña una página de selección de funciones

No puedo pasar del paso 14.

12. Cuando se seleccionan las casillas de verificación, debe aparecer una marca de verificación en el centro de la casilla.

Aqui mi codigo

/ HTML/

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Selección de funciones</title>

<link rel="stylesheet" href="styles.css" />

Feature Selection

<label> 

  <input type="checkbox" />Almacenamiento en la nube</label>

<label> <input type="checkbox" />Soporte especializado</label>

<label> <input type="checkbox" />Análisis avanzado</label>

<label> <input type="checkbox" />Temas de usuario personalizados</label>

<label> <input type="checkbox" />Colaboración multiusuario</label>

<label> <input type="checkbox" />Acceso a la API</label>

/CSS*/

body {

height: 100vh;

background-color: #f0f0f0;

text-align: center;

}

.feature-card-container {

max-width: 250px;

padding: 20px;

border-radius: 10px;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

margin: auto;

text-align: left;

}

label {

display: block;

cursor: pointer;

margin: 8px auto;

}

input[type=‘checkbox’] {

width: 20px;

height: 19px;

cursor: pointer;

appearance: none;

border: 2px solid #f1be32;

border-radius: 4px;

background-color: white;

transition: all 0.3s;

vertical-align: middle;

margin-right: 15px;

}

input[type=‘checkbox’]:checked {

background-color: #f1be32;

border-color: black;

}

input[type=“checkbox”]:checked::after {

content: “✓”;

display: block;

text-align: center;

font-weight: bold;

color: black;

line-height: 15px;

}

AYUDA POR FAVOR


Hola.

¿De qué reto se trata? ¿Podrías facilitarme el enlace?

  1. Diseña una página de selección de funciones
  2. https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-feature-selection/design-a-feature-selection-page
1 Like

Ya lo solucione. Gracias a todos