Skip to content

Instantly share code, notes, and snippets.

@purbohadi

purbohadi/index.html

Last active June 3, 2019 20:21
Show Gist options
  • Save purbohadi/c56d4e236424f49c2b1ae9d8d394b3f6 to your computer and use it in GitHub Desktop.
Save purbohadi/c56d4e236424f49c2b1ae9d8d394b3f6 to your computer and use it in GitHub Desktop.
Download ZIP
The Landing Page simple HTML page
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#444444">
<title>Overseas Pemilu 2019</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Purbohadi Utomo">
<meta name="description" content="Pemilu 2019 Website. Indonesia's Presidential and Legislative Election 2019.">
<meta name="keywords" content="Pemilu,Presidential,Legislative,2019">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Overseas Pemilu 2019" />
<meta property="og:description" content="Pemilu 2019 Website. Indonesia's Presidential and Legislative Election 2019.">
<meta property="og:image" content="https://pemilu2019.vlogz.win/images/pemilu.png" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap 4.1.3 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
body {
background-color: white;
margin-bottom: 100px;
background: url("../images/logo-kotak-pemilu.jpg") right top no-repeat, url("../images/mascot.png") fixed bottom no-repeat;
opacity: 0.9;
}
.logo-img {
display: block;
min-width: 200px;
}
a {
color:#007bff !important;
}
a:hover {
color:#c00 !important;
}
a:visited {
color:#37404e !important;
}
</style>
</head>
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div class="m-5 pb-5 bg-light">
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html">
<img src="images/logo-kotak-pemilu.jpg" width="50" height="50" alt="Pemilu logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="nav nav-tabs">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="index.html" role="button" aria-haspopup="true" aria-expanded="false">Home</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#pdpr">DPR RI</a>
<a class="dropdown-item" href="#ppwp">Presidential</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="rating.html">Rating</a>
</li>
<li class="nav-item">
<a class="nav-link" href="howto.html">How To</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid" id="content" tabindex="-1">
<h1>Overseas Pemilu 2019</h1>
<h2 class="lead">Sovereign Voters Strong Nation</h2>
<h3>What is Overseas Pemilu 2019?</h3>
<p class="lead">A website for informal general information of Indonesia’s national presidential and legislative parliament election 2019 for citizens living abroad.</p>
<h3 id="pdpr">DPR RI</h3>
<div class="table-responsive">
<table class="table" summary="Legislative Candidates Group By Supporting Party">
<caption>Legislative Candidates Group By Supporting Party</caption>
<thead>
<tr class="d-flex">
<th class="col-1 display-4 align-middle text-center float-left" scope="colgroup">1</th>
<th class="col-6 display-4 align-middle text-center float-left" scope="colgroup">Partai Kebangkitan Bangsa</th>
<th class="col-5 align-middle text-center float-right" scope="colgroup"><img alt="Partai Kebangkitan Bangsa Logo" src="images/pkb.png" class="img-fluid col-12 logo-img"></th>
</tr>
<tr class="d-flex">
<th class="col-1" scope="col">No</th>
<th class="col-4 text-center" scope="col">Photo</th>
<th class="col-3 float-left" scope="col">Name</th>
<th class="col-2 float-left" scope="col">Gender</th>
<th class="col-2 float-left" scope="col">District/City</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-1" scope="row">1</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">Ahmad Iman</td>
<td class="col-2">Male</td>
<td class="col-2">Jakarta Timur</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">2</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">Imam Subali</td>
<td class="col-2">Male</td>
<td class="col-2">Jakarta Timur</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">3</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">Emieliany</td>
<td class="col-2">Female</td>
<td class="col-2">Jakarta Timur</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">4</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">RIZKY PUTRI AMALIA, B. A, M.Sc.</td>
<td class="col-2">Female</td>
<td class="col-2">Jakarta Selatan</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">5</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">ANDI AMAR, SE</td>
<td class="col-2">Male</td>
<td class="col-2">Jakarta Pusat</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">6</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">NADHILA CHAIRANNISA</td>
<td class="col-2">Female</td>
<td class="col-2">Jakarta Selatan</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">7</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">AZMI HAKAM GUNTORO, ST</td>
<td class="col-2">Male</td>
<td class="col-2">Jakarta Selatan</td>
</tr>
</tbody>
<tfoot>
<tr class="d-flex">
<td class="col-12">Total: Male:4; Female:3; Female Percentage: 43%</td>
</tr>
</tfoot>
</table>
</div>
<div class="table-responsive">
<table class="table" summary="Legislative Candidates Group By Supporting Party<">
<caption>Legislative Candidates Group By Supporting Party</caption>
<thead>
<tr class="d-flex">
<th class="col-1 display-4 align-middle text-center float-left" scope="colgroup">2</th>
<th class="col-6 display-4 align-middle text-center float-left" scope="colgroup">Partai Gerindra</th>
<th class="col-5 align-middle text-center float-right" scope="colgroup"><img alt="Partai Gerindra Logo" src="images/gerindra.png" class="img-fluid col-12 logo-img"></th>
</tr>
<tr class="d-flex">
<th class="col-1" scope="col">No</th>
<th class="col-4 text-center" scope="col">Photo</th>
<th class="col-3 float-left" scope="col">Name</th>
<th class="col-2 float-left" scope="col">Gender</th>
<th class="col-2 float-left" scope="col">District/City</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-1" scope="row">1</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">HJ. HIMMATUL ALIYAH, S. Sos., M.Si.</td>
<td class="col-2">Female</td>
<td class="col-2">TANGERANG</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">2</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">H. BIEM TRIANI BENJAMIN, B.Sc., MM</td>
<td class="col-2">Male</td>
<td class="col-2">JAKARTA SELATAN</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">3</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">HAPOSAN P. BATUBARA</td>
<td class="col-2">Male</td>
<td class="col-2">JAKARTA SELATAN</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">4</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">Hj. YORA LOVITA E. HALOHO</td>
<td class="col-2">Female</td>
<td class="col-2">JAKARTA SELATAN</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">5</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">HJ. IRLISA RACHMADIANA, S.Sn., MM</td>
<td class="col-2">Female</td>
<td class="col-2">KOTA TANGERANG SELATAN</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">6</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">H. ELVIN, SE., MH</td>
<td class="col-2">Male</td>
<td class="col-2">JAKARTA SELATAN</td>
</tr>
<tr class="d-flex">
<td class="col-1" scope="row">7</td>
<td class="col-4"><img alt="Candidate Photo" src="images/profile-no-picture.png" class="img-fluid col-12"></td>
<td class="col-3">Ir. BASRI KINAS MAPPASENG</td>
<td class="col-2">Male</td>
<td class="col-2">KOTA BEKASI</td>
</tr>
</tbody>
<tfoot>
<tr class="d-flex">
<td class="col-12">Total: Male:4; Female:3; Female Percentage: 43%</td>
</tr>
</tfoot>
</table>
</div>
<h3 id="ppwp">Presidential</h3>
<div class="table-responsive">
<table class="table-bordered" summary="President and Vice President Candidates, Supporting Party, Vision and Mission">
<caption>President and Vice President Candidates, Supporting Party, Vision and Mission</caption>
<thead>
<tr class="d-flex text-center display-4">
<th class="col-6 float-left" scope="colgroup">1</th>
<th class="col-6 float-right" scope="colgroup">2</th>
</tr>
<tr class="d-flex text-center">
<th class="col-6 float-left" scope="colgroup"><img alt="Presidential Candidate 1 Photo" src="images/capres1.png" class="img-fluid"></th>
<th class="col-6 float-right" scope="colgroup"><img alt="Presidential Candidate 2 Photo" src="images/capres2.png" class="img-fluid"></th>
</tr>
</thead>
<tbody>
<tr class="d-flex text-center">
<td class="col-3 float-left" scope="col">President Candidate<br><strong>Ir. H. Joko Widodo</strong></td>
<td class="col-3 float-left">Vice President Candidate<br><strong>Prof. Dr. (HLC) KH. Ma’ruf Amin</strong></td>
<td class="col-3 float-right">President Candidate<br><strong>H. Prabowo Subianto</strong></td>
<td class="col-3 float-right">Vice President Candidate<br><strong>H. Sandiaga Salahuddin Uno</strong></td>
</tr>
<tr class="d-flex text-center">
<td class="col-6" scope="col">
Supporting Party<br><br>
<img class="img-fluid col-2" src="images/pdip.jpg" alt="PDIP Party Logo">
<img class="img-fluid col-2" src="images/golkar.jpg" alt="Golkar Party Logo">
<img class="img-fluid col-2" src="images/nasdem.png" alt="Nasdem Party Logo">
<img class="img-fluid col-2" src="images/ppp.jpg" alt="PPP Party Logo">
<img class="img-fluid col-2" src="images/hanura.png" alt="Hanura Party Logo">
<img class="img-fluid col-2" src="images/pkp.png" alt="PKP Party Logo">
</td>
<td class="col-6" scope="col">
Supporting Party<br><br>
<img class="img-fluid col-2" src="images/gerindra.png" alt="Gerindra Party Logo">
<img class="img-fluid col-2" src="images/pks.jpg" alt="PKS Party Logo">
<img class="img-fluid col-2" src="images/pan.png" alt="PAN Party Logo">
<img class="img-fluid col-2" src="images/demokrat.png" alt="Demokrat Party Logo">
</td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="col">
<div class="text-center"><strong>Vision</strong></div>
<blockquote class="blockquote text-center">"Realization of developed Indonesia that has sovereignty, independence and personality based on mutual cooperation"</blockquote>
<br>
<div class="text-center"><strong>Mission</strong></div>
<ol class="lead">
<li>The increase of Indonesian human quality.</li>
<li>Competitive, productive and independent economic structure.</li>
<li>Just and equal development.</li>
<li>Increase sustainable environment.</li>
<li>The enforcement of free from corruption, dignified, and trustworthy legal system.</li>
<li>The cultural progress that reflects the personality of the nation.</li>
<li>The management of clean, effective and trustworthy government.</li>
<li>Synergy with the local government in the frame of the Unitary State of Indonesia.</li>
<li>Protection for all the nation and provide security for all citizens.</li>
</ol>
</td>
<td class="col-6" scope="col">
<div class="text-center"><strong>Vision</strong></div>
<blockquote class="blockquote text-center">"The realization of the nation and state of the Republic of Indonesia which is just, prosperous religious and has sovereignty in politic, independent in the economic sector, and has strong national personality in culture and guarantee the unity among the citizen without considering the difference of tribes, religion, social background, and races based on Pancasila and 1945’s constitution."</blockquote>
<br>
<div class="text-center"><strong>Mission</strong></div>
<ol class="lead">
<li>Develop a national economy which is just, prosperous, qualified and has the environmental perspective to prioritize the Indonesian people interest through economic and political way based on article 33 and 34 of 1945 constitution.</li>
<li>Develop smart, healthy, qualified and productive, competitive Indonesian society who live in unity, peace, dignified and is protected by a just social security without discrimination.</li>
<li>Develop justice and transparency in the legal sector without discrimination and realize the unity of Indonesia nation through qualified democratic way based on Pancasila and 1945 constitution.</li>
<li>Develop the nation noble values to realize a fair, prosperous and dignified Indonesia blessed by the One God.</li>
<li>Develop a national defense and security system independently to safeguard the unity and integrity of Indonesian territory.</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small blue pt-4 m-5 pb-5 bg-light">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Overseas Pemilu 2019</h5>
<p>Disclaimer, this website is independent website aggregating legislative and presidential data from KPU. This website doesn't affiliated with official KPU website and any political party. Legislative data aggregated from various sources. Data is not guaranteed 100% accurate. There is possibility of incomplete or obsolete data. If you found inaccuracy in the data you can contact the creator at <a href="https://vlogz.win">vlogz.win</a></p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Offcial KPU Pemilu website</h5>
<ul class="list-unstyled">
<li>
<a href="https://kpu.go.id">KPU</a>
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Independent Pemilu 2019 website</h5>
<ul class="list-unstyled">
<li>
<a href="https://kawalpemilu.org">Kawal Pemilu</a>
</li>
<li>
<a href="http://pileg2019.xyz/">Pileg 2019</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright text-center py-3">© 2019 Copyright:
<a href="https://pemilu2019.wlogz.win"> Pemilu 2019</a>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment