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> 
   
  <!-- Load base bootstrap CSS -->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" type="text/css" />
    
  <!-- Load Open Sans and Source Sans Pro from Google -->
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900|Open+Sans:400,700' rel='stylesheet' type='text/css'>
​
  <meta charset=utf-8 />
  
  <title>Fruity Cone: The Desktop Version</title>
  
    <style>
    /* Overall styles and settings */
    
     body {
      font-family: "Open Sans", Helvetica, Arial, sans-serif;
      background-color: white;
      color: black;
      margin: 0px;
      padding: 0px;
      margin-bottom: 150px; /* breathing room at the bottom */
      font-size: 16px;
      line-height: 22px;
      background-image: url("http://s13.postimg.org/nsv5dozfb/beautiful_fruits_wallpapers_1200x900.jpg");
      background-repeat: no-repeat;
      background-position: bottom right;
    }
    
    /* Overall hyperlink styles */
    /* (These styles are overridden in the navigation bar, which 
        also uses <a> tags but which need to look different.) */
    
    a {
      color: #ffaf1a;
      font-weight: bold;
      text-decoration: underline;
    }
    
    h1, h2, h3, h4 {
      margin-top: 0px;
      margin-bottom: 0px;
      line-height: 1;
    }
    
    /* Page header */
    
    .header {
      text-align: center;
      background-color: white;
      color: #fcbe2d;
      padding-top: 20px;
      padding-bottom: 15px;
      border-bottom: 5px solid #f9db2c;
    }
    
    h1 {
      font-family: "Source Sans Pro", "Open Sans", sans-serif;
      font-size: 70px;
      line-height: 70px;
      font-weight: 900;
      margin-bottom: 15px;
      text-shadow: -2px 2px 1px rgba(237, 129, 3, 1);
    }
    
    h2 {
      font-family: "Source Sans Pro", "Open Sans", sans-serif;
      font-size: 36px;
      line-height: 36px;
      font-weight: 300;
      color: #93b121;
      text-transform: uppercase;
      text-shadow: -1px 1px 1px rgba(10, 42, 17, 1);
    }
​
    /* Navigation Bar */
   
    .nav {
      padding-top: 6px;
      font-size: 15px;
      font-weight: bold;
    }
       
    /* Styles for the individual navigation buttons */
    .nav-pills li a {
        color: #93b121;
      text-decoration: none;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-right: 30px;
    }
    
    /* Styles for the navigation buttons when the mouse is over them */
   .nav li a:hover, .nav li a:focus {
      color: #0c130b;
      background-color: white;
    }
​
    /* Style for the "active" navigation button (e.g., the page
       you're currently on) */
    .nav-pills .active a,
    .nav-pills .active a:hover,
    .nav-pills .active a:focus {
      color: #ffaf1a;
      background-color: #ffffff;
      border: 3px solid #ffaf1a;
    }    
    
      /* Styles for body area */
​
      /* floaty box */
      .contentSection {
        padding: 20px;
        display: block;
        background-color: rgba(255,255,255,0.75);
        /* Box shadow generator: http://css3gen.com/box-shadow/ */
        -webkit-box-shadow: -1px 2px 10px rgba(0, 0, 0, 0.75);
        -moz-box-shadow:    -1px 2px 10px rgba(0, 0, 0, 0.75);
        box-shadow:         -1px 2px 10px rgba(0, 0, 0, 0.75);
      }
            
      h3 {
        font-family: "Source Sans Pro", "Open Sans", sans-serif;
        font-size: 30px;
        font-weight: 300;
        text-transform: uppercase;
        margin-bottom: 20px;
      }
      
      h4 {
        color: #93b121;
        font-weight: bold;
        font-size: 16px;
        line-height: 22px;
      }
​
      /*  styles for today's menu */
      .menuContainer {
        display: table;
      }
      .todaysmenu {
        display: table-row;
      }
      .menuColumn {
        display: table-cell;
       }
      
      .menuColumn ul {
        list-style-type: none;
        padding-left:0px;
        margin-left:0px;
      }
      
      .leftMenuColumn {
        padding-right: 40px;
      }
      
      .location {
        padding-bottom: 18px;
      }
    
      .philosophy {
        text-align: center;
        margin-top: 20px;
      }
    
    /* END our styles */
  </style>
