git.roojs.org Git - bootswatch/blob - 2/bower_components/bootstrap/docs/examples/marketing-narrow.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Template &middot; Bootstrap</title>
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <meta name="description" content="">
   8     <meta name="author" content="">
   9
  10     <!-- Le styles -->
  11     <link href="../assets/css/bootstrap.css" rel="stylesheet">
  12     <style type="text/css">
  13       body {
  14         padding-top: 20px;
  15         padding-bottom: 40px;
  16       }
  17
  18       /* Custom container */
  19       .container-narrow {
  20         margin: 0 auto;
  21         max-width: 700px;
  22       }
  23       .container-narrow > hr {
  24         margin: 30px 0;
  25       }
  26
  27       /* Main marketing message and sign up button */
  28       .jumbotron {
  29         margin: 60px 0;
  30         text-align: center;
  31       }
  32       .jumbotron h1 {
  33         font-size: 72px;
  34         line-height: 1;
  35       }
  36       .jumbotron .btn {
  37         font-size: 21px;
  38         padding: 14px 24px;
  39       }
  40
  41       /* Supporting marketing content */
  42       .marketing {
  43         margin: 60px 0;
  44       }
  45       .marketing p + h4 {
  46         margin-top: 28px;
  47       }
  48     </style>
  49     <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
  50
  51     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  52     <!--[if lt IE 9]>
  53       <script src="../assets/js/html5shiv.js"></script>
  54     <![endif]-->
  55
  56     <!-- Fav and touch icons -->
  57     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
  58     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
  59       <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
  60                     <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
  61                                    <link rel="shortcut icon" href="../assets/ico/favicon.png">
  62   </head>
  63
  64   <body>
  65
  66     <div class="container-narrow">
  67
  68       <div class="masthead">
  69         <ul class="nav nav-pills pull-right">
  70           <li class="active"><a href="#">Home</a></li>
  71           <li><a href="#">About</a></li>
  72           <li><a href="#">Contact</a></li>
  73         </ul>
  74         <h3 class="muted">Project name</h3>
  75       </div>
  76
  77       <hr>
  78
  79       <div class="jumbotron">
  80         <h1>Super awesome marketing speak!</h1>
  81         <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  82         <a class="btn btn-large btn-success" href="#">Sign up today</a>
  83       </div>
  84
  85       <hr>
  86
  87       <div class="row-fluid marketing">
  88         <div class="span6">
  89           <h4>Subheading</h4>
  90           <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
  91
  92           <h4>Subheading</h4>
  93           <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
  94
  95           <h4>Subheading</h4>
  96           <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
  97         </div>
  98
  99         <div class="span6">
 100           <h4>Subheading</h4>
 101           <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
 102
 103           <h4>Subheading</h4>
 104           <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
 105
 106           <h4>Subheading</h4>
 107           <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 108         </div>
 109       </div>
 110
 111       <hr>
 112
 113       <div class="footer">
 114         <p>&copy; Company 2013</p>
 115       </div>
 116
 117     </div> <!-- /container -->
 118
 119     <!-- Le javascript
 120     ================================================== -->
 121     <!-- Placed at the end of the document so the pages load faster -->
 122     <script src="../assets/js/jquery.js"></script>
 123     <script src="../assets/js/bootstrap-transition.js"></script>
 124     <script src="../assets/js/bootstrap-alert.js"></script>
 125     <script src="../assets/js/bootstrap-modal.js"></script>
 126     <script src="../assets/js/bootstrap-dropdown.js"></script>
 127     <script src="../assets/js/bootstrap-scrollspy.js"></script>
 128     <script src="../assets/js/bootstrap-tab.js"></script>
 129     <script src="../assets/js/bootstrap-tooltip.js"></script>
 130     <script src="../assets/js/bootstrap-popover.js"></script>
 131     <script src="../assets/js/bootstrap-button.js"></script>
 132     <script src="../assets/js/bootstrap-collapse.js"></script>
 133     <script src="../assets/js/bootstrap-carousel.js"></script>
 134     <script src="../assets/js/bootstrap-typeahead.js"></script>
 135
 136   </body>
 137 </html>