<!DOCTYPE html>
<html lang="en-US">
<head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link type="text/css" 
        rel="stylesheet" href="Home-Page.css" media="screen">

  <title>Personal-Pages</title>
</head>
<body>        
</body>
  <div class="background-wrap">
    <h1 class="heading">The Hutchins Clan</h1>    
    <div class="home-page">
      <div class="navbar">menu
      </div>  
      <div class="parents-photo-heading photo-heading">Healy and Pa
      </div>
      <div class="parents-photo">
      </div>
      <div class="parents-photo-caption photo-caption">Standing in front of their home at 527 N. East St., Raleigh, NC, ca. 1956
      </div>
      <div class="family-photo-heading photo-heading">The Family
      </div>
      <div class="family-photo">
      </div>
      <div class="family-photo-caption photo-caption">The <em>ONLY</em> photo taken of the whole family
      </div>
    </div> <!--   End of .home-page   -->
  </div>  <!--  END of .background-wrap   -->


</html>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 1rem;
}

.background-wrap {
  max-width: 1480px;
  margin: 1rem auto;
  padding: 1rem 1rem 2rem;
  background-color:  rgb(234, 217, 201);
  border: 3px solid #999;
  border-radius: 20px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
  font-family: birthstone;
}

h1.heading {
  margin-top: -.5rem;
  font-size: 5rem;
  font-weight: normal;
  text-align: center;
} 
h2.subheading {
  font-size: 3rem;
  font-weight: normal;
  text-align: center;

}

.home-page {
  display: grid; /* 3 rows / 3 columns*/
  gap: 1rem 3rem;
  grid-template-columns: 0.4fr .6fr 1.25fr;
  margin: 3rem 0;
}

.navbar {       /*  row 1 / column 2  */ 
  grid-row: 1;
  grid-column: 1;
  padding: .95rem 1rem 1rem 1.1rem;
  font-size: 2.25rem;
  text-align: left;
  border: 3px solid #999;
  border: radius 10px;
}

.parents-photo-heading {  /*  row 1 / column 2  */  
  grid-row: 1;
  grid-column: 2;
}

.parents-photo {  /*  row 2 / column 2  */ 
  grid-row: 2;
  grid-column: 2;
}

.parents-photo-caption {
  grid-row: 3;
  grid-column: 2;
}

.family-photo-heading {   /*  row 1 / column 3  */
  grid-row: 1;
  grid-column: 3;
}

.family-photo {   /*  row 2 / column 3  */
  grid-row: 2;
  grid-column: 3;
}

.family-photo-caption {
  grid-row: 3;
  grid-column: 3;
}
.photo-heading {
  font-size: 3.25rem;
  text-align: center;
}  

.photo-caption {
  font-size: 1.75rem;
  text-align: center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.