Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

please check my code i can not find answer about it i you can help me thank you

Your code so far

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

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

<body>
<h1>Feature Selection</h1>

<div class="feature-card-container">
    <label class="feature-card" for="Storage"
>Cloud Storage<input type="checkbox" id="Storage"/>
   <div class="feature-subtitle">100 Gigabyte secure storage</div>
</label>

    <label class="feature-card" for="Support">Dedicated Support<input id="Support"type="checkbox"/>
     <div class="feature-subtitle">24/7 customer help</div>
    </label>

    <label class="feature-card" for="Analytics">Advanced Analytics<input id="Analytics" type="checkbox"/> <div class="feature-subtitle">Insights & reports</div></label>

    <label class="feature-card" for="User Themes">Custom User Themes<input id="User Themes" type="checkbox"/> <div class="feature-subtitle">Personalized dashboard design</div></label>

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

    <label class="feature-card" for="Access">API Access<input type="checkbox" id="Access"/> <div class="feature-subtitle">Integrate with your custom built tools</div></label>
    
</div>
</body>

</html>


/* file: styles.css */
input[type="checkbox"] {
  appearance: none;
  border-style:solid;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 2px solid #f1be32;
  border-radius: 4px;
  background-color: white;
  transition: all 0.3s;
  vertical-align: middle;
  margin-right: 15px;
}
input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  text-align: center;
}

input[type='checkbox']:checked {
  background-color: #f1be32;
  border-color: #e2a60d;
  
}
body {
  height: 100vh;
  background-color: #f0f0f0;
  text-align: center;
}
.feature-card {
  max-width: 250px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin: auto;
  text-align: center;
  border: 1px solid #e0e0e0;
  position: relative;
  transition: all 0.1s ease; 
}
h1 {
  text-align: center;
}
label {
  display:inline-block;
  justify-content:space-between;
  cursor: pointer;
  margin: 8px auto;
  padding: 0 10px;
}

.feature-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2d2d2d;
  margin-bottom: 8px;
}
.feature-subtitle {
  font-size: 0.9rem;
  color: #666666;
  line-height: 1.4;
}
.feature-label {
  cursor: pointer;
  display: block;
  padding: 0 10px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 20px; 
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; 
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.feature-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-color: #d0d0d0;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

removed by moderator

All of those images triggered our spam “cop”, and they were unnecessary since you had already posted your code and a link to the challenge.

3

Please remove transition from your input[type="checkbox"] selector. It makes the change happen too late for the tests to catch.