Scott Nixon avatar Scott Nixon committed 007b6e4

Two options for the countdown element. Draft version.

Comments (0)

Files changed (2)

design/css/mellow-main.css

 }
 .food-info button {
     background-color: #DB6C0f;
+    color: white;
 }
 .ordercount {
     padding: 5px 5px;
-    background-color: red;
+    background-color: #DB6C0F;
 }
-
+.ordercountdownalt li {
+    display: inline;
+    float: right;
+    padding: 5px 5px 5px 5px;
+}
 .ordercountdown li {
     display:inline;
     float: right;
     padding: 5px 5px 5px 5px;
+    color: #fff;
+    background-color: #254E7B;
+    -moz-box-shadow: inset 0 1px 5px #152D47;
+    -webkit-box-shadow: inset 0 1px 5px #152D47;
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    border-top-style: solid;
+    border-bottom-style: solid;
+    border-left-style: solid;
+    border-top-color: #0D1C2D;
+    border-right-color: #0D1C2D;
+    border-bottom-color: #0D1C2D;
+    border-left-color: #0D1C2D;
 }

design/returning_person.html

-<html>
-    <head>
+<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">
     <blockquote>Mellow Meals will feed you 5 healthy meals, for less than the average cost of eating-out once; and we deliver.</blockquote>
   </div>    <!-- end Content  -->
 
-  <div class="yui3-u-1-2">
+<!-- OPTION 1 --->
+  <div class="yui3-u-5-8">
     <h1>Hot Items</h1>
   </div>
 
+  <div class="yui3-u-3-8" style="height: 52px; background-color: #bc9c2d; padding: 10px 10px; width: 340px; margin-bottom: 1em; height: 52px; ">
 
-<div class="yui3-u-1-2" style="height: 75px;">
-  <div style="float: right;">
-    <ul class="ordercountdown" style="margin: 0 auto; width: 184px;">
-	<li><span class="ordercount">25</span> Orders left for This Week</li>
+    <ul class="ordercountdown" style="margin-top: 0;">
+      <li style="border-radius: 5px 5px;      -moz-box-shadow: inset 0 1px 5px #152D47; -webkit-box-shadow: inset 0 1px 5px #152D47;  border: 1px solid #0D1C2D;  text-align: center; margin: 0 auto; width: 300px;"><span class="ordercount" style="border-radius: 4px;">25</span> Orders left for This Week</li>
     </ul>
 
-    <ul class="ordercountdown" style="clear: right;">
-      <li>Time remaining</li>      
+    <ul class="ordercountdownalt" style="clear: right; margin: 0 auto; width: 318px; ">
+      <li style=" border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; ">Time remaining</li>
+      <li style="  ">12 secs</li>      
       <li>21 mins</li>
       <li>12 hrs</li>
-      <li>02 days</li>    
+      <li style="border-top-left-radius: 5px 5px;   border-bottom-left-radius: 5px 5px;">02 days</li>    
     </ul>
+
+
+ </div>
+<!-- END OPTION 1 --->
+
+<!-- OPTION 2 --->
+  <div class="yui3-u-5-8">
+    <h1>Hot Items</h1>
   </div>
-</div>
 
+  <div class="yui3-u-3-8" style="height: 52px; background-color: #bc9c2d; padding: 10px 10px; width: 340px; margin-bottom: 1em; height: 56px; ">
+
+    <ul class="ordercountdown" style="margin: 0 auto; width: 186px;    -moz-box-shadow: inset 0 1px 10px #CCC;  -moz-border-radius: 6px 6px 0 0; ">
+	<li style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px;     -moz-box-shadow: inset 0 1px 5px #152D47; -webkit-box-shadow: inset 0 1px 5px #152D47;  border: 1px solid #0D1C2D;"><span class="ordercount" style="border-radius: 5px;">25</span> Orders left for This Week</li>
+      </ul>
+
+    <ul class="ordercountdown" style="clear: right; margin: 0 auto; width: 318px; ">
+      <li style=" border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; ">Time remaining</li>
+      <li style="  ">12 secs</li>      
+      <li>21 mins</li>
+      <li>12 hrs</li>
+      <li style="border-top-left-radius: 5px 5px;   border-bottom-left-radius: 5px 5px;">02 days</li>    
+    </ul>
+
+
+ </div>
+<!-- END OPTION 2 --->
 
     <!-- more-information -->
 
-      <div class="yui3-u-2-3">
+      <div class="yui3-u-5-8">
 	<img width="550" height="400" src="images/corn-cowder.jpg">
       </div>
       <div class="yui3-u-1-3 food-info">
 	</ul>
       </div>
 
-      <div class="yui3-u-1-2">
+      <div class="yui3-u-3-8">
 	<h1>Smokey Black Bean Enchiladas</h1>
 	<img width="350" height="250" src="images/smokey-beans.jpg">
       </div>
     </footer>
 
 </div>
-</body>    
+    
+</body>
 </html>
-
-
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.