Berikut penampakannya :
Untuk source code-nya sebagai berikut :
________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>CSS Web</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/main.css" rel="stylesheet">
</head>
<body>
<p>
<div class="row">
<div class="span10">
<div class="span4 nav tabs-content nav-tabs" >
<li>
<li><a href="index.html" class="btn-inverse" ><i class="icon-home icon-white"></i></a></li>
<li><a href="#" class="btn-inverse">Profil</a></li>
<li><a href="#" class="btn-inverse">Tag</a></li>
<li><a href="#" class="btn-inverse">Blog</a></li>
<li><a href="#" class="btn-inverse">Hubungi</a></li>
</li>
</div>
</div>
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn btn-inverse" type="button">Search</button>
</div>
</div>
<div class="row">
<img src="atas22.jpg">
</div>
<div class="row">
<br>
<div class="span">
</div>
<div class="span8">
<ul class="thumbnails">
<li class="span4">
<div class="hero-unit">
<h3>Konten/isi</h3>
</div>
<a class="btn btn-inverse" href="#">Lanjutkan>></a>
</li>
<li class="span4 ">
<div class="hero-unit">
<h3>konten/isi</h3>
</div>
<a class="btn btn-inverse" href="#">Lanjutkan>></a>
</li>
<li class="span4 ">
<div class="hero-unit">
<h3>konten/isi</h3>
</div>
<a class="btn btn-inverse" href="#">Lanjutkan>></a>
</li>
<li class="span4 ">
<div class="hero-unit">
<h3>konten/isi</h3>
</div>
<a class="btn btn-inverse" href="#">Lanjutkan>></a>
</li>
<li class="span8">
<div class="container">
<h2>Hubungi</h2>
</div>
<div class="container">
<div class="row">
<div class="span6">
<form>
<label>Nama</label>
<input class="span6" type="text" placeholder="Nama">
<label>Email</label>
<input class="span6" type="text" placeholder="nama@gmail.com">
<label>Pesan</label>
<textarea class="input-xlarge span6" id="textarea" rows="6" placeholder="Tulis pesan."></textarea>
<button type="submit" class="btn btn-inverse">Kirim</button>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="span4">
<ul class="thumbnails">
<li class="hero-unit span2 pull-right">
<p><h4>Widgets 1</h4></p>
</li>
<li class="hero-unit span2 pull-right">
</p><h4>Widgets 2</h4></p>
</li>
<li class="hero-unit span2 pull-right">
<p><h4>Arsip</h4></p>
</li>
<li class="hero-unit span2 pull-right">
<p><h4>Label</h4></p>
</li>
<li class="hero-unit span2 pull-right">
<p><h4>Widgets 3</h4></p>
</li>
</ul>
</div>
</div>
</body>
<footer>
<div class="row">
<div class="container">
<a href="http://adialamsyah.blogspot.com">
<h5 align="center">Copyright © 2013 By Adi Alamsyah</h5>
</a>
</div>
</div>
</footer>
</html>
_______________________________________________________________________
Ini lah desain web pertama saya dan tentu-nya masih sangat banyak kekurangan nya, karena masih harus banyak belajar :-D
Sekian Terima kasih dan semoga bermanfaat :-D
Tidak ada komentar:
Posting Komentar