Coding HTML Bootstrap

Post on 15-Feb-2015

39 views 4 download

description

HTML nya

Transcript of Coding HTML Bootstrap

<!DOCTYPE html>

<html>

<head>

<title>Tugas 2 PWEB</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- <link rel="stylesheet/less" href="bootstrap/less/bootstrap.less" media="all" />

<link rel="stylesheet/less" href="bootstrap/less/responsive.less" media="all" />

<script src="asset/js/less-1.3.0.min.js"></script>-->

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

<link href="asset/css/sukripsi.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

<div class="row">

<header id="header">

<div class="container">

<div class="row">

<div class="span4">

<div class="logo">

<a href="index.html"><h1><span class="logo-prefix">NTB</span> <span class="logo-sufix">Sumbawa</span></h1></a>

<div class="logo-desc">Mari Belajar Bersama :)</div>

</div>

</div>

<div class="span4">

<div class="banner pull-right">

<img src="http://placehold.it/290x60"/>

</div>

</div>

<div class="span4">

<span class="call-info pull-right">For information call : <strong>Aji:081915880613</strong></span>

<div class="search-form pull-right">

<form>

<div class="input-append">

<input type="text" id="appendedInputButtons" placeholder="Type keyword ..." class="span2">

<button type="button" class="btn btn-primary">Search</button>

</div>

</form>

</div>

</div>

</div>

</div>

</header>

</div>

<div class="row">

<div class="container">

<div class="navbar">

<div class="navbar-inner">

<div class="container" style="width: auto;">

<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">Menu</a>

<a href="index.html" class="brand"><i class="icon-home icon-white"></i></a>

<div class="nav-collapse collapse">

<ul class="nav">

<li class="active"><a href="index.html">Home</a></li>

<li><a href="blog.html">Umum</a></li>

<li><a href="blog.html">Kuliah</a></li>

<li><a href="blog.html">Praktikum</a></li>

<li class="dropdown">

<a href="#" data-toggle="dropdown" class="dropdown-toggle">Lainnya <b class="caret"></b></a>

<ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">

<li>

<a href="galleries.html">Galleries</a>

<a href="contact.html">Contact Us</a>

<a href="signup.html">Sign Up</a>

</li>

</ul>

</li>

</ul> <!-- /.nav -->

</div> <!-- /.nav-collapse -->

</div><!-- /container -->

</div><!-- /navbar-inner -->

</div>

</div>

</div>

<div class="row">

<div class="container">

<div class="row">

<div class="span8">

<div id="myCarousel" class="carousel slide">

<div class="carousel-inner">

<div class="item active">

<img alt="" src="asset/img/1.JPG" />

<div class="carousel-caption">

<h4>Pra Muskom IMM FTI</h4>

<p>Bertempat di Masjid Gedhe Kauman(Masjid Raya Daerah Istimewa Yogyakarta),

yang di bangun pada Minggu, 29 Mei 1773 dan selesai pada tahun 1931.</p>

</div>

</div>

<div class="item">

<img alt="" src="asset/img/2.JPG" />

<div class="carousel-caption">

<h4>Sewaktu Ospek :D</h4>

<p>Ketika ospek hari terakhir, kelompok kami yang dinamakan mainboot mewakili

Fakultas Teknik Industri untuk tampil membawakan sebuah Pensi dengan

tema pusi estafet, dan pembawa acara di depan itu adalah AIK :D

</p>

</div>

</div>

<div class="item">

<img alt="" src="asset/img/3.jpg" />

<div class="carousel-caption">

<h4>LULUS</h4>

<p>Mengenang kembali ketika kita semua telah menyelseikan wajib belajar 12 tahun

di saat itu hampir semua orang yang berhasil/lulus merayakan kelulusannya

dengan mencoret, mendatangani, dan mempilok baju putih abu-abu mereka.</p>

</div>

</div>

<div class="item">

<img alt="" src="asset/img/4.JPG" />

<div class="carousel-caption">

<h4>Jalan-Jalan Men</h4>

