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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6         <meta name="description" content="Saving the web from default Bootstrap.">
   7     <title>Bootswatch: Free themes for Twitter Bootstrap</title>
   8
   9     <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
  10     <!--[if lt IE 9]>
  11       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  12     <![endif]-->
  13
  14     <!-- Le styles -->
  15     <link href="assets/css/bootstrap.css" rel="stylesheet">
  16     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  17     <link href="css/bootswatch.css" rel="stylesheet">
  18         <link rel="alternate" type="application/rss+xml"
  19           title="Bootswatch"
  20           href="http://feeds.feedburner.com/bootswatch" />
  21
  22         <script type="text/javascript">
  23
  24           var _gaq = _gaq || [];
  25                   _gaq.push(['_setAccount', 'UA-23019901-1']);
  26                   _gaq.push(['_setDomainName', "bootswatch.com"]);
  27                   _gaq.push(['_setAllowLinker', true]);
  28                   _gaq.push(['_trackPageview']);
  29
  30           (function() {
  31             var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  32             ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  33             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  34           })();
  35
  36         </script>
  37
  38   </head>
  39
  40   <body>
  41     <div class="navbar navbar-fixed-top">
  42       <div class="navbar-inner">
  43         <div class="container">
  44                         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  45                     <span class="icon-bar"></span>
  46                     <span class="icon-bar"></span>
  47                     <span class="icon-bar"></span>
  48                         </a>
  49           <a class="brand" href="./">Bootswatch</a>
  50           <div class="nav-collapse">
  51
  52           </div><!--/.nav-collapse -->
  53         </div>
  54       </div>
  55     </div>
  56
  57     <div class="container">
  58
  59       <!-- Main hero unit for a primary marketing message or call to action -->
  60       <div class="hero-unit">
  61         <h1>Bootswatch</h1>
  62         <p id="tagline">&nbsp;</p>
  63
  64         <div id="social">
  65               <div class="span4 github">
  66                         <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=thomaspark&repo=bootswatch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
  67                         <iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>
  68                   </div>
  69           <div class="span4 twitter">
  70                         <a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a>
  71                         <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
  72                   </div>
  73                   <div class="span2 rss">
  74                         <a class="btn rss-button" href="http://feeds.feedburner.com/bootswatch"><i class="icon-rss"></i><span>RSS</span></a>
  75                   </div>
  76             </div>
  77       </div>
  78
  79       <!-- Example row of columns -->
  80       <div class="row about">
  81         <div class="span4">
  82           <img src="img/glyphicons_036_file.png">
  83                   <h3>Easy to Install</h3>
  84           <p>Simply download the CSS file from the swatch of your choice and replace the one in Bootstrap. No messing around with hex values.</p>
  85        </div>
  86         <div class="span4">
  87                   <img src="img/glyphicons_009_magic.png">
  88           <h3>Whole New Feel</h3>
  89           <p>We've all been there with the black bar and blue buttons. See how a splash of color and typography can transform the feel of your site.</p>
  90         </div>
  91         <div class="span4">
  92           <img src="img/glyphicons_050_link.png">
  93                   <h3>Tuned for 2.0.2</h3>
  94           <p>Swatches are built for and tested with the latest version of Bootstrap. <a target="_blank" href="https://github.com/thomaspark/bootswatch/downloads">Previous versions</a> are also available for download.</p>
  95        </div>
  96       </div>
  97
  98       <div class="row about">
  99         <div class="span4">
 100                   <img src="img/glyphicons_341_github.png">
 101           <h3>Open Source</h3>
 102           <p>Licensed under Apache 2.0 and maintained by the community on <a target="_blank" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
 103         </div>
 104          <div class="span4">
 105            <img src="img/glyphicons_025_binoculars.png">
 106           <h3>Modular</h3>
 107            <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p>
 108          </div>
 109
 110         <div class="span4">
 111           <img src="img/glyphicons_032_wifi_alt.png">
 112                   <h3>Stay Updated</h3>
 113           <p>Be notified when new swatches are released 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://bootswatch.tumblr.com/">Tumblr</a>.</p>
 114         </div>
 115       </div>
 116
 117           <div class="row">
 118                   <div class="span12">
 119                           <h1 id="gallery">Gallery</h1>
 120                           <ul class="thumbnails">
 121
 122                             <li class="span4">
 123                               <div class="thumbnail">
 124                                 <a href="amelia"><img src="amelia/thumbnail.png" alt=""></a>
 125                                 <div class="caption">
 126                                   <h3>Amelia  <span class="label label-warning">new!</label></h3>
 127                                   <p>Sweet and cheery.</p>
 128                                   <div class="btn-toolbar">
 129                                                 <div class="btn-group"><a class="btn btn-large" href="amelia">Preview</a></div>
 130                                                 <div class="btn-group">
 131                                                   <a class="btn btn-large btn-primary" target="_blank" href="amelia/bootstrap.min.css"
 132                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">Download</a>
 133                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 134                                                     <span class="caret"></span>
 135                                                   </a>
 136                                                   <ul class="dropdown-menu">
 137                                                     <!-- dropdown menu links -->
 138                                                         <li><a target="_blank" href="amelia/bootstrap.min.css"
 139                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 140                                                         <li><a target="_blank" href="amelia/bootstrap.css"
 141                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.css']);">bootstrap.css</a></li>
 142                                                         <li class="divider"></li>
 143                                                         <li><a target="_blank" href="amelia/variables.less"
 144                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'variables.less']);">variables.less</a></li>
 145                                                         <li><a target="_blank" href="amelia/bootswatch.less"
 146                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootswatch.less']);">bootswatch.less</a></li>
 147                                                   </ul>
 148                                                 </div>
 149                                         </div>
 150                                 </div>
 151                               </div>
 152                             </li>
 153
 154
 155
 156                             <li class="span4">
 157                               <div class="thumbnail">
 158                                  <a href="cerulean"><img src="cerulean/thumbnail.png" alt=""></a>
 159                                 <div class="caption">
 160                                   <h3>Cerulean</h3>
 161                                   <p>A calm, blue sky.</p>
 162                                   <div class="btn-toolbar">
 163                                                 <div class="btn-group"><a class="btn btn-large" href="cerulean">Preview</a></div>
 164                                                 <div class="btn-group">
 165                                                   <a class="btn btn-large btn-primary" target="_blank" href="cerulean/bootstrap.min.css"
 166                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">Download</a>
 167                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 168                                                     <span class="caret"></span>
 169                                                   </a>
 170                                                   <ul class="dropdown-menu">
 171                                                     <!-- dropdown menu links -->
 172                                                         <li><a target="_blank" href="cerulean/bootstrap.min.css"
 173                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 174                                                         <li><a target="_blank" href="cerulean/bootstrap.css"
 175                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.css']);">bootstrap.css</a></li>
 176                                                         <li class="divider"></li>
 177                                                         <li><a target="_blank" href="cerulean/variables.less"
 178                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'variables.less']);">variables.less</a></li>
 179                                                         <li><a target="_blank" href="cerulean/bootswatch.less"
 180                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootswatch.less']);">bootswatch.less</a></li>
 181                                                   </ul>
 182                                                 </div>
 183                                         </div>
 184                                 </div>
 185                               </div>
 186                             </li>
 187
 188
 189                             <li class="span4">
 190                               <div class="thumbnail">
 191                                  <a href="cyborg"><img src="cyborg/thumbnail.png" alt=""></a>
 192                                 <div class="caption">
 193                                   <h3>Cyborg</h3>
 194                                   <p>Jet black and electric blue.</p>
 195                                   <div class="btn-toolbar">
 196                                                 <div class="btn-group"><a class="btn btn-large" href="cyborg">Preview</a></div>
 197                                                 <div class="btn-group">
 198                                                   <a class="btn btn-large btn-primary" target="_blank" href="cyborg/bootstrap.min.css"
 199                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">Download</a>
 200                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 201                                                     <span class="caret"></span>
 202                                                   </a>
 203                                                   <ul class="dropdown-menu">
 204                                                     <!-- dropdown menu links -->
 205                                                         <li><a target="_blank" href="cyborg/bootstrap.min.css"
 206                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 207                                                         <li><a target="_blank" href="cyborg/bootstrap.css"
 208                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.css']);">bootstrap.css</a></li>
 209                                                         <li class="divider"></li>
 210                                                         <li><a target="_blank" href="cyborg/variables.less"
 211                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'variables.less']);">variables.less</a></li>
 212                                                         <li><a target="_blank" href="cyborg/bootswatch.less"
 213                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootswatch.less']);">bootswatch.less</a></li>
 214                                                   </ul>
 215                                                 </div>
 216                                         </div>
 217                                 </div>
 218                               </div>
 219                             </li>
 220
 221
 222                             <li class="span4">
 223                               <div class="thumbnail">
 224                                  <a href="journal"><img src="journal/thumbnail.png" alt=""></a>
 225                                 <div class="caption">
 226                                   <h3>Journal</h3>
 227                                   <p>Crisp like a new sheet of paper.</p>
 228                                   <div class="btn-toolbar">
 229                                                 <div class="btn-group"><a class="btn btn-large" href="journal">Preview</a></div>
 230                                                 <div class="btn-group">
 231                                                   <a class="btn btn-large btn-primary" target="_blank" href="journal/bootstrap.min.css"
 232                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">Download</a>
 233                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 234                                                     <span class="caret"></span>
 235                                                   </a>
 236                                                   <ul class="dropdown-menu">
 237                                                     <!-- dropdown menu links -->
 238                                                         <li><a target="_blank" href="journal/bootstrap.min.css"
 239                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 240                                                         <li><a target="_blank" href="journal/bootstrap.css"
 241                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.css']);">bootstrap.css</a></li>
 242                                                         <li class="divider"></li>
 243                                                         <li><a target="_blank" href="journal/variables.less"
 244                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'variables.less']);">variables.less</a></li>
 245                                                         <li><a target="_blank" href="journal/bootswatch.less"
 246                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootswatch.less']);">bootswatch.less</a></li>
 247                                                   </ul>
 248                                                 </div>
 249                                         </div>
 250                                 </div>
 251                               </div>
 252
 253
 254
 255
 256                             <li class="span4">
 257                               <div class="thumbnail">
 258                                  <a href="readable"><img src="readable/thumbnail.png" alt=""></a>
 259                                 <div class="caption">
 260                                   <h3>Readable  <span class="label label-warning">new!</label></h3>
 261                                   <p>Optimized for legibility.</p>
 262                                   <div class="btn-toolbar">
 263                                                 <div class="btn-group"><a class="btn btn-large" href="readable">Preview</a></div>
 264                                                 <div class="btn-group">
 265                                                   <a class="btn btn-large btn-primary" target="_blank" href="readable/bootstrap.min.css"
 266                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">Download</a>
 267                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 268                                                     <span class="caret"></span>
 269                                                   </a>
 270                                                   <ul class="dropdown-menu">
 271                                                     <!-- dropdown menu links -->
 272                                                         <li><a target="_blank" href="readable/bootstrap.min.css"
 273                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 274                                                         <li><a target="_blank" href="readable/bootstrap.css"
 275                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.css']);">bootstrap.css</a></li>
 276                                                         <li class="divider"></li>
 277                                                         <li><a target="_blank" href="readable/variables.less"
 278                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'variables.less']);">variables.less</a></li>
 279                                                         <li><a target="_blank" href="readable/bootswatch.less"
 280                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootswatch.less']);">bootswatch.less</a></li>
 281                                                   </ul>
 282                                                 </div>
 283                                         </div>
 284                                 </div>
 285                               </div>
 286                             </li>
 287
 288
 289                             <li class="span4">
 290                               <div class="thumbnail">
 291                                  <a href="simplex"><img src="simplex/thumbnail.png" alt=""></a>
 292                                 <div class="caption">
 293                                   <h3>Simplex</h3>
 294                                   <p>Flat, matte, minimalist.</p>
 295                                   <div class="btn-toolbar">
 296                                                 <div class="btn-group"><a class="btn btn-large" href="simplex">Preview</a></div>
 297                                                 <div class="btn-group">
 298                                                   <a class="btn btn-primary btn-large" target="_blank" href="simplex/bootstrap.min.css"
 299                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">Download</a>
 300                                                   <a class="btn btn-primary btn-large dropdown-toggle" data-toggle="dropdown" href="#">
 301                                                     <span class="caret"></span>
 302                                                   </a>
 303                                                   <ul class="dropdown-menu">
 304                                                     <!-- dropdown menu links -->
 305                                                         <li><a target="_blank" href="simplex/bootstrap.min.css"
 306                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 307                                                         <li><a target="_blank" href="simplex/bootstrap.css"
 308                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootstrap.css']);">bootstrap.css</a></li>
 309                                                         <li class="divider"></li>
 310                                                         <li><a target="_blank" href="simplex/variables.less"
 311                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'variables.less']);">variables.less</a></li>
 312                                                         <li><a target="_blank" href="simplex/bootswatch.less"
 313                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'simplex', 'bootswatch.less']);">bootswatch.less</a></li>
 314                                                   </ul>
 315                                                 </div>
 316                                         </div>
 317                                 </div>
 318                               </div>
 319                             </li>
 320
 321
 322                             <li class="span4">
 323                               <div class="thumbnail">
 324                                  <a href="slate"><img src="slate/thumbnail.png" alt=""></a>
 325                                 <div class="caption">
 326                                   <h3>Slate</h3>
 327                                   <p>Shades of gunmetal gray.</p>
 328                                   <div class="btn-toolbar">
 329                                                 <div class="btn-group"><a class="btn btn-large" href="slate">Preview</a></div>
 330                                                 <div class="btn-group">
 331                                                   <a class="btn btn-large btn-primary" target="_blank" href="slate/bootstrap.min.css"
 332                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">Download</a>
 333                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 334                                                     <span class="caret"></span>
 335                                                   </a>
 336                                                   <ul class="dropdown-menu">
 337                                                     <!-- dropdown menu links -->
 338                                                         <li><a target="_blank" href="slate/bootstrap.min.css"
 339                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 340                                                         <li><a target="_blank" href="slate/bootstrap.css"
 341                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.css']);">bootstrap.css</a></li>
 342                                                         <li class="divider"></li>
 343                                                         <li><a target="_blank" href="slate/variables.less"
 344                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'variables.less']);">variables.less</a></li>
 345                                                         <li><a target="_blank" href="slate/bootswatch.less"
 346                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootswatch.less']);">bootswatch.less</a></li>
 347                                                   </ul>
 348                                                 </div>
 349                                         </div>
 350                                 </div>
 351                               </div>
 352                             </li>
 353
 354
 355                             <li class="span4">
 356                               <div class="thumbnail">
 357                                  <a href="spacelab"><img src="spacelab/thumbnail.png" alt=""></a>
 358                                 <div class="caption">
 359                                   <h3>Spacelab</h3>
 360                                   <p>Silvery and sleek.</p>
 361                                   <div class="btn-toolbar">
 362                                                 <div class="btn-group"><a class="btn btn-large" href="spacelab">Preview</a></div>
 363                                                 <div class="btn-group">
 364                                                   <a class="btn btn-large btn-primary" target="_blank" href="spacelab/bootstrap.min.css"
 365                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">Download</a>
 366                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 367                                                     <span class="caret"></span>
 368                                                   </a>
 369                                                   <ul class="dropdown-menu">
 370                                                     <!-- dropdown menu links -->
 371                                                         <li><a target="_blank" href="spacelab/bootstrap.min.css"
 372                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 373                                                         <li><a target="_blank" href="spacelab/bootstrap.css"
 374                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootstrap.css']);">bootstrap.css</a></li>
 375                                                         <li class="divider"></li>
 376                                                         <li><a target="_blank" href="spacelab/variables.less"
 377                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'variables.less']);">variables.less</a></li>
 378                                                         <li><a target="_blank" href="spacelab/bootswatch.less"
 379                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spacelab', 'bootswatch.less']);">bootswatch.less</a></li>
 380                                                   </ul>
 381                                                 </div>
 382                                         </div>
 383                                 </div>
 384                               </div>
 385                             </li>
 386
 387
 388
 389                             <li class="span4">
 390                               <div class="thumbnail">
 391                                  <a href="spruce"><img src="spruce/thumbnail.png" alt=""></a>
 392                                 <div class="caption">
 393                                   <h3>Spruce</h3>
 394                                   <p>Camping in the woods.</p>
 395                                   <div class="btn-toolbar">
 396                                                 <div class="btn-group"><a class="btn btn-large" href="spruce">Preview</a></div>
 397                                                 <div class="btn-group">
 398                                                   <a class="btn btn-large btn-primary" target="_blank" href="spruce/bootstrap.min.css"
 399                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'bootstrap.min.css']);">Download</a>
 400                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 401                                                     <span class="caret"></span>
 402                                                   </a>
 403                                                   <ul class="dropdown-menu">
 404                                                     <!-- dropdown menu links -->
 405                                                         <li><a target="_blank" href="spruce/bootstrap.min.css"
 406                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 407                                                         <li><a target="_blank" href="spruce/bootstrap.css"
 408                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'bootstrap.css']);">bootstrap.css</a></li>
 409                                                         <li class="divider"></li>
 410                                                         <li><a target="_blank" href="spruce/variables.less"
 411                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'variables.less']);">variables.less</a></li>
 412                                                         <li><a target="_blank" href="spruce/bootswatch.less"
 413                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'spruce', 'bootswatch.less']);">bootswatch.less</a></li>
 414                                                   </ul>
 415                                                 </div>
 416                                         </div>
 417                                 </div>
 418                               </div>
 419                             </li>
 420
 421
 422                             <li class="span4">
 423                               <div class="thumbnail">
 424                                 <a href="superhero"><img src="superhero/thumbnail.png" alt=""></a>
 425                                 <div class="caption">
 426                                   <h3>Superhero</h3>
 427                                   <p>Batman meets... Aquaman?</p>
 428                                   <div class="btn-toolbar">
 429                                                 <div class="btn-group"><a class="btn btn-large" href="superhero">Preview</a></div>
 430                                                 <div class="btn-group">
 431                                                   <a class="btn btn-large btn-primary" target="_blank" href="superhero/bootstrap.min.css"
 432                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">Download</a>
 433                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 434                                                     <span class="caret"></span>
 435                                                   </a>
 436                                                   <ul class="dropdown-menu">
 437                                                     <!-- dropdown menu links -->
 438                                                         <li><a target="_blank" href="superhero/bootstrap.min.css"
 439                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 440                                                         <li><a target="_blank" href="superhero/bootstrap.css"
 441                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootstrap.css']);">bootstrap.css</a></li>
 442                                                         <li class="divider"></li>
 443                                                         <li><a target="_blank" href="superhero/variables.less"
 444                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'variables.less']);">variables.less</a></li>
 445                                                         <li><a target="_blank" href="superhero/bootswatch.less"
 446                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'superhero', 'bootswatch.less']);">bootswatch.less</a></li>
 447                                                   </ul>
 448                                                 </div>
 449                                         </div>
 450                                 </div>
 451                               </div>
 452                             </li>
 453
 454
 455                             <li class="span4">
 456                               <div class="thumbnail">
 457                                 <a href="united"><img src="united/thumbnail.png" alt=""></a>
 458                                 <div class="caption">
 459                                   <h3>United</h3>
 460                                   <p>Ubuntu orange and unique font.</p>
 461                                   <div class="btn-toolbar">
 462                                                 <div class="btn-group"><a class="btn btn-large" href="united">Preview</a></div>
 463                                                 <div class="btn-group">
 464                                                   <a class="btn btn-large btn-primary" target="_blank" href="united/bootstrap.min.css"
 465                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">Download</a>
 466                                                   <a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
 467                                                     <span class="caret"></span>
 468                                                   </a>
 469                                                   <ul class="dropdown-menu">
 470                                                     <!-- dropdown menu links -->
 471                                                         <li><a target="_blank" href="united/bootstrap.min.css"
 472                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
 473                                                         <li><a target="_blank" href="united/bootstrap.css"
 474                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootstrap.css']);">bootstrap.css</a></li>
 475                                                         <li class="divider"></li>
 476                                                         <li><a target="_blank" href="united/variables.less"
 477                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'variables.less']);">variables.less</a></li>
 478                                                         <li><a target="_blank" href="united/bootswatch.less"
 479                                                                 onClick="_gaq.push(['_trackEvent', 'bootswatch', 'united', 'bootswatch.less']);">bootswatch.less</a></li>
 480                                                   </ul>
 481                                                 </div>
 482                                         </div>
 483                                 </div>
 484                               </div>
 485                             </li>
 486
 487
 488                             <!--<li class="span4">
 489                               <div class="thumbnail">
 490                                 <img src="img/refs/blank.png" alt="">
 491                                 <div class="caption">
 492                                   <h3>Don't see what you need?</h3>
 493                                   <p>Inquire about a swatch custom-tailored to your business.</p>
 494                                   <div class="btn-toolbar">
 495                                                 <div class="btn-group">
 496                                                   <a class="btn btn-large btn-danger" target="_blank" href="mailto:thomas@thomaspark.me">thomas@thomaspark.me</a>
 497                                                 </div>
 498                                         </div>
 499                                 </div>
 500                               </div>
 501                             </li>-->
 502
 503
 504                          </ul>
 505                 </div>
 506           </div> <!-- end row-->
 507
 508
 509
 510           <div class="row" style="padding-top: 30px;">
 511                   <div class="span12">
 512                           <h1 id="gallery">Support</h1>
 513                           <ul class="thumbnails">
 514                                   <div id="ref" class="span3">
 515                                           <h3>Swatches will always be free.</h3>
 516                                           <p>But if you find them useful, you can show your support by getting one of these gems.</p>
 517                                   </div>
 518
 519                             <li class="span3">
 520                               <div class="thumbnail">
 521                                 <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new"><img src="img/refs/transmit.png" alt=""></a>
 522                                 <div class="caption">
 523                                   <h3>Transmit</h3>
 524                                   <p>The ultimate (S)FTP + Amazon S3 client.</p>
 525                                   <div class="btn-toolbar">
 526                                                 <div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
 527                                         </div>
 528                                 </div>
 529                               </div>
 530                             </li>
 531
 532
 533                             <li class="span3">
 534                               <div class="thumbnail">
 535                                 <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fpixelmator%2Fid407963104%3Fmt%3D12" target="new"><img src="img/refs/pixelmator.png" alt=""></a>
 536                                 <div class="caption">
 537                                   <h3>Pixelmator</h3>
 538                                   <p>A beautifully designed image editor.</p>
 539                                   <div class="btn-toolbar">
 540                                                 <div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fpixelmator%2Fid407963104%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
 541                                         </div>
 542                                 </div>
 543                               </div>
 544                             </li>
 545
 546
 547                             <li class="span3">
 548                               <div class="thumbnail">
 549                                 <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new"><img src="img/refs/xscope.png" alt=""></a>
 550                                 <div class="caption">
 551                                   <h3>xScope</h3>
 552                                   <p>Measure and inspect on-screen layouts.</p>
 553                                   <div class="btn-toolbar">
 554                                                 <div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
 555                                         </div>
 556                                 </div>
 557                               </div>
 558                             </li>
 559
 560                             <li class="span3">
 561                               <div class="thumbnail">
 562                                 <a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/bootswatch-20" target="new"><img src="img/refs/htmlandcss.png" alt=""></a>
 563                                 <div class="caption">
 564                                   <h3>HTML &amp; CSS</h3>
 565                                   <p>Jon Duckett</p>
 566                                   <div class="btn-toolbar">
 567                                                 <div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/bootswatch-20" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
 568                                         </div>
 569                                 </div>
 570                               </div>
 571                             </li>
 572
 573
 574                             <li class="span3">
 575                               <div class="thumbnail">
 576                                 <a href="http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447/bootswatch-20" target="new"><img src="img/refs/cssmissingmanual.png" alt=""></a>
 577                                 <div class="caption">
 578                                   <h3>CSS: The Missing Manual</h3>
 579                                   <p>David Sawyer McFarland</p>
 580                                   <div class="btn-toolbar">
 581                                                 <div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447/bootswatch-20" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
 582                                         </div>
 583                                 </div>
 584                               </div>
 585                             </li>
 586
 587
 588                             <li class="span3">
 589                               <div class="thumbnail">
 590                                 <a href="http://www.amazon.com/JavaScript-jQuery-The-Missing-Manual/dp/1449399029/bootswatch-20" target="new"><img src="img/refs/javascriptandjquery.png" alt=""></a>
 591                                 <div class="caption">
 592                                   <h3>JavaScript &amp; jQuery</h3>
 593                                   <p>David Sawyer McFarland</p>
 594                                   <div class="btn-toolbar">
 595                                                 <div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/JavaScript-jQuery-The-Missing-Manual/dp/1449399029/bootswatch-20" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
 596                                         </div>
 597                                 </div>
 598                               </div>
 599                             </li>
 600
 601
 602                             <li class="span3">
 603                               <div class="thumbnail">
 604                                 <a href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/bootswatch-20" target="new"><img src="img/refs/dontmakemethink.png" alt=""></a>
 605                                 <div class="caption">
 606                                   <h3>Don't Make Me Think</h3>
 607                                   <p>Steve Krug</p>
 608                                   <div class="btn-toolbar">
 609                                                 <div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/bootswatch-20" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
 610                                         </div>
 611                                 </div>
 612                               </div>
 613                             </li>
 614
 615
 616                         </ul>
 617                   </div>
 618           </div> <!-- end row-->
 619
 620
 621       <hr>
 622
 623       <footer>
 624                 <p class="pull-right"><a href="#">Back to top</a></p>
 625                 Made by <a target="_blank" href="http://thomaspark.me" onclick="pageTracker._link(this.href); return false;">Thomas Park</a>. Submissions and feedback welcome at <a href="mailto:thomas@thomaspark.me">thomas@thomaspark.me</a>.<br/>
 626                 Code licensed under the <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>.<br/>
 627                 Based on <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a>. Hosted on <a target="_blank" href="http://pages.github.com/">GitHub</a>. Icons from <a target="_blank" href="http://glyphicons.com/">Glyphicons</a>. Web fonts from <a target="_blank" href="http://www.google.com/webfonts">Google</a>.</p>
 628       </footer>
 629
 630     </div> <!-- /container -->
 631
 632     <!-- Le javascript
 633     ================================================== -->
 634     <!-- Placed at the end of the document so the pages load faster -->
 635     <script src="js/jquery.js"></script>
 636     <script src="js/bootstrap-dropdown.js"></script>
 637         <script src="js/bootstrap-tooltip.js"></script>
 638     <script src="js/bootstrap-collapse.js"></script>
 639     <script src="js/bootswatch.js"></script>
 640         <script>!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");</script>
 641
 642
 643   </body>
 644 </html>