Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

refining the structure with some classes

  • Loading branch information...
commit bc4b87e6e315c1cc5388ad46ee488f50e888c2ea 1 parent 996e3f4
@briandoll authored
Showing with 45 additions and 34 deletions.
  1. +11 −1 css/all.css
  2. +34 −33 index.html
View
12 css/all.css
@@ -3,6 +3,13 @@
h1 { font-size: 24pt; color: #000; }
h3 { color: #000; }
+a { color: #000; text-decoration: underline;}
+a:visited { color: #000;}
+
+.transparentSelect {
+ font-family: "great-primer-1","great-primer-2", serif;
+ background-image: url('../images/white.birch.jpg');
+}
.base {
background-image: url('../images/white.birch.jpg');
@@ -12,4 +19,7 @@ h3 { color: #000; }
color: #333;
}
-.fullWidth { clear:both; width:100%; }
+.fullWidth { clear:both; width:100%; }
+.smallText { font-size: 14px; }
+.centered { text-align: center; }
+.medBreathingRoom { padding-top:10px; padding-bottom:10px;}
View
67 index.html
@@ -14,15 +14,15 @@
</head>
<body class="base">
<div class="page oldSchool">
- <div class="head">
+ <div class="head centered">
<h1>I eat Paleo, but how much protein do I need every day?</h1>
</div>
<div class="body">
- <div class="fullWidth">
+ <div class="fullWidth medBreathingRoom">
<div>First, tell us a little about yourself:</div>
<div id="weight">My lean body mass is <input type="text" id="bodyweight" value="100"> pounds.</div>
<div id="percentage">I'm aiming to get
- <select id="protein_per_pound_of_bodyweight" class="">
+ <select id="protein_per_pound_of_bodyweight" class="transparentSelect">
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option value="1.0" selected>1.0</option>
@@ -31,19 +31,19 @@
</select> grams of protein per pound of lean body mass.
</div>
<div id="goal">Great! You'll need <input type="text" id="protein_goal" value="100"> grams of protein.</div>
+ </div>
+ <div class="fullWidth medBreathingRoom">
<p>BUT HOW MUCH FOOD IS THAT??!?!?! Let's find out!</p>
<div>Let's add up a typical day's protein to see how much you'll need:</div>
- </div> <!-- .main -->
-
<div class="leftCol">
<div id="food">
<a href="javascript:void(false)" class="button" id="add"><span class="plus icon"></span>Add Protein Source</a>
<ul>
<li>
<input type="text" class="qty" value="">
- <select class="protein_source">
+ <select class="transparentSelect">
<option value="6">Egg(s)</option>
<option value="3">slices of Bacon</option>
<option value="7">oz. of Beef</option>
@@ -67,39 +67,40 @@
</div>
<div id="congrats"></div>
</div>
+ </div>
- <div class="fullWidth">
- <h3>FAQ</h3>
- <strong>What about protein powder, dairy, nuts, veggies?</strong></br>
- In the words of <a href="http://robbwolf.com/"> the man himself, Robb Wolf</a>:<br/>
- Your protein needs to have the following criteria:
- <ol>
- <li>It needs a face.</li>
- <li>It needs a soul.</li>
- <li>You need to kill it, and bring its essence into your being.</li>
- </ol>
- That is all.
- </div>
+ <div class="fullWidth medBreathingRoom">
+ <h3>FAQ</h3>
+ <strong>What about protein powder, dairy, nuts, veggies?</strong></br>
+ In the words of <a href="http://robbwolf.com/"> the man himself, Robb Wolf</a>:<br/>
+ Your protein needs to have the following criteria:
+ <ol>
+ <li>It needs a face.</li>
+ <li>It needs a soul.</li>
+ <li>You need to kill it, and bring its essence into your being.</li>
+ </ol>
+ That is all.
+ </div>
+
+ </div>
- </div><!-- .body -->
-
- <div class="footer">an <a href="http://emphaticsolutions.com">emphatic solution</a> by Brian Doll</div>
+ <div class="footer smallText centered medBreathingRoom">an <a href="http://emphaticsolutions.com">emphatic solution</a> by Brian Doll</div>
- </div><!-- .page -->
+ </div>
- <script src="protein.js"></script>
- <script type="text/javascript">
+ <script src="protein.js"></script>
+ <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-4937376-11']);
- _gaq.push(['_trackPageview']);
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-4937376-11']);
+ _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
- </script>
+ </script>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.