Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashi-singh-1/balance-sheet-using-html-css
The project titled "Balance Sheet" is a simple yet effective web page created using HTML and CSS, with guidance and resources from FreeCodeCamp. It displays the financial status of AcmeWidgetCorp for the years 2019, 2020, and 2021, focusing on readability, accessibility, and responsiveness.
https://github.com/yashi-singh-1/balance-sheet-using-html-css
2019-financial-data 2020-financial-data 2021-financial-data accessibility acme-widget-corp balance-sheet css css3 financial-status freecodecamp front-end front-end-development frontend html html5 readability responsive-design styling-techniques web-design web-development
Last synced: 4 days ago
JSON representation
The project titled "Balance Sheet" is a simple yet effective web page created using HTML and CSS, with guidance and resources from FreeCodeCamp. It displays the financial status of AcmeWidgetCorp for the years 2019, 2020, and 2021, focusing on readability, accessibility, and responsiveness.
- Host: GitHub
- URL: https://github.com/yashi-singh-1/balance-sheet-using-html-css
- Owner: Yashi-Singh-1
- Created: 2024-06-04T17:06:42.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-05T15:42:17.000Z (5 months ago)
- Last Synced: 2024-06-05T19:34:40.353Z (5 months ago)
- Topics: 2019-financial-data, 2020-financial-data, 2021-financial-data, accessibility, acme-widget-corp, balance-sheet, css, css3, financial-status, freecodecamp, front-end, front-end-development, frontend, html, html5, readability, responsive-design, styling-techniques, web-design, web-development
- Language: HTML
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AcmeWidgetCorp Balance Sheet
This project is a web page that displays the balance sheet of AcmeWidgetCorp for the years 2019, 2020, and 2021. It was created using HTML and CSS, with guidance and resources from FreeCodeCamp.
## Table of Contents
- Overview
- Features
- Technologies Used
- Setup
- Usage
- Contributing
## Overview
The balance sheet presents the financial status of AcmeWidgetCorp, including assets, liabilities, and net worth over three years. The layout is designed to be clear, accessible, and responsive, ensuring that the information is easily readable on different devices.
## Features
- **Header**: Displays the company's name and the title "Balance Sheet" with a flexible layout.
- **Years Section**: A sticky header that shows the years covered, remaining visible during scrolling.
- **Tables**: Separate tables for Assets, Liabilities, and Net Worth, each with clear captions.
- **Responsive Design**: Adapts to various screen sizes, with appropriate widths for table columns.
- **Accessibility**: Includes hidden span elements for screen readers to ensure accessibility.
- **Styling**: Uses CSS for a clean design, including contrasting colors, double borders for totals, and gradient backgrounds for data rows. The current year's data is italicized for emphasis.
## Technologies Used
- HTML
- CSS
## Setup
1. Clone the repository to your local machine:
git clone https://github.com/yourusername/balance-sheet.git
2. Navigate to the project directory:
cd balance-sheet
3. Open `index.html` in your web browser to view the balance sheet.
## Usage
Simply open the `index.html` file in a web browser to view the balance sheet. The page is designed to be fully responsive and accessible.
## Contributing
Contributions are welcome! If you would like to contribute, please follow these steps:
1. Fork the repository.
2. Create a new branch:
git checkout -b my-feature-branch
3. Make your changes and commit them:
git commit -m "Add new feature"
4. Push to the branch:
git push origin my-feature-branch
5. Create a pull request detailing your changes.