Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Modal Bootstrap Gak jalan
Mohon bantuanya modal bootstrap gak jalan -_- gmn yak pusing saya
<!DOCTYPE>
<html>
<head>
<title>INDEX BUILDING</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<!-- HEADER START -->
<header>
<div class="col-md-12">
<nav class="navbar navbar-expand-sm bg-primary navbar-primary fixed-top">
<div class="brand">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
</nav>
</div>
</header>
<!-- Header END -->
<!-- content -->
<div class="container bg">
<div class="row">
<div class="col-md-4 thum">
<div class="post-index">
<h1>JUDUL TEXT</h1>
<div class="img">
<img src="assets/images/images3.jpg" class="img-thumbnail">
</div>
<div class="info-post">
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown" style="margin-bottom: 0rem;"></p></button>
</div>
</div>
</div>
<div class="col-md-4 thum">
<div class="post-index">
<h1>JUDUL TEXT</h1>
<div class="img">
<img src="assets/images/images3.jpg" class="img-thumbnail">
</div>
<div class="info-post">
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown2" style="margin-bottom: 0rem;"></p></button>
</div>
</div>
</div>
<div class="col-md-4 thum">
<div class="post-index">
<h1>JUDUL TEXT</h1>
<div class="img">
<img src="assets/images/images3.jpg" class="img-thumbnail">
</div>
<div class="info-post">
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown3" style="margin-bottom: 0rem;"></p></button>
</div>
</div>
</div>
<div class="col-md-4 thum">
<div class="post-index">
<h1>JUDUL TEXT</h1>
<div class="img">
<img src="assets/images/images3.jpg" class="img-thumbnail">
</div>
<div class="info-post">
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown" style="margin-bottom: 0rem;"></p></button>
</div>
</div>
</div>
<div class="col-md-4 thum">
<div class="post-index">
<h1>JUDUL TEXT</h1>
<div class="img">
<img src="assets/images/images3.jpg" class="img-thumbnail">
</div>
<div class="info-post">
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown2" style="margin-bottom: 0rem;"></p></button>
</div>
</div>
</div>
<div class="col-md-4 thum">
<div class="post-index">
<h1>JUDUL TEXT</h1>
<div class="img">
<img src="assets/images/images3.jpg" class="img-thumbnail">
</div>
<div class="info-post">
<div class="progress position-relative">
<div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
<small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>
<button type="button" class="btn btn-outline-success" style="margin-top: 10px;"><p id="countdown3" style="margin-bottom: 0rem;"></p></button>
</div>
</div>
</div>
</div>
</div>
<!-- Content END -->
<!-- Start Java Script Countdown -->
<script>
var countDownDate = new Date("08/20/2018").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<script>
var countDownDate = new Date("08/20/2018").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown2").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown2").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<script>
var countDownDate = new Date("08/20/2018").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown3").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown3").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<!-- Java Script Countdown END -->
<!-- START Footer -->
<footer></footer>
<!-- End Footer -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
Css Tambahan
body{background: pink;}
.bg{background: white;margin-top: 55px;}
.img{margin: 3px;padding: 3px;}
.img img{width: 330px;height: 330px;}
.header-title{margin-top: 51px;text-align: center;}
.navbar-nav a{color: #fff;}
.navbar-nav a:hover{background: #fff;color: indigo;}
.brand a{color: #fff}
.brand a:hover{background: none;}
.thum{margin}
.post-index{border: 1px grey solid;margin:3px;}
.post-index h1{text-align:center;font-size: 20px; margin-bottom: 0px;}
.info-post{text-align: center;margin:10px}
0
3 Jawaban:
ada beberapa sebab gan, bisa saja penempatan pada <script src="boostrap.min.js"></script> <script src="jquery.min.js"></script>
jadi si <script> jquery pling atas seblm boostrap min.js klo ngga id nya bertubrukan
0