<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8">     <title>My First BitStarter</title>     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap-combined.no-icons.min.css">     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">     <link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fsocial-buttons.css">         <script src="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fjquery.js"></script>     <script src="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js"></script>     <link href="http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic" rel="stylesheet" type="text/css">     <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700,800"            rel="stylesheet" type="text/css">     <style type="text/css">        /* Large desktop */       @media (min-width: 980px) {         body {          padding-top: 60px;         }         .linediv-l {           border-right: 1px white solid;          }         .linediv-r {           border-left: 1px white solid;         }       }        /* Landscape phones and down */       @media (max-width: 640px) {         .copy {           padding: 2.5% 10%;         }         .linediv-l {           border-bottom: 1px white solid;         }         .linediv-r {           border-top: 1px white solid;         }       }        /* All form factors */        /* Main body and headings */       body{         font-family: 'Open Sans', Helvetica, Arial, sans-serif;       }       .heading, .subheading {         font-family: 'Ubuntu', Helvetica, Arial, sans-serif;         text-align: center;       }       p.lead {         padding-top: 1.5%;         font-size: 24px;         line-height: 30px;       }       p {         font-size: 18px;         line-height: 24px;       }        /* Video pitch and action */       .pitch {         padding: 2.5% 0%;       }       .order {         padding: 2% 0%;       }       .actions {         background-color: #343434;         padding: 3% 0%;       }       .video, .thermometer, .order, .social, .statistics {         text-align: center;       }       .statistics h3, .statistics p {         color: white;       }        /* Marketing Copy and Footer */       .copy {         padding-top: 2.5%;         padding-bottom: 2.5%;         text-align: justify;       }       .asset {         padding: 2.5% 0%;       }       .footer {         color: #cccccc;         text-align: center;       }       .footer p {         font-size: 11px;       }       .footer a {         color: #ccccff;       }     </style>   </head>   <body>     <!-- Mobile-friendly navbar adapted from example. -->     <!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->     <div class="navbar navbar-inverse navbar-fixed-top">       <div class="navbar-inner">         <div class="container">           <button type="button" 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>           </button>           <a class="brand" href="#">BitStarter</a>           <div class="nav-collapse collapse">             <ul class="nav">               <li class="active"><a href="#">Home</a></li>               <li><a href="#about">About</a></li>               <li><a href="#contact">Contact</a></li>             </ul>           </div><!--/.nav-collapse -->         </div>       </div>     </div>       <div class="container">       <!-- Font and paired font of .heading/.subheading and body from Google Fonts -->       <!-- www.google.com/fonts/specimen/Ubuntu -->       <!-- www.google.com/fonts/specimen/Ubuntu#pairings -->       <div class="row-fluid heading">         <div class="span12">           <h1>dibber</h1>         </div>       </div>       <div class="row-fluid subheading">         <div class="span12">           <p class="lead">Gardening made simple.</p>         </div>       </div>       <div class="row-fluid pitch">         <div class="span5 offset1 video">           <img class="img-polaroid" src="http://placehold.it/480x300">         </div>          <div class="span5 actions">           <div class="span8 offset2">             <div class="statistics">               <div class="span4">                 <!-- linediv-l and linediv-r give dividing lines that look                 different in horizontal and vertical layouts, illustrating                 media queries. -->                 <div class="linediv-l">                   <h3>1000</h3> <p>backers</p>                 </div>               </div>               <div class="span4">                 <div class="linediv-c">                   <h3>$6000</h3> <p>of $10,000</p>                 </div>               </div>               <div class="span4">                 <div class="linediv-r">                   <h3>10</h3> <p>days left</p>                 </div>               </div>             </div>           </div>           <div class="span10 offset1">             <!-- Bootstrap progress bar -->             <!-- http://twitter.github.io/bootstrap/components.html#progress -->             <div class="thermometer progress active">               <div class="bar bar-success" style="width: 60%;"></div>               <div class="bar bar-warning" style="width: 40%;"></div>             </div>           </div>           <div class="span6 offset3 order">             <!-- Standard Bootstrap button. -->             <!-- http://twitter.github.io/bootstrap/base-css.html#buttons -->             <button class="btn btn-success btn-large">Preorder</button>           </div>           <div class="span8 offset2 social">             <!-- Social buttons are not included in default Bootstrap. -->             <!-- See: http://noizwaves.github.io/bootstrap-social-buttons -->             <button class="btn btn-twitter"><i class="icon-twitter"></i> | Twitter</button>             <button class="btn btn-facebook"><i class="icon-facebook"></i> | Facebook</button>           </div>         </div>       </div>        <!-- Beyond this part the marketing copy begins. -->       <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/text-align -->       <!-- http://twitter.github.io/bootstrap/base-css.html#images -->       <!-- http://placehold.it -->       <div class="row-fluid section1">         <div class="span5 offset1 asset">           <img class="img-polaroid" src="http://placehold.it/480x300">         </div>         <div class="span5 copy">           <p>             Describe the motivation for the app here...              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec             porta, dui sagittis hendrerit rutrum, nunc leo tempus nisl, eu             mollis justo velit at nunc. Fusce nec egestas sem. Donec             fringilla ante lectus, a pellentesque lacus dignissim ac. Sed             volutpat lorem ut congue malesuada. In facilisis scelerisque             turpis sed lacinia. Donec in orci lectus. Donec auctor semper             quam, eget rhoncus purus fringilla id. Phasellus id nibh eu             risus ultrices adipiscing.  Lorem ipsum dolor sit amet,             consectetur adipiscing elit. Donec porta, dui sagittis hendrerit             rutrum, nunc leo tempus nisl, eu mollis justo velit at             nunc. Fusce nec egestas sem. Donec fringilla.           </p>         </div>       </div>        <div class="row-fluid section2">         <div class="span5 offset1 copy copy-right">           <p>             Describe the features here....             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec             porta, dui sagittis hendrerit rutrum, nunc leo tempus nisl, eu             mollis justo velit at nunc. Fusce nec egestas sem. Donec             fringilla ante lectus, a pellentesque lacus dignissim ac. Sed             volutpat lorem ut congue malesuada. In facilisis scelerisque             turpis sed lacinia. Donec in orci lectus. Donec auctor semper             quam, eget rhoncus purus fringilla id. Phasellus id nibh eu             risus ultrices adipiscing.  Lorem ipsum dolor sit amet,             consectetur adipiscing elit. Donec porta, dui sagittis hendrerit             rutrum, nunc leo tempus nisl, eu mollis justo velit at             nunc. Fusce nec egestas sem. Donec fringilla.           </p>         </div>         <div class="span5 asset">           <img class="img-polaroid" src="http://placehold.it/480x300">         </div>       </div>        <div class="row-fluid faq">           <div class="span10 offset1">             <h3>FAQ</h3>             <div class="accordion" id="accordion2">               <div class="accordion-group">                 <div class="accordion-heading">                   <a class="accordion-toggle" data-toggle="collapse"                      data-parent="#accordion2" href="#collapseOne">                     What is a dibber?                   </a>                 </div>                 <div id="collapseOne" class="accordion-body collapse">                   <div class="accordion-inner">                     dibber (n) A dibble; A pointed gardening implement used to make holes in soil, especially for planting bulbs or seedlings.                   </div>                 </div>               </div>               <div class="accordion-group">                 <div class="accordion-heading">                   <a class="accordion-toggle" data-toggle="collapse"                      data-parent="#accordion2" href="#collapseTwo">                     Again... what is a dibber?                   </a>                 </div>                 <div id="collapseTwo" class="accordion-body collapse">                   <div class="accordion-inner">                      It is an app that makes gardening easy. I know. That doesn't say much... but stay tuned.                   </div>                 </div>               </div>             </div>           </div>        </div>        <!-- Not crucial, but we put this under a CC By-SA 3.0 license. -->       <!-- http://creativecommons.org/licenses/ -->       <div class="row-fluid footer">         <div class="span12">           <p>Copyright &copy; dibber (ray8zee@gmail.com) All rights reserved.</p>         </div>       </div>     </div>    </body> </html>