Completed Section 1 page

Index.html

@@ -107,43 +107,43 @@
 		<div class="row">
 			<div class="col-sm-2 background-grid background-cover">
 				<a href="Cover.html">
-					<h4>Cover Page</h4>
+					<h6>Cover Page</h6>
 				</a>				
 			</div>
 			<div class="col-sm-5 background-grid background-sec-1">
 				<a href="Section1.html">
-					<h4>Section 1<br />Project Record</h4>
+					<h6>Section 1<br />Project Record</h6>
 				</a>
 			</div>
 			<div class="col-sm-2 background-grid background-sec-2">
 				<a href="Section2.html">
-					<h4 class="background-transparent">Section 2<br />Awards and Recognitions</h4>
+					<h6 class="background-transparent">Section 2<br />Awards and Recognitions</h6>
 				</a>
 			</div>
 			<div class="col-sm-3 background-grid background-sec-3">
 				<a href="Section3.html">
-					<h4 class="background-transparent">Section 3<br />Leadership</h4>
+					<h6 class="background-transparent">Section 3<br />Leadership</h6>
 				</a>
 			</div>
 			<!--New row-->
 			<div class="col-sm-3 background-grid background-sec-4">
 				<a href="Section4.html">
-					<h4 class="background-transparent">Section 4<br />Community Service</h4>
+					<h6 class="background-transparent">Section 4<br />Community Service</h6>
 				</a>
 			</div>
 			<div class="col-sm-2 background-grid background-sec-5">
 				<a href="Section5.html">
-					<h4 class="background-transparent">Section 5<br />Participation &amp; Non-4-H Experiences</h4>
+					<h6 class="background-transparent">Section 5<br />Participation &amp; Non-4-H Experiences</h6>
 				</a>
 			</div>
 			<div class="col-sm-4 background-grid background-sec-6">
 				<a href="Section6.html">
-					<h4 class="background-transparent">Section 6<br />My 4-H Story</h4>
+					<h6 class="background-transparent">Section 6<br />My 4-H Story</h6>
 				</a>
 			</div>
 			<div class="col-sm-3 background-grid background-sec-7">
 				<a href="Section7.html">
-					<h4 class="background-transparent">Section 7<br />Photographs and Clippings</h4>
+					<h6 class="background-transparent">Section 7<br />Photographs and Clippings</h6>
 				</a>
 			</div>
 		</div>

Section1.html

@@ -72,40 +72,40 @@
           <td colspan="3">Includes quantitative information pertaining to the materials and time required to complete the project. Financial Information and Market Summary sub-sections should be filled out if applicable to the project.</td>
         </tr>
         <tr>
-          <th>Knowledge and Skills Acquired</th>
+			<th><a href="#knowledgeandskills">Knowledge and Skills Acquired</a></th>
           <td>Lists things learned in project.</td>
           <td>Lists things learned in project and addresses each goal.</td>
           <td>Lists things learned in project and demonstrates how at least 2 goals were met, as well as addressing all goals.</td>
         </tr>
         <tr>
-          <th>Exhibition Summary</th>
+			<th><a href="#summary">Exhibition Summary</a></th>
           <td colspan="3">Lists exhibitions and placings from entire year.</td>
         </tr>
       </table>
+      <img src="img/Record Book.svg" class="img-responsive" alt="The components of a 4-H record book" />
       <p> Over half of your 4-H career is spent working on projects, and fittingly, over half of your record book is spent commemorating those projects.
-        Section 1 provides a framework for planning, completing, and analysing each of your 4-H projects.
+        Section 1 provides a framework for planning, completing, and analyzing each of your 4-H projects.
         How? Let's go through it step-by-step. </p>
-      <img src="img/Record Book.svg" class="float-left img-responsive center-sm" alt="The components of a 4-H record book" />
+      <div class="panel panel-warning">
-      <div class="panel panel-warning float-right max-width-300 center-sm">
         <div class="panel-heading">
           <h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3>
         </div>
         <div class="panel-body"> When completing a project record for a project carried over from another organization (i.e. a school art project or the Supreme Beef program), the documentation from that organization may fit the criteria for a 4-H project record, and many people choose to submit that documentation as their section 1.
-          This is acceptable, but the record book committee asks that you respect the judges' time by using the 4-H project record template, and not including extranneous information. </div>
+          This is acceptable, but the record book committee asks that you respect the judges' time by using the 4-H project record template, and not including extraneous information. </div>
       </div>
       <div class="clearfix"></div>
-      <h2> Overview </h2>
+      <h2><a id="overview"></a>Overview </h2>
       <p> Please just fill this box out.
         It's really not that hard, and I'd rather not waste the space (or the bandwidth) to explain in detail.
         If you really have questions, contact the Extension Office. </p>
-      <h2 onMouseOver="visibleLink('goals')" onMouseOut="invisibleLink('goals')"><a id="goals" style="display: none;"><span class="glyphicon glyphicon-link"></span></a> Goals</h2>
+      <h2><a id="goals"></a>Goals</h2>
       <blockquote> If you aim at nothing, you will hit it every time <small>Zig Ziglar</small> </blockquote>
