Membuat layout website menggunakan CSS.
HASIL...
Coding Menggunakan CSS :
<!DOCTYPE html>
<html>
<head>
<title>Tugas II P.web</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<div class="row">
<div id="nav" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="index.html" class="brand">Esty Istiqamah</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#home" class="anchorLink">Home</a></li>
<li><a href="http://estyistiqamah27.blogspot.com" class="anchorLink">blog</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">lain-lain<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.forum.tif.uad.ac.id">Forum</a></li>
<li><a href="http://www.portal.uad.ac.id">portal</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
<form class="form-search navbar-search">
<input type="text" class="search-query input-medium" placeholder="Search">
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container welcome-message">
<h2>n</h2>
<p></p>
</div>
</div>
<div class="row">
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="aurora.jpg" width="960" height="90" alt="">
<div class="carousel-caption">
<h4>Keindahan Alam</h4>
<p></p>
</div>
</div>
<div class="item">
<img src="alam.jpg" width="960" height="100" alt="">
<div class="carousel-caption">
<h4>Indah</h4>
<p></p>
</div>
</div>
<div class="item">
<img src="alam1[1].jpg" width="960" height="100" alt="">
<div class="carousel-caption">
<h4>Pemandangan</h4>
<p></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>
</br>
<div class="container-fluid">
<div class="row-fluid">
</div>
<div class="span15" id="isi">
<div class="hero-unit" align="center">
<h4>Hello, world!</h4>
<p>Keindahan alam </p><br />
<a class="btn btn-primary btn-large" href="#">Read more</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<h2>Kata Bijak</h2>
<p>"Bila cintamu tak kunjung tiba sedangkan umur terus menua dan diri beranggapan bahwa pernikahan harus dijalankan demi mendapat pengakuan, jangan ada keraguan untuk melanjutkan asal tanamkan saling pengertian, karena pernikahan seperti ini akan terhindar dari badai kecemburuan".</p><br />
<a class="btn" href="#">Read More</a></div>
<div class="span6">
<h2>Pantun Lucu</h2>
<p>Jalan-jalan bersama kakak</p>
<p>Ditengah jalan lihat kepompong</p>
<p>Aku tertawa terbahak-bahak</p>
<p>Melihat kucing makan kedongdong</p>
</</p><br />
<a class="btn" href="#">Read More</a></div>
</div>
</div>
<p>_________________________________________________________________________________________________________________________________________________________________________________________________________________________</p>
<div id="contact" class="row">
<div class="container">
<h2>Contact</h2>
</div>
<div class="container">
<div class="row">
<div class="span6">
<form>
<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>
</head>
<body>
<script src="#"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<p>__________________________________________________________________________________________________________________________</p>
<div id='footer' align="center">Copyright © 2013 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Powered by <a href='#'>Esty</a>
</div>
</body>
</html>