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:

 

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

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Digital Teach

Información técnica

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

Recursos

Font Awesome License

Unsplash

Esta es una landing page con dos secciones de contenido y formularios de registro y acceso. Déjame tus comentarios y dudas.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado

Landing Page para Negocio

Landing Page para Negocio

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 Esta es una landing page para el lanzamiento de un nuevo producto o servicio, construído con HTML y...

Una Landing Page Sencilla

Una Landing Page Sencilla

https://www.youtube.com/watch?v=AotDOfaKss0 Tabla de Contenidos Introducción Desafíos Proceso Paleta de colores y estilos HTML y CSS Sitio web responsivo Publicación del sitio Información Técnica Recursos Introducción Esta es una landing page para el lanzamiento de un...

Página Estilo One Page

Página Estilo One Page

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 es una página web estilo One Page, la cuál está maquetada con HTML y estilizada con CSS, este...