From f3439b0db1b9707197e05e6236d6615b36541d34 Mon Sep 17 00:00:00 2001 From: IsaacW Date: Sat, 8 Jun 2024 23:56:38 -0600 Subject: [PATCH] gottagofast --- site/site-plan.html | 175 ++++++++++++++++++++++ site/styles/site-plan.css | 306 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 481 insertions(+) create mode 100644 site/site-plan.html create mode 100644 site/styles/site-plan.css diff --git a/site/site-plan.html b/site/site-plan.html new file mode 100644 index 0000000..f5cdb53 --- /dev/null +++ b/site/site-plan.html @@ -0,0 +1,175 @@ + + + + + + Site Plan + + + + +
+

[Site name] Site Plan

+

FirstName LastName

+

WDD 130-[section]

+ +
+
+ + +
+

Overview

+

Purpose

+

[Your purpose here]

+ + +

Audience

+

[Your audience here]

+ +
+

Branding

+

Website Logo

+ + Logo image +
+

+ Style Guide +

+ + + +

+ Color Palette +

+ + + + + + +
PrimarySecondaryAccent 1Accent 2
+ + + +

+ Typography +

+ + +

+ Heading Font: [Font Name here] +

+

+ Paragraph Font: [Font Name here] +

+

+ Normal paragraph example +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Colored paragraph example +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +

+ + + +

+ Navigation +

+ + +
+

+ Site Map +

+
+
+ Home +
+
+ [Page2] +
+
+ [Page3] +
+ +
+   +
+
+   +
+
+   +
+ +
+ + +
+

+ Content +

+

Home page

+

+ [Written copy for the home page here] +

+

Images for the Home page

+ image for homepage + image for homepage + + +

[Page 2]

+

+ [Written copy for the Page 2 here] +

+

Images for the Page 2

+ image for page + image for page + + +

[Page 3]

+

+ [Written copy for the Page 3 here] +

+

Images for the Page 3

+ image for page3 + image for page3 + + +
+

+ Wireframes +

+

+ Create three wireframes for your site. One for each page and list them here

+ +

Home

+

+ [Any additional details about home that the wireframe does not make clear] +

+ home page wireframe + +

[Page 2]

+

+ [Any additional details about page 2 that the wireframe does not make clear] +

+ page 2 wireframe + +

[Page 3]

+

+ [Any additional details about page 3 that the wireframe does not make clear] +

