more work...

\

Cover.html

@@ -110,8 +110,10 @@
 
 	
 </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/site.js" type="text/javascript"></script>
 </body>
 <!-- InstanceEnd --></html>

Index.html

@@ -107,43 +107,43 @@
 		<div class="row">
 			<div class="col-sm-2 background-grid background-cover">
 				<a href="Cover.html">
-					<h3 class="background-transparent">Cover Page</h3>
+					<h4>Cover Page</h4>
-				</a>
+				</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>
+					<h4>Section 1<br />Project Record</h4>
 				</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>
+					<h4 class="background-transparent">Section 2<br />Awards and Recognitions</h4>
 				</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>
+					<h4 class="background-transparent">Section 3<br />Leadership</h4>
 				</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>
+					<h4 class="background-transparent">Section 4<br />Community Service</h4>
 				</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>
+					<h4 class="background-transparent">Section 5<br />Participation &amp; Non-4-H Experiences</h4>
 				</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>
+					<h4 class="background-transparent">Section 6<br />My 4-H Story</h4>
 				</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>
+					<h4 class="background-transparent">Section 7<br />Photographs and Clippings</h4>
 				</a>
 			</div>
 		</div>
@@ -160,8 +160,10 @@
 
 	
 </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/site.js" type="text/javascript"></script>
 </body>
 <!-- InstanceEnd --></html>

Section1.html

@@ -62,12 +62,12 @@
 				<a href="book/Section1.docx" class="btn btn-primary">
 					<img src="img/Microsoft-Word-New.svg" alt="Microsoft Word Format"/>
 					&ensp;
-					Project Record Form
+					Form
 				</a>
 				<a href="example/Section_1.pdf" class="btn btn-danger">
 					<img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/>
 					&ensp;
-					Project Record Examples
+					Examples
 				</a>
 			</div>
 		</div>
@@ -83,7 +83,10 @@
 		Section 1 takes up the most time and space in a vetern 4-Her's record book, so we will spend a good deal of time talking about it here.
 	</p>
 	
-	<h2>Requirements</h2>
+	<h2>
+		<a id="requirements"></a>
+		Requirements
+	</h2>
 	<table class="table table-bordered table-hover table-responsive table-striped">
 		<tr>
 			<th></th>
@@ -92,7 +95,7 @@
 			<th>Seniors<span class="visible-md visible-lg"><small> (Ages 14+)</small></span></th>
 		</tr>
 		<tr>
-			<th>Minimum # of Goals</th>
+			<th><a href="#goals">Minimum # of Goals</a></th>
 			<td>Two (2)</td>
 			<td>Three (3)</td>
 			<td>Four (4)</td>
@@ -116,7 +119,11 @@
 			<td colspan="3">Lists exhibitions and placings from entire year.</td>
 		</tr>
 	</table>
-	<h2>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>
@@ -128,8 +135,10 @@
 
 	
 </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/site.js" type="text/javascript"></script>
 </body>
 <!-- InstanceEnd --></html>

Section6.html

@@ -0,0 +1,102 @@
+<!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 6 - My 4-H Story</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" -->
+		<img class="img-responsive img-thumbnail float-left center-cropped" src="img/Oldscrollpaperonwoodenbackground.jpg" alt="4-H Story on Parchmentd" />
+	<h1>
+		Section 6<br />
+		<small>My 4-H Story</small>
+	</h1>
+	
+	<div class="clearfix"></div>
+	
+	<div class="row">
+		<div class="col-md-6 col-md-offset-3">
+			<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;
+					Form
+				</a>
+				<a href="book/Section6-ruled.pdf" class="btn btn-danger">
+					<img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format" />
+					&ensp;
+					Ruled Form
+				</a>
+				<a href="example/Section_1.pdf" class="btn btn-danger">
+					<img src="img/Adobe-Acrobat.svg" alt="Adobe Acrobat PDF Format"/>
+					&ensp;
+					Examples
+				</a>
+			</div>
+		</div>
+	</div>
+	
+	<blockquote>
+		My [story] is finished now: no wrath of Jove<br />
+		nor sword nor fire nor futurity<br />
+		is capable of laying waste to it.
+		<small><em>The Metamorphoses</em> by Ovid</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>
+<script src="script/site.js" type="text/javascript"></script>
+</body>
+<!-- InstanceEnd --></html>

Templates/_template.dwt

@@ -57,8 +57,10 @@
 
 	
 </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/site.js" type="text/javascript"></script>
 </body>
 </html>

css/site.css

@@ -7,9 +7,6 @@
 	min-height: 150px;
 }
 
-.background-transparent {
-	background-color: #FFFFFF99;
-}
 .background-cover {
 	background-image: url(../img/Newnotebookandtexturewoodencoverwithpencil.jpg);
 }
@@ -46,6 +43,10 @@
 	float: left;
 }
 
+.float-right {
+	float: right;
+}
+
 /*From https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image*/
 .center-cropped {
   width: 100px;
@@ -65,4 +66,30 @@
   filter: alpha(opacity=0);
   /* modern browsers */
   opacity: 0;
-}
+}
+
+/*From https://css-tricks.com/text-blocks-over-image/ */
+.image-block {
+	position: relative; 
+	width: 100%; /* for IE 6 */
+}
+
+h4 { 
+   position: absolute; 
+   top: 0; 
+   left: 0; 
+   width: 100%; 
+}
+
+h4 span {
+   color: white; 
+   /*font: bold 24px/45px Helvetica, Sans-Serif;*/
+   letter-spacing: -1px;  
+   background: rgba(0, 0, 0, 0.7);
+   padding: 2px; 	
+}
+
+h4 span.spacer {
+	   padding:0 2px;
+}
+

script/site.js

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