Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Steps 13-14 are failing for me, despite going through numerous avenues. I’ve removed the transition line that I saw was giving other people trouble, and took off a hover pseudoelement that I thought might be responsible, but I’m out of ideas. Would love some input from someone more patient than I am.

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 for="arch-zzard"><input type="checkbox" id="arch-zzard" />Arch Zzard<p class="description">10x the awesome</p></label>
        <label for="grand-zzard"><input type="checkbox" id="grand-zzard" />Grand Zzard<p class="description">5x the awesome</p></label>
        <label for="zzard-prime"><input type="checkbox" id="zzard-prime" />Zzard Prime<p class="description">2x the awesome</p></label>
        <label for="zzard"><input type="checkbox" id="zzard" />Zzard<p class="description">normal awesome</p></label>
    </div>
</body>

</html>

/* file: styles.css */
h1 {
  text-align: center;
}
body {
  background-color: darkgreen;
}

label {
  display: block;
  text-align: center;
  width: 20vw;
  height: 10vh;
  padding: 10px;
  margin: 15px auto;
  background-color: skyblue;
  border: 2px double black;
  border-radius: 20px;
  font-size: 1.em;
}
.description{
  display: block;
  text-align: center;
  margin: auto;
  padding: auto;
  font-size: .8em;
}
.feature-card-container{
  padding: 10px;
  margin: 10px auto;
  border: 2px dashed darkred;
  border-radius: 15px;
  width: 50vw;
  height: 80vh;
  background-color: white;
}
input[type="checkbox"]{
  appearance: none;
  display: block;
  margin: auto;
  width: 15px;
  height: 15px;
  background-color: darkred;
  border: 2px solid darkred;
  border-radius: 4px;
}
input[type="checkbox"]:checked{
  background-color: forestgreen;
  border: 3px solid forestgreen;

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

Your browser information:

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

Hi and welcome to the community!

After checking each part of your styles.css, i realised there’s nothing wrong in your styles. The issue lies in the HTML part. You’re adding plain text inside your label elements before each p element which is kind of invalid. Here for example:

If you’re adding a p element after the text “Arch Zzard“, you need to wrap the text too to make it clean and easy to read.
I hope this helps!

3

Hi, thank you so much for responding so promptly!

I went ahead and took what I read to be your advice and wrapped the “Arch Zzard” and its like in p elements. this did not work, so I took down the "description” class text entirely and just left it as “Arch Zzard”, which didn’t work. so I removed the p elements wrapping “Arch Zzard” leaving it nekked in the label element next to the input and that also didn’t work.

In the meantime I’ve learned a lot about styling borders. It’s well past midnight in my neighborhood, I’m going to return to this in the morning with a fresh head.

Thank you again for your assistance.

4

You might laugh at this when you check it next morning but you’re just missing something from this instruction:

Your page should have at least two label elements each with the class feature-card inside the div.

I took it a little more technical with the p and span elements, but looks like it still passes.

1 Like
5

You’re a legend, thank you so much! I can’t believe I missed that. Challenge cleared!

1 Like
6

No problem, bro. Good luck with the next projects.

Happy coding!