Source

mealrevolution / design / new_person.html

<html>
    <head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css">
    <!--  <link href="http://happyherb-css.s3.amazonaws.com/960test/960.css" rel="stylesheet" type="text/css">
<link href="http://happyherb-css.s3.amazonaws.com/960test/reset.css" rel="stylesheet" type="text/css">
<link href="http://happyherb-css.s3.amazonaws.com/960test/text.css" rel="stylesheet" type="text/css">-->
        <link href="http://fonts.googleapis.com/css?family=Pacifico:regular" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sd/slidedeck.skin.css" type="text/css" media="screen">
<link rel="stylesheet" href="sd/skin.css" type="text/css" media="screen">

<style>
body {
    margin: auto; /* center in viewport */
    width: 960px;
    padding: 0 10px;
}
header {
    margin-bottom: 2em;
}
h1 {
    color: #7EA107;
}
#mellow_head {
    position: relative;
    top: -2.1em;
}
#mellow_head, #mellow_head a, #mellow_head a:hover, #mellow_head a:active {
    width: 350px;
    font-family: 'Pacifico', serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    background: #fff;
    padding: 0px 0px;
    color: black;
    text-decoration: none;
}
#menu {
    background: #fff;
    float: left;
    list-style: none;
    margin: 0 0 3em 0;
    padding: 0;
    width: 100%;
}

#menu li {
    float: left;
    display: inline;
    font: 16px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

}
#menu a.highlight {
    background: #fff;
    color: #000;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:normal;
 }
#menu a:hover.highlight {
    background: #2580a2;
    color: #fff;
    padding-bottom: 8px;
    }

footer {
    margin: 2em auto 0 auto;
    width: 760px;
    color: blue;
}
footer li {
    display: inline;
}
</style>

<script type="text/javascript" src="sd/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="sd/slidedeck.jquery.lite.js"></script>
    </head>
<body>
<div class="yui3-g">
  <header class="yui3-u-1">
    <ul id="menu">
      <li id="mellow_head"><a href="/" target="_self">mellow meals</a></li> 
      <li><a class="highlight" href="#" target="_self">menu</a></li>
      <li><a class="highlight" href="#" target="_self">what we do</a></li>
      <li><a class="highlight" href="#" target="_self">faq</a></li>
      <li><a class="highlight" href="#" target="_self">about us</a></li>
    </ul>
  </header>

 
    
  <div class="yui3-u-1"> <!-- begin Content -->
    <!-- Value Propostion box -->
    <div class="skin-literally">  
      <dl class="slidedeck">
	<dt>Mellow Meals</dt>
	<dd>
	  <h1>Mellow Meals will feed you 5 healthy meals, for less than the average cost of eating-out once; and we deliver. We are your healthy personal chef in NYC!</h1>
	</dd>
	<dt>Slide 2</dt>
	<dd>Slide Content</dd>
	<dt>Slide 3</dt>
	<dd>Slide Content</dd>
      </dl>
    </div>
    <script type="text/javascript">
      // The most basic implementation using the default options
      $('.slidedeck').slidedeck();
    </script>
    <!-- Help support SlideDeck! Place this noscript tag on your page when you deploy a SlideDeck to provide a link back! -->
    <noscript>
      <p>Powered By <a href="<a href="http://www.slidedeck.com/" target="_blank">http://www.slidedeck.com</a>" title="Visit SlideDeck.com">SlideDeck jQuery Slider</a></p>
    </noscript>

  </div>    <!--Content grid12 -->

    <!-- more-information -->

      <div class="yui3-u-1-2">
	<h1>FAQ</h1>
	<ul>
	  <li>Eat only the best food for your health</li>
	  <li>Convenient delivery to fit your needs</li>
	  <li>Nutrition information for the detail oriented user</li>
	  <li>Track the your awesome progress towards eating healthier</li>
	</ul>
      </div>
      <div class="yui3-u-1-2">
	<h1>Why you should order now?</h1>
	<ul>
	  <li>Each we there is a limit on the number of orders that are available</li>
	  <li>Only the most nutrisoual designed foods are prepared for our users</li>
	  <li>We prepare and deliver the food using the latest technics</li>
	  <li>Group ordering helps keep the costs down</li>
	  <li>Register today for exclusive access to our meals.</li>
	</ul>
      </div>

      <div class="yui3-u-1-2">
	<img width="350" height="250" src="#">
      </div>

      <div class="yui3-u-1-2">
	<img width="350" height="250" src="#">
      </div>

      <div class="yui3-u-1-2">
      </div>

      <div class="yui3-u-1-2">
      </div>
    <!-- end more-information -->

    <footer class="yui3-u-1">
      <ul>
      <li>Mellow Meals Copyright 2011</li> | <li>Follow us on Twitter</li> | <li>Join us on Facebook</li> | <li>Contact Us</li>
      </ul>
    </footer>

</div>
</body>    
</html>