API tools faq
paste
Advertisement
GWibisono

isenk bikin template pake bootstrap

GWibisono
Sep 3rd, 2013
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta name="generator"
  5.    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
  6.     <meta charset="utf-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <meta name="description" content="" />
  9.     <meta name="author" content="" />
  10.     <link rel="shortcut icon" href="../../ico/favicon.png" />
  11.     <title>Narrow Jumbotron Template for Bootstrap</title>
  12.     <!-- Bootstrap core CSS -->
  13.     <link href="../css/bootstrap.css" rel="stylesheet" />
  14.     <!-- Custom styles for this template -->
  15.     <link href="style.css" rel="stylesheet" />
  16.     <link href="carousal.css" rel="stylesheet" />
  17.     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  18.     <!--[if lt IE 9]>
  19.      <script src="../js/html5shiv.js"></script>
  20.      <script src="../js/respond.min.js"></script>
  21.    <![endif]-->
  22.   </head>
  23.   <body>
  24.   <div class="container">
  25.     <div class="header">
  26.       <ul class="nav nav-pills pull-right">
  27.         <li class="active">
  28.           <a href="#">Home</a>
  29.         </li>
  30.         <li>
  31.           <a href="#">About</a>
  32.         </li>
  33.         <li>
  34.           <a href="#">Contact</a>
  35.         </li>
  36.       </ul>
  37.       <h3 class="text-muted">JUALAN ONLINE</h3>
  38.       <div class="masthead">
  39.         <ul class="nav nav-justified">
  40.           <li class="active">
  41.             <a href="#">Home</a>
  42.           </li>
  43.           <li>
  44.             <a href="#">Hot Product</a>
  45.           </li>
  46.           <li class="dropdown">
  47.             <a class="dropdown-toggle" data-toggle="dropdown" href="#">Sale</a>
  48.             <ul class="dropdown-menu">
  49.               <li>
  50.                 <a href="#">About</a>
  51.               </li>
  52.               <li>
  53.                 <a href="#">Contact</a>
  54.               </li>
  55.             </ul>
  56.           </li>
  57.           <li>
  58.             <a href="#">Downloads</a>
  59.           </li>
  60.           <li>
  61.             <a href="#">About</a>
  62.           </li>
  63.           <li>
  64.             <a href="#">Contact</a>
  65.           </li>
  66.         </ul>
  67.       </div>
  68.     </div>
  69.     <!--menu-->
  70.   </div>
  71.   <div id="myCarousel" class="carousel slide">
  72.   <!-- Indicators -->
  73.   <ol class="carousel-indicators"></ol>
  74.   <div class="carousel-inner">
  75.     <div class="item active">
  76.       <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" />
  77.       <div class="container">
  78.         <div class="carousel-caption">
  79.           <h1>Example headline.</h1>
  80.           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam
  81.           id dolor id nibh ultricies vehicula ut id elit.</p>
  82.           <p>
  83.             <a class="btn btn-large btn-primary" href="#">Sign up today</a>
  84.           </p>
  85.         </div>
  86.       </div>
  87.     </div>
  88.     <div class="item">
  89.       <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide" />
  90.       <div class="container">
  91.         <div class="carousel-caption">
  92.           <h1>Another example headline.</h1>
  93.           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam
  94.           id dolor id nibh ultricies vehicula ut id elit.</p>
  95.           <p>
  96.             <a class="btn btn-large btn-primary" href="#">Learn more</a>
  97.           </p>
  98.         </div>
  99.       </div>
  100.     </div>
  101.     <div class="item">
  102.       <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide" />
  103.       <div class="container">
  104.         <div class="carousel-caption">
  105.           <h1>One more for good measure.</h1>
  106.           <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam
  107.           id dolor id nibh ultricies vehicula ut id elit.</p>
  108.           <p>
  109.             <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
  110.           </p>
  111.         </div>
  112.       </div>
  113.     </div>
  114.   </div>
  115.   <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
  116.   <a class="right carousel-control" href="#myCarousel" data-slide="next"></a></div>
  117.   <!-- /.carousel -->
  118.   <div class="container">
  119.     <div class="jumbotron">
  120.       <h1>Jumbotron heading</h1>
  121.       <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor
  122.       mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  123.       <p>
  124.         <a class="btn btn-lg btn-success" href="#">Sign up today</a>
  125.       </p>
  126.     </div>
  127.     <div class='col-md-3'>
  128.       <div class="dropdown" role="navigation">
  129.         <div class="well sidebar-nav">
  130.           <ul class="nav">
  131.             <li>Sidebar</li>
  132.             <li class="active">
  133.               <a href="#">Link</a>
  134.             </li>
  135.             <li>
  136.               <a href="#">Link</a>
  137.             </li>
  138.             <li>
  139.               <a href="#">Link</a>
  140.             </li>
  141.             <li>Sidebar</li>
  142.             <li>
  143.               <a href="#">Link</a>
  144.             </li>
  145.             <li>
  146.               <a href="#">Link</a>
  147.             </li>
  148.             <li>
  149.               <a href="#">Link</a>
  150.             </li>
  151.             <li>Sidebar</li>
  152.             <li>
  153.               <a href="#">Link</a>
  154.             </li>
  155.             <li>
  156.               <a href="#">Link</a>
  157.             </li>
  158.           </ul>
  159.         </div>
  160.         <!--/.well -->
  161.       </div>
  162.     </div>
  163.     <div class='col-md-1'></div>
  164.     <div class='col-md-8'>
  165.       <div class="row marketing">
  166.         <div class="col-lg-6">
  167.           <h4>Subheading</h4>
  168.           <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
  169.           <h4>Subheading</h4>
  170.           <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
  171.           <h4>Subheading</h4>
  172.           <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  173.         </div>
  174.         <div class="col-lg-6">
  175.           <h4>Subheading</h4>
  176.           <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
  177.           <h4>Subheading</h4>
  178.           <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
  179.           <h4>Subheading</h4>
  180.           <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  181.         </div>
  182.       </div>
  183.     </div>
  184.   </div>
  185.   <!-- /container -->
  186.   <div class="container">
  187.     <div class="footer">
  188.       <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
  189.     </div>
  190.   </div>
  191.   <!-- Bootstrap core JavaScript
  192.    ================================================== -->
  193.   <script src="../js/jquery.js"></script>
  194.   <script src="../js/bootstrap.min.js"></script>
  195.   <script src="../js/holder.js"></script>
  196.   <!-- Placed at the end of the document so the pages load faster --></body>
  197. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!