Tell us what’s happening:
Step 13 doesn’t work, I think I did everything correctly. Why doesn’t it work?
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="1" class="feature-card">
<input type="checkbox" name="#" id="1" />
FEATURE N°1
</label>
<label for="2" class="feature-card">
<input type="checkbox" name="#" id="2" />
FEATURE N°2
</label>
<label for="3" class="feature-card">
<input type="checkbox" name="#" id="3" />
FEATURE N°3
</label>
<label for="4" class="feature-card">
<input type="checkbox" name="#" id="4" />
FEATURE N°4
</label>
</div>
</body>
</html>
/* file: styles.css */
h1 {
text-align: center;
color: red;
text-shadow: 0px 0px 15px black;
}
div {
margin: auto;
display: grid;
border: 1px solid black;
box-shadow: 0px 0px 20px rgb(230, 17, 17);
width: 60%;
grid-template-columns: repeat(2, 1fr);
border-radius: 10px;
}
label {
border: 1px solid red;
border-radius: 10px;
color: red;
height: 3em;
text-align: center;
margin: 10px;
padding: 10px;
display: block;
font-weight: bold;
font-size: 1.2em;
&:hover {
cursor: pointer;
outline: 2px black solid;
}
}
input[type="checkbox"] {
appearance: none;
border: 3px solid red;
border-radius: 5px;
width: 20px;
height: 20px;
margin: 10px;
vertical-align: middle;
}
input[type="checkbox"]:checked {
border-color: green;
background-color: black;
}
input[type="checkbox"]:checked::after {
content: "✓ ";
color: red;
display: block;
text-align: center;
font-weight: bold;
line-height: 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page