Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Hi, I can’t pass tests 13 and 14, even though the behavior is the expected one. Could you please help me double-check what am I missing here? tysm!

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" />
  <title>Selection Feature Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="feature-card-container">
    <h1>Feature Selection</h1>

    <label class="feature-card">
      <input type="checkbox" />
      <span>200GB</span>
    </label>

    <label class="feature-card">
      <input type="checkbox" />
      <span>500GB</span>
    </label>
  </div>
</body>
</html>


/* file: styles.css */
input[type="checkbox"]{
  width: 20px;
  height: 20px;
  appearance: none;
  cursor: pointer;
  border-width: 3px;    
  border-style: dashed;   
  border-color: #7c8db5;     
  border-radius: 6px;
  background: #ffffff;
  position: relative;      
  transition: background-color .2s, border-color .2s;
}

input[type="checkbox"]:checked{
  background-color: #00c2a8;   
  border-color: #004e46;        
}


input[type="checkbox"]:checked::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

this make the color change after the tests check