diff options
| -rw-r--r-- | about/index.html | 2 | ||||
| -rw-r--r-- | index.html | 29 | ||||
| -rw-r--r-- | policies/index.html | 2 | ||||
| -rw-r--r-- | stylesheet.css | 57 |
4 files changed, 61 insertions, 29 deletions
diff --git a/about/index.html b/about/index.html index ac0e9d0..9528d82 100644 --- a/about/index.html +++ b/about/index.html @@ -82,7 +82,7 @@ <p>© 2021 Carpenter Tutoring, LLC. All rights reserved.</p> <p> <a href="mailto:webmaster@carpentertutoring.com"> - Questions, Comments, Feedback + Having trouble with our site? </a> </p> </footer> @@ -8,7 +8,7 @@ <link rel="stylesheet" href="/stylesheet.css" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link - href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Indie+Flower&family=PT+Sans&family=PT+Sans+Narrow&display=swap" + href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Indie+Flower&family=PT+Sans&display=swap" rel="stylesheet" /> <meta charset="utf-8" /> @@ -40,15 +40,13 @@ <body> <nav> - <a href="/#"> - <img src="/assets/logo-simple.png" /> - </a> - <a href="/#offerings">Offerings</a> - <a href="/#pricing">Pricing</a> - <a href="/policies">Policies</a> - <a href="/about">About</a> - <a href="/#reviews">Reviews</a> <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 class="logo" href="/#"><img src="/assets/logo-simple.png" /></a> </nav> <main> @@ -58,10 +56,13 @@ <h2> <b>Discovering <em>your</em> path to success</b> </h2> - <a class="button primary" href="tel:1-757-335-7555"> - Call (757) 335-7555</a - > - <a class="button" href="/#contact"> Contact me by Email</a> + + <div class="buttons"> + <a class="button" href="/#contact"> Contact me by Email</a> + <a class="button primary" href="tel:1-757-335-7555"> + Call (757) 335-7555</a + > + </div> </section> <!-- welcome--> @@ -261,7 +262,7 @@ <p>© 2021 Carpenter Tutoring, LLC. All rights reserved.</p> <p> <a href="mailto:webmaster@carpentertutoring.com"> - Questions, Comments, Feedback + Having trouble with our site? </a> </p> </footer> diff --git a/policies/index.html b/policies/index.html index a027aaa..103f97f 100644 --- a/policies/index.html +++ b/policies/index.html @@ -78,7 +78,7 @@ <p>© 2021 Carpenter Tutoring, LLC. All rights reserved.</p> <p> <a href="mailto:webmaster@carpentertutoring.com"> - Questions, Comments, Feedback + Having trouble with our site? </a> </p> </footer> diff --git a/stylesheet.css b/stylesheet.css index e057ae8..3112218 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -18,6 +18,7 @@ body { margin: 0; padding: 0; font-family: "PT Sans", sans-serif; + color: dimgray; } body { @@ -25,26 +26,28 @@ body { } .banner { + font-size: 1em; text-align: center; - padding-top: 5%; - padding-bottom: 5%; - padding-right: 5%; - padding-left: 5%; + padding: 3em; background-color: white; } nav { display: flex; - flex-direction: column; background-color: white; + flex-direction: column-reverse; +} + +nav img { + height: 1.4em; } nav a { - font-family: "PT Sans Narrow", sans-serif; - display: block; + font-family: "PT Sans", sans-serif; color: darkgray; text-align: center; text-decoration: none; + padding: 1em 1em; } nav a:hover { @@ -52,6 +55,11 @@ nav a:hover { background-color: lightgray; } +div.buttons { + display: flex; + flex-direction: column; +} + h1 { font-size: 3em; color: var(--darkteal); @@ -65,8 +73,9 @@ h2 { } section { + font-size: 1.5em; margin: 0; - padding: 0; + padding: 3em; } section.quiet { @@ -76,6 +85,7 @@ section.quiet { a.button { background-color: var(--teal); padding: 1em; + margin: 0.5em; text-decoration: none; color: white; border-radius: 3em; @@ -85,23 +95,44 @@ a.primary { background-color: var(--darkteal); } +footer { + background-color: white; + text-align: center; + padding: 3em; + font-size: 1.5em; +} + +footer a { + color: var(--darkteal); + text-decoration: underline; +} + /* Desktop Layout */ @media only screen and (min-width: 800px) { nav { - flex-direction: row; - } - - nav { + flex-direction: row-reverse; margin: 0; padding: 0; } + div.buttons { + flex-direction: row-reverse; + } + .banner { text-align: right; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 1) 40% + rgba(255, 255, 255, 1) 50% ); } } + +/* Widescreen Layout */ +@media only screen and (min-width: 2000px) { +section { + padding-left: 20%; + padding-right: 20%; +} + |