Landing page con dos secciones

Esta es una landing page con dos secciones de contenido y formularios de registro y acceso. El sitio número 29 parte del reto #100sitioswebchallenge

Puedes visualizar el sitio en: Digital Teach

DESAFÍOS

Este fue un sitio inspirado em hacer algo diferente com el background, hasta ahora la segunda columna de la sección de inicio no la pude hacer completamente en CSS. Por el momento la dejé como una imagen de background para que se viera el efecto de dos columnas, tengo que dedicarle más tiempo para saber cómo se puede lograr hacer las figuras y fotografías sólo con estilos.

PROCESO

Paleta de colores y estilos

Paleta de colores: 331F99 D6D1F5 ED639E B05CBA colours.cafe

Tipografía:

Open Sans de Google Fonts para el título
Montserrat Google Fonts para el cuerpo del sitio

Íconos: FontAwesome

Mockup (Bosquejo)

Figma me permite ahorrar mucho tiempo para conceptualizar una idea y hacer el bosquejo del sitio. Abajo podrán ver el proceso de tener un borrador listo a poco a poco irle agregando los elementos de los colores y fotografías para terminar el concepto completo.

HTML y CSS

Una vez listo el bosquejo final empiezo a trabajar con mi editor VS Code para maquetar el sitio completamente con HTML y CSS.

Sitio web responsivo

Aquí podrán ver cómo el sitio se visualiza cuando la pantalla o monitor es más pequeño que el de la computadora de escritorio o laptop. Básicamente vista en móviles.