"index-slim-lpta"
Bootstrap 4.1.1 Snippet by reglpta

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <head> <base target="_top"> <?!= include('bootstrap-min'); ?> <?!= include('narrow-jumbotron'); ?> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../../../favicon.ico"> <title>Narrow Jumbotron Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="css" rel="stylesheet"> </head> <body> <div class="container"> <div class="header clearfix"> </div> <div class="jumbotron" > <h1 class="display-3">Sistem Layanan<div>Integrasi Mandiri</div></h1> <p class="lead">Sistem Layanan Integrasi Mandiri Lapas Tulungagung merupakan layanan pengusulan integrasi untuk Warga Binaan Pemasyarakatan (WBP) yang dilaksanakan secara mandiri oleh keluarga / penjamin WBP.</p> <p><a class="btn btn-lg btn-success" href="#" role="button">Daftar Layanan</a></p> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div class="row marketing"> <div class="col-lg-6"> <h4>Video Tutorial</h4> <p></p><div data-component-video="https://www.youtube.com/watch?v=au-jzHtlQMA" style="min-height:240px;min-width:240px;position:relative"> <iframe width="560" height="315" src="https://www.youtube.com/embed/ltZZ3M2zQRw" title="Mas Bruno" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>Tutorial penggunaan Simtem Layanan Integrasi Mandiri (SLIM) Lapas Tulungagung<p></p> </div> </div> <footer class="footer"> <p contenteditable="true" spellcheckker="false">© LPTA 2021</p> </footer> </div> <!-- /container --> </body> </html>
/* Space out content a bit */ body { padding-top: 20px; padding-bottom: 20px; } /* Everything but the jumbotron gets side spacing for mobile first views */ .header, .marketing, .footer { padding-right: 15px; padding-left: 15px; } /* Custom page header */ .header { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; } /* Make the masthead heading the same height as the navigation */ .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; } /* Custom page footer */ .footer { padding-top: 19px; color: #777; border-top: 1px solid #e5e5e5; } /* Customize container */ @media (min-width: 768px) { .container { max-width: 730px; } } .container-narrow > hr { margin: 30px 0; } /* Main marketing message and sign up button */ .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } .jumbotron .btn { padding: 14px 24px; font-size: 21px; } /* Supporting marketing content */ .marketing { margin: 40px 0; } .marketing p + h4 { margin-top: 28px; } /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { /* Remove the padding we set earlier */ .header, .marketing, .footer { padding-right: 0; padding-left: 0; } /* Space out the masthead */ .header { margin-bottom: 30px; } /* Remove the bottom border on the jumbotron for visual effect */ .jumbotron { border-bottom: 0; } }

Related: See More

Now UI Kit

Questions / Comments: