Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Failing the last three test cases. I don’t have the transition property issue.

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 for="cloud-storage">
            <input type="checkbox" id="cloud-storage">Cloud Storage
            <p>100 Gigabyte secure storage</p>
        </label>
        <label for="dedicated-support">
            <input type="checkbox" id="dedicated-support">Dedicated Support
            <p>24/7 customer help</p>
        </label>
        <label for="advanced-analytics">
            <input type="checkbox" id="advanced-analytics">Advanced Analytics
            <p>Insights & reports</p>
        </label>
        <label for="customer-user-themes">
            <input type="checkbox" id="customer-user-themes">Customer User Themes
            <p>Personalized dashboard design</p>
        </label>
        <label for="multi-user-collab">
            <input type="checkbox" id="multi-user-collab">Multi-User Collab
            <p>Team access and sharing</p>
        </label>
        <label for="api-access">
            <input type="checkbox" id="api-access">Api Access
            <p>Integrate with your custom tools</p>
        </label>
    </div>

</body>

</html>

/* file: styles.css */
body {
    background-color: rgb(217, 217, 217);
}

h1 {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
}

.feature-card-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

label {
    border: 2px solid black;
    border-radius: 10px;
    padding: 25px;
    margin: 5px;
    width: calc(50% - 20px);
    height: 100px;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
}

input[type="checkbox"] {
    appearance: none;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid black;
    border-radius: 10px;
}

input[type="checkbox"]:checked {
    background-color: rgb(98, 98, 98);
    border-color: rgb(28, 28, 28);
}

label p {
    font-weight: normal;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

Welcome to the forum @hc.cch

12. When the checkboxes are selected, there should be a checkmark ✓ in the center of the checkbox.

When a checkbox is selected the checkmark does not appear.

Happy coding

5

Actually, I’m having that same problem, too.

6

Why are you using :before and not :after?

Also for test 14, try using only :checked on the inputs with type checkbox.

Good luck!

1 Like
7

Actually, for case 12, you need to use the ::after pseudo-element instead of ::before.

Everything looks alright in your :checked selector section.

Also, you forgot something. Look at your label elements and look at user story 3.

Happy coding.