+ page 3 wireframe +
+ + + diff --git a/site/styles/site-plan.css b/site/styles/site-plan.css new file mode 100644 index 0000000..e1dd67f --- /dev/null +++ b/site/styles/site-plan.css @@ -0,0 +1,306 @@ +/* if you are using any Google fonts change the font names below to your fonts. +Any spaces in your font name should be replaced with a +. +Fonts are separated by a | */ +@import url('https://fonts.googleapis.com/css?family=IM+Fell+French+Canon+SC|Lato'); + +:root { + /* change the values below to your colors from your palette */ + --primary-color: #396E94 ; + --secondary-color: #E7C24F ; + --accent1-color: #A42212; + --accent2-color: white; + + /* change the values below to your chosen font(s) */ + --heading-font: "IM Fell French Canon SC"; + --paragraph-font: Lato, Helvetica, sans-serif; + + /* these colors below should be chosen from among your palette colors above */ + --headline-color-on-white: #396E94; /* headlines on a white background */ + --headline-color-on-color: white; /* headlines on a colored background */ + --paragraph-color-on-white: #396E94; /* paragraph text on a white background */ + --paragraph-color-on-color: white; /* paragraph text on a colored background */ + --paragraph-background-color: #396E94 ; + --nav-link-color: #396E94; + --nav-background-color: #D4AC0D; + --nav-hover-link-color: white; + --nav-hover-background-color: #396E94; +} + + +/* Look around below...but DON'T CHANGE ANYTHING! */ + +body { + max-width: 1200px; + margin: 0 auto; + padding: 4em; + font-size: 18px; + text-align: center; +} +img { + display: block; + margin: 0 auto; +} +h1, h2, h3, h4, h5, h6 { + font-family: var(--heading-font); + color: var(--headline-color-on-white); +} +h2 { + text-align: center; +} +hr { + height: 3px; + margin: 35px 0; + background: var(--accent1-color); +} +header { + padding: 1em; + text-align: center; + color: var(--headline-color-on-color); + background-color: var(--paragraph-background-color); + display: grid; + grid-template-columns: 150px auto; +} + +nav { + display: flex; + justify-content: space-around; +} + +header > h1, header > h2 { + color: var(--headline-color-on-color); +} +#logo_link { + padding-top: 5px; + justify-self: center; + align-self: center; +} + +#hero { + display: grid; + grid-template-columns: 1fr 3fr 1fr; + margin-top: -100px; +} + +#hero-box { + grid-column: 1/4; + grid-row: 1/3; + z-index: -1; +} + +#hero-msg{ + grid-column: 2/3; + grid-row: 1/2; + margin-top: 100px; +} + +p { + font-family: var(--paragraph-font); + color: var(--paragraph-color-on-white); + padding: 1em; +} +.colors { + width: 100%; + min-width: 350px; + margin: 30px auto; + text-align: center; +} +.colors th { + background-color: #999; +} +.colors td{ + width: 25%; + height: 3em; +} + +.primary { + background-color: var(--primary-color); +} +.secondary { + background-color: var(--secondary-color); +} +.accent1 { + background-color: var(--accent1-color); +} +.accent2{ + background-color: var(--accent2-color); +} + +p.colored { + background-color: var(--paragraph-background-color); + color: var(--paragraph-color-on-color); +} + +nav { + background-color: var(--nav-background-color); + line-height: 3em; + text-align: center; + font-size: 1.2em; +} +nav { + list-style-type: none; + display: flex; + +} +nav a { + padding:1em; + min-width: 120px; + text-decoration: none; + padding: 10px; + +} +nav a:link, nav a:visited { + color: var(--nav-link-color); +} +nav a:hover { + color: var(--nav-hover-link-color); + background-color: var(--nav-hover-background-color); +} + +.sitemap { + display: grid; + justify-content: center; + + grid-template-columns: repeat(6, 15%); + grid-template-rows: 3em 1.5em 1.5em 3em; + grid-template-areas: ". . home home . ." + ". . . top . ." + ". left left right right ." + "page2 page2 . . page3 page3"; +} +.sitemap > div { + + text-align: center; + +} + +.homegrid{display: grid; +grid-template-columns: 1/10;} + + +.sm-home { + grid-area: home; + background-color: #ccc; + line-height: 3em; +} +.sm-page2 { + grid-area: page2; + background-color: #ccc; + line-height: 3em; +} +.sm-page3 { + grid-area: page3; + background-color: #ccc; + line-height: 3em; +} + +.top { + grid-area: top; + border-left: 1px solid; +} + +.left { + grid-area: left; + border-top: 1px solid; + border-left: 1px solid; +} + +.right { + grid-area: right; + border-top: 1px solid; + border-right: 1px solid; +} + +.card-img, .mountains { + width: 100%; +} + +.rivers-card{ grid-column : 2/4; grid-row: 2/3;} + +.camping-card{ grid-column: 5/7; grid-row: 2/3;} + +.rapids-card{ grid-column : 8/10; grid-row : 2/3;} + +#background { grid-column: 1/11; grid-row: 4/9;} + +.mountains{ grid-column: 2/7; grid-row : 5/8;} + +.msg{ grid-column: 6/10; grid-row : 6/7;} + +footer { + background-color: #6f7364; + padding: 25px 50px; + margin-top: 200px; + display: flex; + justify-content: space-around; + align-items: center; +} + +.card-img { + border: 10px solid #d9c2a3; + transition: transform .5s; + box-shadow: 5px 5px 10px #6f7364; +} +.card-img:hover { + opacity: .6; + transform: scale(1.1); +} + + +.msg { + background-color: #6f7364; + padding: 35px; + grid-column: 6/10; + grid-row: 6/7; + box-shadow: 5px 5px 10px #6f7364; +} +.mountains { + width: 100%; + grid-column: 2/7; + grid-row: 5/8; + box-shadow: 5px 5px 10px #6f7364; +} + +@media screen and (max-width: 900px) { + #hero, .home-grid { + display: block; + height: auto; + } + nav, footer { + flex-direction: column; + } + nav a { + display: block; + padding: 15px; + } + #hero { + margin-top: 0; + } + #hero-msg { + margin-top: 0; + } + #hero-msg h4 { + display: none; + } + #hero-msg h1 { + color: #6f7364; + } + .home-title { + font-size: 25px; + } + .rivers-card, .camping-card, .rapids-card { + margin: 50px auto; + width: 60%; + } + #background { + display: none; + } + .mountains, .msg { + width: 80%; + display: block; + margin: 0 auto; + } + footer { + margin-top: 25px; + } +} + \ No newline at end of file