HTML CODE.
This HTML snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML and CSS CODE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accounting System</title>
<!-- Mian file style -->
<link rel="stylesheet" href="style.css">
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
</head>
<body>
<header>
<div class="header-left">
<h1>CodezillaYe Computers</h1>
<p>Leen AL-Yaseen</p>
</div>
<div class="header-right">
<!-- Header Icons here -->
</div>
</header>
<div class="container">
<aside>
<nav>
<h2>Main Menu</h2>
<ul>
<li><a href="#"><i class="fa-solid fa-wrench"></i> Administration</a></li>
<li><a href="#"><i class="fa-solid fa-coins"></i> Financials</a></li>
<li><a href="#"><i class="fa-solid fa-bullseye"></i> Sales Opportunities</a></li>
<li><a href="#"><i class="fa-solid fa-file-invoice-dollar"></i> Sales - A/R</a>
<ul>
<li><a href="#"><i class="fa-solid fa-file-invoice"></i> Sales Quotation</a></li>
<li><a href="#"><i class="fa-solid fa-file-invoice"></i> Sales Order</a></li>
<li><a href="#"><i class="fa-solid fa-truck"></i> Delivery</a></li>
<li><a href="#"><i class="fa-solid fa-undo"></i> Return</a></li>
<li><a href="#"><i class="fa-solid fa-file-invoice-dollar"></i> A/R Down Payment Invoice</a></li>
<li><a href="#"><i class="fa-solid fa-file-invoice"></i> A/R Invoice</a></li>
<li><a href="#"><i class="fa-solid fa-file-invoice"></i> A/R Invoice + Payment</a></li>
<li><a href="#"><i class="fa-solid fa-file-invoice"></i> A/R Credit Memo</a></li>
<li><a href="#"><i class="fa-solid fa-file-invoice"></i> A/R Reserve Invoice</a></li>
<li><a href="#"><i class="fa-solid fa-wand-magic-sparkles"></i> Document Generation Wizard</a></li>
<li><a href="#"><i class="fa-solid fa-repeat"></i> Recurring Transactions</a></li>
<li><a href="#"><i class="fa-solid fa-repeat"></i> Recurring Transaction Templates</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<main>
<section class="sales-order">
<h2>Sales Order</h2>
<div class="order-info">
<div>
<label for="customer">Customer</label>
<input type="text" id="customer" name="customer">
</div>
<div>
<label for="contact-person">Contact Person</label>
<input type="text" id="contact-person" name="contact-person">
</div>
<div>
<label for="status">Status</label>
<input type="text" id="status" name="status">
</div>
<div>
<label for="posting-date">Posting Date</label>
<input type="date" id="posting-date" name="posting-date">
</div>
<div>
<label for="delivery-date">Delivery Date</label>
<input type="date" id="delivery-date" name="delivery-date">
</div>
<div>
<label for="document-date">Document Date</label>
<input type="date" id="document-date" name="document-date">
</div>
</div>
<table>
<thead>
<tr>
<th>Item/Service Type</th>
<th>Item</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Discount</th>
<th>Tax Code</th>
<th>Total (LC)</th>
</tr>
</thead>
<tbody>
<tr>
<td>A00001</td>
<td>Item 1</td>
<td>5</td>
<td>600.00</td>
<td>0.00</td>
<td>PA</td>
<td>1,000.00 $</td>
</tr>
<!-- More rows as needed -->
</tbody>
</table>
</section>
</main>
</div>
<footer>
<p>© 2024 Examlpe-- Accounting System. All rights reserved.</p>
</footer>
</body>
</html>
CSS CODE.
This CSS snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML and CSS CODE.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #004b80;
color: white;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-left h1 {
margin: 0;
}
.container {
display: flex;
flex: 1;
}
aside {
background-color: #2e3b4e;
color: white;
width: 250px;
padding: 20px;
}
aside h2 {
color: #fff;
margin-top: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
margin: 15px 0;
}
nav ul li a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
padding: 5px 0;
}
nav ul li a i {
margin-right: 10px;
}
nav ul li ul {
margin-top: 10px;
padding-left: 20px;
}
main {
flex: 1;
padding: 20px;
}
.sales-order {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.sales-order h2 {
margin-top: 0;
}
.order-info {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.order-info div {
flex: 1 1 45%;
}
.order-info label {
display: block;
margin-bottom: 5px;
}
.order-info input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
table {
width: 100%;
border-collapse: collapse;
}
table th, table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
table th {
background-color: #f2f2f2;
}
footer {
background-color: #004b80;
color: white;
text-align: center;
padding: 10px 0;
}