Ver todos los proyectos

Static Product Landing Page

  • HTML
  • CSS
  • Cloudflare

A static product landing page applying semantic HTML and CSS styles for one of the freeCodeCamp evaluations.

Descripción de la imagen
Ver Proyecto Ver código

Para esta web estática de tipo “landing page” use como producto el teclado mecánico “Block” de la marca Lofree. La página está inspirada en un tipo de diseño “Bento” diseñada para destacar las características clave del producto, como su diseño elegante, iluminación personalizable y sonido armonioso. Utilice imágenes originales del productos y las almacene en Cloudflare R2, para crear una experiencia visual moderna y atractiva.

Conocimientos Aplicados

  • Diseño responsivo: Uso de media queries para adaptar la página a diferentes dispositivos y tamaños de pantalla.
  • Maquetación con HTML y CSS: Estructura semántica y estilos personalizados para crear una interfaz atractiva y funcional.
  • Efectos visuales: Implementación de un “infinite marquee” para mostrar texto en un desplazamiento horizontal infinito.
  • Integración de imágenes y video: Uso de Cloudflare R2 para almacenar y servir imágenes personalizadas, y de un video embebido para mostrar el producto en acción.
  • Navegación interna: Creación de una barra de navegación fija con enlaces que permiten desplazarse a diferentes secciones de la página.
  • Formulario interactivo: Inclusión de un formulario con validación HTML5 para capturar direcciones de correo electrónico.

Conclusión

Este proyecto no solo cumple con los requisitos técnicos establecidos por freeCodeCamp, sino que también incorpora elementos creativos como el “infinite marquee”. A través de su desarrollo, reforcé mis habilidades en diseño responsivo, maquetación HTML/CSS, efectos visuales con CSS y manipulación del DOM. Además, me permitió explorar la integración de servicios externos como Cloudflare R2 para optimizar la carga de imágenes.