Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

I cannot find a solution to the point 14 and 15, asked chatgpt and spent more than 3 hours on this, i don’t understand what i did wrong, your help will be very useful thank you so much.

Your code so far

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

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

<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">

        <label for="1" class="feature-card">
            <input id="1" type="checkbox">
            <h2>Cloud Storage</h2>
            <p>100 Gigabyte secure storage</p>
        </label>

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

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

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

        <label class="feature-card">
            <input type="checkbox">
            <h2>Mutli-User Collab</h2>
            <p>Team access and sharing</p>
        </label>

        <label class="feature-card">
            <input type="checkbox">
            <h2>API Access</h2>
            <p>Integrate with your custom built tools</p>
        </label>


    </div>
</body>

</html>

/* file: styles.css */
h1 {
  text-align: center;
}

.feature-card-container {
  width: 80vw;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  margin: 10px auto;
  justify-content: center;
}

.feature-card {
  display: block;
  position: relative;
  border: 2px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  flex: 0 0 calc(45% - 20px);
  box-sizing: border-box;
  margin: 10px;
  transition: all 0.3s;
}

.feature-card:hover {
  border-color: #f1be32;
  box-shadow: 0 5px 10px rgba(241, 190, 50,0.5) 
}

input[type="checkbox"] {
  appearance: none;
  border: 2px solid #ccc;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  margin: none;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: all 0.5s;
  background-color: white;
  border-color: #ccc;
}

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

input[type="checkbox"]:checked::after {
  content: "✓";
  text-align: center;
  display: block;
  font-size: 20px;
  font-weight: bold;
    background-color: #f1be32;
  border-color: black;
  color: white;
}

.feature-card input:checked + .checkmark::after {
  content: "✓";
  display: block;
  text-align: center;
  color: white;
}

.feature-card input {
  appearance: none;
  width: 25px;
  height: 25px;
  border: 2px solid #ccc;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) 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

ChatGPT doesn’t actually know the answer - it only combines statistically likely words.

What are points 14 and 15?

Which specific parts of your code do you think should meet those tests?

3

this

see issue report transition property not compatible with tests · Issue #63678 · freeCodeCamp/freeCodeCamp · GitHub

1 Like
4

It is not obvious to me why, but the existence of this CSS rule is a problem.

1 Like