Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

step 13 isnt working no matter how i do it ive tried everything and it still doesnt work

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

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

</body>

</html>

/* file: styles.css */
/* Container */

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


/* Feature cards */

.feature-card{
  border:1px solid #ccc;
  padding:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
}


/* Checkbox styling */

input[type="checkbox"]{
  appearance:none;
  border:2px solid #4a90e2;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* Checkmark */

input[type="checkbox"]::before{
  content:"✓";
  display:none;
}


/* Checked state */

input[type="checkbox"]:checked{
  background-color:blue;
  border-color:gray;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

Welcome to the forum @logan2 !

You are trying to set the content property on a checkbox that has not been checked yet.

Should the content be set before the checkbox is checked or after it’s checked?

Happy coding!