Skip to content

IlCarlosS/CosmicDrift

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

COSMIC DRIFT

Descripción del Proyecto

Cosmic Drift es una maqueta de sitio web temática, diseñada para simular la interfaz de una bitácora de exploración espacial o un portal de información centrado en la ciencia ficción oscura y el terror cósmico. El proyecto se enfoca en demostrar habilidades de maquetación avanzada, diseño responsivo y el uso de animaciones sutiles y detalladas, manteniendo una estética de "Dark Futurism" con paletas de color neón y terminal. Este proyecto fue desarrollado como una prueba de concepto para integrar múltiples layouts complejos (Bento Grids, Newspaper Layouts, Two-Column Feeds) dentro de una coherente experiencia de usuario.

Características Principales

Estética Inmersiva: Paleta de colores restringida (Rojo, Verde Neón, Oscuros) para replicar la sensación de una terminal antigua y tecnología de baja fidelidad. Diseño Responsivo Completo: Adaptación perfecta a móviles, tabletas y escritorios, incluyendo un menú hamburger funcional con JavaScript.

Maquetación Avanzada (CSS Grid/Flexbox):

  • Galería: Implementación de un Bento Grid dinámico.
  • Artículos: Uso de un Grid tipo Newspaper para priorizar contenido visualmente.
  • Foro: Layout de dos columnas (75/25) similar a plataformas de comunidad modernas.
  • Funcionalidad Interactiva.
  • Modal de Galería: Implementación de un modal con JavaScript para la visualización de imágenes, incluyendo navegación por teclado (← y →).
  • Animaciones CSS.

TECNOLOGÍAS_BASE: HTML5, CSS3 (Grid/Flexbox), JavaScript ES6, Moving-letters By Tobias Ahlin. TIPOGRAFÍA: Google Fonts: Space Mono. CRÉDITOS_VISUALES_Y_MULTIMEDIA: Iconos: Tabler Icons (SVG). Imágenes: Todas las imágenes son cortesía de artistas y fotógrafos en Unsplash, que nos regalan su visión del cosmos. Música: The Grey Room, Density & Time, Golden Palms DESARROLLADOR: Carlos Solis. ASISTENCIA_CREATIVA: Gemini 2.5 Pro (Asistencia en Desarrollo, Estructura y Textos conceptuales).

About

Immersive "Dark Futurism" space exploration mockup. Showcasing advanced CSS layouts (Bento Grid, Newspaper), responsive design, and smooth animations using Vanilla JavaScript.

Topics

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors