Design a Feature Selection Page - Design a Feature Selection Page

I Built This
1

Tell us what’s happening:

Having issues with the box shadow spreading over to the next div

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">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <div class="feature-card">
            <label class="feature-card" for="Cloud Storage">Cloud Storage <input type="checkbox" id="Cloud Storage" /></label>
            <p>100 Gigabyte secure storage</p>
         </div>
        <div class="feature-card">
            <label class="feature-card" for="Dedicated Support">Dedicated Support <input type="checkbox" id="Dedicated Support" /></label>
            <p>24/7 customer help</p>
        </div>
        <div class="feature-card">
            <label class="feature-card" for="Advanced Analytics">Advanced Analytics <input type="checkbox" id="Advanced Analytics" /></label>
            <p>Insights & reports</p>
        </div>
         <div class="feature-card">
            <label class="feature-card" for="Multi-User Collab">Multi-User Collab <input type="checkbox" id="Custom User Themes" /></label>
            <p>Personalized dashboard design</p>
        </div>
           <div class="feature-card">
            <label class="feature-card" for="Multi-User Collab">Multi-User Collab <input type="checkbox" id="Multi-User Collab" /></label>
            <p>Team access and sharing</p>
        </div>
           <div class="feature-card">
            <label class="feature-card" for="API Access">API Access <input type="checkbox" id="API Access" /></label>
            <p>Integrate with your custom built tools</p>
        </div>

    </div>
</body>
</html>

/* file: styles.css */
body {
  height: 100vh;
  background-color: #f0f0f0;
  text-align: center;
}

.feature-card-container {
 display: flex;       /* Aligns children horizontally */
  flex-wrap: wrap;     /* Allows column breaking on small screens */
  gap: 16px;  
   

}

.feature-card{
    background-color: #ffffff;
    border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin:auto;
    width: 100%;
    flex: 1;             /* Distributes width evenly among columns */
    min-width: 250px;    /* Triggers a line break/wrap if the screen gets too small */
}




label {
  display: block;
  cursor: pointer;

}

input[type='checkbox'] {
  width: 25px;
  height: 25px;
  cursor: pointer;
  appearance: none;
  border: 2px solid #f1be32;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 15px;
}

input[type='checkbox']:checked {
  background-color: orange;
  border-color: lime;
}

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

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @james.sant83,

Since you are looking for code feedback on a working solution, I’ve changed the category to “I Built This” and blurred the code so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.

Happy coding

3

You have both a .feature-card div and a .feature-card label. The instructions only ask for a .feature-card label. Everything that should be displayed in a card should be nested inside the .feature-card label.

Hope that helps.

4

I’ll try re-working the code thank you

5

Thank you. After a couple of days, I figured it out the right concept, but I need it in the label, not the div.