From 5b453397fcb523086695649bd2991bb5f37d9106 Mon Sep 17 00:00:00 2001 From: AmmarSAA Date: Fri, 18 Oct 2024 17:50:54 +0500 Subject: [PATCH] FEAT: Add Adobe Flash Games Directory page This commit adds the HTML and CSS code for the Adobe Flash Games Directory page. The page includes a collection of Adobe Flash games that can be played online for free. It also provides information on how to install and play these games using a Flash Player emulator or standalone Flash Player. The HTML code includes the structure of the page, including headings, paragraphs, and links to individual games. The CSS code styles the page with a dark background, light text color, and material design-inspired elements. This feature enhances the website by providing a dedicated page for users to browse and play Adobe Flash games. --- index.html | 286 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 182 ++++++++++++++++++++++++++++++++++ 2 files changed, 468 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..d57e726 --- /dev/null +++ b/index.html @@ -0,0 +1,286 @@ + + + + + + Adobe Flash Games Directory + + + + +
+

Adobe Flash Games Directory

+

+ Here you can find a collection of Adobe Flash games that you can play + online for free. Please note that modern browsers no longer support + Flash content, so you will need to use a Flash Player emulator or + standalone Flash Player to run these games. +

+ + +
+

+ Game 1 +

+

+ Age of Defense 8 +

+

+ Bad Ice Cream 3 +

+

+ Bob the Robber +

+

+ Commando 2 +

+

+ Empires of Arkeia +

+

+ Extreme Pamplona +

+

+ Fish Tales 2 +

+

+ Fish Tales Deluxe Edition +

+

+ Gotham City Rush +

+

+ Mad Arrow +

+

+ Penguin Diner +

+

+ Penguin Diner 2 +

+

+ Pipe Riders +

+

+ Pocket Fighter Nova +

+

+ Pocket Fighter Nova (Updated) +

+

+ Roller Coaster Creator +

+

+ Scrap Metal Heroes +

+

+ Strike Force Kitty 2 +

+

+ Strike Force Kitty: Last Stand +

+

+ Strike Force Kitty League +

+

+ Strikeforce Kitty +

+

+ Sugar Sugar +

+

+ Sugar Sugar 2 +

+

+ Sugar Sugar 3 +

+

+ Summon the Hero +

+

+ Super Mario Bros Crossover 3 +

+

+ Super Mario Flash 2 +

+

+ Super Mario Flash 4 +

+

+ Super Mario Flash +

+

+ Toxic 2 +

+

+ Toxic +

+

+ Truck Loader +

+

+ Truck Loader 2 +

+

+ Truck Loader 3 +

+

+ Truck Loader 4 +

+

+ Truck Loader 5 +

+
+ +

About Flash Games

+

+ Flash games were a huge part of the early internet culture, providing + endless entertainment for users around the world. Though Flash is no + longer supported by modern browsers, these games can still be played + using standalone Flash Players or emulators like Ruffle. +

+

+ Installation: To play these games, download and install + the Flash Player provided in the repository (Flash Player + or Flash Player). You can + also use emulators to keep enjoying these classics. +

+

+ Controls: Most games utilize simple keyboard and mouse + controls. Refer to the instructions provided in each game. +

+

+ Credits: This collection is a fan-made effort to + preserve the history of Flash games. All game rights remain with their + respective creators. +

+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..ab93156 --- /dev/null +++ b/style.css @@ -0,0 +1,182 @@ +/* Reset some default browser styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Roboto', sans-serif; + font-size: 16px; + line-height: 1.6; + background-color: #121212; + /* Dark background */ + color: #e0e0e0; + /* Light text color */ + margin: 0; +} + +#container { + max-width: 1500px; + margin: 0 auto; + padding: 20px; + background-color: #1e1e1e; + /* Dark container background */ + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); + /* Deep shadow for a material effect */ + border-radius: 8px; +} + +h1 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 20px; + color: #ffffff; + /* White heading */ +} + +h2 { + font-size: 1.8rem; + color: #bb86fc; + /* Primary color from Material design */ + margin-top: 30px; +} + +p { + margin-bottom: 20px; + color: #b0b0b0; + /* Subtle text color */ + line-height: 1.8; +} + +a { + color: #bb86fc; + /* Material primary color */ + text-decoration: none !important; + transition: color 0.3s ease, background-color 0.3s ease; +} + +a:hover { + color: #ffffff; + /* Hovering turns the text white */ + background-color: rgba(187, 134, 252, 0.1); + /* Light highlight on hover */ + text-decoration: underline; +} + +.card { + width: 100%; + height: 254px; + border-radius: 4px; + background: #212121; + display: flex; + gap: 5px; + padding: 0.4em; + flex-wrap: wrap; +} + +.card p { + height: 100%; + flex: 1; + overflow: hidden; + cursor: pointer; + border-radius: 2px; + transition: all 0.5s; + background: #212121; + border: 1px solid #ff5a91; + display: flex; + justify-content: center; + align-items: center; +} + +.card p:hover { + flex: 10; +} + +.card p span { + min-width: 14em; + padding: 0.5em; + text-align: center; + transform: rotate(-90deg); + transition: all 0.5s; + text-transform: uppercase; + color: #ff568e; + letter-spacing: 0.1em; +} + +.card p:hover span { + transform: rotate(0); +} + +/* Responsive typography for tablets */ +@media (max-width: 999px) { + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.6rem; + } + + p { + font-size: 0.9rem; + } + + .card { + flex-direction: column; + height: auto; + } + + .card p { + flex: none; + width: 100%; + margin-bottom: 10px; + } + + .card p span { + transform: rotate(0); + } + + .card p:hover { + flex: none; + } +} + +/* Responsive adjustments for mobile screens */ +@media (max-width: 480px) { + h1 { + font-size: 1.8rem; + } + + h2 { + font-size: 1.4rem; + } + + p { + font-size: 0.8rem; + } + + #container { + padding: 10px; + } + + .card { + flex-direction: column; + gap: 10px; + } + + .card p { + flex: none; + width: 100%; + margin-bottom: 10px; + } + + .card p span { + transform: rotate(0); + font-size: 0.85rem; + } + + .card p:hover { + flex: none; + } +} \ No newline at end of file