PixelHub is a video game website designed to provide a visually appealing and organized experience to users. The project is built with HTML, CSS and JavaScript to provide a modern and functional interface. The following details the structure and technologies used in the development of PixelHub.
PixelHub is a website that displays a list of games with images and descriptions, organized in a grid format. It also provides additional information through a modal for a more detailed view of selected games. The design includes a fixed navigation bar and a wallpaper that enhances the aesthetics of the site.
- HTML: To structure the page content.
- CSS: For layout and visual presentation, including responsive styles and animations.
- JavaScript: For interactive functionality, such as carousel and modal control.
- Bootstrap: For UI components and additional styling.
- Chart.js: For interactive charts on the inventory page.
- Google Fonts: For improving the typography of the project.
The project is organized as follows:
index.html: Main file containing the page structure.styles/: Folder with CSS files to style the project.scripts/: Folder with JavaScript files for interactive functionality.images/: Folder with the images used in the application.videos/: Folder with the videos shown in the carousel and modal.
The HTML defines the structure of the content, including the navigation bar, the main container for the games and the modal for viewing images and videos in detail.
CSS takes care of the design and aesthetics of the website, covering:
- Base styles: General configuration of margins, paddings and the base font.
- Header and navigation design: Styles for the fixed navigation bar and the elements within it.
- Content cards: Design of cards displaying games with images, titles and descriptions.
- Accessibility: Settings to ensure the website is accessible and usable on mobile devices.
The JavaScript file manages the following functionality:
- Modals: Functionalities to open and close the image and video modal.
- Carousels: Logic for navigating through images in a carousel (although not yet implemented in the current project).
(Here I will add some screenshots of your website to show the layout and main features).
For any questions or comments, you can contact the developer:
- Name: StanlyDev
- Email: stanvsdev@gmail.com
- GitHub: https://github.com/StanlyDev
PixelHub es un sitio web de videojuegos diseñado para proporcionar una experiencia visualmente atractiva y organizada para los usuarios. El proyecto está construido con HTML, CSS y JavaScript para ofrecer una interfaz moderna y funcional. A continuación, se detalla la estructura y las tecnologías utilizadas en el desarrollo de PixelHub.
PixelHub es un sitio web que muestra una lista de juegos con imágenes y descripciones, organizado en un formato de cuadrícula. Además, proporciona información adicional a través de un modal para una vista más detallada de los elementos seleccionados. El diseño incluye una barra de navegación fija y un fondo de pantalla que mejora la estética del sitio.
- HTML: Para estructurar el contenido de la página.
- CSS: Para el diseño y la presentación visual, incluyendo estilos responsivos y animaciones.
- JavaScript: Para la funcionalidad interactiva, como el control de carruseles y modales.
- Bootstrap: Para componentes de interfaz de usuario y estilos adicionales.
- Chart.js: Para gráficos interactivos en la página de inventario.
- Google Fonts: Para mejorar la tipografía del proyecto.
El proyecto se organiza de la siguiente manera:
index.html: Archivo principal que contiene la estructura de la página.styles/: Carpeta con archivos CSS para el estilo del proyecto.scripts/: Carpeta con archivos JavaScript para la funcionalidad interactiva.images/: Carpeta con las imágenes utilizadas en la aplicación.videos/: Carpeta con los videos que se muestran en el carrusel y el modal.
El HTML define la estructura del contenido, incluyendo la barra de navegación, el contenedor principal para los juegos y el modal para ver imágenes y videos en detalle.
El CSS se encarga del diseño y la estética del sitio web, abarcando:
- Estilos Base: Configuración general de márgenes, paddings y la fuente base.
- Diseño del Encabezado y la Navegación: Estilo para la barra de navegación fija y los elementos dentro de ella.
- Tarjetas de Contenido: Diseño de tarjetas que muestran juegos con imágenes, títulos y descripciones.
- Responsividad: Ajustes para asegurar que el sitio web sea accesible y usable en dispositivos móviles.
El archivo JavaScript maneja las siguientes funcionalidades:
- Modales: Funcionalidades para abrir y cerrar el modal de imágenes y videos.
- Carruseles: Lógica para la navegación de imágenes en un carrusel (aunque aún no implementado en el proyecto actual).
(Aquí agregaré algunas capturas de pantalla de tu sitio web para mostrar el diseño y las características principales).
Para cualquier pregunta o comentario, puedes ponerte en contacto con el desarrollador:
- Nombre: StanlyDev
- Correo Electrónico: stanvsdev@gmail.com
- GitHub: https://github.com/StanlyDev