<p>Air Terjun JOBEN, LOMBOK TIMUR </p>

</div>

</div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

</div>

</div>

<div class="span4">

<div class="box green-gradient-box tab-widget">

<ul class="nav nav-tabs">

<li class="active"><a data-toggle="tab" href="#1"><i class="icon-ok"></i>&nbsp;Terbaru</a></li>

<li class=""><a data-toggle="tab" href="#2"><i class="icon-star"></i>&nbsp;Terpopuler</a></li>

<li class=""><a data-toggle="tab" href="#3"><i class="icon-comment"></i>&nbsp;Komentar</a></li>

</ul>

<div class="tab-content">

<div id="1" class="tab-pane active">

<ul class="newest">

<li>

<a href="detail.html">Neymar akan ke Eropa, jika hanya bersama Barcelona</a>

<span class="post-attr"> - kurang dari 1 menit lalu</span>

</li>

<li>

<a href="detail.html">Barca kembali mencetak Rekor dan Sejarah baru</a>

<span class="post-attr"> - kurang dari 1 menit lalu</span>

</li>

<li>

<a href="detail.html">Mario Gotze, tolak masuk Arsenal</a>

<span class="post-attr"> - 5 menit lalu</span>

</li>

<li>

<a href="">Peristiwa Mencekam, Cebongan</a>

<span class="post-attr"> - 7 menit lalu</span>

</li>

<li>

<a href="detail.html">Panggung "Jakarta Night Festival" Dipasang, Thamrin Padat</a>

<span class="post-attr"> - kurang dari 1 menit lalu</span>

</li>

<li>

<a href="">UN (Ujian Nasional) di undur hingga 3 hari, di bagian Timur Indonesia</a>

<span class="post-attr"> - 2 menit lalu</span>

</li>

<li>

<a href="">Cara Membuat Blog lebih menarik</a>

<span class="post-attr"> - 10 menit lalu</span>

</li>

<li>

<a href="">Teknik Informatika UAD, memenangi lomba pembuatan software terbaik seJogja</a>

<span class="post-attr"> - 12 menit lalu</span>

</li>

</ul>

</div>

<div id="2" class="tab-pane">

<ul class="popular">

<li>

<a href="detail.html">Neymar akan ke Eropa, jika hanya bersama Barcelona</a>

<span class="post-attr"> - dibaca 2349 kali</span>

</li>

<li>

<a href="detail.html">Barca kembali mencetak Rekor dan Sejarah baru</a>

<span class="post-attr"> - dibaca 349 kali</span>

</li>

<li>

<a href="detail.html">Mario Gotze, tolak masuk Arsenal</a>

<span class="post-attr"> - dibaca 249 kali </span>

</li>

<li>

<a href="detail.html">Peristiwa Mencekam, Cebongan</a>

<span class="post-attr"> - dibaca 239 kali</span>

</li>

<li>

<a href="detail.html">Panggung "Jakarta Night Festival" Dipasang, Thamrin Padat</a>

<span class="post-attr"> - dibaca 23 kali</span>

</li>

</ul>

</div>

<div id="3" class="tab-pane">

<ul class="commented">

<li>

<a href="detail.html">Jokowi Cek Bendung Katulampa</a>

<span class="post-attr"> - 4564 komentar</span>

</li>

<li>

<a href="detail.html">Panggung "Jakarta Night Festival" Dipasang, Thamrin Padat</a>

<span class="post-attr"> - 4562 komentar</span>

</li>

<li>

<a href="detail.html">Panggung "Jakarta Night Festival" Dipasang, Thamrin Padat</a>

<span class="post-attr"> - 456 komentar</span>

</li>

<li>

<a href="detail.html">Jokowi Cek Bendung Katulampa</a>

<span class="post-attr"> - 454 komentar</span>

</li>

<li>

<a href="detail.html">Panggung "Jakarta Night Festival" Dipasang, Thamrin Padat</a>

<span class="post-attr"> - 464 komentar</span>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="row">

