Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

The last objective prolly has a bug, at this point I don’t know what to do. I faced a problem like this before so I copied the code on my mobile, and it worked but this time it isn’t working.

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.0">
    <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="cs">Cloud Storage<input id="cs" type="checkbox"></label>
        <label class="feature-card" for="ds">Dedicated Support<input id="ds" type="checkbox"></label>
        <label class="feature-card" for="aa">Advanced Analytics<input id="aa" type="checkbox"></label>
        <label class="feature-card" for="cut">Custom User Themes<input id="cut" type="checkbox"></label>
        <label class="feature-card" for="muc">Multi-User Collab<input id="muc" type="checkbox"></label>
        <label class="feature-card" for="ap">API Access<input id="ap" type="checkbox"></label>
    </div>
</body>
</html>

/* file: styles.css */
body {
  font-family: Tahoma;
  display: block;
  justify-content: center;
  text-align: center;
  flex-drection: column;
}

.feature-card-container {
  border: 5px solid #f0f0f080;
  border-radius: 4px;
  min-width: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-content: start;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}

.feature-card {
  border: 2px solid #555;
  padding: 40px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform .3s ease;
}

input[type="checkbox"] {
  appearance: none;
  border: 2px solid #f1be32;
  color: #f1be32;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: #f1be32;
  border: 2px solid #f1be32;
}

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

label:hover {
  border-color: #f1be32;
  transform: translateY(-10px);
}

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 Edg/142.0.0.0

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

The transform is preventing the tests from passing. Try commenting it out.

3

It wasn’t the transform. I tried removing it but it still didn’t pass. I already passed the test though, I cleared the progress and gave only what was asked without any extra styling.

The design looked bland but it passed nonetheless.

4

Thanks! This thread helped me solve the same issue. In particular, it seems having a transition on my inputs was stopping the last two checks passing