Sitio Sencillo con imagen en background del 50% (HTML y CSS)

Este es un sitio sencillo con imagen en background del 50%, construido con HTML y CSS. El 15 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Clean Cam

DESAFÍOS

La parte más divertida de este mini proyecto fue juga con la imagen como background en la cabecera, el cual se despliega sólo en el 50% del total de la pantalla. Para lograr ese efecto use:

#mainheader {

  background: url('../img/background.jpg');

  background-repeat: no-repeat;

  background-position: left;

  background-size: 50% 100%;

  height: 100vh;

}

PROCESO

Paleta de colores y estilos

Paleta de colores: F3D8DB E19EA5 9EE1DA

Tipografía:

Mockup (Bosquejo)

Este es el bosquejo del sitio hecho con Figma

HTML y CSS

Aquí se puede ver el proceso del sitio, primero hecho con HTML y posteriormente estilizado con CSS.

Sitio web responsivo

El sitio visto desde móviles

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Clean Cam

Información técnica

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

Recursos

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...