Tell us what’s happening:
Point 14 and 15 dont seem to be working.
I have checked my code, it seems to work visually when checked the colour changes for the background and border, however it doesnt seem to be accepted. I asked AI and also can’t seem to figure it out, maybe I am asking it wrong.
I see a few people are having this happen.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Selection Feature Page</title>
</head>
<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
<label for="cloud" class="feature-card"><input type="checkbox" id="cloud" >Cloud Storage</label>
<label for="support" class="feature-card"><input type="checkbox" id="support">Dedicated Support</label>
</div>
</body>
</html>
/* file: styles.css */
body {
background-color: f0f0f0;
text-align: center;
font-size: 16px;
font-family: Tahoma;
}
.feature-card-container {
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
}
label {
width: 40%;
padding: 20px;
margin: 0 auto;
box-shadow: 0 0 3px black;
background-color: #a5bfe4;
cursor: pointer;
}
input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
cursor: pointer;
border-radius: 4px;
background-color: white;
border: 2px solid #c0b9ee;
transition: all 0.3s;
vertical-align: middle;
margin: 10px;
}
label:hover {
border: 1px solid #559bd8;
}
input[type="checkbox"]:checked {
background-color: #c0b9ee;
border-color: #5e587f;
}
input[type="checkbox"]:checked::after {
content: "✓";
display: block;
text-align: center;
}
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/26.2 Safari/605.1.15
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page
