diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..cec5320 Binary files /dev/null and b/.DS_Store differ diff --git a/images/Garden-with-a-pond-icon.png b/images/Garden-with-a-pond-icon.png new file mode 100644 index 0000000..f2d3253 Binary files /dev/null and b/images/Garden-with-a-pond-icon.png differ diff --git a/images/garden1.jpg b/images/garden1.jpg new file mode 100644 index 0000000..2541435 Binary files /dev/null and b/images/garden1.jpg differ diff --git a/images/garden2.jpg b/images/garden2.jpg new file mode 100644 index 0000000..2008ba9 Binary files /dev/null and b/images/garden2.jpg differ diff --git a/images/garden3.jpg b/images/garden3.jpg new file mode 100644 index 0000000..aefa1f3 Binary files /dev/null and b/images/garden3.jpg differ diff --git a/images/garden4.jpg b/images/garden4.jpg new file mode 100644 index 0000000..ed86952 Binary files /dev/null and b/images/garden4.jpg differ diff --git a/images/garden5.jpg b/images/garden5.jpg new file mode 100644 index 0000000..3c35b75 Binary files /dev/null and b/images/garden5.jpg differ diff --git a/images/helmet.png b/images/helmet.png new file mode 100644 index 0000000..e07ff84 Binary files /dev/null and b/images/helmet.png differ diff --git a/images/viking_garden.jpg b/images/viking_garden.jpg new file mode 100644 index 0000000..7ac35fe Binary files /dev/null and b/images/viking_garden.jpg differ diff --git a/index.html b/index.html index 3a88ff2..41f4520 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,8 @@ Viking CSS Garden - + + @@ -23,7 +24,8 @@

A place for your styling creativity to grow

Growing Your Garden

-

The Viking CSS Garden is a place for you to take raw potential and turn it into something beautiful with the power of CSS. Take the seeds that are this HTML file and plant them. Water and feed them with nurishing styles, colors and images. Watch them evolve into a stunning display.

+

The Viking CSS Garden is a place for you to take raw potential and turn it into something beautiful with the power of CSS. Take the seeds that are this HTML file and plant them. Water and feed them with nurishing styles, colors and images. Watch them evolve into a stunning display.

+ Viking Garden
@@ -74,7 +76,13 @@

Other Gardens

+ + + + + + diff --git a/style.css b/style.css index 64192bc..bd0233e 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,120 @@ /* ----------------------------------- * * Your Styles Here + + * Colors: + + * #F3563D - Main Red + * #2DB456 - Main Green + * + * + * + * + * ----------------------------------- */ +* { + font-family: 'Open Sans', sans-serif; +} + +body { + background-color: #DFFFE9; + margin-bottom: 40px; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Merriweather', serif; +} + +h2 { + color: #FF9C8C; +} + +p, cite { + line-height: 1.7em; + color: #565656; +} + +cite { + float: right; +} + +ul { + padding-left: 0; +} + +li { + background: url('images/helmet.png') no-repeat 5px 5px transparent; + list-style-type: none; + margin: 0; + padding: 0px 0px 5px 24px; + vertical-align: middle; +} + +#main-header { + text-align: center; +} + +#main-header h1 { + color: #2DB456; + background-repeat: no-repeat; +} + +.main-content-section { + clear: both; +} + +.section-content p#grow-paragraph { + width: 50%; + float: left; +} + +.section-content img { + width: 40%; + float: right; + margin-top: 20px; +} + +aside img { + margin-top: 40px; +} + +a { + color: #057F2A; +} + +a:hover { + color: #FF7762; +} + +@media only screen and (min-width:550px){ + #main-header h1 { + text-indent: -200px; + margin-bottom: 0; + } + + #main-content { + float: left; + margin-left: 100px; + width: 50%; + margin-bottom: 30px; + } + + #main-header h2.tagline { + margin-top: 0px; + text-indent: 100px; + } + + #sidebar { + float: right; + width: 30%; + } +} +footer { + clear: both; + height: 40px; +} - \ No newline at end of file