git.roojs.org Git - bootswatch/blob - index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <title>Bootswatch: Free themes for Twitter Bootstrap</title>
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6     <meta charset="utf-8">
   7     <link rel="stylesheet" href="./flatly/bootstrap.min.css" media="screen">
   8     <link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
   9     <link rel="stylesheet" href="./assets/css/bootswatch.min.css">
  10     <script type="text/javascript">
  11
  12      var _gaq = _gaq || [];
  13       _gaq.push(['_setAccount', 'UA-23019901-1']);
  14       _gaq.push(['_setDomainName', "bootswatch.com"]);
  15         _gaq.push(['_setAllowLinker', true]);
  16       _gaq.push(['_trackPageview']);
  17
  18      (function() {
  19        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  20        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  21        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  22      })();
  23
  24     </script>
  25   </head>
  26   <body>
  27     <script src="./assets/js/bsa.js"></script>
  28
  29     <div class="navbar navbar-fixed-top">
  30       <div class="container">
  31         <div class="navbar-header">
  32           <a href="./" class="navbar-brand">Bootswatch</a>
  33           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
  34             <span class="icon-bar"></span>
  35             <span class="icon-bar"></span>
  36             <span class="icon-bar"></span>
  37           </button>
  38         </div>
  39         <div class="navbar-collapse collapse" id="navbar-main">
  40           <ul class="nav navbar-nav">
  41             <li class="dropdown">
  42               <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
  43               <ul class="dropdown-menu" aria-labelledby="themes">
  44                 <li><a tabindex="-1" href="./default/">Default</a></li>
  45                 <li class="divider"></li>
  46                 <li><a tabindex="-1" href="./amelia/">Amelia</a></li>
  47                 <li><a tabindex="-1" href="./cerulean/">Cerulean</a></li>
  48                 <li><a tabindex="-1" href="./cosmo/">Cosmo</a></li>
  49                 <li><a tabindex="-1" href="./cyborg/">Cyborg</a></li>
  50                 <li><a tabindex="-1" href="./flatly/">Flatly</a></li>
  51                 <li><a tabindex="-1" href="./journal/">Journal</a></li>
  52                 <li><a tabindex="-1" href="./readable/">Readable</a></li>
  53                 <li><a tabindex="-1" href="./simplex/">Simplex</a></li>
  54                 <li><a tabindex="-1" href="./slate/">Slate</a></li>
  55                 <li><a tabindex="-1" href="./spacelab/">Spacelab</a></li>
  56                 <li><a tabindex="-1" href="./superhero/">Superhero</a></li>
  57                 <li><a tabindex="-1" href="./united/">United</a></li>
  58               </ul>
  59             </li>
  60             <li>
  61               <a href="./help/">Help</a>
  62             </li>
  63             <li>
  64               <a href="http://news.bootswatch.com">Blog</a>
  65             </li>
  66           </ul>
  67
  68           <ul class="nav navbar-nav navbar-right">
  69             <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li>
  70             <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li>
  71           </ul>
  72
  73         </div>
  74       </div>
  75     </div>
  76
  77     <div class="splash">
  78       <div class="container">
  79
  80         <div class="row">
  81           <div class="col-lg-12">
  82             <h1>Free themes for Twitter Bootstrap</h1>
  83
  84             <div class="alert alert-block alert-info">
  85               <button type="button" class="close" data-dismiss="alert">&times;</button>
  86               <p>You're currently previewing the themes for Bootstrap 3.0.0-rc2. These are still a work in progress. If you want to see version 2.3.2, visit <a class="alert-link" href="http://bootswatch.com/2/">bootswatch.com/2/</a>.
  87             </div>
  88             <div id="social">
  89               <span>
  90                 <iframe id="gh-fork" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>
  91                 <iframe id="gh-star" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
  92               </span>
  93               <span>
  94                 <a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a>
  95                 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
  96               </span>
  97             </div>
  98           </div>
  99         </div>
 100
 101       </div>
 102     </div>
 103
 104     <div class="section-tout">
 105       <div class="container">
 106
 107         <div class="row">
 108           <div class="col-lg-4 col-sm-6">
 109             <h3><i class="icon-file-alt"></i> Easy to Install</h3>
 110             <p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p>
 111           </div>
 112           <div class="col-lg-4 col-sm-6">
 113             <h3><i class="icon-github"></i> Open Source</h3>
 114             <p>Bootstrap themes are licensed under Apache 2.0 and maintained by the community on <a target="_blank" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
 115           </div>
 116           <div class="col-lg-4 col-sm-6">
 117             <h3><i class="icon-wrench"></i> Tuned for 3.0.0</h3>
 118             <p>Themes are built for the latest version of Bootstrap. <a target="_blank" href="https://github.com/thomaspark/bootswatch/tags">Older versions</a> are also available to download.</p>
 119           </div>
 120           <div class="col-lg-4 col-sm-6">
 121             <h3><i class="icon-cogs"></i> Modular</h3>
 122              <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p>
 123           </div>
 124           <div class="col-lg-4 col-sm-6">
 125             <h3><i class="icon-cloud"></i> Get Plugged In</h3>
 126             <p>An <a href="./help/#api" onclick="pageTracker._link(this.href); return false;">API</a> is available for integrating with your platform. In use by <a href="http://320press.com/wpbs/" target="_blank">WPBS</a>, <a href="http://www.fusionleaf.com/" target="_blank">FusionLeaf</a>, <a href="http://yabdab.com/stacks/snaps/bootsnap/" target="_blank">BootSnap</a>, and others.</p>
 127           </div>
 128           <div class="col-lg-4 col-sm-6">
 129             <h3><i class="icon-bullhorn"></i> Stay Updated</h3>
 130             <p>Be notified about updates by subscribing via <a href="http://feeds.feedburner.com/bootswatch">RSS feed</a>, <a href="http://feedburner.google.com/fb/a/mailverify?uri=bootswatch&loc=en_US">email</a>, or <a href="http://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Tumblr</a>.</p>
 131           </div>
 132         </div>
 133
 134       </div>
 135     </div>
 136
 137     <div class="section-preview">
 138       <div class="container">
 139         <div class="row">
 140
 141           <div class="col-lg-4 col-sm-6">
 142             <div class="preview">
 143               <div class="image">
 144                 <a href="amelia/"><img src="amelia/thumbnail.png" class="img-responsive" alt="Amelia"></a>
 145               </div>
 146               <div class="options">
 147                 <h3>Amelia</h3>
 148                 <p>Sweet and cheery</p>
 149                 <div class="btn-group"><a class="btn btn-info" href="amelia/">Preview</a></div>
 150                 <div class="btn-group">
 151                   <a class="btn btn-info" target="_blank" href="amelia/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">Download</a>
 152                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 153                     <span class="caret"></span>
 154                   </a>
 155                   <ul class="dropdown-menu">
 156                     <li><a target="_blank" href="amelia/bootstrap.min.css"
 157                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 158                     <li><a target="_blank" href="amelia/bootstrap.css"
 159                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.css']);">bootstrap.css</a></li>
 160                     <li class="divider"></li>
 161                     <li><a target="_blank" href="amelia/variables.less"
 162                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'variables.less']);">variables.less</a></li>
 163                     <li><a target="_blank" href="amelia/bootswatch.less"
 164                       onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootswatch.less']);">bootswatch.less</a></li>
 165                   </ul>
 166                 </div>
 167               </div>
 168             </div>
 169           </div>
 170
 171           <div class="col-lg-4 col-sm-6">
 172             <div class="preview">
 173               <div class="image">
 174                 <a href="cerulean/"><img src="cerulean/thumbnail.png" class="img-responsive" alt="Cerulean"></a>
 175               </div>
 176               <div class="options">
 177                 <h3>Cerulean</h3>
 178                 <p>A calm, blue sky</p>
 179                 <div class="btn-group"><a class="btn btn-info" href="cerulean/">Preview</a></div>
 180                 <div class="btn-group">
 181                   <a class="btn btn-info" target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">Download</a>
 182                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 183                     <span class="caret"></span>
 184                   </a>
 185                   <ul class="dropdown-menu">
 186                     <li><a target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 187                     <li><a target="_blank" href="cerulean/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.css']);">bootstrap.css</a></li>
 188                     <li class="divider"></li>
 189                     <li><a target="_blank" href="cerulean/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'variables.less']);">variables.less</a></li>
 190                     <li><a target="_blank" href="cerulean/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootswatch.less']);">bootswatch.less</a></li>
 191                   </ul>
 192                 </div>
 193               </div>
 194             </div>
 195           </div>
 196
 197           <div class="col-lg-4 col-sm-6">
 198             <div class="preview">
 199               <div class="image">
 200                 <a href="cosmo/"><img class="img-responsive" src="cosmo/thumbnail.png" alt="Cosmo"></a>
 201               </div>
 202               <div class="options">
 203                 <h3>Cosmo</h3>
 204                 <p>An ode to Metro</p>
 205                 <div class="btn-group"><a class="btn btn-info" href="cosmo/">Preview</a></div>
 206                 <div class="btn-group">
 207                   <a class="btn btn-info" target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">Download</a>
 208                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 209                     <span class="caret"></span>
 210                   </a>
 211                   <ul class="dropdown-menu">
 212                     <li><a target="_blank" href="cosmo/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 213                     <li><a target="_blank" href="cosmo/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootstrap.css']);">bootstrap.css</a></li>
 214                     <li class="divider"></li>
 215                     <li><a target="_blank" href="cosmo/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'variables.less']);">variables.less</a></li>
 216                     <li><a target="_blank" href="cosmo/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cosmo', 'bootswatch.less']);">bootswatch.less</a></li>
 217                   </ul>
 218                 </div>
 219               </div>
 220             </div>
 221           </div>
 222
 223           <div class="col-lg-4 col-sm-6">
 224             <div class="preview">
 225               <div class="image">
 226                 <a href="cyborg/"><img class="img-responsive" src="cyborg/thumbnail.png" alt="Cyborg"></a>
 227               </div>
 228               <div class="options">
 229                 <h3>Cyborg</h3>
 230                 <p>Jet black and electric blue</p>
 231                 <div class="btn-group"><a class="btn btn-info" href="cyborg/">Preview</a></div>
 232                 <div class="btn-group">
 233                   <a class="btn btn-info" target="_blank" href="cyborg/bootstrap.min.css"
 234                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">Download</a>
 235                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 236                     <span class="caret"></span>
 237                   </a>
 238                   <ul class="dropdown-menu">
 239                     <li><a target="_blank" href="cyborg/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 240                     <li><a target="_blank" href="cyborg/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.css']);">bootstrap.css</a></li>
 241                     <li class="divider"></li>
 242                     <li><a target="_blank" href="cyborg/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'variables.less']);">variables.less</a></li>
 243                     <li><a target="_blank" href="cyborg/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootswatch.less']);">bootswatch.less</a></li>
 244                   </ul>
 245                 </div>
 246               </div>
 247             </div>
 248           </div>
 249
 250           <div class="col-lg-4 col-sm-6">
 251             <div class="preview">
 252               <div class="image">
 253                 <a href="flatly/"><img class="img-responsive" src="flatly/thumbnail.png" alt="Flatly"></a>
 254               </div>
 255               <div class="options">
 256                 <h3>Flatly</h3>
 257                 <p>Flat and modern</p>
 258                 <div class="btn-group"><a class="btn btn-info" href="flatly/">Preview</a></div>
 259                 <div class="btn-group">
 260                   <a class="btn btn-info" target="_blank" href="flatly/bootstrap.min.css"
 261                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">Download</a>
 262                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 263                     <span class="caret"></span>
 264                   </a>
 265                   <ul class="dropdown-menu">
 266                     <li><a target="_blank" href="flatly/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 267                     <li><a target="_blank" href="flatly/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootstrap.css']);">bootstrap.css</a></li>
 268                     <li class="divider"></li>
 269                     <li><a target="_blank" href="flatly/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'variables.less']);">variables.less</a></li>
 270                     <li><a target="_blank" href="flatly/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'flatly', 'bootswatch.less']);">bootswatch.less</a></li>
 271                   </ul>
 272                 </div>
 273               </div>
 274             </div>
 275           </div>
 276
 277           <div class="col-lg-4 col-sm-6">
 278             <div class="preview">
 279               <div class="image">
 280                 <a href="journal/"><img class="img-responsive" src="journal/thumbnail.png" alt="Journal"></a>
 281               </div>
 282               <div class="options">
 283                 <h3>Journal</h3>
 284                 <p>Crisp like a new sheet of paper</p>
 285                 <div class="btn-group"><a class="btn btn-info" href="journal/">Preview</a></div>
 286                 <div class="btn-group">
 287                   <a class="btn btn-info" target="_blank" href="journal/bootstrap.min.css"
 288                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">Download</a>
 289                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 290                     <span class="caret"></span>
 291                   </a>
 292                   <ul class="dropdown-menu">
 293                     <li><a target="_blank" href="journal/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 294                     <li><a target="_blank" href="journal/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.css']);">bootstrap.css</a></li>
 295                     <li class="divider"></li>
 296                     <li><a target="_blank" href="journal/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'variables.less']);">variables.less</a></li>
 297                     <li><a target="_blank" href="journal/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootswatch.less']);">bootswatch.less</a></li>
 298                   </ul>
 299                 </div>
 300               </div>
 301             </div>
 302           </div>
 303
 304           <div class="col-lg-4 col-sm-6">
 305             <div class="preview">
 306               <div class="image">
 307                 <a href="readable/"><img class="img-responsive" src="readable/thumbnail.png" alt="Readable"></a>
 308               </div>
 309               <div class="options">
 310                 <h3>Readable</h3>
 311                 <p>Optimized for legibility</p>
 312                 <div class="btn-group"><a class="btn btn-info" href="readable/">Preview</a></div>
 313                 <div class="btn-group">
 314                   <a class="btn btn-info" target="_blank" href="readable/bootstrap.min.css"
 315                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">Download</a>
 316                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 317                     <span class="caret"></span>
 318                   </a>
 319                   <ul class="dropdown-menu">
 320                     <li><a target="_blank" href="readable/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 321                     <li><a target="_blank" href="readable/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.css']);">bootstrap.css</a></li>
 322                     <li class="divider"></li>
 323                     <li><a target="_blank" href="readable/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'variables.less']);">variables.less</a></li>
 324                     <li><a target="_blank" href="readable/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootswatch.less']);">bootswatch.less</a></li>
 325                   </ul>
 326                 </div>
 327               </div>
 328             </div>
 329           </div>
 330
 331           <div class="col-lg-4 col-sm-6">
 332
 333             <div class="preview">
 334               <div class="image">
 335                 <a href="simplex/"><img class="img-responsive" src="simplex/thumbnail.png" alt="Simplex"></a>
 336               </div>
 337               <div class="options">
 338
 339                 <h3>Simplex</h3>
 340                 <p>Mini and minimalist</p>
 341                 <div class="btn-group"><a class="btn btn-info" href="simplex/">Preview</a></div>
 342                 <div class="btn-group">
 343                   <a class="btn btn-info" target="_blank" href="simplex/bootstrap.min.css"
 344                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">Download</a>
 345                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 346                     <span class="caret"></span>
 347                   </a>
 348                   <ul class="dropdown-menu">
 349                     <li><a target="_blank" href="simplex/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 350                     <li><a target="_blank" href="simplex/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.css']);">bootstrap.css</a></li>
 351                     <li class="divider"></li>
 352                     <li><a target="_blank" href="simplex/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'variables.less']);">variables.less</a></li>
 353                     <li><a target="_blank" href="simplex/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootswatch.less']);">bootswatch.less</a></li>
 354                   </ul>
 355                 </div>
 356
 357               </div>
 358             </div>
 359
 360           </div>
 361           <div class="col-lg-4 col-sm-6">
 362
 363             <div class="preview">
 364               <div class="image">
 365                 <a href="slate/"><img class="img-responsive" src="slate/thumbnail.png" alt="Slate"></a>
 366               </div>
 367               <div class="options">
 368
 369                 <h3>Slate</h3>
 370                 <p>Shades of gunmetal gray</p>
 371                 <div class="btn-group"><a class="btn btn-info" href="slate/">Preview</a></div>
 372                 <div class="btn-group">
 373                   <a class="btn btn-info" target="_blank" href="slate/bootstrap.min.css"
 374                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">Download</a>
 375                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 376                     <span class="caret"></span>
 377                   </a>
 378                   <ul class="dropdown-menu">
 379                     <li><a target="_blank" href="slate/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 380                     <li><a target="_blank" href="slate/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.css']);">bootstrap.css</a></li>
 381                     <li class="divider"></li>
 382                     <li><a target="_blank" href="slate/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'variables.less']);">variables.less</a></li>
 383                     <li><a target="_blank" href="slate/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootswatch.less']);">bootswatch.less</a></li>
 384                   </ul>
 385                 </div>
 386
 387               </div>
 388             </div>
 389
 390           </div>
 391           <div class="col-lg-4 col-sm-6">
 392
 393             <div class="preview">
 394               <div class="image">
 395                 <a href="spacelab/"><img class="img-responsive" src="spacelab/thumbnail.png" alt="Spacelab"></a>
 396               </div>
 397               <div class="options">
 398
 399                 <h3>Spacelab</h3>
 400                 <p>Silvery and sleek</p>
 401                 <div class="btn-group"><a class="btn btn-info" href="spacelab/">Preview</a></div>
 402                 <div class="btn-group">
 403                   <a class="btn btn-info" target="_blank" href="spacelab/bootstrap.min.css"
 404                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">Download</a>
 405                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 406                     <span class="caret"></span>
 407                   </a>
 408                   <ul class="dropdown-menu">
 409                     <li><a target="_blank" href="spacelab/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 410                     <li><a target="_blank" href="spacelab/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.css']);">bootstrap.css</a></li>
 411                     <li class="divider"></li>
 412                     <li><a target="_blank" href="spacelab/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'variables.less']);">variables.less</a></li>
 413                     <li><a target="_blank" href="spacelab/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootswatch.less']);">bootswatch.less</a></li>
 414                   </ul>
 415                 </div>
 416
 417               </div>
 418             </div>
 419
 420           </div>
 421          <!--  <div class="col-lg-4 col-sm-6">
 422
 423             <div class="preview">
 424               <div class="image">
 425                 <a href="superhero/"><img class="img-responsive" src="superhero/thumbnail.png" alt="Superhero"></a>
 426               </div>
 427               <div class="options">
 428
 429                 <h3>Superhero</h3>
 430                 <p>Batman meets... Aquaman?</p>
 431                 <div class="btn-group"><a class="btn btn-info" href="superhero/">Preview</a></div>
 432                 <div class="btn-group">
 433                   <a class="btn btn-info" target="_blank" href="superhero/bootstrap.min.css"
 434                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">Download</a>
 435                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 436                     <span class="caret"></span>
 437                   </a>
 438                   <ul class="dropdown-menu">
 439                     <li><a target="_blank" href="superhero/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 440                     <li><a target="_blank" href="superhero/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.css']);">bootstrap.css</a></li>
 441                     <li class="divider"></li>
 442                     <li><a target="_blank" href="superhero/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'variables.less']);">variables.less</a></li>
 443                     <li><a target="_blank" href="superhero/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootswatch.less']);">bootswatch.less</a></li>
 444                   </ul>
 445                 </div>
 446
 447               </div>
 448             </div>
 449
 450           </div> -->
 451           <div class="col-lg-4 col-sm-6">
 452
 453             <div class="preview">
 454               <div class="image">
 455                 <a href="united/"><img class="img-responsive" src="united/thumbnail.png" alt="United"></a>
 456               </div>
 457               <div class="options">
 458
 459                 <h3>United</h3>
 460                 <p>Ubuntu orange and unique font</p>
 461                 <div class="btn-group"><a class="btn btn-info" href="united/">Preview</a></div>
 462                 <div class="btn-group">
 463                   <a class="btn btn-info" target="_blank" href="united/bootstrap.min.css"
 464                   onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">Download</a>
 465                   <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
 466                     <span class="caret"></span>
 467                   </a>
 468                   <ul class="dropdown-menu">
 469                     <li><a target="_blank" href="united/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 470                     <li><a target="_blank" href="united/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.css']);">bootstrap.css</a></li>
 471                     <li class="divider"></li>
 472                     <li><a target="_blank" href="united/variables.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'variables.less']);">variables.less</a></li>
 473                     <li><a target="_blank" href="united/bootswatch.less" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootswatch.less']);">bootswatch.less</a></li>
 474                   </ul>
 475                 </div>
 476
 477               </div>
 478             </div>
 479
 480           </div>
 481
 482
 483
 484         </div>
 485       </div>
 486
 487
 488       <div class="container">
 489         <div class="row">
 490
 491           <div class="col-lg-12">
 492             <h1>Want more?</h1>
 493             <p class="lead">Check out my personal faves from the paid templates at <a target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="Marketplace for premium Bootstrap templates" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap']);">WrapBootstrap</a>.</p>
 494           </div>
 495           <div class="col-lg-4 col-sm-4">
 496             <div class="preview">
 497               <div class="image">
 498                 <a target="_blank" href="http://wrapbootstrap.com/preview/WB02634G3?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB02634G3.png" alt="Clean Canvas"></a>
 499               </div>
 500               <div class="options">
 501                 <h3>Clean Canvas</h3>
 502                 <p>A beautiful showcase for your works</p>
 503                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB02634G3?ref=bsw">Preview</a></div>
 504                 <div class="btn-group">
 505                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/clean-canvas-business-theme-WB02634G3?ref=bsw"
 506                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-cleancanvas']);">Info</a>
 507                 </div>
 508               </div>
 509             </div>
 510           </div>
 511
 512           <div class="col-lg-4 col-sm-4">
 513             <div class="preview">
 514               <div class="image">
 515                 <a target="_blank" href="http://wrapbootstrap.com/preview/WB0L500N4?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB0L500N4.png" alt="Front Row"></a>
 516               </div>
 517               <div class="options">
 518                 <h3>Front Row</h3>
 519                 <p>An elegant single-page template</p>
 520                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB0L500N4?ref=bsw">Preview</a></div>
 521                 <div class="btn-group">
 522                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/front-row-one-page-theme-WB0L500N4?ref=bsw"
 523                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-frontrow']);">Info</a>
 524                 </div>
 525               </div>
 526             </div>
 527           </div>
 528
 529           <div class="col-lg-4 col-sm-4">
 530             <div class="preview">
 531               <div class="image">
 532                 <a target="_blank" class="img-responsive" href="http://wrapbootstrap.com/preview/WB00U99JJ?ref=bsw"><img class="img-responsive" src="https://s3.amazonaws.com/wrapbootstrap/live/products/600x375/WB00U99JJ.png" alt="Clean Canvas"></a>
 533               </div>
 534               <div class="options">
 535                 <h3>Base Admin</h3>
 536                 <p>A polished template for an admin dashboard</p>
 537                 <div class="btn-group"><a class="btn btn-info" target="_blank" href="http://wrapbootstrap.com/preview/WB00U99JJ?ref=bsw">Preview</a></div>
 538                 <div class="btn-group">
 539                   <a class="btn btn-info" target="_blank" href="https://wrapbootstrap.com/theme/base-admin-WB00U99JJ?ref=bsw"
 540                   onClick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap-baseadmin']);">Info</a>
 541                 </div>
 542               </div>
 543             </div>
 544           </div>
 545
 546         </div>
 547
 548         <div class="row">
 549           <div class="col-lg-12">
 550             <h1>Still looking?</h1>
 551             <p class="lead">Learn to code your own themes with these books from <a target="_blank" href="http://www.amazon.com/?tag=bootswatch-20">Amazon</a>.</p>
 552           </div>
 553           <div class="col-lg-4 col-sm-4">
 554             <div class="preview">
 555               <div class="image">
 556                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'htmlandcss']);" href="http://www.amazon.com/gp/product/1118008189/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118008189" target="_blank"><img class="img-responsive" src="assets/img/refs/htmlandcss.png" alt="HTML and CSS: Design and Build Websites, by Jon Duckett"></a>
 557
 558               </div>
 559               <div class="options">
 560                 <h3>HTML &amp; CSS</h3>
 561                 <p>Jon Duckett</p>
 562                 <div>
 563                   <img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=1118008189" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; height: 1px;" />
 564                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'htmlandcss']);" href="http://www.amazon.com/gp/product/1118008189/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118008189" target="_blank">Amazon</a></div>
 565                 </div>
 566               </div>
 567             </div>
 568           </div>
 569           <div class="col-lg-4 col-sm-4">
 570             <div class="preview">
 571               <div class="image">
 572
 573                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'javascriptandjquery']);" href="http://www.amazon.com/gp/product/1449399029/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1449399029" target="_blank"><img class="img-responsive" src="assets/img/refs/javascriptandjquery.png" alt="JavaScript and jQuery: The Missing Manual, by David Sawyer McFarland"></a>
 574
 575               </div>
 576               <div class="options">
 577
 578                 <h3>JavaScript &amp; jQuery</h3>
 579                 <p>David Sawyer McFarland</p>
 580                 <div>
 581                   <img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=1449399029" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; height: 1px;" />
 582                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'javascriptandjquery']);" href="http://www.amazon.com/gp/product/1449399029/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1449399029" target="_blank">Amazon</a></div>
 583                 </div>
 584               </div>
 585             </div>
 586           </div>
 587           <div class="col-lg-4 col-sm-4">
 588             <div class="preview">
 589               <div class="image">
 590
 591                 <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'beautifulwebdesign']);" href="http://www.amazon.com/gp/product/098057689X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=098057689X" target="_blank"><img class="img-responsive" src="assets/img/refs/beautifulwebdesign.png" alt="The Principles of Beautiful Web Design, by Jason Beaird"></a>
 592
 593               </div>
 594               <div class="options">
 595
 596                 <h3>Beautiful Web Design</h3>
 597                 <p>Jason Beaird</p>
 598                 <div>
 599                   <img src="http://www.assoc-amazon.com/e/ir?t=bootswatch-20&l=as2&o=1&a=098057689X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important; height: 1px;" />
 600                   <div class="btn-group"><a class="btn btn-info" onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'beautifulwebdesign']);" href="http://www.amazon.com/gp/product/098057689X/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=098057689X" target="_blank">Amazon</a></div>
 601                 </div>
 602               </div>
 603             </div>
 604           </div>
 605         </div>
 606
 607
 608
 609       </div>
 610     </div>
 611
 612     <div class="container">
 613       <footer>
 614         <div class="row">
 615           <div class="col-lg-12">
 616
 617             <ul class="list-unstyled">
 618               <li class="pull-right"><a href="#top">Back to top</a></li>
 619               <li><a href="http://news.bootswatch.com" onclick="pageTracker._link(this.href); return false;">Blog</a></li>
 620               <li><a href="http://feeds.feedburner.com/bootswatch">RSS</a></li>
 621               <li><a href="https://twitter.com/thomashpark">Twitter</a></li>
 622               <li><a href="https://github.com/thomaspark/bootswatch/">GitHub</a></li>
 623               <li><a href="./help/#api">API</a></li>
 624               <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=F22JEM3Q78JC2">Donate</a></li>
 625             </ul>
 626             <p>Made by <a href="http://thomaspark.me">Thomas Park</a>. Contact him at <a href="mailto:hello@thomaspark.me">hello@thomaspark.me</a>.</p>
 627             <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.</p>
 628             <p>Based on <a href="http://getbootstrap.com">Bootstrap</a>. Icons from <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>. Web fonts from <a href="http://www.google.com/webfonts">Google</a>. Favicon by <a href="https://twitter.com/geraldhiller">Gerald Hiller</a>.</p>
 629
 630           </div>
 631         </div>
 632
 633       </footer>
 634
 635
 636     </div>
 637
 638
 639     <script src="./bower_components/jquery/jquery.min.js"></script>
 640     <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 641     <script src="./assets/js/bootswatch.js"></script>
 642     <script type="text/javascript">
 643       !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
 644     </script>
 645   </body>
 646 </html>