Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

I’m having trouble getting these tests to pass. This is the code I’m using for my checkboxes:

input[type=“checkbox”] {
appearance: none;
border: 2px solid #E65E5E;
width: 20px;
height: 20px;
border-radius: 5px;
background-color: #E6BFAB;
position: relative;
}

But the tests still say the following isn’t correct:
7. I should have a selector for the checkboxes
8. The checkboxes should be set to appearance: none
9, 10, 11. They should have a custom border width, color and style.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Selection Feature Page</title>
</head>

<body>

    <h1>Feature Selection</h1>

    <div class="feature-card-container">

        <label class="feature-card">
            <input type="checkbox">
            <h3>Cloud Storage</h3>
            <p>100 Gigabyte secure storage</p>
        </label>

        <label class="feature-card">
            <input type="checkbox">
            <h3>Dedicated Support</h3>
            <p>24/7 customer help</p>
        </label>

        <label class="feature-card">
            <input type="checkbox">
            <h3>Advanced Analytics</h3>
            <p>Insights & reports</p>
        </label>

        <label class="feature-card">
            <input type="checkbox">
            <h3>Custom User Themes</h3>
            <p>Personalized dashboard design</p>
        </label>

    </div>

</body>
</html>

/* file: styles.css */
/* ====== Base del documento ====== */
body {
  background-color: #E6BFAB;
  height: 100vh;
  color: #33302C;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* ====== Contenedor de tarjetas ====== */
.feature-card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

/* ====== Encabezado principal ====== */
h1 {
  text-align: center;
}

/* ====== Tarjetas (labels) ====== */
label {
  display: inline-block;

  /* Tamaño consistente */
  width: 250px;
  height: 130px;

  padding: 1rem;
  box-sizing: border-box;
  text-align: center;

  /* Estilos visuales */
  border: 2px solid #E65E5E;
  border-radius: 18px;
  background-color: #E6765E;

/* ====== Encabezados de tarjeta ====== */
h3 {
  font-size: 1rem;
  margin: 0.5rem 0 0.3rem 0;
}

/* ====== Texto descriptivo ====== */
p {
  font-size: 0.8rem;
  margin: 0;
}

input[type="checkbox"] {
  appearance: none;
  border: 2px solid #E65E5E;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background-color: #E6BFAB;
  position: relative;
}

input[type="checkbox"]:checked {
  background-color: #f7dede;
  border-color: #ff7a7a;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  color: #E65E5E;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

you need to fix the label selector

3

Thank you so much! I hadn’t noticed the missing }. That fixed it.