Templates

Card Flip Edit (2019)

by

This code represents my creation of an interactive card-flipping UI that can be seamlessly integrated into various projects, such as card games or dynamic content displays. Feel free to replace the placeholder text (“front” and “back”) with your desired content to personalize the experience.

Features:

  1. Card Flipping: I’ve implemented a captivating card-flipping effect using a checkbox input (#flip). When checked, the .back of the card is revealed, and when unchecked, the .front is displayed.
  2. 3D Perspective: I’ve utilized the CSS perspective property in the .cardholder div to create an immersive 3D effect during the card flip.
  3. CSS Transitions: I’ve added a smooth transition to the .card class, ensuring the card-flipping animation is visually appealing.
  4. Checkbox Hack: I’ve cleverly used the #flip:checked selector along with the adjacent sibling combinator (+) to dynamically style the .front and .back elements based on the checkbox state.
  5. Hidden Faces: To maintain a polished appearance during flipping, I’ve employed the backface-visibility: hidden; property, ensuring the back faces of the card remain hidden during animation.
  6. Checkbox Styling: I’ve hidden the actual checkbox (display: none;), and its state is effectively controlled by the label element.
View Repo

Animated Navigation Menu (2019)

by

The “Navigation-Menu” project, originally created for an old website, is now shared for wider use. Its key features include:

  • Clean, responsive design.Compatibility with various screen sizes.Easy web project integration.Customizable layout.Comprehensive installation and usage instructions.Open for contributions and improvements.
This project serves as a handy resource for developers aiming to incorporate or enhance navigation menus in web applications. For more details, see the GitHub page.

You can also view the project here.

Weekly/Monthly Budget Spreadsheet v4 (2023)

by

This personal budgeting spreadsheet is an ideal tool for the average individual looking to manage their finances more effectively. It allows users to track expenses and income by date and categorize transactions, enhancing financial awareness and control. Key features include intuitive visualizations like pie charts and bar graphs, which simplify the analysis of spending patterns. The inclusion of visual elements like pie charts and bar graphs offers an intuitive understanding of spending patterns and income distribution. Essential formulas integrated into the spreadsheet…

  • SUM: Calculates the total of income and expenses.
  • AVERAGE: Determines the average amount spent or earned.
  • IF Statements: Used for categorizing transactions based on conditions.
  • VLOOKUP/HLOOKUP: For finding and referencing specific data.
  • WEEKDAY: This formula returns the day of the week corresponding to a date, useful for organizing and analyzing financial data by specific days.

These formulas collectively enhance the functionality of the budgeting spreadsheet, making it an efficient tool for detailed financial tracking and analysis.

View Spreadsheet