INFORMATION & CODE
Responsive Timeline Display
This code creates a responsive vertical timeline that displays the release history of Super Mario games. The HTML provides the structure of the timeline, while the CSS controls its appearance, layout, colours, and responsiveness. The timeline is displayed inside a fixed-height container with vertical scrolling, allowing users to browse through each game release in chronological order.
The HTML begins by defining the webpage and importing an external stylesheet, Google Fonts, and the Font Awesome icon library. Inside the <body>, the .bg element acts as the scrollable viewing area, while the .timeline-container holds every timeline entry. Each event is contained within a .timeline element, which includes a .timeline-date displaying the release month and year, and a .title containing the game's name. Every timeline entry follows the same structure, making it easy to add, remove, or edit events without affecting the rest of the page.
The CSS styles the timeline to resemble a retro, game-inspired display. The .bg class creates a 500-pixel-high viewport with vertical scrolling, while .timeline-container provides a repeating patterned background and enough height to accommodate all timeline entries. The imported VT323 font reinforces the classic arcade appearance, and the date badges are styled with rounded borders, coloured backgrounds, and decorative dots to resemble markers along the timeline.
The layout alternates timeline entries between the left and right sides of the page using the :nth-child(even) selector. Odd-numbered entries float to the right, while even-numbered entries float to the left, producing a zigzag timeline effect. Additional :nth-child() selectors cycle through four different colours for the date badges and matching title text, giving the timeline visual variety without requiring individual styles for each event.
The media queries ensure the timeline remains usable on smaller devices. When the screen width falls below 767 pixels, all timeline entries become full width and stack vertically. The date badges are repositioned above each content box, creating a cleaner layout for mobile screens. A second media query further reduces the title font size on very small screens to improve readability.
To use this code, create an HTML file named it like index.html containing the timeline structure and save the CSS in a separate styles.css file. Opening the HTML page in a web browser will display the interactive timeline. New events can be added by copying an existing .timeline block and changing the date and title, while existing entries can be edited or removed as needed. The layout and colour scheme will automatically update based on the order of the timeline items, making the design easy to maintain and expand.
HTML
CSS