Postingan lainnya
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