Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <title>Demo 10 | Font sizing</title>
  <meta name="description" content="Demo 10: font sizing">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href='https://fonts.googleapis.com/css?family=Quattrocento|Oswald' rel='stylesheet' type='text/css'>
  <style>
    html {font-size: 1em;}
​
    body {
      background-color: white;
      font-weight: 400;
      line-height: 1.45;
      color: #333;
    }
​
    p {margin-bottom: 1.3em;}
​
    h1, h2, h3, h4 {
      margin: 1.414em 0 0.5em;
      font-weight: inherit;
      line-height: 1.2;
    }
​
    h1 {font-size: 2.441em; }
​
    h2 {font-size: 1.953em;}
​
    h3 {font-size: 1.563em;}
​
    h4 {font-size: 1.25em;}
​
    small, .font_small {font-size: 0.8em;}
​
    html, body {
      height: 100%;
      margin: 0;
    }
​
    body {
      font-family: 'Quattrocento', serif;
      display: flex;
      flex-direction: column;
      background: beige; 
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Oswald', sans-serif;
    }
​
    #wrapper {
      display: flex;
      flex: 2 1 auto;
      flex-direction: row;
    }
​
    #sidebar {
      padding: 1rem;
      flex: 1 1 auto;
      background: lightgreen;
      border-right: 1px solid gray;
      max-width: 30rem;
      overflow: auto;
    }
    
    #sidebar :first-child {
      margin-top: 0;
    }
​
    #map {
      position: relative;
      text-align: center;
      flex: 3.14 1 auto;
      background: lightcyan;
    }
​
    #header {
      padding: 1rem;
      flex: 0 0 auto;
      background: lightgray;        
      border-bottom: 1px solid gray;
    }
​
    #footer {
      border-top: 1px solid gray;
      padding: 1rem;
      flex: 0 0 auto;
      background: lightgray;
    }
​
    .control {
      background: lightcoral;
      position: absolute;
      padding: 1rem;
    }
​
    .top {
      top: 10px;
    }
​
    .left {
      left: 10px;
    }
​
    .bottom {
      bottom: 10px;
    }
​
    .right {
      right: 10px;
    }
​
    .no-margin {
      margin: 0;
    }
    
    @media screen and (max-width: 1024px) { 
      #wrapper {
        flex-direction: column;
      }
​
      #map {
        flex: 1 1 auto;
        order: 1;
        margin: 0;
        border: none;
        min-height: 50vh;
      }
​
      #sidebar {
        max-width: 100%;
        order: 2;
      }
    }
  </style>
</head>
<body>
  <div id="header">
    <h1 class="no-margin">Alternate Fuel Stations</h1>
  </div>
  <div id="wrapper">
    <div id="sidebar">
      <h2 class="no-margin">What?</h2>
      <p>This dataset represents the locations of non-gasoline alternative fueling stations which provide biodiesel, CNG, electric, ethanol, hydrogen, LNG, and/or propane.</p>
​
      <h2>Why?</h2>
      <p>More than 250 million vehicles consume millions of barrels of petroleum every day in the United States. On-road passenger travel alone accounts for more than 2.5 trillion vehicle miles traveled each year. Vehicle fleet managers and drivers, corporate decision makers, and public transportation planners can use this data to develop strategies to conserve fuel.</p>
​
      <h2>How?</h2>
      <p>Through a nationwide network of local coalitions, Clean Cities (<a href="https://cleancities.energy.gov/">https://cleancities.energy.gov/</a>) provides project assistance to help stakeholders in the public and private sectors deploy alternative and renewable fuels, idle-reduction measures, fuel economy improvements, and emerging transportation technologies. Department of Energy collects this data as part of the Projects undertaken by Clean Cities coalitions and stakeholders to ensure customers access to clean alternative energy. Clean Cities is the deployment arm of the U.S. Department of Energy's (DOE) Vehicle Technologies Office.</p>
​
      <p>This data can be found at the Department of Energy Alternative Fuels Data Center Web Feature Service: <a href="http://www.afdc.energy.gov/locator/stations/">http://www.afdc.energy.gov/locator/stations/.</a></p>
    </div>
    <div id="map">
      Map
      <div class="control top left">Top Left</div>
      <div class="control bottom left">Bottom Left</div>
      <div class="control top right">Top Right</div>
      <div class="control bottom right">Bottom Right</div>
    </div>
  </div>
  <div id="footer">
    <small>Data from the <a href="https://hifld-dhs-gii.opendata.arcgis.com/">Homeland Infrastructure Foundation - Level Data</a> Open Data Site.</small>
  </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
patrickarltpro
0viewers