Rabu, 17 April 2013

Membuat Layout Web Dengan CSS

1. Source Code

<!DOCTYPE html>
<html>

<head>
<title>09018231</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="1.jpg" alt="gambar">
                       <div class="carousel-caption">
                             <h4>Bola itu bundar</h4>
                       </div>
                  
                    
                 <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                 <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</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">RADITYA</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>
                    </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="container-fluid">
<div class="row-fluid">
<div class="span2" id="sidebar">
<div class="nav nav-tabs nav-stacked">
<li><a href="http://forum.tif.uad.ac.id">TIF UAD</a></li>
<li><a href="http://portal.uad.ac.id">Portal</a></li>
<li><a href="http://simeru.uad.ac.id">Simeru</a></li>
<li><a href="http://google.com">Google</a></li>

</div>
</div>

             <div class="span5">
                 <h2 class="text-overflow-pops">Manchester City</h2>
              <p><img src="2.jpg">Manchester City</p>
             
             
          </div>
      </div><hr color="#00000" >

      <footer>
          <div class="row">
              <div class="container">
                  &copy; <a href="http:radityawardana.blogspot.com">radityawardana blog</a>
              </div>
          </div>
      </footer>

</body>
</html>



2. Screen Shoot


Reaksi:

0 komentar:

Poskan Komentar