Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Design a Feature Selection Page

There seems to be a problem with item 14 and 15

My code is correct but it keeps failing to pass 14 and 15. Please help me with this

Your code so far

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

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

<body>
    <div class="container">
    <h1>Feature Selection</h1>
    <h2>This is my learning list for 2026.</h2>

    <div class="row1">
    <div class="feature-card-container">
        <label class="feature-card">
            <input type="checkbox"> Ride Powerbike
        </label>
        <p>I can ride a power bike independently in real traffic for at least 20–30km while obeying road rules and staying fully in control.</p>
        </div>

        <div class="feature-card-container">
        <label class="feature-card">
            <input type="checkbox"> Drone Piloting
        </label>
        <p>I can independently plan, fly, and land a drone safely while capturing smooth, usable footage without crashes or guidance.</p>
        </div>
        </div>

        <div class="row1">
        <div class="feature-card-container">
        <label class="feature-card">
            <input type="checkbox"> Fullstack Web Development</label>
            <p> I can independently build, deploy, and maintain a complete web application (frontend + backend + database) that real users can use.</p>
        </div>

        
        <div class="feature-card-container">
        <label class="feature-card">
            <input type="checkbox"> Content Creation</label>
            <p>I can consistently plan, produce, edit, and publish high-quality content that people watch and engage with without external help.</p>
        </div>
        </div>


        <div class="row1">
        <div class="feature-card-container">
        <label class="feature-card">
            <input type="checkbox"> Driving</label>
            <p>I can drive alone from one city/location to another, handle traffic, parking, and road decisions safely without assistance.</p>
        </div>

        <div class="feature-card-container">
        <label class="feature-card">
            <input type="checkbox"> Swimming</label>
            <p>I can swim confidently in deep water for at least 100 meters without stopping or panic.</p>
        </div>
        </div>
        </div>

  
        


/* file: styles.css */
body {
  background-color: purple;
  color: #e7c9de;
}

h1,h2{
  text-align: center;
}

.container {
  background-color: hsla(0, 0%, 100%, 0.2); 
  width: 80%;
  margin: 80px auto;
  padding: 20px;
  box-shadow: rgba(56, 148, 117, 0.25) 0px 54px 55px, rgba(151, 98, 98, 0.12) 0px -12px 30px, rgba(44, 163, 117, 0.12) 0px 4px 6px, rgba(35, 161, 84, 0.17) 0px 12px 13px, rgba(49, 180, 44, 0.09) 0px -3px 5px;
}

.row1 {
  padding: 20px;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  
}

.feature-card-container {
  border: 1px solid rgb(214, 173, 8);
  padding: 10px;
  width: 50%;
  text-align: center;
  box-shadow: rgba(188, 197, 13, 0.35) 0px 5px 15px;
  
}

.feature-card {
  font-weight: 600;
  font-size: 20px;;
}

label {
  cursor: pointer;
}

input[type='checkbox'] {
  appearance: none;
  height: 20px;
  width: 20px;
  padding: 10px;
  vertical-align: middle;
  border: 3px solid purple;
  background-color: rgb(235, 232, 222);
  border-radius: 4px;
  transition: all 0.3s;

}

input[type='checkbox']:checked {
  border-color: rgb(210, 245, 11);
  background-color: green;
}



input[type='checkbox']:checked::after {
  content: "✓";
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14px;
  color: white;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

don’t use transition, it makes the change happen too late for the tests to catch

3 Likes
3

This works. Thank You so much

4

Wow! This is so impressive. Thank you for all you do and keep doing. God bless you in Jesus name