diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..17f0285 Binary files /dev/null and b/.DS_Store differ diff --git a/images/11thcenturyvikingswordheader.jpg b/images/11thcenturyvikingswordheader.jpg new file mode 100644 index 0000000..ec79a57 Binary files /dev/null and b/images/11thcenturyvikingswordheader.jpg differ diff --git a/images/vikingsword.jpg b/images/vikingsword.jpg new file mode 100644 index 0000000..a383cef Binary files /dev/null and b/images/vikingsword.jpg differ diff --git a/index.html b/index.html index 3a88ff2..f3c3ffd 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,27 @@ + + + + Viking CSS Garden - -
+

Viking CSS Garden

-

A place for your styling creativity to grow

+ +
+ I do not have permission to use this image; I've included it solely for private educational purposes. +
+
+

A place for your styling creativity to grow

+
+
@@ -44,7 +54,6 @@

Norse mythology

- + + + diff --git a/style.css b/style.css deleted file mode 100644 index 64192bc..0000000 --- a/style.css +++ /dev/null @@ -1,10 +0,0 @@ -/* ----------------------------------- * - * Your Styles Here - * ----------------------------------- */ - - - - - - - \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c85b0cd --- /dev/null +++ b/styles.css @@ -0,0 +1,159 @@ +/* ----------------------------------- * + * Your Styles Here + * ----------------------------------- */ + + + + +.clearfix::before, +.clearfix::after { + display: table; + content: " "; +} +.clearfix::after { + clear: both; +} + +#main-header { + display: block; + position: relative; + margin: auto; + padding-left: 2%; + padding-right: 2%; + padding-top: 40px; + width: 970px; + max-height: 360px; +} + +#main-header .site-title { + display: inline-block; + float: left; + position: relative; + font-family: 'Zilla Slab Highlight', cursive; + font-size: 72px; + color: #151515; + width: 260px; + height: 260px; + margin-top: 5px; + margin-left: 10px; + margin-bottom: 0px; +} + +#tagline-box { + display: block; + width: 600px; + height: 60px; +} + +#img-box { + display: block; + left: 290px; + position: absolute; + width: 720px; + height: 260px; +} + +#sword { + display: block; + float: left; + position: static; + width: 650px; + padding-top: 50px; +} + +.tagline { + float: left; + margin-top: 2px; +} + +body { + background: #466368; + background: linear-gradient(#fff 30%, #D1DFFF); +} + +main { + display: block; + max-width: 1500px; +} + +#main-header .tagline { + font-family: 'Droid Sans Mono', monospace; + font-size: 18px; + text-align: right; + color: #3b5998; + margin-left: 10px; + margin-top: 15px; +} + +.section-title { + display: block; + text-align: left; + font-family: 'Zilla Slab', serif; + font-size: 30px; + margin-left: 15px; + padding-right: 0px; + margin-bottom: 1px; +} + +#main-content { + display: block; + position: relative; + margin: auto; + width: 950px; + padding-right: 0; +} + + +.section-content { + display: block; + box-sizing: border-box; + width: 885px; + padding-left: 50px; + padding-right: -10px; + font-family: 'Zilla Slab', serif; + color: #585858; + font-size: 19px; + line-height: 1.5em; +} + +.citation { + display: block; + text-align: right; + font-family: 'Droid Sans Mono', monospace; + font-style: normal; + margin-right: 80px; + color: #3b5998; +} + +#sidebar { + display: block; + width: 950px; + height: 180px; + margin: auto; + padding-top: 30px; + padding-right: 70px; +} + +#sidebar .section-title { + text-align: right; +} + +.nav-link-list-item { + display: inline-block; + float: right; + background: #3b5998; + width: 200px; + padding: 4px; + text-align: center; + margin: 4px; +} + +.nav-link-list-item a { + font-family: 'Droid Sans Mono', monospace; + color: #fff; + text-decoration: none; +} + +.nav-link-list-item:hover { + background: #FF4C05; +} \ No newline at end of file diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..56e28a1 --- /dev/null +++ b/styles.scss @@ -0,0 +1,160 @@ +/* ----------------------------------- * + * Your Styles Here + * ----------------------------------- */ + +$header-color: #151515; +$tagline-color: #3b5998; +$article-text-color: #585858; +$hover-color: #FF4C05; +$background-color: #D1DFFF; + +@mixin article-text { + font-family: 'Zilla Slab', serif; + color: $article-text-color; +} + + +.clearfix::before, +.clearfix::after { + display: table; + content: " "; +} +.clearfix::after { + clear: both; +} + +#main-header { + display: block; + position: relative; + margin: auto; + padding-left: 2%; + padding-right: 2%; + padding-top: 40px; + width: 970px; + max-height: 360px; + .site-title { + display: inline-block; + float: left; + position: relative; + font-family: 'Zilla Slab Highlight', cursive; + font-size: 72px; + color: $header-color; + width: 260px; + height: 260px; + margin-top: 5px; + margin-left: 10px; + margin-bottom: 0px; + } + .tagline { + float: left; + margin-top: 2px; + font-family: 'Droid Sans Mono', monospace; + font-size: 18px; + text-align: right; + color: $tagline-color; + margin-left: 10px; + margin-top: 15px; + } +} + +#tagline-box { + display: block; + width: 600px; + height: 60px; +} + +#img-box { + display: block; + left: 290px; + position: absolute; + width: 720px; + height: 260px; +} + +#sword { + display: block; + float: left; + position: static; + width: 650px; + padding-top: 50px; +} + +body { + background: #fff; + background: linear-gradient(#fff 30%, $background-color); +} + +main { + display: block; + max-width: 1500px; +} + +.section-title { + display: block; + text-align: left; + font-family: 'Zilla Slab', serif; + font-size: 30px; + margin-left: 15px; + padding-right: 0px; + margin-bottom: 1px; +} + +#main-content { + display: block; + position: relative; + margin: auto; + width: 950px; + padding-right: 0; +} + + +.section-content { + @include article-text; + display: block; + box-sizing: border-box; + width: 885px; + padding-left: 50px; + padding-right: -10px; + font-size: 19px; + line-height: 1.5em; +} + +.citation { + display: block; + text-align: right; + font-family: 'Droid Sans Mono', monospace; + font-style: normal; + margin-right: 80px; + color: $tagline-color; +} + +#sidebar { + display: block; + width: 950px; + height: 180px; + margin: auto; + padding-top: 30px; + padding-right: 70px; + .section-title { + text-align: right; + } +} + +.nav-link-list-item { + display: inline-block; + float: right; + background: $tagline-color; + width: 200px; + padding: 4px; + text-align: center; + margin: 4px; + a { + font-family: 'Droid Sans Mono', monospace; + color: #fff; + text-decoration: none; + } +} + +.nav-link-list-item:hover { + background: $hover-color; +} \ No newline at end of file