Landing Page para sitio de Hiking

Este proyecto es una landing page para sitio de hiking. Un sitio muy sencillo trabajado con HTML y CSS (SASS). Sitio número 28 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: Hiking Site

DESAFÍOS

Este sitio fue interesante trabajar con una cabecera estilo display, seguí un poco los estilos CSS que usa bootstrap y cree mi propio pequeño repositorio para estar dando algunos estilos al sitio.

.display-1 { font-size: 6rem; }

.display-2 { font-size: 5.5rem; }

.display-3 { font-size: 4.5rem; }

.display-4 { font-size: 3.5rem; }

PROCESO

Paleta de colores y estilos

Paleta de colores: 000000 FFFFFF

Tipografía:

 

 

Font Awesome para los íconos

Mockup (Bosquejo)

Con ayuda de Figma realicé el bosquejo del sitio. A continuación pueden ver el proceso de tener un borrador como primera parte y posteriormente agregarle las imágenes y colores finales.

HTML y CSS

Una vez listo el bosquejo empiezo a maquetar el sitio con HTML y CSS.

Sitio web responsivo

Y por último el sitio queda listo para responder aparatos móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Hiking Site

Información técnica

  • Figma
  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS (SASS, Grid)
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Font Awesome License

Unsplash

 

Compárteme tus comentarios y dudas. Este proyecto es una landing page para sitio de hiking.

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