Sitio Web Demo

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

Font Awesome License

Déjame tus comentarios y sugerencias. Sitio Web Demo sencillo creado con HTMl y CSS.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado