# Design a Feature Selection Page - Design a Feature Selection Page

**URL:** <https://forum.freecodecamp.org/t/design-a-feature-selection-page-design-a-feature-selection-page/772204>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [January 1, 2026, 11:35pm UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page-design-a-feature-selection-page/772204 "2026-01-01T23:35:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![georgekordzaia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/georgekordzaia/32/381946_2.png) [@georgekordzaia](https://forum.freecodecamp.org/u/georgekordzaia)\
**Post date:** [January 1, 2026, 11:35pm UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page-design-a-feature-selection-page/772204/1 "2026-01-01T23:35:08Z")

</div>

### 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

```html
<!-- 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>

```

```css
/* 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

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-feature-selection/design-a-feature-selection-page)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![JeremyLT](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremylt/32/291894_2.png) [@JeremyLT](https://forum.freecodecamp.org/u/JeremyLT)\
**Post date:** [January 2, 2026, 12:03am UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page-design-a-feature-selection-page/772204/2 "2026-01-02T00:03:23Z")

</div>

What are ‘the last two tests’?

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

---

<div class="post-metadata">

**Author:** ![JeremyLT](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremylt/32/291894_2.png) [@JeremyLT](https://forum.freecodecamp.org/u/JeremyLT)\
**Post date:** [January 2, 2026, 12:06am UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page-design-a-feature-selection-page/772204/3 "2026-01-02T00:06:33Z")

</div>

> [@georgekordzaia](#):
>
> `transition: all 0.3s;`

This was not requested and is a problem for the tests

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [May 8, 2026, 1:58pm UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page-design-a-feature-selection-page/772204/4 "2026-05-08T13:58:03Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.