Este es un sitio con background oscuro, tipo dark mode. Maquetado con HTML y CSS, el reto número 3 del reto personal #100sitioswebchallenge.
Puedes visualizar el sitio en: Gradients
DESAFÍOS
Lo que me gustó más de hacer este sitio es lo estético de los colores y cómo se perciben con un estilo dark mode. La parte del formulario de contacto se logró fácilmente con los estilos, si se fijan por cada etiqueta de field e input lo agrupa con una clase en div form-group lo cuál logra el estilo rápido para cada fila.
<div class="form-group">
<label for="name">Name</label>
<input type="text">
</div>
PROCESO
Paleta de colores y estilos
Paleta de colores: 0E0A27 D0004A 6C1098 1B33F0
Tipografía:
Mockup (Bosquejo)
Este es el bosquejo del sitio realizado con Figma, esto sin duda me ahorra mucho tiempo para empezar a maquetar el sitio.
HTML y CSS
Junto con el editor de Visual Studio Code, empiezo a maquetar primero sólo HTML y posteriormente lo estilizo con CSS.
Sitio maquetado con HTML
Sitio estilizado con CSS
Sitio web responsivo
Una vez terminado el sitio trabajamos con media queries para que el sitio se pueda visualizar en medios móviles como smartphones e ipads.
Publicación del sitio
Consulta el código del sitio en Github
Puedes visualizar el sitio en: Gradients
Información técnica
- Visual Studio Code
- HTML5 (Semántico)
- CSS
- Sitio responsivo
- Github
- Netlify
Recursos
Icons
Este fue el sitio one page tipo dark mode, maquetado con HTML y CSS.
