Este es un sitio web demo, el noveno sitio parte del reto personal #100sitioswebchallenge. Estuve experimentando un poco con los gradientes en css por lo que no tengo un nombre más específico.
Puedes ver el sitio en: Demo Website
DESAFÍOS
Estuvo jugando con los grados de color que puedes poner a una figura. En este sitio, aún no pude hacerlo con la página de inicio, eso fue completamente hecho con imagen. Pero estuve jugando con los botones y una sección de “futures” donde pude poner hasta 3 diferentes colores y también manipular el grado de inclinación del color.
Seguiré manipulando CSS para ver cómo puedo modificar el contorno de una figura para lograr diferentes efectos.
PROCESO
Paleta de colores y estilos
Esta fue la paleta de colores que usé para el proyecto, siempre apoyándome con los recursos de colours.cafe; 89C0B7 B7E1E4 6F91B5 EF8F88.
Usé la tipografía de Google Fonts; Montserrat.
Y los íconos para las redes sociales de Font Awesome.
Mockup (Bosquejo)
Para hacer los bosquejos de este reto uso Figma. Ya que me ahorra mucho tiempo en planear el sitio.
Aquí podrás ver la transición de la idea en papel, hasta pasarlo de manera digital a Figma.
HTML y CSS
Aquí puedes ver el poder de los estilos, cuando todo el sitio está listo maquetado en HTML en la primera imagen, y en video podrás ver cómo una vez los estilos entran el diseño del sitio cambia totalmente.
Sitio web responsivo
Por último, como parte de este reto termino el sitio de manera responsiva para que sea posible visualizarlo en aparatos móviles.
Esta es la línea que llama a los estilos una vez que el sitio se esté visualizando en pantallas móviles.
<link rel="stylesheet" media="screen and (max-width:768px)" href="css/mobile.css">
Publicación del sitio
Puedes ver el Código del sitio en mi repositorio dentro de Github
O también ve el sitio en vivo en: Demo Website
Información técnica
- Figma – Diseño de bosquejo
- VS Code
- HTML5 (Semántico)
- CSS (Variables)
- Sitio responsivo
- Github
- Netlify
Recursos
Déjame tus comentarios y sugerencias. Sitio Web Demo sencillo creado con HTMl y CSS.
