millironx/4h-record-books
1
0
Fork 0
mirror of https://github.com/MillironX/4h-record-books.git synced 2024-11-21 13:56:03 +00:00
Code Issues Releases Packages Activity

Added all front-end pages for all sections

Browse source
This commit is contained in:
Thomas A. Christensen II 2019-07-25 17:17:19 -06:00
parent a1d94934f7
commit 313c034372
39 changed files with 892 additions and 370 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
Cover.html
View file

@ -50,16 +50,11 @@
<div class="row"> <div class="row">
<div class="col-lg-8 col-lg-offset-2"> <div class="col-lg-8 col-lg-offset-2">
<!-- InstanceBeginEditable name="MainBody" --> <!-- InstanceBeginEditable name="MainBody" -->
<img class="img-responsive img-thumbnail center-cropped float-left" src="img/Newnotebookandtexturewoodencoverwithpencil.jpg" alt="Cover notebook" />
<h1> <h1>
Cover Page Cover Page
<br /> &#9679;
<small>The start to every record book</small> <small>The start to every record book</small>
</h1> </h1>
<div class="clearfix"></div>
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3"> <div class="col-md-6 col-md-offset-3">
<div class="btn-group btn-group-justified"> <div class="btn-group btn-group-justified">
@ -75,7 +70,13 @@
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<br />
<div class="center-cropped" data-parallax="scroll" data-image-src="./img/cover-bg-notebook.jpg"></div>
<br />
<blockquote> <blockquote>
Let's start at the very beginning,<br /> Let's start at the very beginning,<br />
@ -132,6 +133,6 @@
<!--Bootstrap scripts--> <!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script> <script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/site.js" type="text/javascript"></script> <script src="script/parallax.min.js" type="text/javascript"></script>
</body> </body>
<!-- InstanceEnd --></html> <!-- InstanceEnd --></html>

193
Index.html
View file

