Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Assalam o alikom i have treid everything still last three are not solve please guide me i am newbie

Your code so far

<!-- file: index.html -->
<!-- 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="card">
       
            <input type="checkbox">
           <h4>Cloud Storage</h4>
           <p>100 gigabyte secure storage</p>
    </label>
    <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
     <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
    <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
    <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
     <label class="card">
      
            
            <input type="checkbox">
             <h4>Dedicated Support</h4>
             <p>100 gigabyte secure storage</p>
    </label>
</div>
</body>

</html>

/* file: styles.css */
/* file: styles.css */
body { 
  text-align: center; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction: column; 
  } 
.feature-card-container { 
  width: 300px; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 10px; 
  justify-items: start; 
  }
label { 
     display: inline-flex; 
     align-items: center; 
     gap: 5px; 
     } 
input[type="checkbox"] {
        appearance: none; 
        border: 2px solid yellow; 
        width: 20px; 
        height: 20px; 
        cursor:  pointer; 
        }
input[type="checkbox"]:checked
         { background-color: yellow; 
           border-color: orange; 
         } 
input[type="checkbox"]:checked::after{ 
           content: "✓"; 
           display: block; 
           text-align: center; 
           color: orange; 
           } 
label:hover{ border: 2px solid orange; }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.