fianlly made the data list, put it in a table format since it looks much better
Working on a python leaderboard using flask which acts like a backend. I’m trying to fix the css and files rn, which is annoying with flask since I have to write a whole {{ url_for(‘static’, filename=…)}} code. Additionally, i’m basing this for an existing website I have built with some friends and are seeing how we make this leaderboard and comparing with each other at the end for funsies. Im probably gonna finish all the styling and then try to add more inputs. I should probably fix the leaderboard styling since its messed up lol.
This is a fun little website me and my friends madel to learn CSS and HTML in a fun way, we each put about 10ish hours to make the project and are pretty happy with how it came out in the end.
Key Features Throughout all Pages
The header includes a top heading/navigation bar (consistent with teammates’) with a game logo/favicon (also functions as an ‘easter egg’ back-to-top button, also has an animation on hover) and name on the left side, buttons that when clicked lead to other teammates’ individual game pages in the center, and a button (our team’s logo) as a way to go back to the Home page.
Page links for every page are included in the footer for easy accessibility and simple finding of pages, which was later adopted into every single page. Additionally, the footer has a back to top button which makes the page go back to the top of the page. A cat mascot is located at the footer for a fun little easter egg, performing an animation on hover and says “meow” when you click on it. The header is sticky in every page to make sure the header stays at the top of the page when you scroll down, this is a quality of life/convenience feature for the website. Page fade in animations are used in every page to make the website feel smooth and polished.
The main pages (index.html, games.html and checkout.html have pink theme colour with darker and lighter colours on the same colour tone.
Each page uses a similar layout which consists of a content box which has the main contents, and hovers over a background image with a shadow. Within the content box, the individual pages contain boxed text under a heading, which stays consistent throughout all 3 pages.
The 3 main pages (index.html, checkout.html and games.html) uses the font Nunito for a clean and modern look to make the website look professional and keeping consistency throughout the 3 pages. The 3 individual pages however use Jetbrains Mono to match our cyber and technical themes of our game.
