browse.html

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>OGP toolbox</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700" rel="stylesheet">  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/ogp-style.css">

  <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!-- COMMON HEADER -->
<!-- Main fixed header -->

<div id="main">
  <div class="main-container">   
    <div class="fixed-header">
      <header>
        <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">OGPtoolbox</a><p class="navbar-text">tools and use cases for open government</p>
            </div>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#" data-toggle="modal" data-target="#connection">Log In</a></li>
              <button type="button" class="btn btn-default btn-action">Add new</button>
            </ul>
          </div>
        </nav>

        <!-- Navigation bar -->
        <nav class="navbar navbar-inverse fullscreen">
          <div class="container-fluid">
            <!-- Toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="platform.html">Use cases</a></li>
                <li><a href="software.html">Tools</a></li>
                <li><a href="organization.html">Collections</a></li>
                <li><a href="#">Help</a></li>

              </ul>
              <form class="navbar-form navbar-right">
                <div class="form-group search-bar">
                  <span class="glyphicon glyphicon-search" aria-hidden="true"></span><input type="text" class="form-control" placeholder="Search for a tool, example or organization">
                </div>
              </form>

            </div>
          </div>
        </nav>
      </header>
    </div>
    
    <div class="browse-tag">
      <div class="row">
        <div class="container-fluid">
          <div class="alert alert-info" role="alert">The tag <strong>Partage</strong> is not available in your language
          <div class="pull-right">
          <button type="button" class="btn btn-default btn-xs btn-action-negative" data-toggle="modal" data-target="#edit-content">Translate</button></div>
          </div>

          <img class="tag" src="img/bubbles2.png"></img>
          <div class="row filters">
            <div class="col-md-12 text-center">
              Showing results suited for
              <!-- <div class="dropdown dropdown-filter dropup"> -->
              <a class="btn btn-default dropdown-toggle" href="#carousel-example-generic" role="button" data-slide-to="2">
                all organizations
              </a>
                    <!-- <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                      <li><a href="#">all organizations</a></li>
                      <li><a href="#">Local government</a></li>
                      <li><a href="#">Regional government</a></li>
                      <li><a href="#">National government</a></li>
                      <li><a href="#">Political organization</a></li>
                      <li><a href="#">Political movement</a></li>
                      <li><a href="#">Non-profit organization</a></li>
                      <li><a href="#">For-profit organization</a></li>

                    </ul> -->
                    <!-- </div> -->
                    and available in 
                    <!-- <div class="dropdown dropdown-filter dropup"> -->
                    <a class="btn btn-default dropdown-toggle" href="#carousel-example-generic" role="button" data-slide-to="3">
                      English
                    </a>
                    <!-- ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                      <li><a href="#">Français</a></li>
                      <li><a href="#">Espanol</a></li>
                      <li><a href="#">Deutsch</a></li>
                      <li><a href="#">Italiano</a></li>

                    </ul> -->
                    <!-- </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="scroll-content">


            <!-- RESULTS -->
            <div class="row browse">
              <div class="container-fluid">

                <div class="row fixed"> 
                  <div class="col-xs-12">
                    <ul class="nav nav-pills nav-justified" role="tablist">
                      <li role="presentation" class="active"><a href="#">Usages <span class="badge">342</span></a></li>
                      <li role="presentation"><a href="#">Tools <span class="badge">42</span></a></li>
                      <li role="presentation"><a href="#">Collections <span class="badge">342</span></a></li>
                      <li role="presentation"><a href="#">Organizations <span class="badge">42</span></a></li>
                    </ul>
                  </div>
                </div>

                <div class="row list p90">

                  <div class="col-xs-12 text-center">
                      <img class="loader" src="img/loader.gif">
                    </div>

                  <div class="col-xs-12">
                    <div class="thumbnail example">
                      <div class="visual"><img src="img/screen1.png" alt="screen"></div>
                      <div class="caption">
                       <h4>OpenSpending<small>Software</small></h4>
                       <div class="example-author"><img src="img/whitehouse.png" alt="screen">The White House</div> 
                       <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending data, a community of contributors and users exposing cases, and a set of open resources and tools providing technical, fiscal, and political understanding necessary to work with financial data.</p>
                     </div> 
                     <div class="tags">
                       <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
                     </div>
                   </div>
                 </div>

                 <div class="col-xs-12">
                  <div class="thumbnail example">
                    <div class="visual"><img src="img/screen2.png" alt="screen"></div>
                    <div class="caption">
                     <h4>OpenSpending<small>Software</small></h4>
                     <div class="example-author"><img src="img/whitehouse.png" alt="screen">The White House</div> 
                     <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending data, a community of contributors and users exposing cases, and a set of open resources and tools providing technical, fiscal, and political understanding necessary to work with financial data.</p>
                   </div> 
                   <div class="tags">
                     <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
                   </div>
                 </div>
               </div>

               <div class="col-xs-12">
                <div class="thumbnail example">
                  <div class="visual"><img src="img/screen3.png" alt="screen"></div>
                  <div class="caption">
                   <h4>OpenSpending<small>Software</small></h4>
                   <div class="example-author"><img src="img/whitehouse.png" alt="screen">The White House</div> 
                   <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending </p>
                 </div> 
                 <div class="tags">
                   <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
                 </div>
               </div>
             </div>

             <div class="col-xs-12">
              <div class="thumbnail example">
                <div class="visual"><img src="img/screen4.png" alt="screen"></div>
                <div class="caption">
                 <h4>OpenSpending<small>Software</small></h4>
                 <div class="example-author"><img src="img/whitehouse.png" alt="screen">The White House</div> 
                 <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending data, a community of contributors and users exposing cases, and a set of open resources and tools providing technical, fiscal, and political understanding necessary to work with financial data.</p>
               </div> 
               <div class="tags">
                 <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
               </div>
             </div>
           </div>

           <div class="col-xs-12">
            <div class="thumbnail example">
              <div class="visual"><img src="img/screen1.png" alt="screen"></div>
              <div class="caption">
               <h4>OpenSpending<small>Software</small></h4>
               <div class="example-author"><img src="img/whitehouse.png" alt="screen">The White House</div> 
               <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending data, a community of contributors and users exposing cases, and a set of open resources and tools providing technical, fiscal, and political understanding necessary to work with financial data.</p>
             </div> 
             <div class="tags">
               <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
             </div>
           </div>
         </div>

         <div class="col-xs-12">
          <div class="thumbnail example">
            <div class="visual"><img src="img/screen2.png" alt="screen"></div>
            <div class="caption">
             <h4>OpenSpending<small>Software</small></h4>
             <div class="example-author"><img src="img/hackpad.png" alt="screen">The White House</div> 
             <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending data, a community of contributors and users exposing cases, and a set of open resources and tools providing technical, fiscal, and political understanding necessary to work with financial data.</p>
           </div> 
           <div class="tags">
             <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
           </div>
         </div>
       </div>

       <div class="col-xs-12">
        <div class="thumbnail example">
          <div class="visual"><img src="img/screen3.png" alt="screen"></div>
          <div class="caption">
           <h4>OpenSpending<small>Software</small></h4>
           <div class="example-author"><img src="img/whitehouse.png" alt="screen">The White House</div> 
           <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending </p>
         </div> 
         <div class="tags">
           <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
         </div>
       </div>
     </div>

     <div class="col-xs-12">
      <div class="thumbnail example">
        <div class="visual"><img src="img/screen4.png" alt="screen"></div>
        <div class="caption">
         <h4>OpenSpending<small>Software</small></h4>
         <div class="example-author"><img src="img/whitehouse.png" alt="screen">The White House</div> 
         <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending data, a community of contributors and users exposing cases, and a set of open resources and tools providing technical, fiscal, and political understanding necessary to work with financial data.</p>
       </div> 
       <div class="tags">
         <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
       </div>
     </div>
   </div>

   <div class="col-xs-12">
    <div class="thumbnail example">
      <div class="visual"><img src="img/screen1.png" alt="screen"></div>
      <div class="caption">
       <h4>OpenSpending<small>Software</small></h4>
       <div class="example-author"><img src="img/whitehouse.png" alt="screen">The White House</div> 
       <p>OpenSpending is a centralized platform on the topic of public financial information, including an global database of budgets and spending data, a community of contributors and users exposing cases, and a set of open resources and tools providing technical, fiscal, and political understanding necessary to work with financial data.</p>
     </div> 
     <div class="tags">
       <span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span><span class="label label-default label-tool">Default</span>
     </div>
   </div>
 </div>

 <div class="col-sm-12 text-center"><a class="show-more">Show all 398<span class="glyphicon glyphicon-menu-down"></span></a></div>
</div>
</div>
</div>
</div>

<div class="fixed-footer">
  © 2016 Open Government Partnership
</div>
</div>
</div>
</body>


<!-- /container -->        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

<script src="js/vendor/bootstrap.min.js"></script>

<script src="js/main.js">
<script src="js/main.js">
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
</script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>