Inilah dia layout web dengan CSS untuk tugas pemrograman web yang ke-2 :
Let's see............
Code untuk mebuat tampilan di atas :
<!DOCTYPE html>
<html>
<head>
<title>Kuliah cool</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.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="container welcome-message">
<div class="row" id="home" >
<h3></h3>
</div>
</div>
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="C++.jpg" alt="this my site">
<div class="carousel-caption">
<h4>Semangat untuk terus belajar dan bekarya</h4>
</div>
</div>
<div class="item">
<img src="Desert.jpg" class="img-rounded">
<div class="carousel-caption">
<h4>Semangat untuk terus belajar dan bekarya</h4>
<p>desert in the IT.</p>
</div>
</div>
<div class="item">
<img src="C++.jpg" alt="" class="img-circle">
<div class="carousel-caption">
<h4>Cool's place</h4>
</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 class="row">
<div id="nav" class="navbar navbar-inverse navbar-fixed-down">
<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">Lecture</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#home" class="anchorLink"><i class="icon-home icon-white "></i> HOME</a></li>
<li><a href="#about" class="anchorLink">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="Leran_web.html">Learn Web</a></li>
<li><a href="C++.html">Learn C++</a></li>
<li><a href="Js.html">Learn Javascript</a></li>
<li><a href="etc.html">Etc</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cari Sesuatu</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="about">
<div class="container">
<div class="span5">
<h2 class="text-overflow-pops">Categories </h2>
<p><img src="apple.jpg">Apple</p>
<p>Selalu dan selalu bisa untuk selalu berkarya, salam super dan dahsyat dari kami.</p>
<p>Bisa menggapai langit yang paling tinggi.</p>
</div>
<div class="span5">
<h2 class="text-overflow-pops">About</h2>
<p>Selalu dan selalu bisa untuk selalu berkarya, salam super dan dahsyat dari kami.</p>
<p>Bisa menggapai langit yang paling tinggi.</p>
</div>
</div>
</div><hr color="#000000" >
<footer>
<div class="row">
<div class="container">
© <a href="http:kuliahcool.blogspot.com">kuliah cool</a>
</div>
</div>
</footer>
</body>
</html>
Let's see............
<!DOCTYPE html>
<html>
<head>
<title>Kuliah cool</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.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="container welcome-message">
<div class="row" id="home" >
<h3></h3>
</div>
</div>
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="C++.jpg" alt="this my site">
<div class="carousel-caption">
<h4>Semangat untuk terus belajar dan bekarya</h4>
</div>
</div>
<div class="item">
<img src="Desert.jpg" class="img-rounded">
<div class="carousel-caption">
<h4>Semangat untuk terus belajar dan bekarya</h4>
<p>desert in the IT.</p>
</div>
</div>
<div class="item">
<img src="C++.jpg" alt="" class="img-circle">
<div class="carousel-caption">
<h4>Cool's place</h4>
</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 class="row">
<div id="nav" class="navbar navbar-inverse navbar-fixed-down">
<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">Lecture</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#home" class="anchorLink"><i class="icon-home icon-white "></i> HOME</a></li>
<li><a href="#about" class="anchorLink">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="Leran_web.html">Learn Web</a></li>
<li><a href="C++.html">Learn C++</a></li>
<li><a href="Js.html">Learn Javascript</a></li>
<li><a href="etc.html">Etc</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Cari Sesuatu</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="about">
<div class="container">
<div class="span5">
<h2 class="text-overflow-pops">Categories </h2>
<p><img src="apple.jpg">Apple</p>
<p>Selalu dan selalu bisa untuk selalu berkarya, salam super dan dahsyat dari kami.</p>
<p>Bisa menggapai langit yang paling tinggi.</p>
</div>
<div class="span5">
<h2 class="text-overflow-pops">About</h2>
<p>Selalu dan selalu bisa untuk selalu berkarya, salam super dan dahsyat dari kami.</p>
<p>Bisa menggapai langit yang paling tinggi.</p>
</div>
</div>
</div><hr color="#000000" >
<footer>
<div class="row">
<div class="container">
© <a href="http:kuliahcool.blogspot.com">kuliah cool</a>
</div>
</div>
</footer>
</body>
</html>
0 comments:
Post a Comment