En el primer proyecto para certificación me piden hacer un formulario. Primero lo hice en visual studio code pues se me hacía mas comodo, lo acabé y pasé el codigo a freecodecamp, ya agregué el contenido en html pero no me deja darle estilo. Le doy en la opción de “vista” y en la opción de a lado que es para abrir completo el formulario y me sale el contenido nada más, pese a tener el stilo ya puesto.
El html:
Formulario De EncuestaFormulario de encuesta freeCodeCamp
Gracias por tomarse el tiempo para ayudarnos a mejorar la plataforma.
Nombre Correo Electrónico Edad(Opcional)
¿Qué opción describe mejor su función actual? ¿Recomendarias freeCodeCamp a un amigo? Definitivamente Tal vez No estoy seguro ¿Cuál es tu característica favorita de FreeCodeCamp? ¿Qué te gustaría ver mejorado?(Marque todo lo que corresponda)
Proyectos front-end Proyectos de back-end Visualización de datos Desafíos Comunidad de código abierto Salas de ayuda de Gitter Vídeos Reuniones en la ciudad Wiki Foro Cursos adicionales ¿Algún comentario o sugerencia?El style.css es este:
body {
color: #f5f6f7;
margin: 0;
width: 100%;
height: 100vh;
font-family: ‘poppins’, sans-serif;
font-size: 1rem;
background: linear-gradient(115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
background-attachment: fixed;
background-size: cover;
background-position: center;
}
label {
display: block;
font-size: 19px;
}
p {
text-align: center;
margin: 0.5em auto;
padding-bottom: 1.1em;
font-family: helvetica, Georgia;
font-style: italic;
font-weight: 100;
font-size: 19px;
width: 100%;
text-shadow: 1px 1px 5px rgba(0, 0, 28, 0.4);
}
.mi-parrafo {
display: inline;
font-size: 16px;
padding-left: 4.5px;
padding-bottom: 1px;
font-style: unset;
font-weight: 500;
}
h1 {
text-align: center;
margin: 1.5em auto 0 auto;
font-weight: 400;
font-size: 2.2rem;
width: 100%;
font-family: Georgia, ‘Times New Roman’, Times, serif;
text-shadow: 1px 1px 5px rgba(0, 0, 28, 0.6);
}
form {
margin: 0 auto;
max-width: 710px;
min-width: 300px;
width: 100%;
padding-bottom: 4em;
padding-left: 7px;
padding-right: 7px;
border-radius: 4px;
background-color: rgba(0, 0, 28, 0.67);
}
fieldset {
border: none;
border-radius: 4px;
padding: 2em 2.5em;
width: 630px;
margin: 0 auto;
}
fieldset:first-of-type {
padding-top: 3em;
padding-bottom: 0;
}
fieldset:last-of-type {
padding-top: 0.5em;
padding-bottom: 0em;
}
input, select, textarea {
width: 98%;
margin: 9px 0 32px 0;
min-height: 2em;
border-radius: 4px;
font-size: 17px;
padding-left: 12px;
background-color: rgba(255, 255, 255, 0.96);
border: 1px solid white;
color: rgb(85, 85, 85);
}
textarea {
padding-top: 7px;
padding-left: 8px;
border-radius: unset;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
padding: none;
}
select {
width: 100.5%;
padding: 1px 5px;
color: rgb(80, 80, 80);
height: 2.25em;
}
select:focus {
outline: 1.5px solid blue;
}
.mi-label {
margin-bottom: 7px;
}
input[type=“radio”] {
width: 20px;
height: 20px;
}
input[type=“checkbox”] {
width: 20px;
height: 20px;
}
input[type=“submit”] {
width: 89.5%;
min-width: 300px;
display: block;
margin: 0 auto;
height: 2.8em;
font-size: 1rem;
background-color: rgb(0, 150, 80);
border: none;
color: white;
}
::placeholder {
font-family: sans-serif;
}
Tu código hasta el momento
ADVERTENCIA
El código semilla del desafío y/o tu solución excedió la longitud máxima que podemos transferir del desafío.
Tendrás que dar un paso adicional aquí para que el código que escribiste se presente en un formato fácil de leer.
Por favor, copia/pega todo el código del editor que se muestra en el desafío desde el que acabas de enlazar.
Reemplaza estas dos oraciones con tu código copiado.
Por favor, deja la línea ``´ arriba y la línea ``` abajo,
porque permiten que tu código formatee correctamente en el post.
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36
Desafío: Encuesta - Crea un formulario de encuesta
Enlaza al desafío: