diff --git a/README.md b/README.md index 7bc2383..7856451 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,7 @@ assignment_viking_css_garden ============================ -A place for your styling creativity to grow +by Brennan Fulmer - -**NOTE:** *This repo is copyrighted material for your private use only and not to be shared outside of Viking Code School.* +https://brennanfulmer.github.io/assignment_viking_css_garden/ diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..6b05eb3 Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html index 3a88ff2..647f14d 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,27 @@ + + Viking CSS Garden - + - +

Viking CSS Garden

A place for your styling creativity to grow

-
-

Growing Your Garden

+

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.

@@ -28,7 +29,7 @@

Growing Your Garden

-

Norse mythology

+

Norse Mythology

Norse mythology is the body of mythology of the North Germanic people stemming from Norse paganism and continuing after the Christianization of Scandinavia and into the Scandinavian folklore of the modern period. The northernmost extension of Germanic mythology, Norse mythology consists of tales of various deities, beings, and heroes derived from numerous sources from both before and after the pagan period, including medieval manuscripts, archaeological representations, and folk tradition.

@@ -39,12 +40,10 @@

Norse mythology

Norse mythology has been the subject of scholarly discourse since the 17th century, when key texts were brought to the attention of the intellectual circles of Europe. By way of comparative mythology and historical linguistics, scholars have identified elements of Germanic mythology reaching as far back as Proto-Indo-European mythology. In the modern period, the Romanticist Viking revival re-awoke an interest in the subject matter, and references to Norse mythology may now be found throughout modern popular culture. The myths have further been revived in a religious context among adherents of Germanic Neopaganism.

- - - From Norse Mythology + - From Norse Mythology
- - diff --git a/style.css b/style.css index 64192bc..1065eec 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,134 @@ -/* ----------------------------------- * - * Your Styles Here - * ----------------------------------- */ +/* Start of CSS Reset */ +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 { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, 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; +} +/* End of CSS Reset */ +body { + background: linear-gradient(rgba(49, 137, 225, 0.5),rgba(49, 137, 225, 0.5)),url('bg.jpg'); + background-size: cover; + background-position: center; +} +#main-header{ + text-align: center; + margin-top: 40px; + padding-bottom: 16px; +} +.site-title{ + font-size: 56px; + font-weight: bolder; + color: black; + font-family: 'Merriweather', serif; +} - \ No newline at end of file +.tagline { + margin-top: 24px; + font-size: 32px; + color: white; + font-family: 'Roboto', sans-serif; +} + +.section-title{ + color: black; + font-size: 40px; + margin-top: 24px; + text-align: center; + font-weight: bold; + font-family: 'Merriweather', serif; +} + +.section-content{ + color: white; + margin: 16px 240px 0px; + line-height: 160%; + font-size: 18px; + font-family: 'Roboto', sans-serif; +} + +.citation { + font-size: 16px; + color: white; + font-style: italic; + font-weight: bold; + padding-left: 240px; +} + +#sidebar { + text-align: center; + margin-bottom: 32px; +} + +.nav-link-list-item { + margin: 12px 0px 0px 8px; + display: inline-block; +} + +.nav-link { + font-size: 18px; + background-color: green; + border: medium double green; + border-radius: 10px; + padding: 4px; +} + +a:link { + text-decoration:none; + cursor: pointer; + color: blue; +} + +a:hover { + text-decoration: underline; +} + +@media screen and (max-width: 1360px) { +.section-content{ + margin-left: auto; + margin-right: auto; + padding: 0px 16px 0px; +} +}