Sitio One Page Hecho Con CSS Y HTML

Este es un sitio sencillo maquetado con HTML y estilizado con CSS, con un poco de flex. El primer proyecto del reto personal #100sitioswebchallenge.

Puedes visualizar el sitio en: Simple Web I

DESAFÍOS

Este es el primer sitio del año, con el propósito de construir 100 sitios sencillos a lo largo del año. A partir de este proyecto quiero hacer sitios más limpios y escalables, por lo que en este proyecto encontrarás clases que estamos usando a lo largo del proyecto con el propósito de estar reutilizando estilos para aprovechar lo más que se pueda. Una de esas clases son el uso de los paddings representados con p-1 y p-2, fíjate muy bien cómo reuso este estilo a lo largo del proyecto.

PROCESO

Paleta de colores y estilos

Paleta de colores: 635AEC F8F7FB D0CCC9

Tipografía:

Montserrat de Google Fonts

Mockup (Bosquejo)

Este era el bosquejo original del proyecto, pero se fijarán como hice el cambio de algunas secciones.

HTML y CSS

Aquí se puede observar el sitio maquetado con HTML llamando a las clases adecuadas, y en otra imagen el sitio ya estilizado.

Sitio web responsivo

Por último tenemos el sitio de manera responsiva sólo en móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Simple Web I

Información técnica

  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS (Flex)
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Unsplash

Freepik

Deja tus comentarios y sugerencias.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Sitio Web de Boda – Dark Mode

Sitio Web de Boda – Dark Mode

Tabla de contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...

Sitio Web de Boda

Sitio Web de Boda

Tabla de contenidos Introducción Proceso Paleta de colores y estilos Bosquejo HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de...

Sitio de Vestido de Novias – Pink

Sitio de Vestido de Novias – Pink

Tabla de contenidos Introducción Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información técnica Recursos Introducción Este sitio estilo One Page está maquetado con HTML y estilizado con CSS, así como el uso de flexbox...