https://github.com/saadmahi/03-page-slide

🎮 Discover top games on our web showcase. Sleek slider, smooth CSS animations highlight 'Death Stranding,' 'Last of Us 2,' 'Until Dawn,' 'Outlast 2,' and 'Resident Evil 8.' Crafted for a visually appealing experience.
https://github.com/saadmahi/03-page-slide

css-animations css-keyframes css-slideshow

Last synced: 8 days ago
JSON representation

🎮 Discover top games on our web showcase. Sleek slider, smooth CSS animations highlight 'Death Stranding,' 'Last of Us 2,' 'Until Dawn,' 'Outlast 2,' and 'Resident Evil 8.' Crafted for a visually appealing experience.

• Host: GitHub
• URL: https://github.com/saadmahi/03-page-slide
• Owner: SaadMahi
• Created: 2022-11-29T10:40:33.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-22T16:43:22.000Z (12 months ago)
• Last Synced: 2023-11-22T17:42:00.091Z (12 months ago)
• Topics: css-animations, css-keyframes, css-slideshow
• Language: HTML
• Homepage:
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Webpage Showcase: Video Games

![Capture](https://github.com/SaadMahi/03-Page-Slide/assets/117567622/3616797c-bb74-4002-8433-587fdf754fe1)

This webpage is a visually captivating showcase of video games, presented through an engaging slider design. The slider incorporates five slides, each dedicated to a specific game: "Death Stranding," "Last of Us 2," "Until Dawn," "Outlast 2," and "Resident Evil 8." Each slide features a stunning background image relevant to the showcased game.

## Key Features:

- **Slider Animation:**

  The slider employs a smooth leftward animation, seamlessly transitioning between game slides every 10 seconds. This dynamic movement captures attention and adds an element of interactivity.

- **Informative Captions:**

  Beneath each game slide, there is an informative caption with a bold game title ("h2") and a concise description ("p"). These captions provide essential details about each game, including development information, genres, and notable features.

- **Responsive Design:**

  The webpage is designed to be responsive, ensuring an optimal viewing experience across various devices. On smaller screens (max-width: 768px), the captions adjust their position and font sizes for improved readability.

- **Aesthetic Styling:**

  The overall aesthetic is enhanced by a dark-themed background for the captions, offering a stylish contrast to the vibrant game images. The font choices, sizing, and transitions contribute to a cohesive and visually appealing design.

- **Game-Specific Backgrounds:**

  Each game slide has a unique background image sourced from external URLs, aligning with the theme and atmosphere of the respective game.

## CSS Functionality:

The CSS styles contribute to the webpage's layout and presentation, including the slider's size, animation, and the responsive design for smaller screens. The styling emphasizes readability and visual appeal, creating an immersive experience for users exploring the showcased video games.

This combination of HTML and CSS establishes the foundation for a compelling and interactive web showcase, inviting users to discover more about these captivating video games.