Selasa, 16 April 2013

Website tema menggunakan BOOTSTRAP

 Screen Shoot


List HTMLnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Alfian Nur Hidayat-Company</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/camera.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/camera.js"></script>
    <script src="js/jquery.ui.totop.js" type="text/javascript"></script>
    <script>
      $(document).ready(function(){  
              jQuery('.camera_wrap').camera();
        });   
    </script>       
    <!--[if lt IE 8]>
          <div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div> 
     <![endif]-->
 
  <!--[if (gt IE 9)|!(IE)]><!-->
  <script type="text/javascript" src="js/jquery.mobile.customized.min.js"></script>
  <!--<![endif]-->
      <!--[if lt IE 9]>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link rel="stylesheet" href="css/docs.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
  <![endif]-->
</head>

<body>
<!--==============================header=================================-->
<header class="p0">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div class="header-block clearfix">
                    <div class="clearfix header-block-pad">
                        <h1 class="brand"><a href="index.html"><img src="img/logo.png" alt=""></a><span>Reseller gun</span></h1>
                        <form id="search-form" action="search.php" method="GET" accept-charset="utf-8" class="navbar-form" >
                            <input type="text" name="s" onBlur="if(this.value=='') this.value=''" onFocus="if(this.value =='' ) this.value=''"  >
                            <a href="#" onClick="document.getElementById('search-form').submit()"></a>
                        </form>
                        <span class="contacts">Hubungi Kami Bebas Pulsa:  <span>+6289666044xxx</span><br>E-mail: <a href="#">slims_o@yahoo.com</a></span>
                    </div>
                    <div class="navbar navbar_ clearfix">
                        <div class="navbar-inner navbar-inner_">
                            <div class="container">
                                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse_">MENU</a>                                                  
                                <div class="nav-collapse nav-collapse_ collapse">
                                    <ul class="nav sf-menu">
                                      <li class="active li-first"><a href="index.html"><em class="hidden-phone"></em><span class="visible-phone">menu</span></a></li>
                                      <li class="sub-menu"><a href="index-1.html">Tentang Kami</a>
                                        <ul>
                                          <li><a href="#">Pesan</a></li>
                                          <li class="sub-menu"><a href="#">profil perusahaan</a>
                                            <ul>
                                              <li><a href="#">Kemampuan Kami</a></li>
                                              <li><a href="#">Keuntungan</a></li>
                                              <li><a href="#">Tim Kerja</a></li>
                                              <li><a href="#">Persekutuan</a></li>
                                              <li><a href="#">Pendukung</a></li>
                                            </ul>
                                          </li>
                                          <li><a href="#">Sejarah Kami</a></li>
                                          <li><a href="#">Testimonial</a></li>
                                        </ul>
                                      </li>
                                      <li><a href="#">Layanan</a></li>
                                      <li><a href="#">Koleksi</a></li>
                                      <li><a href="#">Gaya</a></li>
                                      <li><a href="#">kontak</a></li>
                                    </ul>
                                </div>
                                <ul class="social-icons">
                                    <li><a href="#"><img src="img/icon-1.png" alt=""></a></li>
                                    <li><a href="#"><img src="img/icon-2.png" alt=""></a></li>
                                    <li><a href="#"><img src="img/icon-3.png" alt=""></a></li>
                                    <li><a href="#"><img src="img/icon-4.png" alt=""></a></li>
                                </ul>
                            </div>
                        </div>
                     </div>  
                </div>
            </div>
         </div>  
    </div>
    <div class="slider">
    <div class="camera_wrap">
        <div data-src="img/slide1.jpg"></div>
        <div data-src="img/slide2.jpg"></div>
        <div data-src="img/slide3.jpg"></div>
    </div>
</div>
</header>

