Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Navigasi berada di belakang saat di scrool
Ini bagaimana gan !!! Saat di scrooll navigasinya berada di belakang... untuk frameworknya memakai bootstrap.. dan juga menggunakan stickUp
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- js -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/stickUp.min.js"></script>
</head>
<body>
<div id="full">
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2"></div>
<div class="col-md-8 col-sm-8 text-center">
<h1 class="h1_home wow fadeIn" id="hasa"><b>SMKN 1 KOTA BLITAR</b></h1>
</div>
<div class="col-md-2 col-sm-2"></div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5"></div>
<div class="col-md-1 col-sm-1 ">
<button type="button" class="btn btn-primary btn-lg" id="btn1" data-toggle="modal" data-target="#myModal">Masuk</button>
</div>
<div class="col-md-1 col-sm-1 ">
<button type="button" class="btn btn-info btn-lg" id="btn2" data-toggle="modal" data-target="#myModaldaftar">Daftar</button>
</div>
<div class="col-md-5 col-sm-5"></div>
</div>
</div>
</div>
<!-- modal masuk-->
<div class="container">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content col-md-10 col-md-offset-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center">Selamat Datang Kembali!</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input type="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="password" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Masuk</button>
</div>
</div>
</div>
</div>
</div>
<!-- modal masuk end-->
<!-- modal daftar -->
<div class="container">
<div id="myModaldaftar" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content col-md-10 col-md-offset-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center">Daftar Member</h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder="Nama Lengkap" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder="Username" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<input type="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="password" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Re-enter password" class="form-control">
</div>
</form>
<div class="row">
<div class="col-md-4">
<select class="form-control">
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control">
<option>Month</option>
<option>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control">
<option>Year</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
</select>
</div>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Male
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Famale
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary left">Masuk</button>
<button type="button" class="btn btn-success">Daftar</button>
</div>
</div>
</div>
</div>
</div>
<!-- modal daftar end-->
<nav class="navbar-default" id="navbar">
<div class="container" id="container-nav">
<div class="navbar-header" id="container-nav-head">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#target-list">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
SMKN 1 BLITAR
</a>
</div>
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse" id="target-list">
<ul class="nav navbar-nav navbar-right text-center">
<!-- <li class="mn"><a href="#full" onclick="return smoothScroll('full')">Home</a></li>
<li class="mn"><a href="#content-cont" onclick="return smoothScroll('content-cont')">Menu</a></li>
<li class="mn"><a href="#ctn-fld" onclick="return smoothScroll('ctn-fld')">Profil</a></li>
<li class="mn"><a href="#ctn-fld2" onclick="return smoothScroll('ctn-fld2')">Berita</a></li>
<li class="mn"><a href="#prlx" onclick="return smoothScroll('prlx')">Info Sekolah</a></li>
<li class="mn"><a href="#content-cont2" onclick="return smoothScroll('content-cont2')">Program Studi</a></li>
<li class="mn"><a href="#kesiswaan" onclick="return smoothScroll('kesiswaan')">Kesiswaan</a></li> -->
<li class="mn"><a href="#full">Home</a></li>
<li class="mn"><a href="#content-cont">Menu</a></li>
<li class="mn"><a href="#ctn-fld">Profil</a></li>
<li class="mn"><a href="#ctn-fld2">Berita</a></li>
<li class="mn"><a href="#prlx">Info Sekolah</a></li>
<li class="mn"><a href="#content-cont2">Program Studi</a></li>
<li class="mn"><a href="#kesiswaan">Kesiswaan</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center" id="content-cont"><!-- menu -->
<h1>Selengkapnya...</h1>
<p>Simak info lengkapnya disini</p>
<div class="row">
<div class="col-md-3 col-sm-3 text-center" id="ht_1">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/kepegawaian.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Kepegawaian</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quos aut sequi totam ducimus nihil, vitae </div>
<div class="col-md-3 col-sm-3 text-center" id="ht_2">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/bukutamu.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Buku Tamu</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro repudiandae, vel voluptatibus perspiciati</div>
<div class="col-md-3 col-sm-3 text-center" id="ht_3">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/galeri.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Galeri Foto</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium ipsam assumenda neque illo </div>
<div class="col-md-3 col-sm-3 text-center" id="ht_4">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/kajian.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Kajian Adiwiyata</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quos aut sequi totam ducimus nihil, vitae </div>
</div>
</div><!-- content-cont /menu/-->
<div class="container-fluid" id="ctn-fld"><!-- Profil -->
<div class="container" id="ctn">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<h2 class="text-center">Profil</h2>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="assets/img/2.jpg" class="img-responsive img-rounded" alt="">
</div>
<div class="col-md-5 col-md-offset-1 col-sm-5 col-sm-offset-1">
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="pnl-dflt1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Visi dan Misi</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.</a></p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt2">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. Sejarah Singkat</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</a></p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt3">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. Kepala Sekolah</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt4">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">4. Sarpras</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt5">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">5. Struktur Organisasi</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt6">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">6. Kemitraan</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt7">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">7. Management</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt8">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseEight">8. Komite Sekolah</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt9">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseNine">9. Prestasi</a>
</h4>
</div>
<div id="collapseNine" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div><!-- panel panel-default -->
<div class="panel panel-default" id="pnl-dflt6">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTen">10. Kepala Sekolah</a>
</h4>
</div>
<div id="collapseTen" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div><!-- panel panel-default -->
</div><!-- panel-group//accordion -->
</div><!-- col-md-5 col-md-offset-1 col-sm-5 col-sm-offset-1 -->
</div><!-- row -->
</div><!-- ctn -->
</div><!-- ctn-fld /Profil/-->
<div class="container-fluid" id="ctn-fld2">
<div class="container" id="ctn2">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<h2 class="text-center">Berita</h2>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="assets/img/4.jpg" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Button
</a>
<a href="#" class="btn btn-default" role="button">
Button
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="assets/img/4.jpg" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Button
</a>
<a href="#" class="btn btn-default" role="button">
Button
</a>
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img src="assets/img/4.jpg" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a href="#" class="btn btn-primary" role="button">
Button
</a>
<a href="#" class="btn btn-default" role="button">
Button
</a>
</p>
</div>
</div>
</div>
</div><!-- row -->
</div><!-- ctn2 -->
</div><!-- ctn-fld2 /thumnbail/-->
<div id="prlx">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<h2 id="prlx_h2">Info SMKN 1 Blitar</h2>
<p id="prlx_p">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 text-center">
<a href="#!" id="tmbl_prlx">Next Info</a>
</div>
</div>
</div>
</div>
<div class="container text-center" id="content-cont2">
<h1>Program Studi</h1>
<div class="row">
<div class="col-md-4 col-sm-4 text-center" id="ht_1_2">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/elektro.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Dept. Elektronika</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quos aut sequi totam ducimus nihil, vitae </div>
<div class="col-md-4 col-sm-4 text-center" id="ht_2_2">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/otomotif.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Dept. Otomotif</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro repudiandae, vel voluptatibus perspiciati</div>
<div class="col-md-4 col-sm-4 text-center" id="ht_3_2">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/mesin.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Dept. Mesin</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium ipsam assumenda neque illo </div>
</div>
<br><br>
<div class="row">
<div class="col-md-4 col-sm-4 text-center" id="ht_4_2">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/listrik.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Dept. Listrik</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quos aut sequi totam ducimus nihil, vitae </div>
<div class="col-md-4 col-sm-4 text-center" id="ht_5_2">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/bangunan.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Dept. Bangunan</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro repudiandae, vel voluptatibus perspiciati</div>
<div class="col-md-4 col-sm-4 text-center" id="ht_6_2">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="assets/img/infokom.png" class="img-rounded img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3>Dept. Infokom</h3>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium ipsam assumenda neque illo </div>
</div>
</div><!-- content-cont -->
<div class="container" id="kesiswaan">
<div class="row">
<h1 class="text-center">Kesiswaan</h1>
<br>
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/a.jpg" alt="">
</div>
<div class="item">
<img src="assets/img/b.png" alt="">
</div>
<div class="item">
<img src="assets/img/d.png" alt="">
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
</div><!-- /container -->
<script>
jQuery(function($) {
$(document).ready( function() {
$('.navbar-default').stickUp();
});
});
//SmothScroll
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 600);
return false;
}
}
});
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
})
});
</script>
</body>
</html>
0
2 Jawaban:
maxudnya gimana itu gan ? dibelakang gimana ?
0
sudah bisa gan ternyata :D Begini Code nya
#navbar{
z-index: 9999;
}
0