Este es el sitio Subscription Form con CSS. El sitio número 21 del reto personal #100sitioswebchallenge
Puedes visualizar el código en: Subscription Form
DESAFÍOS
Este fue una landing page sencilla, donde estoy tratando de jugar un poco más con el parámetro CSS de opacidad, implementando una clase específica para cuando quiero usarlo:
.bg-dark {
background: rgba(0, 0, 0, 0.3);
}
La imagen que uso en el background tiene encima una background negro con opacidad 0.3
PROCESO
Usé la tipografía: Montserrat de Google Fonts y como recurso también uso Canva para el logo, de esta manera puedo concentrarme sólo en la maquetación del sitio.
Mockup (Bosquejo)
Este es el borrador del formulario de suscripción hecho en Figma.
HTML y CSS
Cuando tengo el bosquejo listo me es más fácil y rápido trabajar directamente en el bosquejo con HTML y CSS.
Y esta es la vista final del sitio
Sitio web responsivo
Dentro de la hoja de estilos, escribo el media querie necesario para que se pueda ver el formulario en aparatos móviles.
@media only screen and (max-width: 768px) {
/* Subscription */
#subscription {
padding-top: 80px;
}
#subscription p {
padding: 0px 0px 20px 0px;
}
#subscription input {
width: 90%;
margin-bottom: 5px;
}
.btn {
width: 90%;
}
}
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el código en: Subscription Form
Información técnica
- Figma
- Visual Studio Code
- HTML5 (Semántico)
- CSS (Grid)
- Sitio responsivo
- Github
- Netlify
Recursos
Unsplash
Deja tus comentarios y sugerencias para el sitio Subscription Form con CSS.
