path: root/header.php



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

<head>
	<title>
		Tutoring Excellence Online and in Suffolk, VA - Carpenter Tutoring, LLC
	</title>
	<style>
		/* Colors */
		:root {
			--darkteal: rgb(0, 100, 108);
			--green: rgb(88, 169, 143);
			--darkerteal: rgb(29, 133, 137);
			--gray: rgb(157, 210, 211);
			--teal: rgb(58, 165, 166);
			--cyan: rgb(156, 210, 210);
			--darkgray: rgb(127, 177, 181);
			--darkgreen: rgb(59, 136, 114);
			--yellow: rgb(186, 214, 187);
		}

		/* Elements */

		html,
		body {
			margin: 0;
			padding: 0;
			font-family: "PT Sans", sans-serif;
			color: dimgray;
		}

		body {
			background-image: url("/assets/bg.png");
		}

		.banner {
			font-size: 1em;
			text-align: center;
			padding: 3em;
			background-color: white;
		}

		nav {
			display: flex;
			background-color: white;
			flex-direction: column-reverse;
		}

		nav img {
			height: 1.4em;
		}

		nav a {
			font-family: "PT Sans", sans-serif;
			color: dimgray;
			text-align: center;
			text-decoration: none;
			padding: 1em 1em;
			transition: 0.15s;
		}

		nav a:hover {
			color: var(--darkteal);
			background-color: lightgray;
		}

		div.buttons {
			display: flex;
			flex-direction: column;
		}

		h1 {
			font-size: 3em;
			color: var(--darkteal);
			font-family: "Architects Daughter", cursive;
		}

		h2 {
			font-size: 2em;
			color: var(--darkteal);
			font-family: "Indie Flower", cursive;
		}

		em {

			color: var(--darkteal);
		}

		section {
			font-size: 1.5em;
			margin: 0;
			padding: 1em;
		}

		section.quiet {
			background-color: white;
		}

		.button img {
			margin-right: 1em;
		}

		button.button,
		a.button {
			display: flex;
			align-items: center;
			background-color: var(--teal);
			padding-left: 1em;
			padding-right: 1em;
			padding-top: 0.5em;
			padding-bottom: 0.5em;
			margin-right: 0.5em;
			margin-bottom: 0.5em;
			text-decoration: none;
			color: white;
			border-radius: 3em;
			transition: 0.15s;
		}

		button.button:hover,
		a.button:hover {
			box-shadow: 0 4px 8px 0 lightgray, 0 6px 20px 0 lightgray;
		}

		button {
			font-family: "PT Sans", sans-serif;
			border: none;
			font-size: 0.75em;
		}

		a.primary {
			background-color: var(--darkteal);
		}

		footer {
			background-color: white;
			text-align: center;
			padding: 3em;
			font-size: 1.5em;
		}

		footer a,
		section a {
			color: var(--darkteal);
			text-decoration: underline;
		}

		.card {
			font-size: 0.9em;
			background-color: white;
			padding: 1em;
			border-radius: 1em;
			margin-left: 0;
			margin-right: 0;
		}

		form input,
		form textarea {
			font-family: "PT Sans", sans-serif;
			margin-bottom: 1.5em;
			box-sizing: border-box;
			width: 100%;
			border: 1px solid lightgray;
			padding: 1em;
		}

		form input {
			border-radius: 3em;
		}

		textarea {
			border-radius: 1em;
			resize: none;
		}

		/* honeypot */
		textarea#beehive {
			display: none;
		}

		table {
			width: 100%;
			border-collapse: collapse;
		}

		table caption {
			text-align: left;
		}

		table th {
			text-align: right;
			color: var(--darkteal);
		}

		table td,
		table th {
			vertical-align: bottom;
		}

		tr:nth-child(even) {
			background-color: lightgray;
		}

		picture img {
			width: 100%;
		}

		.shadowy img {
			box-shadow: 0 4px 8px 0 dimgray, 0 6px 20px 0 dimgray;
		}

		figcaption {
			text-align: right;
			color: var(--darkteal);
			font-family: "Architects Daughter", cursive;
		}

		section.flexible {
			display: flex;
			flex-direction: column;
		}

		#reviews .card,
		#offerings .card {
			margin: 1em;
			text-align: center;
		}

		#reviews,
		#offerings {
			padding-left: 0;
			padding-right: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		.modal {
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: white;
			background-color: rgba(1, 1, 1, 0.4);
			overflow: auto;
			display: none;
			font-size: 1.5em;
		}

		.modal .card {
			max-height: 90%;
			max-width: 60%;
		}

		.modal a,
		.card a.button {
			float: right;
		}

		:target.modal {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		:target.modal .card {
			overflow: auto;
		}
	</style>
	<link rel="preconnect" href="https://fonts.gstatic.com" />
	<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Indie+Flower&family=PT+Sans&display=swap" rel="stylesheet" />
	<link rel="stylesheet" href="/desktop.css" />
	<link rel="stylesheet" href="/widescreen.css" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="description" content="Tutoring Excellence Online and in Suffolk, VA" />
	<meta property="og:description" content="Tutoring excellence online and in-person" />
	<meta property="og:image" content="http://carpentertutoring.com/assets/logo.webp" />
	<meta property="og:image:secure_url" content="https://carpentertutoring.com/assets/logo.webp" />
	<meta property="og:site_name" content="Carpenter Tutoring" />
	<meta property="og:title" content="Tutoring Excellence Online and in Suffolk, VA - Carpenter Tutoring, LLC" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="https://carpentertutoring.com" />
</head>

<body>
	<nav>
		<a href="/#contact">Contact Me</a>
		<a href="/#reviews">Reviews</a>
		<a href="/tutors">Tutors</a>
		<a href="/about">About</a>
		<a href="/policies">Policies</a>
		<a href="/#pricing">Pricing</a>
		<a href="/#offerings">Offerings</a>
		<a href="/#"><img alt="logo" src="/assets/logo-simple.png" /></a>
	</nav>

	<main>