Tell us what’s happening:
necesito ayuda al poner la casilla de verificacion no me acepta mi codigo que aparentemente funciona correctamente son del paso 13 al 15
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>
<h1>Feature Selection</h1>
<div class="feature-card-container">
<label class="feature-card">
<input type="checkbox">
Modo Oscuro Automático
</label>
<label class="feature-card">
<input type="checkbox">
Notificaciones Push
</label>
<label class="feature-card">
<input type="checkbox">
Sincronización en la Nube
</label>
</div>
<body>
</body>
</html>
/* file: styles.css */
body {
background-color: #121214;
color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
color: #e1e1e6;
}
.feature-card-container {
display: flex;
max-width: 800px;
padding: 1rem;
}
.feature-card {
background-color: #121214;
padding: 1.5rem 2rem;
border-radius: 12px;
display: flex;
align-items: center;
cursor: pointer;
font-weight: 600;
transition: transform 0.2s, background-color 0.2s;
user-select: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.feature-card:hover {
transform: translateY(-2px);
background-color: #1212b5;
}
input[type="checkbox"] {
appearance: none;
width: 24px;
height: 24px;
border-width: 2px;
border-style: solid;
border-color: #00adb5;
border-radius: 6px;
outline: none;
cursor: pointer;
display: grid;
place-content: center;
transition: all 0.2s ease;
}
input[type="checkbox"]:checked {
background-color: #00adb5;
border-color: #00adb5;
}
input[type="checkbox"]::before {
content: "✓";
font-size: 16px;
color: #121214;
font-weight: bold;
transform: scale(0);
transition: transform 0.1s ease-in-out;
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page
GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub
Tell us what’s happening:
Mi codigo funciona aparentemente bien pero no me deja avanzar necesito ayuda
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>
<h1>Feature Selection</h1>
<div class="feature-card-container">
<label class="feature-card">
<input type="checkbox">
Modo Oscuro Automático
</label>
<label class="feature-card">
<input type="checkbox">
Notificaciones Push
</label>
<label class="feature-card">
<input type="checkbox">
Sincronización en la Nube
</label>
</div>
<body>
</body>
</html>
/* file: styles.css */
body {
background-color: #121214;
color: #ffffff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
color: #e1e1e6;
}
.feature-card-container {
display: flex;
max-width: 800px;
padding: 1rem;
}
.feature-card {
background-color: #121214;
padding: 1.5rem 2rem;
border-radius: 12px;
display: flex;
align-items: center;
cursor: pointer;
font-weight: 600;
transition: transform 0.2s, background-color 0.2s;
user-select: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.feature-card:hover {
transform: translateY(-2px);
background-color: #1212b5;
}
input[type="checkbox"] {
appearance: none;
width: 24px;
height: 24px;
border-width: 2px;
border-style: solid;
border-color: #00adb5;
border-radius: 6px;
outline: none;
cursor: pointer;
display: grid;
place-content: center;
transition: all 0.2s ease;
}
input[type="checkbox"]:checked {
background-color: #00adb5;
border-color: #00adb5;
}
input[type="checkbox"]::before {
content: "✓";
font-size: 16px;
color: #121214;
font-weight: bold;
transform: scale(0);
transition: transform 0.1s ease-in-out;
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page
GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub
ILM
3
try removing transition proeprty, the tests are not equipped to deal with the delay in changes to the property values
ILM
4
which pseudoelement is used in the workshop right before this to create the custom checkbox mark?
for the colors, try to remove the transition property, the tests are not equipped to deal with a delayed color change
Welcome to the forum @diego.gatit.uchiha
There are no elements in the body element.
Happy coding
Hi @diego.gatit.uchiha
I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.
Happy coding
elimine el transition, y cambie el checked before por after pero por el paso 15 no me deja avanzar
ILM
8
please share your updated code