jika sudah Selesai Pada tahap-tahapan di atas maka kita akan menyusun satu-satu dari part 1 sampai part 4 ,
inilah sciprtnya :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>SMK Negeri 1 Mejayan</title>
<meta charset="utf-8">
<!--image thumbnailurl-->
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='bahan/header.png' property='og:image'/>
</b:if>
<!--profile-->
<link rel="shortcut icon" href="bahan/smk.png">
<meta name="description" content="SMK Negeri 1 Mejayan" />
<meta name="keywords" content="SMK Negeri 1 Mejayan , Bima Zainudin Ikhsan" />
<meta name="author" content="Bima Zainudin Ikhsan" />
<!--Backup template asli-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/w3.css">
<!--<link href="../css/Montserrat" rel="stylesheet" type="text/css">-->
<!--<link href="../css/lato.css" rel="stylesheet" type="text/css">-->
<link rel="stylesheet" type="text/css" href="css/template.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="bahan/smk.png" width="9%">
<!--<a class="navbar-brand" href="#myPage">SMK Negeri 1 Mejayan</a>-->
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">SEJARAH</a></li>
<li><a href="#services">PRODUKTIF</a></li>
<li><a href="#portfolio">PRASARANA</a></li>
<li><a href="#pricing">PROFILE</a></li>
<li><a href="#contact">KONTAK</a></li>
</ul>
</div>
</div>
</nav>
<!--<div class="jumbotron text-center">-->
<div class="parallax jumbotron text-center">
<h1 class="w3-text-shadow judul"><font color="white" face="Farcry">SMK Negeri 1 Mejayan</font></h1>
<br><p class="judul">- BLC Telkom Klaten</p><br>
<br><br>
<form>
<div class="input-group">
<input type="email" class="form-control" size="50" placeholder="Email Address" required>
<div class="input-group-btn">
<button type="button" class="btn btn-primary">Subscribe</button>
</div>
</div>
</form>
</div>
<!--</div>-->
<!-- Container (About Section) -->
<!--<div class="parallax">-->
<div id="about" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>SMK Negeri 1 Mejayan</h2><br>
<h4>SMK Negeri 1 Mejayan dibangun berdasarkan program pemerintah Jawa Timur yang mengembangkan sekolah bertaraf internasional khususnya jenjang SMK. Pemerintah Jawa Timur dalam hal ini yang mengampu dinas pendidikan Provinsi jawa Timur menyiapkan anggaran untuk pembangunan infrastruktur yang berupa gedung dan peralatan praktek yang berstandar internasional sedang pemerintah daerah diwajibkan menyiapkan lahan.</h4><br>
<p>Sebagai sekolah baru dengan program keahlian baru yang belum banyak di kenal masyarakat, untuk tahun pertama pertama program keahlian TO menampung 70 siswa, RPL 56 siswa dan TPHP 18 siswa. Berkat sosialisasi yang baik masyarakat semakin besar kepercayaannya untuk mendaftarkan putra - putrinya di SMK Negeri 1 mejayan, terbukti pada PPDB tahun pelajaran 2014/2015 tercatat ada 716 pendaftar. Sekolah berhasil menampung progli TO 76 siswa, RPL 72 siswa, TPHP 93 siswa dan Teknik Kendaraan Ringan (TKR) sebagai progli baru menampung 74 siswa.</p>
<br><button class="btn btn-default btn-lg">READ MORE</button>
</div>
<div class="col-sm-4">
<img class="logo slideanim" src="bahan/smk.png" width="50%">
<!--<span class="glyphicon glyphicon-signal logo"></span>-->
</div>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<img class="logo slideanim" src="bahan/web.png" width="50%">
<!--<span class="glyphicon glyphicon-globe logo slideanim"></span>-->
</div>
<div class="col-sm-8">
<h2>VISI MISI SMKN 1 MEJAYAN</h2><br>
<h4><strong>VISI :</strong> "Menyiapkan Sumber Daya Manusia yang Berkarakter, Beriman, dan Berakhlaq Mulia, Terampil, Berjiwa Enterpreneur"</h4><br>
<p><strong>MISI :</strong>
<ul>
<li>Mendidik siswa yang perilaku jujur, sopan, ramah, dan bertanggung jawab.</li>
<li>Mendidik siswa yang taat menjalankan ibadah sesuai dengan agama yang dianutnya.</li>
<li>Membentuk Pribadi siswa yang berakhlaq mulia, menghormati sesama hidup, dan tolong menolong.</li>
<li>Menyiapkan siswa yang menguasai ilmu pengetahuan dan teknologi sehingga mampu menjawab tantangan jaman.</li>
<li>Mencetak siswa yang memiliki jiwa wirausaha yang berdaya saing tinggi.</li>
</ul>
</p>
</div>
</div>
</div>
</div>
<!-- Container (Services Section) -->
<div class="bgimg-2">
<div id="services" class="container-fluid text-center">
<h2>PRODUKTIF</h2>
<h4>Macam - Macam Jurusan yang ada di SMK Negeri 1 Mejayan</h4>
<br>
<div class="row slideanim">
<div class="col-sm-4">
<div class="panel-footer">
<img src="bahan/rpl.png" width="30%">
<!--<span class="glyphicon glyphicon-off logo-small"></span>-->
<h4>Rekayasa Perangkat Lunak</h4>
<p>RPL adalah suatu ...</p>
<button class="btn btn-lg">READ MORE</button>
</div>
</div>
<div class="col-sm-4">
<div class="panel-footer">
<img src="bahan/tkr.png" width="37%">
<!--<span class="glyphicon glyphicon-heart logo-small"></span>-->
<h4>Teknik Kendaran Ringan</h4>
<p>TKR adalah suatu ...</p>
<button class="btn btn-lg">READ MORE</button>
</div>
</div>
<div class="col-sm-4">
<div class="panel-footer">
<img src="bahan/tphp.png" width="44%">
<!--<span class="glyphicon glyphicon-lock logo-small"></span>-->
<h4>Teknik Pengolahan Hasil Pertanian</h4>
<p>TPHP adalah suatu ...</p>
<button class="btn btn-lg">READ MORE</button>
</div>
</div>
</div>
<br><br>
<div class="row slideanim">
<div class="col-sm-4">
<div class="panel-footer">
<img src="bahan/tsm.png" width="37%">
<!--<span class="glyphicon glyphicon-leaf logo-small"></span>-->
<h4>Teknik Sepedah Montor</h4>
<p>TSM adalah suatu ...</p>
<button class="btn btn-lg">READ MORE</button>
</div>
</div>
<div class="col-sm-4">
<div class="panel-footer">
<img src="bahan/to1.png" width="39%">
<!--<span class="glyphicon glyphicon-certificate logo-small"></span>-->
<h4>Teknik Ototronik</h4>
<p>TO adalah suatu ...</p>
<button class="btn btn-lg">READ MORE</button>
</div>
</div>
<!--<div class="col-sm-4">
<img src="">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>-->
</div>
</div>
</div>
<!--</div>-->
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center bg-grey">
<h2>Sarana & Prasarana</h2>
<h4>SMK Negeri 1 Mejayan</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<br>
<!--<img src="paris.jpg" alt="Paris" width="400" height="300">-->
<p>Free Hotspot Area</p>
<p>2 Lab RPL</p>
<p>2 Lab TO</p>
<p>2 Lab TKR</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<br>
<!--<img src="newyork.jpg" alt="New York" width="400" height="300">-->
<p>2 Lab TPHP</p>
<p>Lab KKPI</p>
<p>2 Kamar Mandi Siswa</p>
<p>Tempat Parkir</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<br>
<!--<img src="sanfran.jpg" alt="San Francisco" width="400" height="300">-->
<p>Lapangan</p>
<p>3 Kantin</p>
<p>CCTV di 5 titik sekolah</p>
<p>Mobil Sekolah</p>
</div>
</div>
</div><br>
<h2>VISI DAN MISI SMKN 1 MEJAYAN</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4><span style="font-style:normal;font-weight: bold;">VISI</span><br>"Menyiapkan Sumber Daya Manusia yang Berkarakter, Beriman, <br>dan Berakhlaq Mulia, Terampil, Berjiwa Enterpreneur"</h4>
</div>
<div class="item">
<h4><span style="font-style:normal;font-weight: bold;">MISI</span><br>
"Mendidik siswa yang perilaku jujur, sopan, ramah, dan bertanggung jawab"<br>
"Mendidik siswa yang taat menjalankan ibadah sesuai dengan agama yang dianutnya"</h4>
</div>
<div class="item">
<h4><span style="font-style:normal;font-weight: bold;">MISI</span><br>
"Membentuk Pribadi siswa yang berakhlaq mulia, menghormati sesama hidup, dan tolong menolong"<br>
"Menyiapkan siswa yang menguasai ilmu pengetahuan dan teknologi sehingga mampu menjawab tantangan jaman"<br>
</div>
<div class="item">
<h4><span style="font-style:normal;font-weight: bold;">MISI</span><br>
"Mencetak siswa yang memiliki jiwa <br>wirausaha yang berdaya saing tinggi"</h4>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Container (Pricing Section) -->
<div class="bgimg-3">
<div id="pricing" class="container-fluid">
<div class="text-center">
<h1 class="font">PROFILE </h1>
<h2 class="font">SMK Negeri 1 Mejayan</h2>
</div>
<div class="row slideanim">
<div class="col-sm-4 col-xs-12">
<div class="panel panel-primary text-center">
<div class="panel-heading">
<h2><font color="white">Kepala Sekolah</font></h2>
</div>
<div class="panel-body">
<img class="w3-circle w3-padding" src="bahan/harto1.jpg" width="60%">
</div>
<div class="panel-footer">
<h5>SUHARTO, M.Pd</h5>
<h4></h4>
<button class="btn btn-lg">READ MORE</button>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-primary text-center">
<div class="panel-heading">
<h2><font color="white">SMK Negeri 1 Mejayan</font></h2>
</div>
<div class="panel-body">
<img class="w3-circle w3-padding" src="bahan/smk.png" width="60%">
</div>
<div class="panel-footer">
<h5>SMK Negeri 1 Mejayan</h5>
<h4></h4>
<button class="btn btn-lg">READ MORE</button>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-primary text-center">
<div class="panel-heading">
<h2><font color="white">Wakil Kepala Sekolah</font></h2>
</div>
<div class="panel-body">
<img class="w3-circle w3-padding" src="bahan/user.jpg" width="60%">
</div>
<div class="panel-footer">
<h5>SUYATNO, S.Pd</h5>
<h4></h4>
<button class="btn btn-lg">READ MORE</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
<h2 class="text-center">KONTAK</h2>
<div class="row">
<div class="col-sm-5">
<p>Hubungi kami dan kami akan kembali kepada Anda dalam waktu 24 jam.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Jl. Imam Bonjol No. 7 Pandean, Kec. Mejayan
Kab. Madiun Kodepos 63153 Jawa Timur</p>
<p><span class="glyphicon glyphicon-phone"></span> (0351) 388-490</p>
<p><span class="glyphicon glyphicon-envelope"></span> smkgreen@smkn1mejayan.sch.id</p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Nama" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Komentar" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Kirim</button>
</div>
</div>
</div>
</div>
</div>
<!--<div id="googleMap" style="height:400px;width:100%;"></div>-->
<!-- Add Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p><i class="glyphicon glyphicon-home"></i> SMK Negeri 1 Mejayan - © 2016 - Rekayasa Perangkat Lunak <br> <i class="glyphicon glyphicon-user"></i> developer <a href="https://facebook.com/bima.ikshan">Bima zainudin ikhsan</a></p>
</footer>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
</script>
</body>
</html>
Kesimpulan :
Pembuatan Template Dengan Bootstrap , Sebenernya Memeng mudah dan kita tinggal memasukan Class yang mau kita pakai ,
kesulitan waktu membuat template dengan bootstrap adalah penentuan dimana letak gambar atau letah tulisan yang mau kalian pakai .
No comments:
Post a Comment