diff --git a/css/base.css b/css/base.css index a04a560..3aa648a 100644 --- a/css/base.css +++ b/css/base.css @@ -3,19 +3,11 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { +html, body, div, span, +h1, p, a, img, +ul, li, +footer, header, +nav, section { margin: 0; padding: 0; border: 0; @@ -24,29 +16,19 @@ time, mark, audio, video { font-family: 'Raleway', sans-serif; vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { +article, footer, header, nav, section { display: block; } + body { line-height: 1; } -ol, ul { + +ul { list-style: none; } -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} img { max-width: 100%; diff --git a/css/layout.css b/css/layout.css index 7aa91ea..dbf325e 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,29 +1,23 @@ -.titlePosition { - position: absolute; - right: 2%; - bottom: 10px; -} - .centerContent { margin: 0 auto; display: block; } -.coverImage { - position: relative; +.infoList li { + padding: 2%; } -.ribbonPosition { - position: absolute; - bottom: 0; - height: 5em; - width: 100%; +.titlePosition { + text-align: center; } -.contact li { - padding: 2%; +.bottomMargin { + margin-bottom: .7em; } +.logoPosition { + display: none; +} /* ============================================ */ @@ -1035,3 +1029,37 @@ width: 100%; } } + +/*Tablet +****************************************/ + +@media (min-width: 64em) { + + .titlePosition { + position: absolute; + left: 2%; + bottom: 10px; + } + + .eventTitlePosition { + position: static; + } + + .ribbonPosition { + position: absolute; + bottom: 0; + height: 5em; + width: 100%; + } + + .eventContent { + margin: 1em 0 0 4em; + } + + .logoPosition { + display: block; + position: absolute; + top: 1em; + right: 1em; + } +} diff --git a/css/module.css b/css/module.css index 91dad73..372860c 100644 --- a/css/module.css +++ b/css/module.css @@ -2,7 +2,21 @@ color: #fff; font-size: 3em; font-family: 'Raleway', sans-serif; - background-color: +} + +.subTitle { + font-size: 2em; + color: #fff; + margin-bottom: .7em; +} + +.coverImage { + position: relative; + background-color: rgb(120, 120, 120); +} + +.fullWidth { + width: 100%; } .greenSection { @@ -11,18 +25,24 @@ text-align: center; } -.link { +.bigLink { color: #fff; font-size: 1.5em; display: block; + margin-bottom: 1.5em; + text-decoration: underline; } .sectionPadding { padding: 10%; } -.ribbonStyle { - background-color: rgba(120, 120, 120, .65); +.topBottomPadding { + padding: 10% 0; +} + +.orangeSection { + background-color: #CF7019; } strong { @@ -38,6 +58,94 @@ footer { } .icon { - max-width: 30%; + width: 5em; margin: 1%; } + +.infoList { + font-size: 1.3em; +} + +.flexContainer { + display:flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-content: center; + align-items: center; +} + +.hideMobile { + display: none; +} + +.event img { + margin: 1em 0 .5em 0; +} + +.eventText { + font-size: 1.1em; + color: #fff; + line-height: 1.2em; +} + +.smallLink { + display: block; + background-color: rgb(0, 160, 165); + text-align: center; + color: #FFF; + margin: .5em 0; + padding: .3em 0; + text-decoration: underline; +} + + .event img { + max-width: 22.5em; + } + + +/*Tablet & Desktop +****************************************/ + +@media (min-width: 64em) { + + .titleStyle { + color: #fff; + font-size: 3em; + font-family: 'Raleway', sans-serif; + } + + .ribbonStyle { + background-color: rgba(120, 120, 120, .65); + } + + .hideMobile { + display: inline; + } + + .bigLink { + text-decoration: none; + } + + .flexContainer { + display:flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-content: center; + align-items: center; + } + + .orangeSection { + padding: 10%; + } + + .eventText { + line-height: 1.3em; + } + + .smallLink { + text-decoration: none; + } + +} diff --git a/css/state.css b/css/state.css index d315cd3..1a62e81 100644 --- a/css/state.css +++ b/css/state.css @@ -1,3 +1,8 @@ -.link:hover { +.bigLink:hover { color: #aaa; } + +.smallLink:hover { + background-color: rgb(0, 121, 125); + transition: .5s; +} diff --git a/img/car-icon.png b/img/car-icon.png deleted file mode 100644 index 7770167..0000000 Binary files a/img/car-icon.png and /dev/null differ diff --git a/img/car.png b/img/car.png deleted file mode 100644 index c34737b..0000000 Binary files a/img/car.png and /dev/null differ diff --git a/img/compostEvent.jpg b/img/compostEvent.jpg new file mode 100644 index 0000000..78d08c5 Binary files /dev/null and b/img/compostEvent.jpg differ diff --git a/img/eggEvent.jpg b/img/eggEvent.jpg new file mode 100644 index 0000000..b841961 Binary files /dev/null and b/img/eggEvent.jpg differ diff --git a/img/elephant.png b/img/elephant.png deleted file mode 100644 index 8443784..0000000 Binary files a/img/elephant.png and /dev/null differ diff --git a/img/elephant.svg b/img/elephant.svg new file mode 100644 index 0000000..69fad6e --- /dev/null +++ b/img/elephant.svg @@ -0,0 +1,47 @@ + + + + + + + + + diff --git a/img/elephantEvent.jpg b/img/elephantEvent.jpg new file mode 100644 index 0000000..daf77a8 Binary files /dev/null and b/img/elephantEvent.jpg differ diff --git a/img/info.svg b/img/info.svg new file mode 100644 index 0000000..0104814 --- /dev/null +++ b/img/info.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/img/lion1.jpg b/img/lion1.jpg deleted file mode 100644 index f99eb9d..0000000 Binary files a/img/lion1.jpg and /dev/null differ diff --git a/img/lion2.jpg b/img/lion2.jpg new file mode 100644 index 0000000..1c2c787 Binary files /dev/null and b/img/lion2.jpg differ diff --git a/img/visit.svg b/img/visit.svg new file mode 100644 index 0000000..028e545 --- /dev/null +++ b/img/visit.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/index.html b/index.html index f58bd72..1f1b1ab 100644 --- a/index.html +++ b/index.html @@ -12,25 +12,64 @@
-
- +
+ Lion banner image + Woodland Park Zoo logo

Woodland Park Zoo

-
+
+

Upcoming Events

+
+
+ +
+

New Home for Elephants

+

We are pleased to announce that we have selected Oklahoma City Zoo as a new home for Asian elephants Chai and Bamboo. There they will have a chance to join a larger social herd with different generations and become aunties to young elephants. We anticipate moving the elephants in late March to mid-April to live in the state-of-the-art facility in Oklahoma.

+ Learn More +
+
+
+ +
+

Spring Fecal Fest

+

Get your hands on the most desired compost in Seattle. Woodland Park Zoo’s Spring Fecal Fest is right around the corner. Submissions are accepted online only starting March 9 - March 29, 2015. The lucky winners load the compost using shovels provided by the zoo.

+ Learn More +
+
+
+ +
+

Bunny Bounce

+

Hop, skip and jump to Woodland Park Zoo for the 14th annual Bunny Bounce, featuring amazing egg hunts for children ages 1-8, crafts, bunny encounters, and eggs-citing zoo programs throughout the day. Space may be limited. Saturday, April 4, 2015 9:30 a.m. - 3:00 p.m.

+ Learn More +
+
+
+
-
- + diff --git a/readme.md b/readme.md index e69de29..db52418 100644 --- a/readme.md +++ b/readme.md @@ -0,0 +1,9 @@ +#Advanced CSS Layout - Assignment Submission + +###From Ben Spears and Keri Brady + +In this assignment, we created a new website and utilized the Unsemantic Grid for styling and responsive design. We maintained the ideas we've been taught about CSS, including atomic design and single responsibility, efficient selectors, and the SMACSS system. + +We structured the site with semantic markup and HTML5 structure. + +We added the use of media queries with mobile first ideas in mind, and defined them with *em* units instead of pixels to make sure they behave the same way on all devices. The main image was also compressed to reduce the file size by about two thirds. The icons were changed to svg icons that will scale without quality loss.