Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

I am failing the last 3 steps, Can anyone help me?

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
<label><input type="checkbox"> <h2>Cloud Storage</h2><p>100GB secure storage</p>
</label>
    </div>

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

</body>

</html>

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

h1{
  text-align:center;
}

.feature-card-container{
max-width:250px;
padding: 20px;
border-radius: 10px;
box-shadow:0 2px 6px black;
margin:auto;
margin-bottom:20px;
text-align:left;
position:relative;
}

.feature-card-container:hover{
  box-shadow:0 2px 6px purple;
}

label{
  display:block;
  cursor:pointer;
  margin:6px auto;
  text-align:center;
  
}

input[type="checkbox"]{
  position:absolute;
  top:15px;
  right:15px;
  width: 20px;
  height: 20px;
  appearance: none;
  border: 3px solid rgb(151, 151, 194);
  border-radius: 2px;
  background-color:white;
  cursor:pointer;
}

input[type="checkbox"]:checked{
  background-color:rgb(151, 151, 194);
  border:rgb(141, 141, 177);
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

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

You are missing User Story 3.

I would watch out for adding a lot of extra things that aren’t mentioned in the instructions as this can interfere with the tests.

Some things aren’t strictly followed like this:

  1. Your page should have a div element with the class feature-card-container.

You have 2 of those divs but it only asks for 1. This one does not affect the test but watch for things like this and make sure to implement the instructions exactly as asked.