Este es un sitio sencillo One Page construido con HTML y CSS Flex

Este es un sitio one page de 4 secciones. El proyecto número 40 del reto personal #100sitioswebchallenge

Puedes visualizar el sitio en: LP Guide

DESAFÍOS

Jugué un poco con los colores oficiales de Figma para cada sección. Basado en una landing page donde el Click Through Action que es al forma que se encuentra en la tercera sección. Y también estoy usando por primera vez con los íconos de Google.

Aquí la parte del llamado de los íconos de Google

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span class="material-icons md-48">list</span>

PROCESO

Paleta de colores y estilos

Paleta de colores: 25A6F4 8935F4 6826BC E23518 B92D16 4D4D4D

Tipografía:

Roboto de Google Fonts

Mockup (Bosquejo)

Este es el bosquejo del sitio, hecho en Figma.

HTML y CSS

Este es el proceso del sitio. Primero todo maquetado en HTML incluyendo el llamado a clases e identificadores para los estilos. Y por último los estilos con CSS.

Sitio web responsivo

Y por última la vista del sitio en móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: LP Guide

Información técnica

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

Recursos

Google Icons

Unsplash

Deja tus comentarios y sugerencias.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

100 Sitios Web Challenge 2024

100 Sitios Web Challenge 2024

https://www.youtube.com/watch?v=Pw5nzaXYvJ0 Tabla de Contenidos Introducción ¿Qué es el reto #100sitioswebchallenge? Aprendizajes del 2023 Reglas Conclusión Introducción Estoy emocionada de presentarte un desafío que nos llevará a explorar el fascinante mundo del...