You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
8.8 KiB
HTML
234 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.1/font/bootstrap-icons.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="mt-2">
|
|
<button type="button" class="btn btn-default">Default</button>
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
</div>
|
|
<div class="mt-2">
|
|
<button type="button" class="btn btn-outline-default">Default</button>
|
|
<button type="button" class="btn btn-outline-primary">Primary</button>
|
|
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-outline-info">Info</button>
|
|
<button type="button" class="btn btn-outline-success">Success</button>
|
|
<button type="button" class="btn btn-outline-danger">Danger</button>
|
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
|
</div>
|
|
|
|
<div class="mt-2 card-deck">
|
|
<div class="card">
|
|
<img class="card-img-top" src="https://picsum.photos/1000/600" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
|
|
content. This content is a little bit longer.</p>
|
|
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<img class="card-img-top" src="https://picsum.photos/1000/600" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
|
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<img class="card-img-top" src="https://picsum.photos/1000/600" alt="Card image cap">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
|
|
content. This card has even longer content than the first to show that equal height action.</p>
|
|
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="container">
|
|
<form>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<input type="text" placeholder="Regular" class="form-control" disabled />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<div class="input-group mb-4">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
|
|
</div>
|
|
<input class="form-control" placeholder="Search" type="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<div class="input-group mb-4">
|
|
<input class="form-control" placeholder="Birthday" type="text">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group has-success">
|
|
<input type="text" placeholder="Success" class="form-control is-valid" />
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group has-danger">
|
|
<input type="email" placeholder="Error Input" class="form-control is-invalid" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="table-section" class="container">
|
|
<nav aria-label="Page navigation example">
|
|
<ul class="pagination">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Previous">«</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">»</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">#</th>
|
|
<th>Name</th>
|
|
<th>Job Position</th>
|
|
<th>Since</th>
|
|
<th class="text-right">Salary</th>
|
|
<th class="text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-center">1</td>
|
|
<td>Andrew Mike</td>
|
|
<td>Develop</td>
|
|
<td>2013</td>
|
|
<td class="text-right">€ 99,225</td>
|
|
<td class="td-actions text-right">
|
|
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
|
|
<i class="ni ni-circle-08 pt-1"></i>
|
|
</button>
|
|
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title=""
|
|
title="">
|
|
<i class="ni ni-settings-gear-65 pt-1"></i>
|
|
</button>
|
|
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
|
|
<i class="ni ni-fat-remove pt-1"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-center">2</td>
|
|
<td>John Doe</td>
|
|
<td>Design</td>
|
|
<td>2012</td>
|
|
<td class="text-right">€ 89,241</td>
|
|
<td class="td-actions text-right">
|
|
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
|
|
<i class="ni ni-circle-08 pt-1"></i>
|
|
</button>
|
|
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title=""
|
|
title="">
|
|
<i class="ni ni-settings-gear-65 pt-1"></i>
|
|
</button>
|
|
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
|
|
<i class="ni ni-fat-remove pt-1"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-center">3</td>
|
|
<td>Alex Mike</td>
|
|
<td>Design</td>
|
|
<td>2010</td>
|
|
<td class="text-right">€ 92,144</td>
|
|
<td class="td-actions text-right">
|
|
<button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm btn-simple" data-original-title=""
|
|
title="">
|
|
<i class="ni ni-circle-08 pt-1"></i>
|
|
</button>
|
|
<button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm btn-simple"
|
|
data-original-title="" title="">
|
|
<i class="ni ni-settings-gear-65 pt-1"></i>
|
|
</button>
|
|
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm btn-simple" data-original-title=""
|
|
title="">
|
|
<i class="ni ni-fat-remove pt-1"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="icon icon-shape icon-shape-info rounded-circle shadow mb-4">
|
|
<i class="bi bi-arrow-bar-up"></i>
|
|
</div>
|
|
<h5 class="h3">Components</h5>
|
|
<p>Argon comes with over 70 handcrafted components.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="icon icon-shape bg-gradient-primary rounded-circle shadow mb-4">
|
|
<i class="bi bi-arrow-bar-up"></i>
|
|
</div>
|
|
<h5 class="h3">Plugins</h5>
|
|
<p>Fully integrated and extendable third-party plugins that you will love.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<style>
|
|
|
|
.bi{
|
|
line-height: 0;
|
|
}
|
|
</style>
|
|
</html> |