<div class="container">

<div class="well welcome-message centered">

<h4>Everything is gonna be alright :) ok &nbsp;&nbsp; <a href="#" class="btn btn-primary">Learn More <i class="icon icon-caret-right"></i></a></h4>

</div>

</div>

</div>

<article class="row">

<div class="container">

<div class="row">

<div class="span4">

<div class="box">

<h3 class="box-title"><span>Umum</span></h3>

<img src="asset/img/5.jpg" class="img-rounded"/>

<h3><a href="detail.html">Apakah persepakbolaan Indonesia akan maju ?</a></h3>

<p>

Apakah Sepak bola di Negri ini akan maju ? Semua itu tergantung dari kinerja PSSI dan dukungan Masyarakat Indonesia.

<br/><br/>

<a href="detail.html" class="btn btn-primary">read more</a>

</p>

<ul class="other-posts">

<li>

<a href="detail.html">Jokowi Cek Bendung Katulampa</a>

<span class="post-attr"> - dibaca 2349 kali</span>

</li>

<li>

<a href="detail.html">Panggung "Jakarta Night Festival" Dipasang, Thamrin Padat</a>

<span class="post-attr"> - dibaca 349 kali</span>

</li>

<li>

<a href="detail.html">Sambut Tahun Baru, Pemuda Bikin Tenda Musik</a>

<span class="post-attr"> - dibaca 249 kali </span>

</li>

<li>

<a href="detail.html">Jokowi Cek Bendung Katulampa</a>

<span class="post-attr"> - dibaca 239 kali</span>

</li>

<li>

<a href="detail.html">Panggung "Jakarta Night Festival" Dipasang, Thamrin Padat</a>

<span class="post-attr"> - dibaca 23 kali</span>

</li>

</ul>

</div>

</div>

<div class="span4">

<div class="box">

<h3 class="box-title"><span>Kuliah</span></h3>

<img src="asset/img/6.jpg" class="img-rounded"/>

<h3><a href="detail.html">Info Bea-Mahasiswa Tahun 2013</a></h3>

<p>

Info Bea-Mahasiswa 2013 bagi Mahasiswa Reguler UAD asal dari DIY semester 3 dan 5 yang kurang mampu. Dinas Pendidikan Pemuda dan Olahraga DIY akan memberikan Bantuan Biaya Pendidikan bagi

<br/><br/>

<a href="detail.html" class="btn btn-primary">read more</a>

</p>

<ul class="other-posts">

<li>

<a href="detail.html">Pendaftaran Beasiswa UAD 2013</a>

<span class="post-attr"> - dibaca 2349 kali</span>

</li>

<li>

<a href="detail.html">Pendaftaran UKM </a>

<span class="post-attr"> - dibaca 349 kali</span>

</li>

<li>

<a href="detail.html">Forum.tif.uad.ac.id</a>

<span class="post-attr"> - dibaca 249 kali </span>

</li>

<li>

<a href="detail.html">Teknik Informatika UAD TerAkreditasi B</a>

<span class="post-attr"> - dibaca 239 kali</span>

</li>

<li>

<a href="detail.html">Pes 2013 Competition</a>

<span class="post-attr"> - dibaca 23 kali</span>

</li>

</ul>

</div>

</div>

<div class="span4">

<div class="box">

<h3 class="box-title"><span>Praktikum</span></h3>

<img src="asset/img/7.jpg" class="img-rounded"/>

<h3><a href="detail.html">Info Praktikum </a></h3>

<p>

tif.uad.ac.id

<br/><br/>

<a href="detail.html" class="btn btn-primary">read more</a>

</p>

<ul class="other-posts">

<li>

<a href="detail.html">Praktikum Kalkulus</a>

<span class="post-attr"> - dibaca 2349 kali</span>

</li>

<li>

<a href="detail.html">Praktikum Pemrograman Web</a>

<span class="post-attr"> - dibaca 349 kali</span>

</li>

<li>

