diff options
Diffstat (limited to 'templates/base.hbs')
| -rw-r--r-- | templates/base.hbs | 317 |
1 files changed, 317 insertions, 0 deletions
diff --git a/templates/base.hbs b/templates/base.hbs new file mode 100644 index 0000000..a16e6eb --- /dev/null +++ b/templates/base.hbs @@ -0,0 +1,317 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <title> + Tutoring Excellence Online and in Hampton Roads, 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; + } + + 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; + } + + table { + width: 100%; + border-collapse: collapse; + } + + 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 Hampton Roads, 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 Hampton Roads, 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="/about">About</a> + <a href="/policies">Policies</a> + <a href="/#pricing">Pricing</a> + <a href="/#offerings">Offerings</a> + <a href="/#"><img src="/assets/logo-simple.png" /></a> + </nav> + + <main> + {{~> main}} + </main> + + <footer> + <figure class="logo"> + <picture> + <source srcset="/assets/logo.webp" type="image/webp" /> + <source srcset="/assets/logo.png" type="image/png" /> + <img src="/assets/logo.png" /> + </picture> + </figure> + <p> + © + <!-- TODO:<?php echo date('Y'); ?>--> + Carpenter Tutoring, LLC. All rights reserved. + </p> + <p> + <a href="https://g.page/carpenter-tutoring?share">Visit me on Google</a> + | + <a href="https://g.page/carpenter-tutoring/review?np">Submit a review</a> + | + <a href="mailto:webmaster@carpentertutoring.com"> + Having trouble with our site? + </a> + </p> + </footer> +</body> + +</html> |