<body>
<!-- use better classnames -->
<div class="wrap background">
<!-- Assuming this is the first thing on this page then headings must start logically at h1 -->
<h1 class="page-heading">The Hutchins Clan</h1>
<h2 class="page-subheading">Charles Haddon Spurgeon Hutchins<br></h2>
<div class="personal-pages-container">
<!-- column 1 -->
<div class="photo-container">
<div class="imgwrap">
<img src="https://picsum.photos/id/1016/500/400" alt="page 1" class="scrapbook-right">
</div>
</div>
<!-- column 2 -->
<!-- put 3 rows inside this one column -->
<div class="life">
<div class="birth-details-container offset-heading">
<h3 class="title">Birth</h3>
<dl class="details">
<dt>Date:</dt>
<dd>May 27, 1894</dd>
<dt>Mother:</dt>
<dd>Mary Lyzinthe (Tabor) Hutchins</dd>
<dt>Father:</dt>
<dd>Franklin Pierce Hutchins</dd>
<dt>Place:</dt>
<dd>Needmore Community, Nantahala Township, Swain County, North Carolina</dd>
<dt>Siblings:</dt>
<dd>Robert Leroy "Lee" Hutchins, Lydia DeHart Hutchins, Amanda Jane Hutchins, James Alfred Hutchins, John Henry Hutchins, William Carey Hutchins (died in infancy)</dd>
</dl>
</div> <!-- END of .birth-details-container / Dave's .container -->
<div class="marriage-details-container offset-heading">
<h3 class="title">Marriage</h3>
<dl class="details">
<dt>Date:</dt>
<dd>September 22, 1923</dd>
<dt>Spouse:</dt>
<dd>Healy Heady Mauden Bake</dd>
<dt>Place:</dt>
<dd>Raleigh, Wake County, North Carolina <br>
in the home of Pastor Maddrey</dd>
</dl>
</div> <!-- END of .marriage-details-container / Dave's .container -->
<div class="death-details-container offset-heading">
<h3 class="title">Death</h3>
<dl class="details">
<dt>Date:</dt>
<dd>January 5, 1964</dd>
<dt>Place:</dt>
<dd>Raleigh, Wake County, North Carolina at Rex Hospital</dd>
<dt>Burial:</dt>
<dd>Montlawn Memorial Park, Raleigh, Wake County, North Carolina</dd>
</dl>
</div> <!-- END of .death-details-container / Dave's .container -->
</div><!-- end life container which contained births marriages and deaths.-->
<!-- column 3 -->
<div class="bio-container offset-heading">
<h3 class="title">Biography</h3>
<div class="content">
<p>Spurgeon was born in a cabin near Bryson City, North Carolina. He was named for Charles Haddon Spurgeon, a nother 19th Century English preacher. His father contracted "consumption" (tuberculosis) and died before his 40th birthday in January, 1899. He was not yet 4 years old. His mother and oldest brother worked the farm for a year but had to abandon the effort, it being too strenuous and difficult for them to accomplish. As a result, Spurgeon and his brothers James Alfred and John Henry were placed in the Baptist Orphanage at Thomasville, North Carolina, (later to be called Mills Home) in 1900 before his 5th birthday. He often spoke fondly of Miss Sallie McCracken who was a caretaker at the orphanage. He acquired the nickname "Spiggin" at the orphanage.</p>
<p>He and his brothers received primary and secondary education at the orphanage. Later, based on his superior intelligence he matriculated at Mars Hill College despite no financial resources available to him. He attended two terms at Mars Hill and left after the Spring Term of 1910 at 16 years of age.</p>
<p>During his time at the orphanage, Spurgeon worked in a print shop where. After leaving Mars Hill, he found work in a print shop in Ducktown, TN, where his older brother Lee was working. They lived together in a boarding house for about a year. Spurgeon, having learned of the Government Printing Office in Washington, DC, decided in 1911 to move and work there. Enroute to Washington from Tennessee, he stopped over in Raleigh where his brother, John, was living and working. He so enjoyed Raleigh that he found employment and remained in Raleigh.</p>
<p>Spurgeon worked at various printing establishments in Raleigh, including Edwards and Broughton, the Raleigh TImes, the News and Observer, and eventully at Bynum Printing Company. In 1928 he started a small printing business but the timing was ill-fated. The Great Depression caused him to lose his business and most of his assets. During his career as a printer, Spurgeon became a journey linotype operator and member of the International Typographical Union, Chapter 53 and was a member for more than 40 years. During World War I, he was turned down for the draft because he was underweight, a condition caused by early childhood malnutrition endured at the orphanage. As the Great Depression waned, Spurgeon found employment at Bynum Printing Company on West Hargett Street. He gained the reputation of being the premier linotype operator in Raleigh, although he refused the accolade, deferring to others.</p>
<p>In 1920, he met Healy Baker, a Raleigh girl who also worked in a printing shop. They married September 23, 1922, in Raleigh in home of Reverend Charles Maddrey, a noted Baptist minister. Their first child was born July 5, 1924, followed by the births of eight more children over the next 18 years.</p>
<p>They lived in various homes in Raleigh (Holt Avenue, now Holden Street, and Wake Forest Road) until losses caused by the Great Depression caused them to rent a house and land on the property owned by the Catholic Orphanage outside Raleigh in Nazareth township. South of the NC State University campus. This area was incorporated into Raleigh as time passed and is now near the heart of the city. Spurgeon used skills acquired while tending gardens at the orphanage to raise a garden and livestock . . . chickens, pigs and a cow. This and occasional days of work at local print shops allowed the family to survive the Depression. A set of twins, James and John, were born at home at the Nazareth farm.</p>
<p>In 1933, Healy and Spurgeon moved to 527 N. East Street in Raleigh where they lived until December 1965, almost 2 years after his death. The last 3 children were born in local hospitals while they lived on East Street. The house stands (as of 2025) near the north-most boundary of the the original plat for the city, laid out in 1795. It is less than a mile from both the Governor's Mansion and the State Capitol buildings.</p>
</div>
</div><!-- end bio -->
</div><!-- close personal pages container as the grid is not needed anymore -->
<div class="children-container offset-heading ">
<h3 class="title">Children</h3> <!-- from Dave -->
<div class="content">
<p>William Spurgeon Hutchins "Bill",
Charles Baker Hutchins,
Frank Tabor Hutchins,
Elizabeth Lee Hutchins "Baby Lee",
James Alfred Hutchins,
John Fox Hutchins,
Mary JoAn Hutchins "Mary Jo" - "Jo",
Nancy Catherine Hutchins,
Robert Haddon Hutchins </p>
</div> <!-- END of .content -->
</div> <!-- END of .children-container / Dave's .container -->
<div class="thumbnails-container offset-heading">
<h3 class="title">Thumbnails</h3>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra est sed lacus imperdiet, ut tristique urna feugiat. Morbi mauris erat, congue a aliquam a, consectetur cursus nunc. Fusce et eleifend justo. Sed vitae magna hendrerit, volutpat elit eget, vestibulum quam. Maecenas congue nibh vitae placerat lacinia. Maecenas consectetur maximus tortor. Duis quis egestas leo. In hac habitasse platea dictumst. Nunc tincidunt auctor bibendum. Mauris nec vehicula neque.</p>
</div>
</div> <!-- END of .thumbnails-container -->
</div> <!-- END of .wrap -->/* filename: clan.css */
/* design and create a header - maybe just a line of menu items */
/* PaulOB's CSS */
.scrapbook {
background-color: rgb(234, 217, 201);
max-width: 1000px;
margin: 1rem auto 2rem;
padding: 1rem 2rem;
border: 3px solid #999;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 20px;
font-family: birthstone;
}
h2.page-heading,
h3.page-subheading {
margin: 0.5rem 0;
text-align: center;
font-family: birthstone;
font-size: 2.5rem;
font-weight: normal; /* my addition; 15 May 2025 */
line-height: 1;
}
h3.page-subheading {
margin: 0 0 1rem;
font-size: 1.5rem;
font-weight: normal; /* my addition; 15 May 2025 */
}
.scrapbook-frame {
display: grid;
gap: 1rem;
border: 2px solid #000;
grid-template-columns: 1fr 1fr;
page-break-after: always;
}
.scrapbook-left,
.scrapbook-right {
grid-column: 1;
padding: 0.5rem 0 0.5rem 0.5rem;
box-sizing: border-box;
}
.scrapbook-right {
grid-column: 2;
padding: 0.5rem 0.5rem 0.5rem 0;
}
.scrapbook-left img,
.scrapbook-right img {
max-width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.scrapbook-page-number {
text-align: right;
font-size: 1.1rem;
margin: 0.5rem 0;
}
@media screen and (max-width: 600px) {
.scrapbook-frame {
display: block;
}
.scrapbook-left,
.scrapbook-right {
grid-column: 1;
padding: 0.5rem;
}
.scrapbook-left img,
.scrapbook-right img {
border: 1px solid #999;
}
h2.page-heading {
font-size: 2.125rem;
}
h3.page-subheading {
font-size: 1.5rem;
}
}
/* END of PaulOB's CSS */
.normal {
line-height: normal;
}
.compressed-height {
line-height: 0.9;
}
/* .scrapbook-frame .scrapbook-left, scrapbook-right, scrapbook-page-number all replaced by PaulOB's CSS
.scrapbook-frame
{
display: grid;
width: 1000px;
height: 400px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 2px;
border-radius: 2px;
grid-template-columns: 500px 500px;
grid-template-rows: 40px 185px 35px;
page-break-after: always;
}
.scrapbook-left
{
grid-row: 1;
grid-column: 1;
display: block;
width: 540px;
height: 400px;
object-fit: contain;
}
.scrapbook-right
{
grid-row: 1;
grid-column: 2;
display: block;
width: 540px;
height: 400px;
object-fit: contain;
page-break-after: always;
}
.scrapbook-page-number
{
grid-row: 3;
grid-column: 2;
width: 35px;
height: 12px;
margin-top: 180px;
margin-left: 450px;
font-size: 1.1rem;
}
*/
/*.page-background replaced by PaulOB's .scrapbook renamed .background
{
background-color: rgb(234, 217, 201);
width: 1085px;
height: 555px;
margin-left: auto;
margin-right: auto;
border-style: ridge;
border-width: 6px;
border-radius: 20px;
font-family: birthstone;
}
*/
.background {
background-color: rgb(234, 217, 201);
max-width: 1100px;
margin: 1rem auto 2rem;
padding: 1rem 2rem;
border: 3px solid #999;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
border-radius: 20px;
font-family: birthstone;
}
/* .page-heading defer to PaulOB's code
{
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: birthstone;
font-size: 5.125rem;
}
.page-subheading
{
margin-left: auto;
margin-right: auto;
margin-top: -20px;
font-family: birthstone;
font-size: 1.875rem;
}
*/
.no-bullets {
list-style-type: none;
margin: 0;
padding: 0;
}
.home-page {
display: grid;
margin-left: auto;
margin-right: auto;
font-family: birthstone;
font-size: 2.5rem;
text-align: center;
grid-template-columns: 250px 295px 255px;
grid-template-rows: 40px 185px 35px;
}
.main-menu /* attributes for grid box 1 */ {
grid-row: 1;
grid-column: 1;
display: block;
width: 140px;
height: 345px;
font-family: birthstone;
font-size: 1.25rem;
line-height: 1.6;
margin-top: 60px;
margin-left: 35px;
margin-right: 40px;
/* border-style: ridge;
border-width: 5px;
border-radius: 5px; */
padding-top: 12px;
padding-left: 12px;
text-align: left;
}
.parents-photo-heading,
.family-photo-heading {
grid-row: 1;
grid-column: 2;
width: 254px;
height: 35px;
margin-top: 35px;
font-size: 1.875rem;
font-weight: normal;
}
.family-photo-heading {
grid-row: 1;
grid-column: 3;
margin-left: -80px;
width: 642px;
height: 25px;
margin-top: 35px;
}
.parents-photo /* attributes for grid box 2 */ {
grid-row: 2;
grid-column: 2;
width: 254px;
height: 254px;
margin-right: 30px;
/* border-style: ridge;
border-width: 5px;
border-radius: 5px;*/
object-fit: contain;
}
.parents-photo-caption {
grid-row: 3;
grid-column: 2;
width: 234px;
margin-top: 65px;
font-size: 1rem;
font-weight: normal;
line-height: 0.95;
}
.family-photo /* attributes for grid box 3 */ {
grid-row: 2;
grid-column: 3;
width: 500px;
height: 250px;
/* border-style: ridge;
border-width: 5px;
border-radius: 5px; */
object-fit: contain;
}
.family-photo-caption {
grid-row: 3;
grid-column: 3;
width: 480px;
height: 30px;
margin-top: 65px;
font-size: 1rem;
font-weight: normal;
line-height: 0.95;
}
.container {
position: relative;
border: 1px solid black;
width: 40%;
margin-inline-start: 2rem;
padding: 0.5rem 2rem; /* .5 is top / bottom; 2 is right / left */
}
.title {
position: absolute;
top: -0.5rem; /* places .title in top border */
left: 0.125rem; /* starts .title 1/8th rem from left*/
background-color: rgb(234, 217, 201); /* blends to .background color */
padding: 0 0.5rem; /* 0 is top/bottom; .5 is right/left */
font-weight: normal;
}
dl {
display: grid;
column-gap: 0.5rem;
grid-template-columns: max-content;
}
dt {
font-weight: normal;
}
dd {
margin: 0;
grid-column-start: 2;
}
.personal-pages-container {
display: grid;
gap: 15px 40px;
grid-template-columns: 250px 350px 225px;
/*grid-template-rows: 100px 100px 100px 55px 55px; */
font-size: 1.1rem;
font-weight: 500;
}
.personal-pages-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: left;
height: auto;
font-size: 1.1rem;
line-height: 0.95;
}
.photo-container {
grid-row: 1;
grid-column: 1;
width: 100%;
height: auto;
margin-left: 30px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
padding: 2px; /* all sides */
object-fit: contain;
}
.birth-details-container,
.marriage-details-container,
.death-details-container,
.children-container,
.bio-container,
.thumbnails-container {
position: relative;
border: 1px solid black;
border-radius: 5px;
padding: 0.1rem 0.5rem; /* .1 is top/bottom; .5 is right/left */
line-height: 0.95rem;
}
.birth-details-container {
grid-row: 1;
grid-column: 2;
width: 100%;
}
.bio-container {
grid-row: 1;
grid-column: 3;
width: 100%;
height: auto;
}
.marriage-details-container {
grid-row: 2;
grid-column: 2;
width: 100%;
}
.death-details-container {
grid-row: 3;
grid-column: 2;
width: 100%;
}
.children-container {
grid-row: 4;
grid-column: 1 / span 3;
column-span: auto;
width: 100%;
}
.thumbnails-container {
grid-row: 5;
grid-column: 1 / span 3;
line-height: 2rem;
width: 100%;
}
.photo-caption {
text-align: center;
font-size: 1.25rem;
}
.small-photo-caption {
text-align: center;
font-size: 0.875rem;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row {
content: "";
clear: both;
display: table;
}
/* filename: clan.css */
/* design and create a header - maybe just a line of menu items */
.ancestor-container /* Rename .lineage-grid */ {
display: grid;
grid-template-columns: 250px 350px 350px;
/*grid-template-columns: 1fr 3fr 2fr;*/
grid-template-rows: 40px 185px 185px;
grid-gap: 15 50;
}
.ancestor-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: left;
padding-left: 9px;
padding-top: 1px;
font-size: 1.1875rem;
line-height: 0.95;
}
.ancestor-offspring {
font-size: 16px;
}
.ancestor-container > .ancestor-page-title
/* Title container */ {
text-align: center;
font-family: birthstone;
font-size: 35px;
padding-top: 7px;
}
.ancestor-page-title {
width: 400px;
height: 40px;
margin-top: 10px;
margin-left: 400px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
}
.underline {
text-decoration: underline red;
}
.ancestor-container > .page-number
/* Page Number container */
.page-number {
grid-row: 1;
grid-column: 3;
width: 50px;
height: 20px;
margin-top: 30px;
margin-right: 60px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
font-family: birthstone;
line-height: 1.25;
}
.next-page {
grid-row: 2;
grid-column: 3;
width: 95px;
height: 20px;
margin-top: 685px;
margin-left: 320px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
font-family: birthstone;
line-height: 1.25;
}
.box-1 /* row 1; column 1 */ {
grid-row: 2;
grid-column: 1;
width: 325px;
height: 185px;
margin-top: 115px;
margin-left: 10px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
font-family: birthstone;
line-height: 1.25;
}
.box-2 /* row 1; column 2 */ {
grid-row: 2;
grid-column: 2;
width: 325px;
height: 185px;
margin-top: 145px;
margin-left: 40px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
font-family: birthstone;
line-height: 1.25;
}
.box-3 /* row 1; column 3 */ {
grid-row: 2;
grid-column: 3;
width: 325px;
height: 185px;
margin-top: 175px;
margin-left: 60px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
font-family: birthstone;
line-height: 1.25;
}
.box-4 /* row 2; column 1 */ {
grid-row: 3;
grid-column: 1;
width: 325px;
height: 185px;
margin-top: 200px;
margin-left: 40px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
font-family: birthstone;
line-height: 1.25;
}
.box-5 /* row 2; column 2 */ {
grid-row: 3;
grid-column: 2;
width: 325px;
height: 185px;
margin-top: 240px;
margin-left: 70px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
font-family: birthstone;
line-height: 1.25;
}
.box-6 /* row 2; column 3 */ {
grid-row: 3;
grid-column: 3;
width: 325px;
height: 185px;
margin-top: 260px;
margin-left: 100px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
font-family: birthstone;
line-height: 1.25;
}
.hline {
width: 50px;
height: 4px;
color: blue;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.