<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>List Certificate</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #eee;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-link {
margin: 0 10px;
}
.cert-box {
max-width: 900px;
margin: 30px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
.title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
table thead {
background-color: #e9f4fb;
}
</style>
</head>
<body>
<div class="header">
<div><strong>PT. MULTI SPEC SINERGINO</strong></div>
<div>
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Product</a>
<a href="#" class="nav-link">Register</a>
<a href="#" class="nav-link">Gallery</a>
<a href="#" class="nav-link">Certificate</a>
<a href="#" class="nav-link">Location</a>
</div>
</div>
<div class="cert-box">
<div class="title">LIST CERTIFICATE</div>
<form class="d-flex mb-3">
<select class="form-select me-2" style="max-width: 250px;">
<option selected>Certificate Numb</option>
</select>
<input type="text" class="form-control me-2" placeholder="174 / PT / N / 22"/>
<button class="btn btn-primary">Search</button>
</form>
<table class="table table-bordered">
<thead>
<tr>
<th>Certificate Numb</th>
<th>Name</th>
<th>Expired Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>174 / PT / N / 22</td>
<td>RAKHA EDRIA PRATAMA</td>
<td>28-07-2027</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link">Previous</a></li>
<li class="page-item active"><a class="page-link">1</a></li>
<li class="page-item"><a class="page-link">2</a></li>
<li class="page-item"><a class="page-link">3</a></li>
<li class="page-item"><a class="page-link">4</a></li>
<li class="page-item"><a class="page-link">5</a></li>
<li class="page-item"><a class="page-link">Next</a></li>
</ul>
</nav>
</div>
</body>
</html>
