<!DOCTYPE html>
<html>
<head>
	<title>Invoice</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
	<!-- Custom CSS -->
	<style type="text/css">
		.logo {
			width: 100px;
			height: 100px;
			margin-bottom: 20px;
		}
		.invoice-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30px;
		}
		.invoice-header h1 {
			font-size: 36px;
			font-weight: 600;
			margin: 0;
		}
		.invoice-header p {
			margin: 0;
		}
		.invoice-table th {
			text-align: center;
			padding: 10px;
		}
		.invoice-table td {
			text-align: center;
			padding: 10px;
		}
		.invoice-total {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30px;
		}
		.invoice-total h4 {
			font-size: 28px;
			font-weight: 600;
			margin: 0;
		}
	</style>
</head>
<body>
	<div class="container">

		<div class="row">
			<div class="col-md-12" style="margin-top:20px;" >
				<div class="invoice-header">
					<img src="https://via.placeholder.com/100" alt="Logo" class="logo">
					<h1>Invoice</h1>
					<p>Date: 01/01/2022</p>
					<a href="document-download">Download</a>
					
				</div>

				<table class="table table-bordered invoice-table">
					<thead>
						<tr>
							<th>Item</th>
							<th>Quantity</th>
							<th>Price</th>
							<th>Total</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Item 1</td>
							<td>1</td>
							<td>$100.00</td>
							<td>$100.00</td>
						</tr>
						<tr>
							<td>Item 2</td>
							<td>2</td>
							<td>$50.00</td>
							<td>$100.00</td>
						</tr>
					</tbody>
				</table>
				<div class="invoice-total">
					<h4>Total: $200.00</h4>
				</div>
			</div>
		</div>
	</div>
	<!-- Bootstrap JS -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>