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

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