Design a Feature Selection Page - Design a Feature Selection Page

Curriculum Help
,
1

Tell us what’s happening:

boxes 14 and 15 are i nvalid; when i submit, i’m always told that the background color and border color are missing.

Your code so far

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

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

<body>
    
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
     
        <label class="feature-card" for="cloud-storage">
            Cloud Storage
         <input type="checkbox" id="cloud-storage" name="cloud-storage" value="cloud-storage" />
         <p>100 Gigabyte secure storage</p>
         </label>
        
        <label class="feature-card" for="dedicated-support">
        Dedicated Support
        <input type="checkbox" id="dedicated-support" name="dedicated-support" value="dedicated-support" />
        <p>24/7 customer help </p>
        </label>        
        
        <label class="feature-card" for="advanced-analystics">
        Advanced Analystics
        <input type="checkbox" id="advanced-analystics" name="advanced-analystics" value="advanced-analystics" />
         <p>Insight & Report</p>
         </label>
        
        <label class="feature-card" for="api-access">
        API Access
        <input type="checkbox" id="api-access" name="api-access" value="api-access" />
        <p>Integrate with your custom built tools</p> 
        </label>

    </div>
</body>

</html>

/* file: styles.css */

.feature-card-container{
  margin: 0 auto;
}


.feature-card{
  display: inline-block;
  font-weight: bold;
  font-size: 18px;
  background-color: #fff;
  width: 200px;
  height: 100px;
  margin: 10px 0;
  padding: 5px;
  border-radius: 6px;
  box-shadow: 0 2px 5px 0 #000;
}

.feature-card:hover{
  box-shadow: 0 0 5px 0 rgb(255, 255, 0);
}

p{
  font-weight: normal;
  font-size: 13px;
} 
.container{
  display: flex;
  justify-content: space-between;
}

input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid black;
  border-radius: 3px;
  vertical-align: middle;
  transition: all 0.5s;
  cursor: pointer;
}

input[type="checkbox"]:checked {
}

input[type="checkbox"]:checked::after{
  content: "✓";
  line-height: 1px;
  font-size: 15px;
  vertical-align: middle;
  font-weight: bold;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

please remove the transition property, it is not compatible with the tests