Tell us what’s happening:
I’ve looked on all the forums regarding this exercise but I can’t figure out what’s wrong with my code. I’ve removed “transition” from my code but the last 3 steps keep failing.
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><input type="checkbox"> CPU</label>
<label><input type="checkbox"> GPU</label>
<label><input type="checkbox"> RAM</label>
<label><input type="checkbox"> Storage</label>
<label><input type="checkbox"> Cooling</label>
<label><input type="checkbox"> RGB Lighting</label>
</div>
</body>
</html>
/* file: styles.css */
body {
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
.feature-card-container {
text-align: center;
background-color: #f2f2f2;
padding:60px;
}
label {
font-size: 1.5em;
padding: 50px;
box-shadow: 0px 1px 2px #002233;
width: 200px;
margin: 5px;
border-radius: 8px;
display: inline-block;
cursor: pointer;
}
label:hover {
border: #115500;
box-shadow: 0px 1px 1px 2px #005555;
}
input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #005555;
background-color: white;
border-style: solid;
display: inline-block;
vertical-align: middle;
border-radius: 4px;
}
input[type="checkbox"]:checked {
background-color:#005555;
border-color:#005500;
}
input[type="checkbox"]:checked::after {
content:"✓";
display: block;
color: #ffdd00;
text-align: center;
line-height: 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page