From a555acd4962aab1e83196ea784a360a71883fff9 Mon Sep 17 00:00:00 2001 From: JFarenci <31667933+JFarenci@users.noreply.github.com> Date: Sun, 5 Nov 2017 01:02:38 -0600 Subject: [PATCH 1/3] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7bc2383..c9b97b2 100644 --- a/README.md +++ b/README.md @@ -6,3 +6,4 @@ A place for your styling creativity to grow **NOTE:** *This repo is copyrighted material for your private use only and not to be shared outside of Viking Code School.* +Jacob Farenci From ab45e9f4a5f9ca3bab081a515b411714c3fe1727 Mon Sep 17 00:00:00 2001 From: JFarenci <31667933+JFarenci@users.noreply.github.com> Date: Mon, 6 Nov 2017 00:26:00 -0600 Subject: [PATCH 2/3] Added some extra tags that were used in the CSS stylesheet --- index.html | 47 +++++++++++++++++++++++++---------------------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 3a88ff2..b9fe697 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,4 @@ - - + @@ -8,6 +7,9 @@ + + Viking CSS Garden + @@ -19,7 +21,7 @@

A place for your styling creativity to grow

-
+

Growing Your Garden

@@ -27,8 +29,8 @@

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.

@@ -47,34 +49,35 @@

Norse mythology

- - +
+
+ From e551914d745b73a997a396909b735efef49dcb0b Mon Sep 17 00:00:00 2001 From: JFarenci <31667933+JFarenci@users.noreply.github.com> Date: Mon, 6 Nov 2017 00:27:20 -0600 Subject: [PATCH 3/3] Added stylesheet --- style.css | 175 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 174 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 64192bc..330b696 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,183 @@ /* ----------------------------------- * * Your Styles Here * ----------------------------------- */ +html { + font-family: "Times New Roman", sans-serif; +} +/*start background*/ +body { + background-image: url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-507671.png); + background-repeat: no-repeat; + background-attachment:fixed; + background-size: 80%; + background-position: 50% 90px; +} +#box1 { + position: fixed; + top: 0px; + left: 0%; + width:100%; + height:90px; + background: #2b78e4; + z-index: -1; +} +#box2 { + position: fixed; + top: 90px; + left: 0%; + width:100%; + height:50px; + background: #eeeeee; + z-index: -1; +} +/*end background*/ +/*start main title box*/ +#main-header { + position: fixed; + top: 0px; + left: 10%; + width:80%; + height:90px; + background: white; + border-style: solid; + border-width: 1px; +} +.site-title { + position: relative; + top: -40px; + text-align: center; + font-size: 60px; +} - \ No newline at end of file +.tagline { + position: relative; + top: -85px; + text-align: center; + font-size: 20px; + font-style: italic; +} +/*end main title box*/ + +/*start nav bar*/ +.nav-link-list-item { + display: inline-block; + height: 48px; + width: 10%; + background: white; + border-style: solid; + border-width: 1px; + text-align: center; +} + +.nav-link { + font-family: helvetica; + font-size: 18px; + font-style: italic; + text-decoration: none; + color: black; +} +.nav-link-list-item:hover { + box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); +} + +#navitem1 { + position: fixed; + top: 74px; + left: 10%; + height: 47px; + width: 10%; + background: white; + border-style: solid; + border-width: 1px; + text-align: center; + font-family: Helvetica; + font-size: 20px; +} +#navitem2 { + position: fixed; + top: 90px; + left: 20%; + } + #navitem3 { + position: fixed; + top: 90px; + left: 30%; + } + #navitem4 { + position: fixed; + top: 90px; + left: 40%; + } + #navitem5 { + position: fixed; + top: 90px; + left: 50%; + } + #navitem6 { + position: fixed; + top: 90px; + left: 60%; + } + #navitem7 { + position: fixed; + top: 90px; + left: 70%; + } + #navitem8 { + position: fixed; + top: 90px; + left: 80%; + } +/*end nav bar*/ + +/*start body text styling*/ +.section-title { + text-align: center; + font-size: 26px; + font-style: bold; +} +.section-content { + font-family: arial; + font-size: 16px; + color: #111111; +} +/*end body text styling*/ + + +/*start right side fixed memo*/ + #rightfixed { + position:fixed; + top: 250px; + left: 58%; + height: 220px; + width:27.5%; + padding: 8px; + background: #eeeeee; + opacity: 0.85; + border-style: solid; + border-width: 1px; + border-color: #333333; + } + /*end right side fixed memo*/ + + /*start main content*/ + #maincontent { + position:relative; + top: 160px; + left: 17.5%; + height: 1550px; + width:32.5%; + z-index: -2; + padding: 8px; + background: #eeeeee; + opacity: 0.85; + border-style: solid; + border-width: 1px; + border-color: #333333; + } + /*end main content*/