​
</head>
  
<body>
  
  <!-- Header -->
  <div class="header">
    <div class="container">
      <h1>Fruity Cone</h1>
      <h2>Fabulously Fresh Fruit in a Cone</h2>
    </div> <!-- end .container -->
  </div> <!-- end .header -->  
  
  <div class="container">
    
    <!-- Navigation -->
    <ul class="nav nav-pills">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About the Farms</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Work For Us</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
    </ul>
      
    <!-- Start two-column layout -->
    <div class="row">  
     
      <!-- First column: Today's Menu -->
      <div class="span8">
        <div class="contentSection"><!-- floaty box -->
          
          <h3>Today's Menu</h3>
          <div class="menuContainer"><!-- put menu in 2 column table -->
            <div class="todaysmenu">
              <div class="menuColumn leftMenuColumn"><!-- first column -->
                <h4>From Johnson's Backyard Garden</h4>
                <ul>
                  <li>Watermelon</li>
                  <li>Cantelope</li>
                  <li>Grapefruit</li>
                  <li>Oranges</li>
                </ul>
    
                <h4>From Pontious Farm</h4>
                <ul>
                  <li>Blackberries</li>
                  <li>Raspberries</li>
                  <li>Strawberries</li>
                  <li>Grapes</li>
                </ul>
              </div><!-- end menuColumn (first column) -->
              
              <div class="menuColumn"><!-- second column -->
                <h4>From Bee Creek Farm</h4>
                <ul>
                  <li>Honey</li>
                  <li>Orange Marmalade</li>
                </ul>
​
                <h4>From Little Town Bakery</h4>
                <ul>
                  <li>Waffle Cones</li>
                  <li>Gluten Free Waffle Cones</li>
                </ul>
​
                <h4>From Hometown Chocolatier</h4>
                <ul>
                  <li>Chocolate &amp; Almond Hot Sauce</li>
                  <li>White Chocolate Sauce</li>
                </ul>
               </div><!-- end menuColumn (second column)-->
       
            </div><!-- end todaysmenu -->
          </div><!-- end menuContainer -->
        </div><!-- end contentSection -->
      </div><!-- end .span8 -->
        
      <!-- Second Column: Location -->
      <div class="span4">
        <div class="contentSection">
          <div class="location"><!-- floaty box -->
          
            <h3>Location &amp; Hours</h3>
            <p><a href="">835 South Fifth Street</a><br>
              Austin, TX 78704<br>
              (512) YUM-CONE</p>
​
            <p><a href="">1911 Congress Ave</a><br>
              Austin, TX 78701<br>
             (512) FRUIT-CO</p>
    
            <p>Open 7 Days a Week<br>
              11am - 8pm</p>
          </div><!-- end location -->
        </div><!-- end contentSection -->
      </div><!-- end .span4 -->
      
    </div><!-- end .row -->
        
    <div class="row"><!-- begin bottom row: philosophy -->
      <div class="span12">
        <div class="contentSection philosophy"><!-- floaty box -->
        
          <h3>Our Philosophy: Farm Fresh Fruit is Fun and Fabulous</h3>
        
          <p>Fruity Cone food trailers bring you the freshest, juiciest and most flavorful fruit available.<br>
          How? Because we work directly with local farms to secure in-season deliciousness just for you. <br>
          Our menu varies daily based on availability in order to provide you with only the freshest ingredients.<br>
          See fruit in a new way any day--breakfast, lunch, dinner and desert!</p>
      
          <p><a href="">Learn more about us</a> or <a href="">Come work with us</a></p>
        </div><!-- end contentSection: philosophy -->
      </div><!-- end .span12 -->
    </div><!-- end bottom row -->
    
  </div><!-- end .container -->
  
  
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
kathybatemanpro
0viewers