cara membuat layout dengan css
dengan tampilan kurang lebih seperti ini
scriptnya adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tugas Pweb</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link href="bootstrap/css/ada.css" rel="stylesheet">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand">Home</a>
<ul class="nav">
<li><a href="">Download</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><b class="caret pull-right"></b>Kategory</a>
<ul class="dropdown-menu">
<li><a href="" target="_blank">Arsip</a></li>
</ul>
</li>
<li><a href="" target="_blank">Forum</a></li>
</ul>
<ul class="nav pull-right">
<li>
<form class="form-search navbar-search">
<input type="text" class="search-query input-medium">
<input class="btn btn-primary btn-small" type="button" value="SEARCH" />
</form>
</li>
</ul>
</div>
</div>
</div>
<div class="header-image-wrapper container">
<br/><br/><br/>
<h1> Download Game Gratis </h1>
</div>
<div class="container">
<div class="row">
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="COD.jpg" alt="">
<div class="carousel-caption">
<h4>Call Of Duty Modern Warfare 4</h4>
<p>Game FPS terbaru.</p>
</div>
</div>
<div class="item">
<img src="SCE.jpg" alt="">
<div class="carousel-caption">
<h4>Stronghold Crusader Extreme </h4>
<p>Game Strategi paling Keren.</p>
</div>
</div>
<div class="item">
<img src="pes-2014.jpg" alt="">
<div class="carousel-caption">
<h4>Pro Evolution Soccer 2014</h4>
<p>Versi terbaru untuk penggemar PES.</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>
</div>
<div id="wrapper">
<div id="header">
<div id="body">
<img src="need-for-speed-most wanted 2012.jpeg" alt="">
<br/><br/><br/>
<ul style="text-align: left;">
<li>CPU: 2 GHz Dual Core (Core 2 Duo 2.4 GHz or Althon X2 2.7 GHz) </li>
<li>RAM: 2 GB</li>
<li>VGA:Graphics card (AMD): DirectX 10.1
compatible with 512 MB RAM
(ATI Radeon 3000, 4000, 5000 or 6000 series, with ATI Radeon 3870 or
higher performance)<br />Graphics card (NVIDIA): DirectX 10.0 compatible
with 512 MB RAM (NVIDIA GeForce 8, 9, 200, 300, 400 or 500 series with
NVIDIA GeForce 8800 GT or higher performance)</li>
<li>DX:DirectX 10.0</li>
<li>OS:Windows Vista (Service Pack 1) 32-bit </li>
<li>HDD:20 GB</li>
<li>Sound:DirectX Compatible </li>
<li>ODD:DVD Rom Drive</li>
<li>Recommended peripheral:Keyboard and Mouse <b><br /></b></li>
</ul>
<b>Download NSF Most Wanted 2012 (1.8 GB)</b><br />
</div>
</div>
<div id="sidebar">
<div>
<div>
<div><h4>Subscribe</h4>
</div>
</div>
<div id=”recent-posts-3″>
<div>
<h4>Recent Posts</h4>
<ul>
<li><a href=”">PES</a></li>
<li><a href=”">Medal Of Honor</a></li>
<li><a href=”">Far Cry</a></li>
<li><a href=”">Delta Force</a></li>
<li><a href=”">Price Of Persia</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="footer span12">
<div> powered by Bootstrap</div>
</footer>
</body>
</html>
file dapat di unduh disini download
mantap dah artikelnya
ReplyDeletehttp://umpanikanmasgalatama.xyz