Tell us what’s happening:
It says I haven’t added a background-color property to the input when it’s checked but everything works as intended but still the built in ai says I might’ve input a wrong value. I don’t understand the issue
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">
<div class="card">
<label for="feature1" class="feature-card">
Feature 1
<input type="checkbox" id="feature1" />
</label>
</div>
<div class="card">
<label for="feature2" class="feature-card">
Feature 2
<input type="checkbox" id="feature1" />
</label>
</div>
<div class="card">
<label for="feature3" class="feature-card">
Feature 3
<input type="checkbox" id="feature1" />
</label>
</div>
<div class="card">
<label for="feature4" class="feature-card">
Feature 4
<input type="checkbox" id="feature1" />
</label>
</div>
<div class="card">
<label for="feature5" class="feature-card">
Feature 5
<input type="checkbox" id="feature1" />
</label>
</div>
<div class="card">
<label for="feature6" class="feature-card">
Feature 6
<input type="checkbox" id="feature1" />
</label>
</div>
<div class="card">
<label for="feature7" class="feature-card">
Feature 7
<input type="checkbox" id="feature1" />
</label>
</div>
<div class="card">
<label for="feature8" class="feature-card">
Feature 8
<input type="checkbox" id="feature1" />
</label>
</div>
</div>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
}
body {
background: linear-gradient(135deg, #770c0c 20%, #218a2a);
margin: 0 auto;
max-width: fit-content;
min-height: 200vh;
}
.feature-card-container {
display: grid;
grid-template-columns: 40px 40px;
gap: 200px 400px;
}
.feature-card-container,
.feature-card {
white-space: nowrap;
}
label,
input {
display: block;
}
h1 {
font-family: "Poppins", sans-serif;
margin: 20px;
padding: 20px;
}
label {
font-family: sans-serif, Helvetica;
font-weight: 600;
text-align: center;
}
.card {
width: fit-content;
margin: 20px -135px;
margin-bottom: -70px;
padding: 10px 60px;
border: 2px solid #660909;
transition:
transform 0.5s ease,
box-shadow 0.5s ease;
will-change: trasform;
}
.card:hover {
transform: scale(1.09);
box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.3);
z-index: 999;
}
.card input {
margin: 25px;
padding: 20px;
}
input[type="checkbox"] {
appearance: none;
border: 2px solid #770c0c;
content: " ";
width: 20px;
height: 20px;
cursor: pointer;
border-radius: 4px;
background-color: white;
vertical-align: middle;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
input[type="checkbox"]:checked {
background-color: #218a2a;
border-color: #770c0c;
transition: transform 0.5s ease, box-shadow 0.5s ease;
will-change: transform;
color: #218a2a;
}
input[type="checkbox"]:checked::after {
content: "✓";
display: block;
text-align: center;
width: -20px;
font-size: large;
color: #660909;
font-weight: 900;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page