Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

I believe there is an issue with the last two tests. My code works correctly, but those tests fail to accept it.
Thank you very much in advance.

Your code so far

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

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scae=1.0" name="viewport">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label  for="card1" class="feature-card">
            <input type="checkbox" id="card1" name="cloud-storage" value="cloud-storage">
            Cloud Storage<span>100 Gygabyte secure storage</span>
        </label>
        <label  for="card2" class="feature-card">
            <input type="checkbox" id="card2" name="advanced-analytics" value="advanced-analytics">
            Advanced Analytics<span>Insights & reports</span>
        </label>
        <label  for="card3" class="feature-card">
            <input type="checkbox" id="card3" name="api-access" value="api-access">
            API Access<span> Integrate with your custom built tools</span>
        </label>
        <label  for="card4" class="feature-card">
            <input type="checkbox" id="card4" name="dedicated-support" value="dedicated-support">
            Dedicated Support<span>24/7 customer help</span>
        </label>
    </div>
</body>

</html>


/* file: styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #708238;
  text-align: center;
  height: 100vh;
}

.feature-card-container {
  max-width: 680px;
  max-height: 1000px;
  margin: auto;
  padding: 10px;
  text-align: left;
}

h1 {
  font-family: Arial, san-serif;
  font-size: 2rem;
  padding: 20px;

}

label {
  outline: 2px solid #a5a5a5;
  width: 300px;
  height: 150px;
  display: inline-block;
  border-radius: 10px;
  font-size: 1.3em;
  font-weight: bold;
  padding-top: 20px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background-color: #f1f8f0;
}

label:nth-child(even) {
  margin: 15px 0px 15px 15px;
}

label:hover {
  outline: 4px solid orange;
}

span {
  display: inline-block;
  font-size: 0.8em;
  margin: 20px 0;
  padding: 0.5em 0.2em;
}

input[type="checkbox"] {
  transition: all 0.3s;
  cursor: pointer;
  display: block;
  margin-left: 87%;
  margin-bottom: 10px;  
  appearance: none;
  width: 25px;
  height: 25px;
  border: 2px solid #a5a5a5;
  border-radius: 4px;
  background-color: #f5f5f5;
}

input[type="checkbox"]:hover {
  background-color: #a5a5a5;
  color: white;
}

input[type="checkbox"]:checked {
  background-color: #008000;
  color: orange;
  border: 4px solid orange;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  font-weight: bold;
  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/143.0.0.0 Safari/537.36

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

What are ‘the last two tests’?

What have you done to convince yourself that your code works correctly?

3

This was not requested and is a problem for the tests

2 Likes