Continued work...

This commit is contained in:
Thomas A. Christensen II 2017-07-29 13:46:04 -06:00
parent a080026672
commit 09fa1f642b
13 changed files with 250 additions and 3 deletions

78
Cover.html Normal file
View file

@ -0,0 +1,78 @@
<!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 ~ Cover Page</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-md-8 col-md-offset-2">
<!-- InstanceBeginEditable name="MainBody" -->
<img class="img-responsive img-thumbnail center-cropped float-left" src="img/Newnotebookandtexturewoodencoverwithpencil.jpg" alt="Cover notebook" />
<h1>
Cover Page
<br />
<small>The start to every record book</small>
</h1>
<div class="clearfix"></div>
<blockquote>
Let's start at the very beginning,<br />
That's a very good place to start.
<small>Maria von Trapp in <em>The Sound of Music</em></small>
</blockquote>
<!-- 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>
</body>
<!-- InstanceEnd --></html>

View file

@ -5,7 +5,8 @@
<!-- InstanceBeginEditable name="doctitle" --> <!-- InstanceBeginEditable name="doctitle" -->
<title>Albany County 4-H Record Book Portfolios ~ Home</title> <title>Albany County 4-H Record Book Portfolios ~ Home</title>
<!-- InstanceEndEditable --> <!-- InstanceEndEditable -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" --> <!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable --> <!-- InstanceEndEditable -->
</head> </head>
@ -49,11 +50,108 @@
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<!-- InstanceBeginEditable name="MainBody" --> <!-- InstanceBeginEditable name="MainBody" -->
<img class="img-responsive img-thumbnail float-left center-cropped" src="img/woman-keeping-records.jpg" alt="Woman enjoying record keeping" />
<h1> <h1>
4-H Record Book Portfolios 4-H Record Book Portfolios
<br /> <br />
<span class="small">for Albany County, Wyoming</span> <span class="small">for Albany County, Wyoming</span>
</h1> </h1>
<p>
Welcome! 4-H Record Books are the culmination of the 4-H experience.
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.
That is a worthy question, and so I have come up with the following reasons for completing record books.
</p>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Youth Development (Parent's) Reasons</h3>
</div>
<div class="panel-body">
<ul>
<li>Youth develop professsional record-keeping habits</li>
<li>Youth learn to follow appropriate standards while maintaining creativity and flexibility</li>
<li>Youth learn to communicate strengths and acomplishments to others without braggish manerisms</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Fun (Kid's) Reasons</h3>
</div>
<div class="panel-body">
<ul>
<li>You can earn great prizes (and there are alot of them) at the county level</li>
<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>
<li>Record books are fun to read! (Maybe I like gathering blackmail material from record books too much.)</li>
</ul>
</div>
</div>
</div>
</div>
<h2>So, let's dive right in!</h2>
<p>
Click a box below to be taken to a page containing the appropriate forms and info on how to fill them out.
</p>
<div class="row">
<div class="col-sm-2 background-grid background-cover">
<a href="Cover.html">
<h3 class="background-transparent">Cover Page</h3>
</a>
</div>
<div class="col-sm-5 background-grid background-sec-1">
<a href="Section1.html">
<h3 class="background-transparent">Section 1<br />Project Record</h3>
</a>
</div>
<div class="col-sm-2 background-grid background-sec-2">
<a href="Section2.html">
<h3 class="background-transparent">Section 2<br />Awards and Recognitions</h3>
</a>
</div>
<div class="col-sm-3 background-grid background-sec-3">
<a href="Section3.html">
<h3 class="background-transparent">Section 3<br />Leadership</h3>
</a>
</div>
<!--New row-->
<div class="col-sm-3 background-grid background-sec-4">
<a href="Section4.html">
<h3 class="background-transparent">Section 4<br />Community Service</h3>
</a>
</div>
<div class="col-sm-2 background-grid background-sec-5">
<a href="Section5.html">
<h3 class="background-transparent">Section 5<br />Participation &amp; Non-4-H Experiences</h3>
</a>
</div>
<div class="col-sm-4 background-grid background-sec-6">
<a href="Section6.html">
<h3 class="background-transparent">Section 6<br />My 4-H Story</h3>
</a>
</div>
<div class="col-sm-3 background-grid background-sec-7">
<a href="Section7.html">
<h3 class="background-transparent">Section 7<br />Photographs and Clippings</h3>
</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 --> <!-- InstanceEndEditable -->
</div> </div>
</div> </div>

View file

@ -5,7 +5,8 @@
<!-- InstanceBeginEditable name="doctitle" --> <!-- InstanceBeginEditable name="doctitle" -->
<title>Albany County 4-H Record Book Portfolios ~ Section 1 - Project Record</title> <title>Albany County 4-H Record Book Portfolios ~ Section 1 - Project Record</title>
<!-- InstanceEndEditable --> <!-- InstanceEndEditable -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" --> <!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable --> <!-- InstanceEndEditable -->
</head> </head>
@ -49,6 +50,7 @@
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2">
<!-- InstanceBeginEditable name="MainBody" --> <!-- InstanceBeginEditable name="MainBody" -->
<img class="img-responsive img-thumbnail float-left center-cropped" src="img/Close-upofaveryniceyoungawardwinnercow.jpg" alt="4-H Breeding Beef Project" />
<h1> <h1>
Section 1<br /> Section 1<br />
<small>Project Record</small> <small>Project Record</small>

View file

@ -5,7 +5,8 @@
<!-- TemplateBeginEditable name="doctitle" --> <!-- TemplateBeginEditable name="doctitle" -->
<title>Albany County 4-H Record Book Portfolios ~</title> <title>Albany County 4-H Record Book Portfolios ~</title>
<!-- TemplateEndEditable --> <!-- TemplateEndEditable -->
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/site.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --> <!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable --> <!-- TemplateEndEditable -->
</head> </head>

68
css/site.css Normal file
View file

@ -0,0 +1,68 @@
@charset "utf-8";
/* CSS Document */
.background-grid {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 150px;
}
.background-transparent {
background-color: #FFFFFF99;
}
.background-cover {
background-image: url(../img/Newnotebookandtexturewoodencoverwithpencil.jpg);
}
.background-sec-1 {
background-image: url(../img/Close-upofaveryniceyoungawardwinnercow.jpg);
}
.background-sec-2 {
background-image: url(../img/winner.jpg);
}
.background-sec-3 {
background-image: url(../img/Manmakingspeech.jpg);
}
.background-sec-4 {
background-image: url(../img/Teamofvolunteerspickinguplitterinpark.jpg);
}
.background-sec-5 {
background-image: url(../img/OldFashionWhiteChurchwithaSteeple.jpg);
}
.background-sec-6 {
background-image: url(../img/Oldscrollpaperonwoodenbackground.jpg);
}
.background-sec-7 {
background-image: url(../img/Prettywomanisaproffessionalphotographerwithdslrcamera.jpg);
}
.float-left {
float: left;
}
/*From https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image*/
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Set the image to fill its parent and make transparent */
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
img/Manmakingspeech.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
img/winner.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB