Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

  1. When the checkbox is checked, the background color of the checkbox should change to a color of your choosing.
    Waiting:14. When the checkbox is checked, the border color of the checkbox should change to a color of your choosing.

Your code so far

<!-- 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">
            Feature 1
        </label>

        <label class="feature-card">
            <input type="checkbox">
            Feature 2
        </label>

        <!-- Add more features as needed -->
    </div>
</body>

</html>


/* file: styles.css */
h1 {
  text-align: center;
}

/* Container for feature cards */
.feature-card-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Feature card labels */
.feature-card {
  display: block;
  padding: 15px;
  border: 2px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s;
}

/* Checkbox styling */
.feature-card input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #888;
  border-radius: 4px;
  background-color: white;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

/* Checkbox checked state */
.feature-card input[type="checkbox"]:checked {
  background-color: #4CAF50; /* change as desired */
  border-color: #388E3C;     /* change as desired */
}

/* Add checkmark */
.feature-card input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  text-align: center;
  font-weight: bold;
  color: white;
  line-height: 20px;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

You have a lot of extra CSS here that it looks like you’ve copied from a previous workshop. Try to only follow the instructions and do not add any extra features. Sometimes those can interfere with the tests.

For example, if there is some kind of delay the tests might check the state of the page before it has changed to the correct state.