Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

i have tried my best but atill giving these errors

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feature Selection</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">
            Dark Mode
        </label>

        <label class="feature-card">
            <input type="checkbox">
            Cloud Storage
        </label>

        <label class="feature-card">
            <input type="checkbox">
            Priority Support
        </label>

    </div>

</body>
</html>

/* file: styles.css */
/* Basic page styling for personal flair */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
}

h1 {
    color: #333;
    margin-bottom: 30px;
}

.feature-card-container {
    display: flex;
    gap: 20px;
}

.feature-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

/* 5. Selector targeting checkboxes & appearance none */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none; /* For Safari */
    width: 24px;
    height: 24px;
    margin-right: 15px;
    cursor: pointer;
    position: relative;
    display: grid;
    place-content: center; /* Centers the checkmark */
    
    /* 5b. Border width, color, and style */
    border: 2px solid #3498db;
    border-radius: 4px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

/* 6. Display checkmark when checked */
input[type="checkbox"]::after {
    content: "✓";
    font-size: 18px;
    color: white;
    display: none; /* Hidden by default */
}

input[type="checkbox"]:checked::after {
    display: block;
}

/* 7 & 8. Background and Border color changes when checked */
input[type="checkbox"]:checked {
    background-color: #2ecc71; /* Chosen green background */
    border-color: #27ae60;     /* Chosen darker green border */
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

Hi there, you’re on the right track with your feature cards! The layout looks great.

The issue is in how the checkmark is being hidden and shown. Let’s look at this part of your CSS:

CSS

input[type="checkbox"]::after {
    /* styles */
    display: none; 
}

input[type="checkbox"]:checked::after {
    display: block;
}

This works, but display is very abrupt. For a smoother effect that you can animate, it’s better to change a different property.

Hint: Instead of removing the checkmark from the page with display, how could you just change its size?

What would happen if you used the transform property to make the checkmark scale(0) by default, and then scale(1) when it’s :checked?

4

No. That is not the issue.

5

Please do not use transition. It makes the change happen too late for the tests to catch.

6

You are very close.
The UI works, but the tests are failing because they expect the checkmark to be implemented with ::before instead of ::after. Simplifying the CSS and removing extra effects should make the tests pass. The HTML itself is fine.