Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

In the last steps it says to change the background-color and the border-color of the checkbox when checked, I have clearly done so but it still won’t work when I press run the tests, is there a typo or something I’m missing?

Your code so far

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

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

<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label class="feature-card">
            <h2>Cloud Storage</h2>
            <p>100 Gigabyte secure storage</p>
            <input type="checkbox">
        </label>

        <label class="feature-card">
            <h2>Dedicated Support</h2>
            <p>24/7 customer help</p>
            <input type="checkbox">
        </label>

        <label class="feature-card">
            <h2>Advanced Analytics</h2>
            <p>Insights & reports</p>
            <input type="checkbox">
        </label>

        <label class="feature-card">
            <h2>Custom User Themes</h2>
            <p>Personalized dashboard design</p>
            <input type="checkbox">
        </label>

        <label class="feature-card">
            <h2>Multi-User Collab</h2>
            <p>Team access and sharing</p>
            <input type="checkbox">
        </label>
        
        <label class="feature-card">
            <h2>API Access</h2>
            <p>Integrate with your custom built tools</p>
            <input type="checkbox">
        </label>
    </div>
</body>

</html>

/* file: styles.css */
body{
  font-size: 15px;
  font-family: Arial;
  margin: 0;
  text-align: center;
}

.feature-card-container{
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 20px;
  width: 90vw;
  margin: auto;
}

.feature-card{
  border: 1px solid #f1be32;
  box-shadow: 0px 2px 6px #e2a60d;
  width: 40vw;
  max-width: 350px;
  padding: 0.5em;
  border-radius: 15px;
}

input[type="checkbox"]{
  appearance: none;
  width: 25px;
  height: 25px;
  border: 2px solid #f1be32;
  border-radius: 8px;
  background-color: white;
  transition: all 0.3s;
  cursor: pointer;
}

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

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

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

unfortunately you also did this, meaning that the tests check immediately but the colors change 0.3 seconds later

3

Yep that solved it, is it bad practice to use transitions on checkbox?

4

no, it’s not, it’s just how the tests work

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.