-      <p>Goals provide direction for your 4-H project. If you've ever gone to any motivational leadership conference, you've heard about goals far more than you could ever care to, but the facts show the people with goals acomplish more. Great, you say, how do you make goals? I'm glad you asked.</p>
+      <p>Goals provide direction for your 4-H project. If you've ever gone to any motivational leadership conference, you've heard about goals far more than you could ever care to, but the facts show the people with goals accomplish more. Great, you say, how do you make goals? I'm glad you asked.</p>
       <p>A goal is an objective or thing desired to happen with SMARTY attributes:</p>
       <table class="table-responsive">
         <tr>
           <th> <a href="https://openclipart.org/detail/20596/arrow-in-the-gold"><img src="https://openclipart.org/download/20596/SnarkHunter-Arrow-in-the-gold.svg" class="max-width-100 max-height-100" /></a> </th>
-          <th> <h3>S</h3>
+          <th style="width: 20pt"> <h3>S</h3>
           </th>
           <td><h4>Specific</h4>
             <p>A goal should only cover one area</p>
@@ -135,12 +135,12 @@
             </dl>
             <p> Measurable usually involves numbers or binary (true/false) statements.
               Notice how this example added a way of measuring (average) and a quantitative target (over 250 points).
-              That is characteristic of measureable goals. </p>
+              That is characteristic of measurable goals. </p>
             <h5>What about <em style="font-style: normal;">To do better than last year</em>?</h5>
             <p> Invariably, record books are turned in each year with the goal "to do better than last year."
               Sometimes this is measurable, mostly it is not.
               It would be far better to identify exactly what you want to improve and find a way to measure that.
-              If you do resort to this goal, you <b>MUST</b> keep your record book maticulously organised so that the judges can find how you did last year. </p>
+              If you do resort to this goal, you <b>MUST</b> keep your record book meticulously organized so that the judges can find how you did last year. </p>
               <hr />
               </td>
         </tr>
@@ -149,7 +149,7 @@
           <th> <h3>A</h3>
           </th>
 			<td><h4>Achievable/Attainable</h4>
-              <p><b>You</b> must be directly in charge of acomplishing the goal: it cannot depend partially on parents, animals, acts of nature, etc.</p>
+              <p><b>You</b> must be directly in charge of accomplishing the goal: it cannot depend partially on parents, animals, acts of nature, etc.</p>
             
             <dl class="dl-horizontal">
               <dt>Bad Example</dt>
@@ -158,7 +158,7 @@
               <dd>To learn how protein percentage in feed affects rate of gain in hogs</dd>
             </dl>
             <p>
-            This does not mean that you cannot ask for help acomplishing your goals, but you do need to be in charge and take initiative for your goals.
+            This does not mean that you cannot ask for help accomplishing your goals, but you do need to be in charge and take initiative for your goals.
             No human being can directly control an animal's behavior or weight, another persons opinions, or the weather.
             Make sure that your goals do not try to alter these things.
             </p>
@@ -171,7 +171,7 @@
           </th>
           <td><h4>Realistic</h4>
            <p>
-            Your goals should be things you can actually acomplish with the resources (time, money) that you have.</p>
+            Your goals should be things you can actually accomplish with the resources (time, money) that you have.</p>
             <dl class="dl-horizontal">
               <dt>Bad Example</dt>
               <dd>To make 20 saddles in the month of January<br/>
@@ -202,7 +202,7 @@
             <p>
             Because record books are due annually, the defacto time-limit for all record book goals is the record book due date;
             so the time component isn't a deal-breaker.
-            It really shows initative and professionalism, though, if you set a deadline <em>before</em> record books are due.</p>
+            It really shows initiative and professionalism, though, if you set a deadline <em>before</em> record books are due.</p>
             <hr />
              </td>
         </tr>
@@ -219,7 +219,7 @@
               <dd>To volunteer for three leadership positions in the community this year (because I need to improve my public speaking and organizational skills)</dd>
             </dl>
             <p>
-            	You don't write the "why" in your record book, but if you have a good why, you will write better goals and be more motivated to acomplish those goals.
+            	You don't write the "why" in your record book, but if you have a good why, you will write better goals and be more motivated to accomplish those goals.
             </p>
             <hr /></td>
         </tr>
@@ -228,14 +228,14 @@
       <ol>
         <li>Get a blank sheet of paper and pencil (<strong>not</strong> your phone)</li>
         <li>Write the project name and why you enrolled in that project at the top of the page</li>
