Design a Feature Selection Page - Design a Feature Selection Page

Curriculum Help
, ,
1

Tell us what’s happening:

input[type=“checkbox”]:checked{
background-color: #333;
border-color: red;
}

why is the compiler not reading tis but i can see the code getting applied in the preview

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"/>
        Cloud Storage
        <p>100 Gigabyte secure storage</p>
    </label>

    <label class="feature-card">
        <input type="checkbox"/>
        Dedicated Support
        <p>24/7 customer help</p>
    </label>

    <label class="feature-card">
        <input type="checkbox"/>
        Advanced Analytics
        <p>Insights & reports</p>
    </label>

    <label class="feature-card">
        <input type="checkbox"/>
        Custom User Themes
        <p>Personalized dashboard design</p>
    </label>

    <label class="feature-card">
        <input type="checkbox"/>
        Multi-User Collab
        <p>Team access and sharing</p>
    </label>

    <label class="feature-card">
        <input type="checkbox"/>
        API Access
        <p>Integrate with your custom built tools</p>
    </label>

  </div>
</body>

</html>

/* file: styles.css */
body{
  text-align: center;
  background-color: #d3d3d3;
  height: 100vh;
}

.feature-card-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.feature-card{
  max-width: 250px;
  width: 500px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin: auto;
  text-align: left;
}

label {
  display: block;
  cursor: pointer;
  margin: 8px auto;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  border: 2px solid #f1be32;
  border-radius: 4px;
  background-color: white;
  transition: all 0.3s;
  vertical-align: middle;
  margin-right: 15px;
}

input[type="checkbox"]:checked{
  background-color: #333;
  border-color: red;
}

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

p{
  text-align: center;
  font-size: 
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

GitHub Link: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md

2

Welcome to the forum @satsandhischha,

Please remove the transition property from your input[type="checkbox] selector. It causes a delay that borks the test.

Happy coding