<section id="content" class="main-content">
  <div class="container">
    <div class="row">
      <div class="span12">       
        <ul class="thumbnails">
          <li class="span3">
            <div class="thumbnail">
              <div class="caption">
                  <img src="img/img-1.png" alt="">
                <h5>paling</h5>
                <h3>populer</h3>
              </div> 
              <div class="thumbnail-pad">
                  <p>Senapan lontak atau juga dikenal dengan nama musket adalah senjata yang populer di antara abad ke-15 sampai pertengahan abad ke-19. Senapan lontak hanya dapat ditembakkan sekali setelah diisi dengan amunisi bola timah dan mesiu, dan diisi dari depan moncong laras senapan. </p>
                  <a href="#" class="btn btn_">info lebih lanjut</a>
              </div>
            </div>
          </li>
          <li class="span3">
            <div class="thumbnail">
              <div class="caption">
                  <img src="img/img-2.png" alt="">
                <h5>paling</h5>
                <h3>laris</h3>
              </div> 
              <div class="thumbnail-pad">
                  <p>1. MP7 <br> 2.M4a1 (Mummy)<br>3.AK-47<br>4. Shotgun<br>5. SG-550</p>
                  <a href="#" class="btn btn_">info lebih lanjut</a>
              </div>
            </div>
          </li>
          <li class="span3">
            <div class="thumbnail">
              <div class="caption">
                  <img src="img/img-3.png" alt="">
                <h5>peringatan</h5>
                <h3>lebih lanjut</h3>
              </div> 
              <div class="thumbnail-pad">
                  <p>PERATURAN YANG MENGATUR MENGENAI PENGGUNAAN SENJATA API OLEH POLISI ANTARA LAIN DIATUR DALAM PERKAPOLRI NO. 8 TAHUN 2009 TENTANG IMPLEMENTASI PRINSIP DAN STANDAR HAK ASASI MANUSIA DALAM PENYELENGGARAAN TUGAS KEPOLISIAN NEGARA REPUBLIK INDONESIA (“PERKAPOLRI 8/2009”), SERTA DI DALAM PERKAPOLRI NO. 1 TAHUN 2009 TENTANG PENGGUNAAN KEKUATAN DALAM TINDAKAN KEPOLISIAN (“PERKAPOLRI 1/2009”).</p>
                  <a href="#" class="btn btn_">info lebih lanjut</a>
              </div>
            </div>
          </li>
          <li class="span3">
            <div class="thumbnail">
              <div class="caption">
                  <img src="img/img-4.png" alt="">
                <h5>hadiah</h5>
                <h3>pembelian</h3>
              </div>
              <div class="thumbnail-pad"> 
                  <p>hadiah yang di dapatkan jika membeli senjata dari perusahaan kami yaitu amo 1 megazine dari senjata tersebut</p>
                  <a href="#" class="btn btn_">more info</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
        <div class="span8">
            <div class="clearfix cols-1">
                <div class="span4 left-0">
                    <h4 class="indent-2">Senjata P90</h4>
                    <p class="lead" >Penggemar game point blank tentunya sudah tau senjata p90.</p>
                    <figure class="img-indent"><img src="img/page1-img1.jpg" alt="" class="img-radius"></figure>
                    Cara penggunaan p90 ini ada dua. yaitu :<br>-apabila sobat ingin selalu mengincar kepala lawan. begini caranya. untuk awalan sobat kira-kira dulu letak crossair agar pas di kepala musuh saat berhadapan. pada saat sobat berhadapan dengan musuh sobat cukup shot satu-satu alias mousenya jangan ditekan terus. agar getarannya tidak terlalu tinggi, sehingga sobat dapat dengan mudah mengincar kepala musuh.<br>-apabila sobat mengicar badan lawan, disinilah title blower sangat berguna jika anda ingin mengincar badan lawan. pada saat berhadapan dengan jarak yang cukup dekat sobat langsung saja menekan mouse terus agar musuh daoat kritkal terus. dan apabila musuh berada cukup jauh sobat cukup menekan mouse satu-satu seperti pada cara diatas.
                    </div>
                <div class="span4">
                    <h4 class="indent-2">Senjata Sniper</h4>
                    <p class="lead"> Senapan runduk M40 digunakan oleh kalangan USMC dalam tiga varian. </p>
                    <figure class="img-indent"><img src="img/page1-img2.jpg" alt="" class="img-radius"></figure>
                    Senapan ini didasari pada senapan Remington 700 yang dimodifikasi dengan tangan oleh pihak gudang senjata USMC dipangkalan Quantico, dengan komponen dari berbagai pemasok. Akhirnya tercipta versi M40A3, (A3 merupakan upgrad dari A1) dengan menggunakan laras Schneider 610/24 inci (25 inci), 5-groove, 1:12” match-grade veavy barrel.
                    </div>
            </div>
           
</section>
<footer>
   <div class="container">
    <div class="row">
      <div class="span4 float2">
        <form id="newsletter" method="post" >
            <label>laporan berkala</label>
            <div class="clearfix">
                <input type="text" onFocus="if(this.value =='Masukkan email di sini' ) this.value=''" onBlur="if(this.value=='') this.value='Masukkan email di sini'" value="Masukkan email di sini" >
                <a href="#" onClick="document.getElementById('newsletter').submit()" class="btn btn_">Langganan</a>
            </div>
        </form>
    </div>
    <div class="span8 float">
          <ul class="footer-menu">
            <li><a href="#" class="current">Halaman Utama</a>|</li>
            <li><a href="#">Tentang Kami</a>|</li>
            <li><a href="#">Layanan</a>|</li>
            <li><a href="#">Koleksi</a>|</li>
            <li><a href="#">Gaya</a>|</li>
            <li><a href="#">Kontak</a></li>
        </ul>
          Stylish   &copy;  2012  |   <a href="#">Kebijakan Privasi</a> <!-- {%FOOTER_LINK} -->
      </div>
    </div>
   </div>
</footer>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>

Tidak ada komentar:

Posting Komentar