more work...

\
This commit is contained in:
Thomas A. Christensen II 2017-08-06 20:11:38 -06:00
parent 71e3b57c34
commit 2c14bd2521
7 changed files with 175 additions and 18 deletions

View file

@ -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>

View file

@ -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>
</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>

View file

@ -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>

102
Section6.html Normal file
View file

@ -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>

View file

@ -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>

View file

@ -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;
@ -66,3 +67,29 @@
/* 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;
}

13
script/site.js Normal file
View file

@ -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'>");
});