This project is a responsive and interactive character selection interface developed with HTML, CSS, and JavaScript. The interface allows players to dynamically choose characters, with animated effects, background visuals, and adjustments for mobile devices. This project was inspired by the YouTube channel DEV EM DOBRO.
- Hover Selection: Characters dynamically change when hovered over, highlighting the selected character.
- Responsive Design: Optimized for various screen sizes, from large desktops to mobile devices.
- Animations and Effects: Glowing effects and animations enhance the user experience, providing feedback for interactions.
- Custom Fonts: Utilizes special fonts for a unique, game-inspired aesthetic.
- Background Image Changes: Background images adapt based on screen size for an optimized mobile experience.
- HTML5: Structure of the page and character selection interface.
- CSS3: Styling with animations, responsive layouts, and custom fonts.
- JavaScript: Adds interactivity for character selection and effects on mouse hover.
The project utilizes media queries to adjust layout, images, and font sizes for devices such as tablets and smartphones. Background images change dynamically based on screen size, providing an optimized experience on mobile.
- Colors and Variables: CSS variables for consistent color schemes and easy theme customization.
- Fonts: Custom fonts (WOFF and OTF) create a unique visual identity.
- Glowing Effects: CSS keyframes for glowing animations in blue and red, depending on the selected character.
- Hover Effects: Scale and glow animations provide feedback for user interactions.
- Character Details: Add a popup or overlay to show character details when selected.
- Sound Effects: Incorporate sound for character selection, increasing interactivity.
- Backend Integration: Connect to a database to save character preferences.
Feel free to contribute to this project by submitting issues or pull requests.