Tell us what’s happening:
The last three steps still fail, even though the code appears to be correct.
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 for="uno">
<input type="checkbox" id="uno">Uno
</label>
<label for="due">
<input type="checkbox" id="due">Due
</label>
<label for="tre">
<input type="checkbox" id="tre">Tre
</label>
<label for="quattro">
<input type="checkbox" id="quattro">Quattro
</label>
<label for="cinque">
<input type="checkbox" id="cinque">Cinque
</label>
<label for="sei">
<input type="checkbox" id="sei">Sei
</label>
<label for="sette">
<input type="checkbox" id="sette">Sette
</label>
<label for="otto">
<input type="checkbox" id="otto">Otto
</label>
</div>
</body>
</html>
/* file: styles.css */
body {
text-align:center;
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
.feature-card-container {
width: 300px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
justify-items: start;
}
label {
display: inline-flex;
align-items: center;
gap: 5px;
}
input[type="checkbox"] {
appearance:none;
border: 2px solid yellow;
width: 20px;
height: 20px;
cursor:pointer;
}
input[type="checkbox"]:checked
{ background-color: yellow;
border-color:orange;
}
input[type="checkbox"]:checked::after{
content: "✓";
display:block;
text-align: center;
color:orange;
}
label:hover{ border: 2px solid orange; }
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page