@ -50,111 +50,92 @@
<div class="row"> <div class="row">
<div class="col-lg-8 col-lg-offset-2"> <div class="col-lg-8 col-lg-offset-2">
<!-- InstanceBeginEditable name="MainBody" --> <!-- InstanceBeginEditable name="MainBody" -->
<div class="center-cropped background-home"></div> <div class="center-cropped" style="max-width: 414px" data-parallax="scroll" data-image-src="./img/woman-keeping-records.jpg"></div>
<h1> <h1> 4-H Record Book Portfolios <br />
4-H Record Book Portfolios <span class="small">for Albany County, Wyoming</span> </h1>
<br /> <div class="clearfix"></div>
<span class="small">for Albany County, Wyoming</span> <p> Welcome! 4-H Record Books are the culmination of the 4-H experience.
</h1> With record books, 4-Hers not only have the opportunity to complete epic projects, but they have the chance to tell others what they did and learned. </p>
<p> &quot;Why bother?&quot; you might ask.
<div class="clearfix"></div> That is a worthy question, and so I have come up with the following reasons for completing record books. </p>
<div class="row">
<p> <div class="col-sm-6">
Welcome! 4-H Record Books are the culmination of the 4-H experience. <div class="panel panel-info">
With record books, 4-Hers not only have the opportunity to complete epic projects, but they have the chance to tell others what they did and learned. <div class="panel-heading">
</p> <h3 class="panel-title">Youth Development (Parent's) Reasons</h3>
<p> </div>
&quot;Why bother?&quot; you might ask. <div class="panel-body">
That is a worthy question, and so I have come up with the following reasons for completing record books. <ul>
</p> <li>Youth develop professsional record-keeping habits</li>
<li>Youth learn to follow appropriate standards while maintaining creativity and flexibility</li>
<div class="row"> <li>Youth learn to communicate strengths and acomplishments to others without braggish manerisms</li>
<div class="col-sm-6"> </ul>
<div class="panel panel-info"> </div>
<div class="panel-heading"> </div>
<h3 class="panel-title">Youth Development (Parent's) Reasons</h3> </div>
</div> <div class="col-sm-6">
<div class="panel-body"> <div class="panel panel-danger">
<ul> <div class="panel-heading">
<li>Youth develop professsional record-keeping habits</li> <h3 class="panel-title">Fun (Kid's) Reasons</h3>
<li>Youth learn to follow appropriate standards while maintaining creativity and flexibility</li> </div>
<li>Youth learn to communicate strengths and acomplishments to others without braggish manerisms</li> <div class="panel-body">
</ul> <ul>
</div> <li>You can earn great prizes (and there are alot of them) at the county level</li>
</div> <li>You can earn <a href="http://wyoming4h.org/scholarships">scholarship money</a> for going to college or trade school with a well-kept record book.</li>
</div> <li>Record books are fun to read (and make great blackmail material)!</li>
<div class="col-sm-6"> </ul>
<div class="panel panel-danger"> </div>
<div class="panel-heading"> </div>
<h3 class="panel-title">Fun (Kid's) Reasons</h3> </div>
</div> </div>
<div class="panel-body"> <h2>So, let's dive right in!</h2>
<ul> <p> Click a box below to be taken to a page containing the appropriate forms and info on how to fill them out. </p>
<li>You can earn great prizes (and there are alot of them) at the county level</li> <div class="row">
<li>You can earn <a href="http://wyoming4h.org/scholarships">scholarship money</a> for going to college or trade school with a well-kept record book.</li> <a href="Cover.html"><div class="col-sm-2 background-grid background-cover hover-contents">
<li>Record books are fun to read! (Maybe I like gathering blackmail material from record books too much.)</li> <div class="banner-heading"><h6>Cover Page</h6></div>
</ul> </div></a>
</div> <a href="Section1.html"><div class="col-sm-5 background-grid background-sec-1 hover-contents">
</div> <div class="banner-heading"><h6>Section 1<br />
</div> Project Record</h6></div>
</div> </div></a>
<a href="Section2.html"><div class="col-sm-2 background-grid background-sec-2 hover-contents"> <div class="banner-heading">
<h2>So, let's dive right in!</h2> <h6 class="background-transparent">Section 2<br />
<p> Awards &amp; Recognitions</h6></div>
Click a box below to be taken to a page containing the appropriate forms and info on how to fill them out. </div></a>
</p> <a href="Section3.html"><div class="col-sm-3 background-grid background-sec-3 hover-contents"> <div class="banner-heading">
<h6 class="background-transparent">Section 3<br />
<div class="row"> Leadership</h6></div>
<div class="col-sm-2 background-grid background-cover"> </div></a>
<a href="Cover.html"> <!--New row-->
<h6>Cover Page</h6> <a href="Section4.html"><div class="col-sm-3 background-grid background-sec-4 hover-contents">
</a> <div class="banner-heading">
</div> <h6 class="background-transparent">Section 4<br />
<div class="col-sm-5 background-grid background-sec-1"> Community Service</h6></div>
<a href="Section1.html"> </div></a>
<h6>Section 1<br />Project Record</h6> <a href="Section5.html"><div class="col-sm-2 background-grid background-sec-5 hover-contents">
</a> <div class="banner-heading">
</div> <h6 class="background-transparent">Section 5<br />
<div class="col-sm-2 background-grid background-sec-2"> Participation &amp; Non-4-H Experiences</h6></div>
<a href="Section2.html"> </div></a>
<h6 class="background-transparent">Section 2<br />Awards and Recognitions</h6> <a href="Section6.html"><div class="col-sm-4 background-grid background-sec-6 hover-contents">
</a> <div class="banner-heading">
</div> <h6 class="background-transparent">Section 6<br />
<div class="col-sm-3 background-grid background-sec-3"> My 4-H Story</h6>
<a href="Section3.html"> </div>
<h6 class="background-transparent">Section 3<br />Leadership</h6> </div></a>
</a> <a href="Section7.html">
</div> <div class="col-sm-3 background-grid background-sec-7 hover-contents">
<!--New row--> <div class="banner-heading">
<div class="col-sm-3 background-grid background-sec-4"> <h6 class="background-transparent">Section 7<br />
<a href="Section4.html"> Photographs &amp; Clippings</h6>
<h6 class="background-transparent">Section 4<br />Community Service</h6> </div>
</a> </div>
</div> </a> </div>
<div class="col-sm-2 background-grid background-sec-5"> <h2>&quot;It's time for an introduction&#x2026;&quot;</h2>
<a href="Section5.html"> <p> My name is Thomas Christensen. I am a nine-year Albany County 4-H alum, and I am passionate about record books.
<h6 class="background-transparent">Section 5<br />Participation &amp; Non-4-H Experiences</h6> I have taken the liberty of voicing my own thoughts and opinions about record books here under the guise of helping new 4-H members.
</a> If you are looking for a print resource that is slightly more tactful than I am, try downloading the PDF &quot;Record Book Handout&quot; from the &quot;Resources&quot; tab above. </p>
</div> <!-- InstanceEndEditable -->
<div class="col-sm-4 background-grid background-sec-6">
<a href="Section6.html">
<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">
<h6 class="background-transparent">Section 7<br />Photographs and Clippings</h6>
</a>
</div>
</div>
<h2>&quot;It's time for an introduction&#x2026;&quot;</h2>
<p>
My name is Thomas Christensen. I am a nine-year Albany County 4-H alum, and I am passionate about record books.
I have taken the liberty of voicing my own thoughts and opinions about record books here under the guise of helping new 4-H members.
If you are looking for a print resource that is slightly more tactful than I am, try downloading the PDF &quot;Record Book Handout&quot; from the &quot;Resources&quot; tab above.
</p>
<!-- InstanceEndEditable -->
</div> </div>
</div> </div>
@ -164,6 +145,6 @@
<!--Bootstrap scripts--> <!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script> <script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/site.js" type="text/javascript"></script> <script src="script/parallax.min.js" type="text/javascript"></script>
</body> </body>
<!-- InstanceEnd --></html> <!-- InstanceEnd --></html>

145
Section1.html
View file

@ -1,6 +1,5 @@
<!doctype html> <!doctype html>
<html> <html><!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" -->
<!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" --> <!-- InstanceBeginEditable name="doctitle" -->
@ -14,32 +13,44 @@
<body> <body>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<a class="navbar-brand" href="Index.html"> <img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" /> </a> </div> <span class="sr-only">Toggle Navigation</span>
<div class="collapse navbar-collapse" id="navbar-collapse-main"> <span class="icon-bar"></span>
<ul class="nav navbar-nav"> <span class="icon-bar"></span>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a> <span class="icon-bar"></span>
<ul class="dropdown-menu" role="menu"> </button>
<li><a href="Cover.html">Cover Page</a></li> <a class="navbar-brand" href="Index.html">
<li><a href="Section1.html">Section 1</a></li> <img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" />
<li><a href="Section2.html">Section 2</a></li> </a>
<li><a href="Section3.html">Section 3</a></li> </div>
<li><a href="Section4.html">Section 4</a></li>
<li><a href="Section5.html">Section 5</a></li> <div class="collapse navbar-collapse" id="navbar-collapse-main">
<li><a href="Section6.html">Section 6</a></li> <ul class="nav navbar-nav">
<li><a href="Section7.html">Section 7</a></li> <li class="dropdown">
</ul> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a>
</li> <ul class="dropdown-menu" role="menu">
</ul> <li><a href="Cover.html">Cover Page</a></li>
</div> <li><a href="Section1.html">Section 1</a></li>
</div> <li><a href="Section2.html">Section 2</a></li>
<li><a href="Section3.html">Section 3</a></li>
<li><a href="Section4.html">Section 4</a></li>
<li><a href="Section5.html">Section 5</a></li>
<li><a href="Section6.html">Section 6</a></li>
<li><a href="Section7.html">Section 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav> </nav>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-8 col-lg-offset-2"> <!-- InstanceBeginEditable name="MainBody" --> <div class="col-lg-8 col-lg-offset-2">
<div class="center-cropped background-sec-1"></div> <!-- InstanceBeginEditable name="MainBody" -->
<h1> Section 1 <h1> Section 1
&#9679; <small>Project Record</small> </h1> &#9679; <small>Project Record</small> </h1>
<div class="row"> <div class="row">
@ -49,7 +60,8 @@
Examples </a> </div> Examples </a> </div>
</div> </div>
</div> </div>
<h2> Requirements </h2> <br/>
<div class="center-cropped" data-parallax="scroll" data-image-src="./img/sec1-bg-cowshow.jpg"></div><h2> Requirements </h2>
<table class="table table-bordered table-responsive table-striped table-fixed-width font-mono"> <table class="table table-bordered table-responsive table-striped table-fixed-width font-mono">
<tr> <tr>
<th></th> <th></th>
@ -83,14 +95,14 @@
</tr> </tr>
</table> </table>
<img src="img/Record Book.svg" class="img-responsive" alt="The components of a 4-H record book" /> <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. <p>Most of your 4-H career is spent working on projects, and fittingly, a majority of your record book is spent commemorating those projects.
Section 1 provides a framework for planning, completing, and analyzing 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> How? Let's go through it step-by-step. </p>
<div class="panel panel-warning"> <div class="panel panel-warning">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3> <h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3>
</div> </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. <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 extraneous 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>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -104,7 +116,10 @@
<p>A goal is an objective or thing desired to happen with SMARTY attributes:</p> <p>A goal is an objective or thing desired to happen with SMARTY attributes:</p>
<table class="table-responsive"> <table class="table-responsive">
<tr> <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> <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"
alt="'Specific' - Arrow in target"/></a> </th>
<th style="width: 20pt"> <h3>S</h3> <th style="width: 20pt"> <h3>S</h3>
</th> </th>
<td><h4>Specific</h4> <td><h4>Specific</h4>
@ -122,7 +137,10 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><a href="https://openclipart.org/detail/13662/ruler"><img src="https://openclipart.org/download/13662/molumen-Ruler.svg" class="max-width-100 max-height-100" /></a></td> <td><a href="https://openclipart.org/detail/13662/ruler">
<img src="https://openclipart.org/download/13662/molumen-Ruler.svg"
class="max-width-100 max-height-100"
alt="'Measurable' - Ruler"/></a></td>
<th> <h3>M</h3> <th> <h3>M</h3>
</th> </th>
<td><h4>Measurable</h4> <td><h4>Measurable</h4>
@ -138,14 +156,16 @@
That is characteristic of measurable 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> <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." <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. Sometimes this is measurable, Usually it is not.
It would be far better to identify exactly what you want to improve and find a way to measure that. 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 meticulously organized so that the judges can find how you did last year. </p> If you do resort to this goal, you <strong>MUST</strong> keep your record book meticulously organized so that the judges can find how you did last year. </p> <hr />
<hr />
</td> </td>
</tr> </tr>
<tr> <tr>
<td><a href="https://openclipart.org/detail/242959/old-scroll"><img src="https://openclipart.org/download/242959/160303_scroll.svg" class="max-width-100 max-height-100" /></a></td> <td><a href="https://openclipart.org/detail/242959/old-scroll">
<img src="https://openclipart.org/download/242959/160303_scroll.svg"
class="max-width-100 max-height-100"
alt="'Achievable' - X marks the spot"/></a></td>
<th> <h3>A</h3> <th> <h3>A</h3>
</th> </th>
<td><h4>Achievable/Attainable</h4> <td><h4>Achievable/Attainable</h4>
@ -166,7 +186,10 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><a href="https://openclipart.org/detail/18412/weightlifting"><img src="https://openclipart.org/download/18412/motudo-WeightLifting.svg" class="max-width-100 max-height-100" /></a></td> <td><a href="https://openclipart.org/detail/18412/weightlifting">
<img src="https://openclipart.org/download/18412/motudo-WeightLifting.svg"
class="max-width-100 max-height-100"
alt="'Realistic' - Weight lifting"/></a></td>
<th> <h3>R</h3> <th> <h3>R</h3>
</th> </th>
<td><h4>Realistic</h4> <td><h4>Realistic</h4>
@ -182,12 +205,15 @@
<p> <p>
No 4-Her could have the money to buy materials for 20 saddles, or the time to make 20 saddles within one month: that is unrealistic. No 4-Her could have the money to buy materials for 20 saddles, or the time to make 20 saddles within one month: that is unrealistic.
Difficulty can also play a role here. Difficulty can also play a role here.
Making one coaster should not challenge anyone but a 1st-year leathercrafter, and would also be unrealistic.</p> Making one coaster should not be a challenge for an experienced leathercrafter and would be unrealistic, but might be appropriate for a first-year member.</p>
<hr /> <hr />
</td> </td>
</tr> </tr>
<tr> <tr>
<td><a href="https://openclipart.org/detail/46075/stop-watch"><img src="https://openclipart.org/download/46075/stop-watch.svg" class="max-width-100 max-height-100"/></a></td> <td><a href="https://openclipart.org/detail/46075/stop-watch">
<img src="https://openclipart.org/download/46075/stop-watch.svg"
class="max-width-100 max-height-100"
alt="'Time-bound' - Stopwatch"/></a></td>
<th> <h3>T</h3> <th> <h3>T</h3>
</th> </th>
<td><h4>Time-bound</h4> <td><h4>Time-bound</h4>
@ -207,7 +233,10 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td><a href="https://openclipart.org/detail/271409/why-typography-black"><img src="https://openclipart.org/download/271409/WHY-Typography-Black.svg" class="max-width-100 max-height-100" /></a></td> <td><a href="https://openclipart.org/detail/271409/why-typography-black">
<img src="https://openclipart.org/download/271409/WHY-Typography-Black.svg"
class="max-width-100 max-height-100"
alt="'Why' - Question marks"/></a></td>
<th> <h3>Y</h3> <th> <h3>Y</h3>
</th> </th>
<td><h4>Why</h4> <td><h4>Why</h4>
@ -219,16 +248,16 @@
<dd>To volunteer for three leadership positions in the community this year (because I need to improve my public speaking and organizational skills)</dd> <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> </dl>
<p> <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 accomplish those goals. You don't always 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> </p>
<hr /></td> <hr /></td>
</tr> </tr>
</table> </table>
<p>How do you write SMARTY goals? Here's a way I like to do it:</p> <p>How do you write SMARTY goals? Here's a way I like to do it:</p>
<ol> <ol>
<li>Get a blank sheet of paper and pencil (<strong>not</strong> your phone)</li> <li>Get a blank sheet of paper and pencil (<strong>not</strong> your phone or computer)</li>
<li>Write the project name and why you enrolled in that project at the top of the page</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 accomplish 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 (these don't have to be SMARTY)</li>
<li>Set aside your page for two months</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>For each of those things you wanted to do, write a SMARTY version</li>
<li>Add your new goals to your record book</li> <li>Add your new goals to your record book</li>
@ -239,7 +268,7 @@
<blockquote> If you can't explain it to a six year old, you don't understand it yourself. <small>Albert Einstein</small> </blockquote> <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. <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. A good project description should read almost like a newspaper brief about your project.
Like a good reporter, include information on the </p> Like a good reporter, include the following information on your project:</p>
<ul> <ul>
<li> <strong>Who</strong> (parents, siblings, project leaders) </li> <li> <strong>Who</strong> (parents, siblings, project leaders) </li>
<li> <strong>What</strong> (leathercraft halter, market steer show, cooking recipe) </li> <li> <strong>What</strong> (leathercraft halter, market steer show, cooking recipe) </li>
@ -247,19 +276,16 @@
<li> and </li> <li> and </li>
<li> <strong>Where</strong> (at Hansen arena, at home, at SAREC) </li> <li> <strong>Where</strong> (at Hansen arena, at home, at SAREC) </li>
</ul> </ul>
<p> of your project. </p>
<div class="panel panel-warning"> <div class="panel panel-warning">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3> <h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3>
</div> </div>
<div class="panel-body"> For many years, the role of the project description was very ambiguous. <div class="panel-body">Most of our record book examples don't follow these guidelines, because these guidelines hadn't been written yet! Please use discernment when viewing the example project descriptions, and remember to use the reporter-like style when completing your record book.
As such, there are very few record books that followed these guidelines, and most of the examples do not. If you do it right, <em>your</em> book might wind up in the next set of examples. </div>
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> </div>
<h2><a id="sizeandscope"></a>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> <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. <p>&quot;Size &amp; Scope&quot; isn't nearly as confusing as it might sound.
Let's define these words to clear that up. </p> Let's define these words to clear that up. </p>
<dl class="dl-horizontal"> <dl class="dl-horizontal">
<dt>Size</dt> <dt>Size</dt>
@ -296,16 +322,19 @@
</blockquote> </blockquote>
<p> <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. 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. If you have a project that involves multiple items (e.g. a knitted scarf <em>and</em> a knitted hat), list both of those items and the placings each received.
If you exhibited your project at multiple shows (e.g. a heifer at the Colorado Dairy Extravaganza, the Brown Swiss State Show, and the County fair), feel free to restructure the columns to match the exhibitions you actually attended.
</p> </p>
<!-- InstanceEndEditable --> </div> <!-- InstanceEndEditable -->
</div> </div>
</div>
</div> </div>
<!--Bootstrap scripts--> <!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script> <script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/site.js" type="text/javascript"></script> <script src="script/parallax.min.js" type="text/javascript"></script>
</body> </body>
<!-- InstanceEnd --> <!-- InstanceEnd --></html>
</html>

112
Section2.html Normal file
View file

@ -0,0 +1,112 @@
<!doctype html>
<html><!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Albany County 4-H Record Book Portfolios ~ Section 2 - Awards and Recognitions</title>
<!-- InstanceEndEditable -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Index.html">
<img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Cover.html">Cover Page</a></li>
<li><a href="Section1.html">Section 1</a></li>
<li><a href="Section2.html">Section 2</a></li>
<li><a href="Section3.html">Section 3</a></li>
<li><a href="Section4.html">Section 4</a></li>
<li><a href="Section5.html">Section 5</a></li>
<li><a href="Section6.html">Section 6</a></li>
<li><a href="Section7.html">Section 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- InstanceBeginEditable name="MainBody" -->
<h1>Section 2
&#9679; <small>Awards &amp; Recognitions</small></h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="btn-group btn-group-justified"> <a href="book/Section2.docx" class="btn btn-primary"> <img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format"/> &ensp; Template </a> <a href="example/Section_2.pdf" class="btn btn-danger"> <img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/> &ensp; Examples </a> </div>
</div>
</div>
<br />
<div class="center-cropped" data-parallax="scroll" data-image-src="./img/sec2-bg-trophy.jpg"></div>
<br />
<blockquote> I took her to the county fair to try and win a prize<br/>
She knew just what was going on - I saw it in her eyes <small>Little Jimmy Dickens in "Bessie the Heifer"</small> </blockquote>
<h2> Requirements </h2>
<table class="table table-bordered table-responsive table-striped table-fixed-width font-mono">
<tr>
<th></th>
<th>Juniors<span class="visible-md visible-lg"><small> (Ages 8-10)</small></span></th>
<th>Intermediates<span class="visible-md visible-lg"><small> (Ages 11-13)</small></span></th>
<th>Seniors<span class="visible-md visible-lg"><small> (Ages 14+)</small></span></th>
</tr>
<tr>
<th>Minimum # of Awards/Recognitions in current report year</th>
<td>One (1)</td>
<td>Two (2)</td>
<td>Three (3)</td>
</tr>
</table>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3>
</div>
<div class="panel-body"> This is one of the <b>cumulative</b> sections of the record book. At the start of each 4-H year, just append the new year's records to your previous year's records, giving a complete picture of your entire 4-H career. </div>
</div>
<p>An <b>award</b> is something someone gives you because of excellent merit. Similarly, a <b>recognition</b> is when someone communicates to others of your excellence. This section of your record book is used to document when you have earned an award or recognition. This is the only section of the record book that is not directly dependent on your own performance, so you should strive to work hard so that others will have plenty of opportunity to reward you. </p>
<p>There are two major mistakes to avoid when filling out this section:
<ol>
<li><b>Listing placings</b>
<br/>
Your cat may have won 5<sup>th</sup> place in the Miss Kitty Universe contest, but that is not an award in-and-of itself (that information should go in your <a href="Section1.html#summary">Exhibition Summary in Section 1</a>). Similarly, strip ribbons are merely tokens of placement and should not be included here.
</li>
<li>
<b>Listing purchased items</b><br/>
This includes trips to 4-H camp and embroidered jackets that you (or someone else) paid for that was not directly awarded for any merit on your part.
</li>
</ol>
</p>
<p>A good rule-of-thumb for this section is: if you had to write a thank-you note to receive the prize, then it goes here.</p>
<!-- InstanceEndEditable -->
</div>
</div>
</div>
<!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/parallax.min.js" type="text/javascript"></script>
</body>
<!-- InstanceEnd --></html>

112
Section3.html Normal file
View file

@ -0,0 +1,112 @@
<!doctype html>
<html><!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Albany County 4-H Record Book Portfolios ~ Section 3 - Leadership</title>
<!-- InstanceEndEditable -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Index.html">
<img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Cover.html">Cover Page</a></li>
<li><a href="Section1.html">Section 1</a></li>
<li><a href="Section2.html">Section 2</a></li>
<li><a href="Section3.html">Section 3</a></li>
<li><a href="Section4.html">Section 4</a></li>
<li><a href="Section5.html">Section 5</a></li>
<li><a href="Section6.html">Section 6</a></li>
<li><a href="Section7.html">Section 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- InstanceBeginEditable name="MainBody" -->
<h1>Section 3
&#9679; <small>Leadership</small></h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="btn-group btn-group-justified"> <a href="book/Section3.docx" class="btn btn-primary"> <img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format"/> &ensp; Template </a> <a href="example/Section_3.pdf" class="btn btn-danger"> <img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/> &ensp; Examples </a> </div>
</div>
</div>
<br />
<div class="center-cropped" data-parallax="scroll" data-image-src="./img/sec3-bg-gavel.jpg"></div>
<br />
<blockquote> Leaders do not lead; they are followed.<small>Dr. Jack Hyles in <em>The Science of the Christian Life, Vol. 1</em></small> </blockquote>
<h2> Requirements </h2>
<table class="table table-bordered table-responsive table-striped table-fixed-width font-mono">
<tr>
<th></th>
<th>Juniors<span class="visible-md visible-lg"><small> (Ages 8-10)</small></span></th>
<th>Intermediates<span class="visible-md visible-lg"><small> (Ages 11-13)</small></span></th>
<th>Seniors<span class="visible-md visible-lg"><small> (Ages 14+)</small></span></th>
</tr>
<tr>
<th>Minimum # of leadership activities in current report year</th>
<td>Two (2)</td>
<td>Four (4)</td>
<td>Six (6)</td>
</tr>
<tr>
<th>Minimum # of leadership hours in current report year</th>
<td>Ten (10)</td>
<td>Twenty (20)</td>
<td>Thirty (30)</td>
</tr>
</table>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3>
</div>
<div class="panel-body"> This is one of the <b>cumulative</b> sections of the record book. At the start of each 4-H year, just append the new year's records to your previous year's records, giving a complete picture of your entire 4-H career. </div>
</div>
<blockquote>
<b>Leadership is defined as a position of responsibility with a purpose to guide or direct others.</b>
Leadership capacity can be demonstrated in a variety of ways. Positions in employment, church, community and school organizations including coaching, tutoring and mentoring will [qualify as leadership].
<small>
From University of Utah School of Medicine
</small>
</blockquote>
<p>This is the clearist definition of leadership I have ever found. It hits on two essential points of leadership: that <b>you</b> must take the initiative in a leadership role, and that not all leadership roles are buerecratic. "Taking the inititative" means that a required activity (e.g. 4-H carnival) does not count as leadership (it is probably still <a href="Section5.html">participation</a>, though).</p>
<p>For this section, it is imparative to be <b>very</b> specific. For each entry, include exactly what position you were in, and if appropriate what your duties were. If you list committees or other groups, make sure you specify whether you were a member or chair. You must show how <em>you</em> showed leadership, and not just some larger group of people.</p>
<!-- InstanceEndEditable -->
</div>
</div>
</div>
<!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/parallax.min.js" type="text/javascript"></script>
</body>
<!-- InstanceEnd --></html>

105
Section4.html Normal file
View file

@ -0,0 +1,105 @@
<!doctype html>
<html><!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Albany County 4-H Record Book Portfolios ~ Section 4 - Community Service</title>
<!-- InstanceEndEditable -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Index.html">
<img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Cover.html">Cover Page</a></li>
<li><a href="Section1.html">Section 1</a></li>
<li><a href="Section2.html">Section 2</a></li>
<li><a href="Section3.html">Section 3</a></li>
<li><a href="Section4.html">Section 4</a></li>
<li><a href="Section5.html">Section 5</a></li>
<li><a href="Section6.html">Section 6</a></li>
<li><a href="Section7.html">Section 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- InstanceBeginEditable name="MainBody" -->
<h1>Section 4
&#9679; <small>Community Service</small></h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="btn-group btn-group-justified"> <a href="book/Section4.docx" class="btn btn-primary"> <img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format"/> &ensp; Template </a> <a href="example/Section_4.pdf" class="btn btn-danger"> <img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/> &ensp; Examples </a> </div>
</div>
</div>
<br />
<div class="center-cropped" data-parallax="scroll" data-image-src="./img/sec4-bg-cleanup.jpg"></div>
<br />
<blockquote> Ask not what your country can do for you, ask what you can do for your country.<small>President John F. Kennedy</small> </blockquote>
<h2> Requirements </h2>
<table class="table table-bordered table-responsive table-striped table-fixed-width font-mono">
<tr>
<th></th>
<th>Juniors<span class="visible-md visible-lg"><small> (Ages 8-10)</small></span></th>
<th>Intermediates<span class="visible-md visible-lg"><small> (Ages 11-13)</small></span></th>
<th>Seniors<span class="visible-md visible-lg"><small> (Ages 14+)</small></span></th>
</tr>
<tr>
<th>Minimum # of community service activities in current report year</th>
<td>Two (2)</td>
<td>Three (3)</td>
<td>Four (4)</td>
</tr>
<tr>
<th>Minimum # of community service hours in current report year</th>
<td>Ten (10)</td>
<td>Twenty (20)</td>
<td>Thirty (30)</td>
</tr>
</table>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3>
</div>
<div class="panel-body"> This is one of the <b>cumulative</b> sections of the record book. At the start of each 4-H year, just append the new year's records to your previous year's records, giving a complete picture of your entire 4-H career. </div>
</div>
<p>Chronicle all of your altuistic service for others through 4-H in this section. In order to be recorded here, your actions must not be reimbersed in any way (that kind of defeats the point of service).</p>
<p>We also ask that all of the activities here be specifically done in the name of 4-H. In other words, activities done through church, other clubs, or out of duty to family don't belong here.</p>
<!-- InstanceEndEditable -->
</div>
</div>
</div>
<!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/parallax.min.js" type="text/javascript"></script>
</body>
<!-- InstanceEnd --></html>

103
Section5.html Normal file
View file

@ -0,0 +1,103 @@
<!doctype html>
<html><!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Albany County 4-H Record Book Portfolios ~ Section 5 - Participation &amp; Non-4-H Experiences</title>
<!-- InstanceEndEditable -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Index.html">
<img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Cover.html">Cover Page</a></li>
<li><a href="Section1.html">Section 1</a></li>
<li><a href="Section2.html">Section 2</a></li>
<li><a href="Section3.html">Section 3</a></li>
<li><a href="Section4.html">Section 4</a></li>
<li><a href="Section5.html">Section 5</a></li>
<li><a href="Section6.html">Section 6</a></li>
<li><a href="Section7.html">Section 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- InstanceBeginEditable name="MainBody" -->
<h1>Section 5
&#9679; <small>Participation &amp; Non-4-H Experiences</small></h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="btn-group btn-group-justified"> <a href="book/Section5.docx" class="btn btn-primary"> <img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format"/> &ensp; Template </a> <a href="example/Section_5.pdf" class="btn btn-danger"> <img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/> &ensp; Examples </a> </div>
</div>
</div>
<br />
<div class="center-cropped" data-parallax="scroll" data-image-src="./img/sec5-bg-church.jpg"></div>
<br />
<blockquote>Take chances, make mistakes, get messy!<small>Valerie Frizzel</small> </blockquote>
<h2> Requirements </h2>
<table class="table table-bordered table-responsive table-striped table-fixed-width font-mono">
<tr>
<th></th>
<th>Juniors<span class="visible-md visible-lg"><small> (Ages 8-10)</small></span></th>
<th>Intermediates<span class="visible-md visible-lg"><small> (Ages 11-13)</small></span></th>
<th>Seniors<span class="visible-md visible-lg"><small> (Ages 14+)</small></span></th>
</tr>
<tr>
<th>Minimum # of 4-H experiences in current report year</th>
<td>Two (2)</td>
<td>Four (4)</td>
<td>Six (6)</td>
</tr>
<tr>
<th>Minimum # of non-4-H experiences in current report year</th>
<td colspan="3">Two (2)</td>
</tr>
</table>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"> <span class="glyphicon glyphicon-edit"></span> Note </h3>
</div>
<div class="panel-body"> This is one of the <b>cumulative</b> sections of the record book. At the start of each 4-H year, just append the new year's records to your previous year's records, giving a complete picture of your entire 4-H career. </div>
</div>
<p>Everything but the kitchen sink goes in this section (and if you are an apprentice plumber, maybe even that). Activities that are required of your club, project, or county are not considered <a href="Section3.html">leadership</a>, but can be checked off here, instead. If you attend additional shows and contests that aren't associated with a project (presentation contests come to mind), add them here. Club and project meeting attendance records give an indication of your faithfulness.</p>
<p>Non-4-H participation gives the judges an idea of what other long-term activities you are involved with, and provides a more complete picture of you as a well-rounded person.</p>
<!-- InstanceEndEditable -->
</div>
</div>
</div>
<!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/parallax.min.js" type="text/javascript"></script>
</body>
<!-- InstanceEnd --></html>

168
Section6.html
View file

@ -1,5 +1,6 @@
<!doctype html> <!doctype html>
<html><!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" --> <html>
<!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" --> <!-- InstanceBeginEditable name="doctitle" -->
@ -13,90 +14,91 @@
<body> <body>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<span class="sr-only">Toggle Navigation</span> <a class="navbar-brand" href="Index.html"> <img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" /> </a> </div>
<span class="icon-bar"></span> <div class="collapse navbar-collapse" id="navbar-collapse-main">
<span class="icon-bar"></span> <ul class="nav navbar-nav">
<span class="icon-bar"></span> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a>
</button> <ul class="dropdown-menu" role="menu">
<a class="navbar-brand" href="Index.html"> <li><a href="Cover.html">Cover Page</a></li>
<img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" /> <li><a href="Section1.html">Section 1</a></li>
</a> <li><a href="Section2.html">Section 2</a></li>
</div> <li><a href="Section3.html">Section 3</a></li>
<li><a href="Section4.html">Section 4</a></li>
<div class="collapse navbar-collapse" id="navbar-collapse-main"> <li><a href="Section5.html">Section 5</a></li>
<ul class="nav navbar-nav"> <li><a href="Section6.html">Section 6</a></li>
<li class="dropdown"> <li><a href="Section7.html">Section 7</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a> </ul>
<ul class="dropdown-menu" role="menu"> </li>
<li><a href="Cover.html">Cover Page</a></li> </ul>
<li><a href="Section1.html">Section 1</a></li> </div>
<li><a href="Section2.html">Section 2</a></li> </div>
<li><a href="Section3.html">Section 3</a></li>
<li><a href="Section4.html">Section 4</a></li>
<li><a href="Section5.html">Section 5</a></li>
<li><a href="Section6.html">Section 6</a></li>
<li><a href="Section7.html">Section 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav> </nav>
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-8 col-lg-offset-2"> <div class="col-lg-8 col-lg-offset-2"> <!-- InstanceBeginEditable name="MainBody" -->
<!-- InstanceBeginEditable name="MainBody" --> <h1>Section 6
<img class="img-responsive img-thumbnail float-left center-cropped" src="img/Oldscrollpaperonwoodenbackground.jpg" alt="4-H Story on Parchmentd" /> &#9679; <small>My 4-H Story</small></h1>
<h1> <div class="row">
Section 6<br /> <div class="col-md-6 col-md-offset-3">
<small>My 4-H Story</small> <div class="btn-group btn-group-justified"> <a href="book/Section6.docx" class="btn btn-primary"> <img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format"/> &ensp;
</h1> Template </a> <a href="book/Section6-ruled.pdf" class="btn btn-danger">
<table>
<div class="clearfix"></div> <tr>
<td><img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format" /></td>
<div class="row"> <td>&ensp;</td>
<div class="col-md-6 col-md-offset-3"> <td>Ruled<br />
<div class="btn-group btn-group-justified"> Template</td>
<a href="book/Section6.docx" class="btn btn-primary"> </tr>
<img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format"/> </table>
&ensp; </a> <a href="example/Section_1.pdf" class="btn btn-danger"> <img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/> &ensp;
Form Examples </a> </div>
</a> </div>
<a href="book/Section6-ruled.pdf" class="btn btn-danger"> </div>
<img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format" /> <br />
&ensp; <div class="center-cropped" data-parallax="scroll" data-image-src="./img/sec6-bg-books.jpg"></div>
Ruled Form <br />
</a> <blockquote> My [story] is finished now: no wrath of Jove<br />
<a href="example/Section_1.pdf" class="btn btn-danger"> nor sword nor fire nor futurity<br />
<img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/> is capable of laying waste to it. <small><em>The Metamorphoses</em> by Ovid</small> </blockquote>
&ensp; <h2>Requirements</h2>
Examples <table class="table table-bordered table-responsive table-striped table-fixed-width font-mono">
</a> <tr>
</div> <th></th>
</div> <th>Juniors<span class="visible-md visible-lg"><small> (Ages 8-10)</small></span></th>
</div> <th>Intermediates<span class="visible-md visible-lg"><small> (Ages 11-13)</small></span></th>
<th>Seniors<span class="visible-md visible-lg"><small> (Ages 14+)</small></span></th>
<blockquote> </tr>
My [story] is finished now: no wrath of Jove<br /> <tr>
nor sword nor fire nor futurity<br /> <th>Length</th>
is capable of laying waste to it. <td colspan="3">Between 1-4 pages, single- or double-spaced in 12-point font</td>
<small><em>The Metamorphoses</em> by Ovid</small> </tr>
</blockquote> <tr>
<th>Content</th>
<!-- InstanceEndEditable --> <td colspan="3">Every project must be mentioned</td>
</div> </tr>
</div> </table>
<p>This is the part where you get to tie every other part of your record book together into a coherent narative. Tell the judges how your projects and activities in 4-H have developed and worked with one another. Did you learn something in ropecraft that made your beef project easier? Maybe your rabbit who chewed through the wires in the barn inspired your electronics project this year. Or maybe you didn't have as much time as you wanted to work with your showmanship lamb because you were nursing a sick pig. The 4-H story is the perfect place to talk about these things.</p>
<h3> Other suggestions for Section 6</h3>
<ul>
<li>Introduce yourself with a paragraph about your life outside 4-H</li>
<li>Tell about any funny or strage happenings in the course of the 4-H year</li>
<li>Mention your greatest acomplishments and failures and what you learned from each</li>
<li>Have a paragraph about each your experience at competition you participated in and what you learned from the judges</li>
<li>Elaborate on your leadership and community service experiences</li>
<li>Do you have any plans or changes for next year? Mention them.</li>
<li>Have fun with this section: you can be creative and tell your story any way you want</li>
</ul>
<!-- InstanceEndEditable --> </div>
</div>
</div> </div>
<!--Bootstrap scripts--> <!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script> <script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/site.js" type="text/javascript"></script> <script src="script/parallax.min.js" type="text/javascript"></script>
</body> </body>
<!-- InstanceEnd --></html> <!-- InstanceEnd -->
</html>

107
Section7.html Normal file
View file

@ -0,0 +1,107 @@
<!doctype html>
<html>
<!-- InstanceBegin template="/Templates/_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Albany County 4-H Record Book Portfolios ~ Section 7 - Photographs &amp; Clippings</title>
<!-- InstanceEndEditable -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-main"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="Index.html"> <img src="img/4-H-Club-Emblem.svg" alt="Wyoming 4-H Logo" width="20px" height="20px" /> </a> </div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Record Books <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Cover.html">Cover Page</a></li>
<li><a href="Section1.html">Section 1</a></li>
<li><a href="Section2.html">Section 2</a></li>
<li><a href="Section3.html">Section 3</a></li>
<li><a href="Section4.html">Section 4</a></li>
<li><a href="Section5.html">Section 5</a></li>
<li><a href="Section6.html">Section 6</a></li>
<li><a href="Section7.html">Section 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8 col-lg-offset-2"> <!-- InstanceBeginEditable name="MainBody" -->
<h1>Section 7
&#9679; <small>Photographs and Clippings</small></h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="btn-group btn-group-justified"> <a href="book/Section7.docx" class="btn btn-primary"> <img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format"/> &ensp;
Template </a> <a href="book/Section7-guided.docx" class="btn btn-primary"><table>
<tr>
<td><img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format" />
</td>
<td>&ensp;</td>
<td>
Guided<br />Template</td></tr>
</table>
</a> <a href="example/Section_7.pdf" class="btn btn-danger"> <img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/> &ensp;
Examples </a> </div>
</div>
</div>
<br />
<div class="center-cropped" data-parallax="scroll" data-image-src="./img/sec7-bg-camera.jpg"></div>
<br />
<blockquote> I seen you before. Hazel cut your pic'ure out of the paper. <small>Kenny in <em>The Home Ranch</em> by Ralph Moody</small> </blockquote>
<h2>Requirements</h2>
<table class="table table-bordered table-responsive table-striped table-fixed-width font-mono">
<tr>
<th></th>
<th>Juniors<span class="visible-md visible-lg"><small> (Ages 8-10)</small></span></th>
<th>Intermediates<span class="visible-md visible-lg"><small> (Ages 11-13)</small></span></th>
<th>Seniors<span class="visible-md visible-lg"><small> (Ages 14+)</small></span></th>
</tr>
<tr>
<th>Length</th>
<td>1 page<sup><a href="#star">*</a></sup></td>
<td colspan="2">2 pages<sup><a href="#star">*</a></sup></td>
</tr>
<tr>
<th>Content</th>
<td colspan="3">Only photographs and newpaer clippings - No ribbons, certificates, etc. </td>
</tr>
<tr>
<th>Record</th>
<td colspan="3">Every project must be addressed</td>
</tr>
<tr>
<th>Labeling</th>
<td colspan="3">Every photograph must be clearly labelled with a date and discriptive caption</td>
</tr>
<tr>
<th>Arrangement</th>
<td colspan="3">Photographs and clippings may not overlap</td>
</tr>
</table>
<small> <a id="star">*</a> These pages may be double-sided if plastic page protectors are used </small>
<br />
<br />
<p>Use this section of your record book to use pictures to tell about your 4-H projects and year. To make this section more engaging, include photos from the beginning, middle, and end of each project. Oh, and use action shots: they are much more fun to look at and tell and better story. If you have a particular part of your record book that you found hard to describe in words, include a picture here to clarify.</p>
<!-- InstanceEndEditable --> </div>
</div>
</div>
<!--Bootstrap scripts-->
<script src="script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script/bootstrap.min.js" type="text/javascript"></script>
<script src="script/parallax.min.js" type="text/javascript"></script>
</body>
<!-- InstanceEnd -->
</html>

2
Templates/_template.dwt
View file

@ -61,6 +61,6 @@
<!--Bootstrap scripts--> <!--Bootstrap scripts-->
<script src="../script/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="../script/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../script/bootstrap.min.js" type="text/javascript"></script> <script src="../script/bootstrap.min.js" type="text/javascript"></script>
<script src="../script/site.js" type="text/javascript"></script> <script src="../script/parallax.min.js" type="text/javascript"></script>
</body> </body>
</html> </html>

BIN
book/Section1.docx
View file

Binary file not shown.

BIN
book/submission-cover.pdf Normal file
View file

Binary file not shown.

172
css/site.css
View file

@ -1,83 +1,63 @@
@charset "utf-8"; @charset "utf-8";
/* CSS Document */ /* CSS Document */
body { body {
font-size: 14pt; font-size: 14pt;
} }
.background-grid { .background-grid {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
min-height: 150px; min-height: 150px;
} }
.background-home { .background-home {
background-image: url(../img/woman-keeping-records.jpg); background-image: url(../img/woman-keeping-records.jpg);
}
.background-eclipse {
background-image: url(../img/total-solar-eclipse-scottsbluff-ne.jpg);
}
.background-bull-calf {
background-image: url(../img/number-2-bull-calf.jpg);
} }
.background-cover { .background-cover {
background-image: url(../img/Newnotebookandtexturewoodencoverwithpencil.jpg); background-image: url(../img/cover-bg-notebook.jpg);
} }
.background-sec-1 { .background-sec-1 {
background-image: url(../img/Close-up-of-a-very-nice-young-award-winner-cow.jpg); background-image: url("../img/sec1-bg-cowshow.jpg");
} }
.background-sec-2 { .background-sec-2 {
background-image: url(../img/winner.jpg); background-image: url("../img/sec2-bg-trophy.jpg");
} }
.background-sec-3 { .background-sec-3 {
background-image: url(../img/Manmakingspeech.jpg); background-image: url("../img/sec3-bg-gavel.jpg");
} }
.background-sec-4 { .background-sec-4 {
background-image: url(../img/Teamofvolunteerspickinguplitterinpark.jpg); background-image: url("../img/sec4-bg-cleanup.jpg");
} }
.background-sec-5 { .background-sec-5 {
background-image: url(../img/OldFashionWhiteChurchwithaSteeple.jpg); background-image: url("../img/sec5-bg-church.jpg");
} }
.background-sec-6 { .background-sec-6 {
background-image: url(../img/Oldscrollpaperonwoodenbackground.jpg); background-image: url("../img/sec6-bg-books.jpg");
} }
.background-sec-7 { .background-sec-7 {
background-image: url(../img/Prettywomanisaproffessionalphotographerwithdslrcamera.jpg); background-image: url("../img/sec7-bg-camera.jpg");
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.center-sm { .center-sm {
margin: auto; margin: auto;
} }
} }
.float-left { .float-left {
float: left; float: left;
} }
.float-right { .float-right {
float: right; float: right;
} }
/*From https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image*/ /*From https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image*/
.center-cropped { .center-cropped {
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
width: 100%; width: 100%;
height: 225px; height: 225px;
overflow: hidden; overflow: hidden;
display: block; display: block;
margin:auto;
} }
/* Set the image to fill its parent and make transparent */ /* Set the image to fill its parent and make transparent */
.center-cropped img { .center-cropped img {
min-height: 100%; min-height: 100%;
@ -90,98 +70,82 @@ body {
/*opacity: 0;*/ /*opacity: 0;*/
} }
/*From https://css-tricks.com/text-blocks-over-image/ */
.image-block { .image-block {
position: relative; position: relative;
width: 100%; /* for IE 6 */ width: 100%; /* for IE 6 */
} }
h6 {
h6 { color: white;
position: absolute; letter-spacing: -1px;
top: 0; font-size: 16pt;
left: 0;
width: 100%;
} }
.banner-heading {
h6 span { display: inline-block;
color: white; background: rgba(0, 0, 0, 0.7);
/*font: bold 24px/45px Helvetica, Sans-Serif;*/ padding: 2px 10px;
letter-spacing: -1px; position: relative;
background: rgba(0, 0, 0, 0.7); top: 25px;
padding: 2px; transition: 0.5s ease;
font-size: 16pt; margin: auto;
} }
.banner-heading:hover {}
.hover-contents:hover div {
top: 5px;
}
h6 span {}
h6 span.spacer { h6 span.spacer {
padding:0 2px; padding: 0 2px;
} }
.font-mono { .font-mono {
font-family: Menlo,Monaco,Consolas,"Courier New",monospace; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
overflow: hidden overflow: hidden
} }
.table-fixed-width { .table-fixed-width {
table-layout: fixed; table-layout: fixed;
font-size: smaller; font-size: smaller;
} }
.max-width-300 { .max-width-300 {
max-width: 300px; max-width: 300px;
} }
.max-width-100 { .max-width-100 {
max-width: 100px; max-width: 100px;
} }
.max-height-100 { .max-height-100 {
max-height: 100px; max-height: 100px;
} }
p { p {
font-size: 14pt; font-size: 14pt;
} }
h1 { h1 {
font-variant-caps: all-petite-caps; font-variant-caps: all-petite-caps;
} }
h1 small { h1 small {
font-variant-caps: normal; font-variant-caps: normal;
} }
h2 { h2 {
padding-top: 12pt; padding-top: 12pt;
font-variant-caps: all-petite-caps; font-variant-caps: all-petite-caps;
} }
h3 { h3 {
font-weight: bolder; font-weight: bolder;
font-size: larger; font-size: larger;
} }
h4 { h4 {
text-decoration: underline; text-decoration: underline;
font-size: larger; font-size: larger;
} }
h5 { h5 {
font-style: italic; font-style: italic;
font-size: larger; font-size: 14pt;
text-decoration: underline; text-decoration: underline;
} }
blockquote { blockquote {
background: linear-gradient(to right,lightgray,#F3F3F3); background: linear-gradient(to right, lightgray, #F3F3F3);
border-left: 5px solid black ; border-left: 5px solid black;
} }
.underlined { .underlined {
text-decoration: underline; text-decoration: underline;
} }
th, td { th, td {
vertical-align: top; vertical-align: top;
} }

BIN
img/Background.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 386 KiB

BIN
img/Close-up-of-a-very-nice-young-award-winner-cow.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 416 KiB

BIN
img/Man making speech.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 274 KiB

BIN
img/Manmakingspeech.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
img/Newnotebookandtexturewoodencoverwithpencil.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
img/Old Fashion White Church with a Steeple.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 733 KiB

BIN
img/Old scroll paper on wooden background..jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 360 KiB

BIN
img/OldFashionWhiteChurchwithaSteeple.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
img/Oldscrollpaperonwoodenbackground.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
img/Pretty woman is a proffessional photographer with dslr camera.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 265 KiB

BIN
img/Prettywomanisaproffessionalphotographerwithdslrcamera.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
img/Team of volunteers picking up litter in park.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 361 KiB

BIN
img/Teamofvolunteerspickinguplitterinpark.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
img/cover-bg-notebook.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 295 KiB

BIN
img/number-2-bull-calf.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 MiB

BIN
img/sec1-bg-cowshow.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
img/sec2-bg-trophy.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
img/sec3-bg-gavel.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
img/sec4-bg-cleanup.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
img/sec5-bg-church.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 522 KiB

BIN
img/sec6-bg-books.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
img/sec7-bg-camera.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
img/total-solar-eclipse-scottsbluff-ne.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 110 KiB

BIN
img/winner.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 386 KiB

6
script/parallax.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

20
script/site.js
View file

@ -1,13 +1,13 @@
// JavaScript Document // JavaScript Document
// From https://css-tricks.com/text-blocks-over-image/ // From https://css-tricks.com/text-blocks-over-image/
$(function() { //$(function() {
'use strict'; // 'use strict';
//
$("h6") // $("h6")
.wrapInner("<span>"); // .wrapInner("<span>");
//
$("h6 br") // $("h6 br")
.before("<span class='spacer'>") // .before("<span class='spacer'>")
.after("<span class='spacer'>"); // .after("<span class='spacer'>");
}); //});