You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
7.0 KiB
169 lines
7.0 KiB
<!doctype html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<link rel="icon" href="assets/img/logo/logoHSE.png"> |
|
<title>About HSE | Geonet Infomedia</title> |
|
|
|
<!-- Bootstrap CSS --> |
|
<link href="assets/css/bootstrap.min.css" rel="stylesheet" > |
|
|
|
<!-- CSS --> |
|
<link rel="stylesheet" href="assets/css/style.css"> |
|
|
|
<!-- Icons --> |
|
<script src="https://kit.fontawesome.com/6949d15862.js" crossorigin="anonymous"></script> |
|
|
|
</head> |
|
<body> |
|
<!-- Navbar Start --> |
|
<nav class="navbar bg-light sticky-top"> |
|
<div class="container"> |
|
<a class="navbar-brand" href="index.html"> |
|
<img src="assets/img/logo/logoHSE.png" alt="Health, Safety, & Environment" width="65" height="65"> |
|
<h6>HEALTH, SAFETY, & ENVIRONMENT</h6> |
|
<h5>PT GEONET INFOMEDIA</h5> |
|
</a> |
|
<a class="nav-link " role="button" data-bs-toggle="dropdown"> |
|
<i class="bi bi-justify"></i> |
|
</a> |
|
<ul class="dropdown-menu"> |
|
<li><a class="dropdown-item" href="index.html">About</a></li> |
|
<li><a class="dropdown-item" href="contact.html">Contact Us</a></li> |
|
<li><a class="dropdown-item" href="log-in.html">Log In</a></li> |
|
</ul> |
|
</div> |
|
</nav> |
|
<!-- Navbar Finish --> |
|
|
|
<!-- Thumbnail Start --> |
|
<div class="card text-bg-light"> |
|
<img src="assets/img/carousel/Untitled-4.png" class="card-img"> |
|
<div class="card-img-overlay"> |
|
<div class="container"> |
|
<div class="container-row"> |
|
<div class="row"> |
|
<div class="col-sm-6"></div> |
|
<div class="col-sm-6"> |
|
<div class="card w-80"> |
|
<div class="card-body"> |
|
<h3 class="card-title"><b>HEALTH, SAFETY, & ENVIRONTMENT</b></h3> |
|
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas, ipsum. Molestiae repudiandae aliquam aspernatur, enim veritatis quisquam modi, incidunt harum sint voluptatibus omnis sed fuga ipsam officiis obcaecati illum possimus beatae voluptates laudantium quia magnam repellat numquam libero sapiente. Corporis officiis explicabo id, facilis molestiae eum earum distinctio maiores totam ullam dolorem quia aut mollitia, cumque at qui neque cupiditate.</p> |
|
<a href="contact.html" class="btn btn-primary" id="btnContact">Contact Us</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Thumbnail Finish --> |
|
|
|
<!-- Embedded Youtube Start --> |
|
<div class="container text-left"> |
|
<div class="container-youtube"> |
|
<div class="row" id="embedded"> |
|
<div class="col-lg-4"> |
|
<h3 class="card-title text-left mb-3"><b>SAFETY<br>INDUCTION</b></h3> |
|
<div class="card"> |
|
<div class="card-body" id="secondCard"> |
|
|
|
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veritatis, asperiores harum repellendus accusantium id accusamus, possimus debitis ullam optio omnis ratione doloremque aliquid voluptatibus, dolorum distinctio perspiciatis suscipit ea repellat magnam consequatur. Voluptatibus, fuga error? Asperiores, sapiente. Laborum quia optio blanditiis rerum, soluta magni est? Quo fugiat fuga earum iste!</p> |
|
<a href="contact.html" class="btn btn-primary" id="secondButton">Online</a> |
|
<a href="#" class="btn btn-primary" id="secondButton">Offline</a> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-8"> |
|
<div class="card"> |
|
<div class="card-body"> |
|
<iframe src="https://youtu.be/BYJXSn80YqE" frameborder="0" class="frame"></iframe> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Embedded Youtube Finish --> |
|
|
|
<!-- Highlight Start --> |
|
<div class="title-highlight"> |
|
<h3 class="underline-text"><span>Highlight of The Month</span></h3> |
|
</div> |
|
<div class="highlight-container"> |
|
<div class="container-box"> |
|
<div class="box"> |
|
<!-- --> |
|
</div> |
|
<div class="highlight-card"> |
|
<div class="highlight-content"> |
|
<div class="card" style="width: 18rem;"> |
|
<img src="assets/img/exam.png" class="card-img-top" alt="..."> |
|
<div class="card-body"> |
|
<h3 class="card-title">Card title</h3> |
|
<a class="button-detail" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="fa-solid fa-eye"></i> Detail</a> |
|
</div> |
|
</div> |
|
<div class="card" style="width: 18rem;"> |
|
<img src="assets/img/exam.png" class="card-img-top" alt="..."> |
|
<div class="card-body"> |
|
<h3 class="card-title">Card title</h3> |
|
<a class="button-detail" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="fa-solid fa-eye"></i> Detail</a> |
|
</div> |
|
</div> |
|
<div class="card" style="width: 18rem;"> |
|
<img src="assets/img/exam.png" class="card-img-top" alt="..."> |
|
<div class="card-body"> |
|
<h3 class="card-title">Card title</h3> |
|
<a class="button-detail" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="fa-solid fa-eye"></i> Detail</a> |
|
</div> |
|
</div> |
|
<div class="card" style="width: 18rem;"> |
|
<img src="assets/img/exam.png" class="card-img-top" alt="..."> |
|
<div class="card-body"> |
|
<h3 class="card-title">Card title</h3> |
|
<a class="button-detail" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="fa-solid fa-eye"></i> Detail</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Highlight Finish --> |
|
|
|
|
|
|
|
|
|
<!-- Modal View--> |
|
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|
<div class="modal-dialog"> |
|
<div class="modal-content"> |
|
<div class="modal-header"> |
|
<h1 class="modal-title fs-5" id="staticBackdropLabel">Judul Materi</h1> |
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
</div> |
|
<div class="modal-body"> |
|
... |
|
</div> |
|
<div class="modal-footer"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Modal View--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap JS --> |
|
<script src="assets/js/bootstrap.bundle.min.js"></script> |
|
|
|
|
|
</body> |
|
</html> |