Financial Balance sheet in Html Css
Hello, everyone are you find the solution for How to create Financial Balance sheet in html css then this article is for you. you are on right place...
In this tutorial we will guide or help you to create financial balance sheet in html css with step by step.
What is balance sheet? balance sheet is the paper where all calculation of colleges,companies and other industries are printed. In todays world balance sheet is very important for remember our financial calculation thats the reason we create beautiful UI of balance sheet which is very simple and neat in design, these project financial balance sheet in html css is also useful to student who create project for college work or submission.
Features of balance sheet UI :
- Simple and neat Design
- Simple and easy to learn code
- multiple hover effect apply for total calculation
- past three years sheet can be stored
- design in simple html css
- beginner programmer also learn it.
Concept we use to create balance sheet program -
- We use simple div class,section,span etc in html
- We also used table attribute in html
- In Css multiple class linking used.
- create responsive design using @media attribute
- display flexbox attribute is used
So, how to run this program first of all copy/download the html file from financial balance sheet in html css article then in your PC create a folder with name balance sheet and paste html file and save it with index.html extension after that copy/download the css file of financial balance sheet in html css article paste it in your PC folder and save it with styles.css extension, after thant you can run the program.....!!
HTML CODE -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Balance Sheet | totalprogrammingcode</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<section>
<h1>
<span class="flex">
<span>TotalProgrammingCode | Yash Aher</span>
<span>Balance Sheet</span>
</span>
</h1>
<div id="years" aria-hidden="true">
<span class="year">2019</span>
<span class="year">2020</span>
<span class="year">2021</span>
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only year">2019</span></th>
<th><span class="sr-only year">2020</span></th>
<th class="current"><span class="sr-only year">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="data">
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
<td>$25</td>
<td>$30</td>
<td class="current">$28</td>
</tr>
<tr class="data">
<th>Checking <span class="description">Our primary transactional account.</span></th>
<td>$54</td>
<td>$56</td>
<td class="current">$53</td>
</tr>
<tr class="data">
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
<td>$500</td>
<td>$650</td>
<td class="current">$728</td>
</tr>
<tr class="total">
<th>Total <span class="sr-only">Assets</span></th>
<td>$579</td>
<td>$736</td>
<td class="current">$809</td>
</tr>
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="data">
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
<td>$500</td>
<td>$250</td>
<td class="current">$0</td>
</tr>
<tr class="data">
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
<td>$200</td>
<td>$300</td>
<td class="current">$400</td>
</tr>
<tr class="data">
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
<td>$50</td>
<td>$50</td>
<td class="current">$75</td>
</tr>
<tr class="total">
<th>Total <span class="sr-only">Liabilities</span></th>
<td>$750</td>
<td>$600</td>
<td class="current">$475</td>
</tr>
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="total">
<th>Total <span class="sr-only">Net Worth</span></th>
<td>$-171</td>
<td>$136</td>
<td class="current">$334</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
<footer id="sticky-footer" class="flex-shrink-0 py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © TotalProgrammingCode | Yash Sandip Aher</small>
</div>
</footer>
</body>
</html> CSS CODE -
span[class~="sr-only"] {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
-webkit-clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
position: absolute !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
margin: -1px !important;
}
html {
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #0a0a23;
}
h1 {
max-width: 37.25rem;
margin: 0 auto;
padding: 1.5rem 1.25rem;
}
h1 .flex {
display: flex;
flex-direction: column-reverse;
gap: 1rem;
}
h1 .flex span:first-of-type {
font-size: 0.7em;
}
h1 .flex span:last-of-type {
font-size: 1.2em;
}
section {
max-width: 40rem;
margin: 0 auto;
border: 2px solid #d0d0d5;
}
#years {
display: flex;
justify-content: flex-end;
position: sticky;
top: 0;
background: #0a0a23;
color: #fff;
z-index: 999;
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
margin: 0 -2px;
}
#years span[class] {
font-weight: bold;
width: 4.5rem;
text-align: right;
}
.table-wrap {
padding: 0 0.75rem 1.5rem 0.75rem;
}
table {
border-collapse: collapse;
border: 0;
width: 100%;
position: relative;
margin-top: 3rem;
}
table caption {
color: #356eaf;
font-size: 1.3em;
font-weight: normal;
position: absolute;
top: -2.25rem;
left: 0.5rem;
}
tbody td {
width: 100vw;
min-width: 4rem;
max-width: 4rem;
}
tbody th {
width: calc(100% - 12rem);
}
tr[class="total"] {
border-bottom: 4px double #0a0a23;
font-weight: bold;
}
tr[class="total"] th {
text-align: left;
padding: 0.5rem 0 0.25rem 0.5rem;
}
tr.total td {
text-align: right;
padding: 0 0.25rem;
}
tr.total td:nth-of-type(3) {
padding-right: 0.5rem;
}
tr.total:hover {
background-color: #99c9ff;
}
td.current {
font-style: italic;
}
tr.data {
background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}
tr.data th {
text-align: left;
padding-top: 0.3rem;
padding-left: 0.5rem;
}
tr.data th .description {
display: block;
font-weight: normal;
font-style: italic;
padding: 1rem 0 0.75rem;
margin-right: -13.5rem;
}
tr.data td {
vertical-align: top;
padding: 0.3rem 0.25rem 0;
text-align: right;
}
OUTPUT -
 |
| balance sheet in html css |
Also Read these -
- Simple Login And Registration Form in Html and Css
- Best python book for begineers | totalprogrammingcode
- Write a program of temperature converter in java
Hope you read these article, you enjoy our tutorial and you give proper solution or program for financial balance sheet in html css.
THANKS FOR READING ARTICLE........!!!!