<a href="detail.html">Praktikum Algoritma dan Pemrograman</a>

<span class="post-attr"> - dibaca 249 kali </span>

</li>

<li>

<a href="detail.html">Praktikum Matematika Diskrit</a>

<span class="post-attr"> - dibaca 239 kali</span>

</li>

<li>

<a href="detail.html">Praktikum Logika Informatika</a>

<span class="post-attr"> - dibaca 23 kali</span>

</li>

</ul>

</div>

</div>

</div>

</div>

</article>

<div class="row">

<div class="container">

<div class="well welcome-message centered">

<h4> &nbsp;&nbsp; <a href="#" class="btn btn-primary">Learn More <i class="icon icon-caret-right"></i></a></h4>

</div>

</div>

</div>

<footer>

<div class="container">

<div class="row">

<div class="container">

<!-- row of widgets -->

<div id="MESSAGE" class="row">

<div class="container">

</div>

<div class="container">

<div class="row">

<div class="span6">

<form>

<label>Type Your Message Here</label><br>

<label>Name</label>

<input class="span6" type="text" placeholder="Your Name">

<label>Email Address</label>

<input class="span6" type="text" placeholder="email@example.com">

<label>Your Message</label>

<textarea class="input-xlarge span6" id="textarea" rows="6" placeholder="Type your message here."></textarea>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

<div class="span6">

<iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=London@51.508129,-0.128005&ie=UTF8&z=12&t=m&iwloc=near&output=embed"></iframe>

</div>

</div>

</div>

</div>

<hr>

<!-- row of widgets -->

<div class="row">

<div class="span3">

<h4>About Us</h4>

<p>Lorem ipsum dolor sit amet consectetuer lobortis nulla purus dolor interdum. In a Nam Nulla tincidunt dui mauris Integer nibh felis dui.

Amet id Cras id mattis ligula semper dolor cursus ac Maecenas.

Sed et In nibh eros sit ipsum odio id ante cursus.</p>

</div> <!-- /.span3 -->

<hr class="visible-phone">

<div class="span3">

<h4>Flickr Photos</h4>

<ul class="flickr">

<li><a href="#"><img src="http://farm9.staticflickr.com/8084/8326686890_75a5464821_s.jpg"/></a></li>

<li><a href="#"><img src="http://farm9.staticflickr.com/8501/8314291539_d43363b065_s.jpg"/></a></li>

<li><a href="#"><img src="http://farm9.staticflickr.com/8501/8306883629_6b9537965c_s.jpg"/></a></li>

<li><a href="#"><img src="http://farm9.staticflickr.com/8496/8289327500_f43c87c215_s.jpg"/></a></li>

</ul>

</div><!-- /.span3 -->

<div class="span3">

<h4>Kelompok Studi</h4>

<ul class="tag-cloud">

<li><a href="#">Kelompok Studi Web</a></li>

<li><a href="#">Kelompok Studi Linux</a></li>

<li><a href="#">Kelompok Studi Multimedia</a></li>

</ul>

</div><!-- /.span3 -->

<div class="span3">

<h4>Subscribe to our Newsletter</h4>

<form class="footer-form">

<fieldset>

<label>Get our email weekly newsletter</label>

<input type="text" placeholder="Enter your email">

<span class="help-block">No spam, we promise!</span>

<button class="btn btn-primary" type="submit">Subscribe</button>

</fieldset>

</form>

</div> <!-- /.span3 -->

</div> <!-- /.row -->

</div><!-- /.container -->

<div class="bottom-line">

<div class="container">

<div class="row">

<p class="pull-left">&copy; 2012 Designed by <a target="_blank" href="http://twitter.com/Ajii_Hehe">@hahahedo23</a></p>

<p class="pull-right"><a href="#">Back to top</a></p>

</div>

</div>

</div>

</footer>

<script src="asset/js/jquery-1.7.2.min.js"></script>

<script src="bootstrap/js/bootstrap.js"></script>

<script src="asset/js/main.js"></script>

</body>

</html>