FAHOF

by the wazz

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<title>2006 Inductees</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="fahof.css">
	<link rel="apple-touch-icon" sizes="180x180" href="images/Favicon/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="images/Favicon/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="images/Favicon/favicon-16x16.png">
	<link rel="manifest" href="images/Favicon/site.webmanifest">
</head>
<div class="wrapper">
	<div class="header">
		<a href="index.html">Florence Athletic Hall of Fame</a>
	</div>

	<div id="sidenav">
		<ul>
			<li><a href="index.html">Home</a>
			</li>
			<li><a href="inductees.html">Inductees</a>
			</li>
			<li><a href="information.html">Information</a>
			</li>
			<li><a href="sponsors.html">Sponsors</a>
			</li>
			<li><a href="citations.html">Citations</a>
			</li>
		</ul>
	</div>

	<div class="gallery">
		<a href="2006/bennett_grant.html">
			<img src="2006/_images/Bennett_Grant_small.JPG" height="136px" style="border:3px solid #2F87D5"
				onmouseover="style='border:3px solid #000000'" onmouseout="style='border:3px solid #2F87D5'"
				alt="Coach Grant Bennett" />
		</a>

		<div class="name" style="text-align: center;"><a href="2006/bennett_grant.html">Coach<br>Grant Bennett</a>
		</div>
	</div>
	<div class="gallery">
		<a href="2006_inductees.html">
			<img src="2006/_images/Brunson_Lukie_small.JPG" height="136px" style="border:3px solid #2F87D5"
				onmouseover="style='border:3px solid #000000'" onmouseout="style='border:3px solid #2F87D5'"
				alt="Lukie Brunson">
		</a>
		<div class="name" style="text-align: center;"><a href="2006/brunson_lukie.html">Lukie Brunson</a></div>
	</div>
	<div class="gallery">
		<a href="2006_inductees.html">
			<img src="2006/_images/Carson_Harry_small.JPG" height="136px" style="border:3px solid #2F87D5"
				onmouseover="style='border:3px solid...

CSS

* {
  box-sizing: border-box;
}

html {
  background-color: #003366;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  background-color: #003366;
  color: #FFFFFF;
  height: auto;
}

@font-face {
  font-family: "Courgette";
  src: url(_fonts/courgette.woff2);
  src: url(_fonts/courgette.woff);
  src: url(_fonts/courgette.ttf);
}

@font-face {
  font-family: "Zilla-Med";
  src: url(_fonts/zilla/ZillaSlab-Medium.tff);
  src: url(_fonts/zilla/ZillaSlab-Medium.woff);
}

@font-face {
  font-family: "Zilla-Light";
  src: url(_fonts/zilla/ZillaSlab-Light.tff);
  src: url(_fonts/zilla/ZillaSlab-Light.woff);
}


.header {
  grid-column: 1 / 7;
  grid-row: 1;
  background-image: linear-gradient(#3EA3FA, #003366);
  font-family: courgette;
  color: #FFFFFF;
  text-align: center;
  font-size: 6.5vh;
  text-shadow: 5px 5px 5px #000000;
  padding-top: 1.3%;
  list-style-type: none;
}

.header a {
  list-style-type: none;
  text-decoration: none;
  color: #FFFFFF;
}

.responsive {
  width: 82%;
  height: auto;
}

.sportsHero {
  grid-column: 2 / 7;
  grid-row: 2 / 3;
  margin-left: 3%;
}

.years {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  grid-column: 2 / 7;
  grid-row: 2 / 5;
  width: 100%;
  font-size: 32px;
  width: 75%;
  margin-left: 3%;
  word-spacing: 100px;
}

.years a {
  list-style-type: none;
  text-decoration: none;
  color: #FFFFFF;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-right: 40%;
  padding-top: 15%;
}

.name a {
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  color: #FFFFFF;
  font-family: Zilla-Med;
}

.name a:hover {
  font-style: italic;
}

.name a:visited {
  text-align: center;
  list-style-type: none;
  text-decoration: none;
  color: #FFFFFF;
}

#sidenav {
  grid-column: 1;
  grid-row: 2 / 5;
  text-indent: 10%;
  color:...