Design a Feature Selection Page. I know this solution is bad and i need suggestions please

HTML-CSS
1 
<meta charset="utf-8">

<title>Selection Feature Page</title>

<link rel="stylesheet" href="styles.css" />

 <h1>Feature Selection</h1>

<label class="feature-card">Sim Lessons<input type="checkbox"><p>5 hours 1 on 1</p> </label>

<label class="feature-card">Gear<input type="checkbox"><p>Full explanation of gear<p> </label>

body {

height: 100vh;

background-color: #d3d3d3;

text-align: center;

}

.feature-card-container {

border: 2px solid black;

width: 500px;

height: 600px;

margin: 20px auto;

}

h1 {

margin: 30px;

}

label {

font-size: 1.4rem;

font-weight: 700;

}

p {

font-size: 1rem;

font-weight: 1;

}

.feature-card {

border: 2px solid #999999;

border-radius: 5px;

background-color: #f1f1f1;

padding: 20px 40px;

display: inline-block;

margin: 20px 0;

}

input[type=“checkbox”] {

appearance: none;

border: 2px solid red;

width: 20px;

height: 20px;

border-radius: 5px;

vertical-align: middle;

}

input[type=“checkbox”]:checked {

background-color: blue;

border-color: orange;

border-width: 3px;

}

input[type=“checkbox”]:checked::after {

content: “✓”;

display: block;

text-align: center;

color: white;

}

2

What do you need help with?

1 Like
3

Please update your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
4

Okay thank you for the tip.

5

I was having trouble moving the inputs to the upper right corners of the divs they were in. I am also finding the idea of dynamic sizing of containers to be confusing. When setting the size of the main container that all other divs are nested in how do i also make it so the nested divs are going to size correctly? I moved on to learn more and i came back to the lab today to see if i could do it better and i think i came up with a better solution but i still feel a little lost. Hopefully i can show you my code in this message and you can give me feed back on if it makes sense for what i was trying to achieve.

<!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">
        <div class="level-container">
        <label class="feature-card">Basic Level<span>Gain muscle</span>
            <input type="checkbox" />
        </label>
        </div>
        <div class="level-container">
        <label class="feature-card">Pro Level<span>Gain muscle and info</span>
            <input type="checkbox"  />
        </label>
        </div>
        <div class="level-container">
          <label class="feature-card">Expert Level<span>Gain muscle and knowledge</span>
            <input type="checkbox" />
          </label>
        </div>
        <div class="level-container">
          <label class="feature-card">On Another Level<span>This is for the real ones</span>
            <input type="checkbox" />
          </label>
        </div>          
    </div>

</body>

</html>

* {
  box-sizing: border-box;
}

h1 { 
  text-align: center;
  margin-top: 200px;
}

label {
  font-weight: bold;
  font-size: 1.2rem;
}

label span {
  font-weight: normal;
  font-size: 1rem;
}

.feature-card-container {
  width: 100%;
  max-width: 700px;
  min-width: 300px;
  padding: 20px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  row-gap: 30px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.level-container {
  border: 1px solid #00000055;
  width: 45%;
  height: 135px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
} 

input {
  appearance: none;
  border: 2px solid #00000055;
  width: 25px;
  height: 25px;
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 5px;
}

input:checked {
  background-color: #333333;
  border-color: #00ff0055;
}

input:checked::after {
  content: "âś“";
  display: block;
  text-align: center;
  color: white;
}

.level-container:hover {
  box-shadow: 0 0 5px;
  background-color: gray;
  transform: translate(10px, 10px)
}

Screenshot_5-2-2026_02947_www.freecodecamp.org
Screenshot_5-2-2026_02947_www.freecodecamp.org726Ă—513 47.2 KB

6

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').