-        <li>Write four or five things you would like to acomplish in that project (not SMARTY yet, if you can't make it that way)</li>
+        <li>Write four or five things you would like to accomplish in that project (not SMARTY yet, if you can't make it that way)</li>
         <li>Set aside your page for two months</li>
         <li>For each of those things you wanted to do, write a SMARTY version</li>
         <li>Add your new goals to your record book</li>
       </ol>
-      <p>I've found that, by writing down the goals early along with the why behind them, I will be more likely to acomplish my goals.
+      <p>I've found that, by writing down the goals early along with the why behind them, I will be more likely to accomplish my goals.
         Try it yourself, and I think you will, too.</p>
-      <h2> Project Description </h2>
+      <h2><a id="projectdescription"></a>Project Description</h2>
       <blockquote> If you can't explain it to a six year old, you don't understand it yourself. <small>Albert Einstein</small> </blockquote>
       <p> Use the project description to explain what you did in the past year to someone who doesn't know anything about that subject.
         A good project description should read almost like a newspaper brief about your project.
@@ -257,7 +257,7 @@
           Please use discernment when viewing the example project descriptions, and remember to use the reporter-like style when completing your record book.
           Who knows, then your book might wind up in the next set of examples. </div>
       </div>
-      <h2> Size &amp; Scope </h2>
+      <h2><a id="sizeandscope"></a>Size &amp; Scope</h2>
       <blockquote> There's always a four-point-five percent margin of error, plus or minus. <small>The Accountant in <em>The Accountant</em> (Short film)</small> </blockquote>
       <p> The label &quot;Size &amp; Scope&quot; has caused confusion for several generations of 4-Hers.
         Let's define these words to clear that up. </p>
@@ -267,7 +267,7 @@
         <dt>Scope</dt>
         <dd>indicates the varieties, different types, recipes, plants or animal breeds with which you worked.</dd>
       </dl>
-      <p> In short, Size &amp; Scope is a <abbr title="A detailed description including numbers of all substances used. Also the name of a class I'm glad I didn't have to take in college.">quantitative analysis</abbr> of everything you used to complete your project.
+      <p> In short, Size &amp; Scope is a quantitative analysis of everything you used to complete your project.
         Good Size &amp; Scope sections vary widely depending on the project, but all of them record the items (physical or intellectual) used in the project, and the time and money spent on the project.
         Take a look at the examples for ideas to get you started. </p>
       <div class="panel panel-success">
@@ -278,7 +278,7 @@
           They are not intended to serve as a full Size &amp; Scope, but they may be useful to augment your existing data.
           Use them if you think they are appropriate to your project. </div>
       </div>
-      <h2> Knowledge &amp; Skills Acquired </h2>
+      <h2><a id="knowledgeandskills"></a>Knowledge &amp; Skills Acquired</h2>
       <blockquote> Receive my instruction, and not silver; and knowledge rather than choice gold. <small>Proverbs 8:10 KJV</small> </blockquote>
       <p> Knowledge &amp; Skills Acquired serves two purposes.
         First, it allows you to address whether or not you met your goals.
@@ -287,7 +287,17 @@
         Write a paragraph (at least three sentences) explaining if you met the goal, how you met the goal (or why you did not meet the goal), and what you learned from the goal.
         After each goal is addressed, include paragraphs explaining anything else you learned about your project area.
         Remember that your readers might not know anything about your project area, so be sure to explain it in a way that a layperson can understand. </p>
-      <h2> Exhibition Summary </h2>
+      <h2><a id="summary"></a>Exhibition Summary</h2>
+		<blockquote>
+			Exhibiting is a good form of advertising.
+			<small>
+				H. A. Willman in <i>The 4-H Handbook</i> (1952)
+			</small>
+		</blockquote>
+		<p>
+			When you compete in the county fair or other 4-H contest with your project, list that competition here and list what place you got.
+			If you have a project that involves multiple items (i.e. a knitted scarf <em>and</em> a knitted hat), list both of those items and the placings each received.
+		</p>
       <!-- InstanceEndEditable --> </div>
   </div>
 </div>

css/site.css

@@ -108,10 +108,11 @@ h6 span {
    /*font: bold 24px/45px Helvetica, Sans-Serif;*/
    letter-spacing: -1px;  
    background: rgba(0, 0, 0, 0.7);
-   padding: 2px; 	
+   padding: 2px;
+	font-size: 16pt;
 }
 
-h4 span.spacer {
+h6 span.spacer {
 	   padding:0 2px;
 }
 
@@ -156,13 +157,14 @@ h2 {
 
 h3 {
 	font-weight: bolder;
+		font-size: larger;
 }
 
 
 
 h4 {
 	text-decoration: underline;
-	font-size: 13pt;
+	font-size: larger;
 }
 
 h5 {

script/site.js

@@ -4,20 +4,10 @@
 $(function() {
 	'use strict';
 	
-	$("h4")
+	$("h6")
 		.wrapInner("<span>");
 	
-	$("h4 br")
+	$("h6 br")
 		.before("<span class='spacer'>")
 		.after("<span class='spacer'>");
-});
+});
-
-function visibleLink(linkId) {
-	'use strict';
-	$('.'+linkId).css({'display': 'inline-block'});
-}
-
-function invisibleLink(linkId) {
-	'use strict';
-	$('.'+linkId).css({'display': 'none'});
-}