diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..9ae5dcb Binary files /dev/null and b/.DS_Store differ diff --git a/assignment_markup_warmup b/assignment_markup_warmup new file mode 160000 index 0000000..50c963a --- /dev/null +++ b/assignment_markup_warmup @@ -0,0 +1 @@ +Subproject commit 50c963a604b3ef986ca6ea9d6df7462ff347dc71 diff --git a/garden.jpg b/garden.jpg new file mode 100644 index 0000000..fd68874 Binary files /dev/null and b/garden.jpg differ diff --git a/helmet.jpg b/helmet.jpg new file mode 100644 index 0000000..b855ba5 Binary files /dev/null and b/helmet.jpg differ diff --git a/index.html b/index.html index 3a88ff2..4cffab8 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,24 @@ + - + + Viking CSS Garden - + + + + + + + + - +

Viking CSS Garden

@@ -47,7 +56,7 @@

Norse mythology

- diff --git a/sass/.sass-cache/973baa1241837ba51a18b57013d0fcd5a0a356e9/style.scssc b/sass/.sass-cache/973baa1241837ba51a18b57013d0fcd5a0a356e9/style.scssc new file mode 100644 index 0000000..432c3e5 Binary files /dev/null and b/sass/.sass-cache/973baa1241837ba51a18b57013d0fcd5a0a356e9/style.scssc differ diff --git a/sass/sasstyl.css b/sass/sasstyl.css new file mode 100644 index 0000000..6244d66 --- /dev/null +++ b/sass/sasstyl.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; } + +body { + font-family: Roboto; + font-size: 22px; + background: linear-gradient(to right, #ff8008, #ffc837); } + +#main-header { + background-image: url(helmet.jpg); + background-size: 55% 100%; + background-repeat: no-repeat; } + +h2 { + padding: 5px; } + +.section-title { + background-color: blue; + border: 2px solid black; + border-radius: 10px; + margin: 3px; + width: 50%; + box-shadow: 7px 8px 3px #888888; + margin-top: 10px; } + +.sidebar-nav { + position: relative; + bottom: 0; + right: 10; + padding: 10px 0; } + +.choices { + background-image: url(garden.jpg); + color: white; + padding: 5px; + font-size: 16px; + cursor: pointer; } + .choices:hover .nav-links { + display: inline; } + +#main-content { + border: 2px solid black; + border-radius: 10px; } + +.main-content-section { + float: left; } + +.nav-links { + display: none; + position: static; + width: 100%; + box-shadow: 0 8px 1px 0 rgba(0, 0, 0, 0.5); + z-index: 1; + margin-right: -1000px; } + .nav-links a:hover { + background-color: black; } + +.nav-link { + position: static; + font-size: 15px; + color: white; + padding: 0; + text-decoration: none; + display: inline; } + +.site-title { + font-family: Antic; + font-size: 50px; + color: white; + text-outline: 5px 2px red; } + +.tagline { + color: white; } + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; } + +#sidebar:hover .choices { + color: blue; } + +/*# sourceMappingURL=sasstyl.css.map */ diff --git a/sass/sasstyl.css.map b/sass/sasstyl.css.map new file mode 100644 index 0000000..adad830 --- /dev/null +++ b/sass/sasstyl.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAkBA,CAAE;EAED,UAAU,EAAE,UAAU;;AAEvB,IAAK;EACJ,WAAW,EAZH,MAAM;EAad,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,2CAAwE;;AAErF,YAAa;EACZ,gBAAgB,EAbT,eAAe;EActB,eAAe,EAAE,QAAQ;EACzB,iBAAiB,EAAE,SAAS;;AAE7B,EAAG;EACF,OAAO,EAAE,GAAG;;AAEb,cAAe;EACd,gBAAgB,EAjCV,IAAI;EAkCV,MAAM,EAAE,eAAgB;EAExB,aAAa,EAAE,IAAI;EACnB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,GAAG;EAEV,UAAU,EAAE,mBAAmC;EAC/C,UAAU,EAAE,IAAI;;AAEjB,YAAa;EACZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,EAAE;EACT,OAAO,EAAE,MAAM;;AAEhB,QAAS;EACR,gBAAgB,EArCT,eAAe;EAsCtB,KAAK,EAhDE,KAAK;EAiDZ,OAAO,EAAE,GAAG;EACZ,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,OAAO;EACf,yBAAmB;IAClB,OAAO,EAAE,MAAM;;AAGjB,aAAc;EACb,MAAM,EAAE,eAAgB;EAExB,aAAa,EAAE,IAAI;;AAEpB,qBAAsB;EACrB,KAAK,EAAE,IAAI;;AAEZ,UAAW;EACV,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,MAAM;EAChB,KAAK,EAAE,IAAI;EAEX,UAAU,EAAE,8BAAqB;EACjC,OAAO,EAAE,CAAC;EACV,YAAY,EAAE,OAAO;EACrB,kBAAQ;IACP,gBAAgB,EA3ET,KAAK;;AA8Ed,SAAU;EACT,QAAQ,EAAE,MAAM;EAChB,SAAS,EAAE,IAAI;EACf,KAAK,EA/EE,KAAK;EAgFZ,OAAO,EAAE,CAAC;EACV,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,MAAM;;AAEhB,WAAY;EACX,WAAW,EA/EH,KAAK;EAgFb,SAAS,EAAE,IAAI;EACf,KAAK,EAvFE,KAAK;EAwFZ,YAAY,EAAE,WAAY;;AAE3B,QAAS;EACR,KAAK,EA3FE,KAAK;;AA6Fb,MAAO;EACN,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAEX,uBAAwB;EACvB,KAAK,EAtGC,IAAI", +"sources": ["style.scss"], +"names": [], +"file": "sasstyl.css" +} diff --git a/sass/style.scss b/sass/style.scss new file mode 100644 index 0000000..291c9fb --- /dev/null +++ b/sass/style.scss @@ -0,0 +1,107 @@ +//colors +$color_flamenco_approx: #ff8008; +$color_sunglow_approx: #ffc837; +$blue: blue; +$black: black; +$color_suva_gray_approx: #888888; +$white: white; +$black_50: rgba(0,0,0,0.5); +$red: red; + +//fonts +$font_0: Roboto; +$font_1: Antic; + +//urls +$url_0: url(helmet.jpg); +$url_1: url(garden.jpg); + +* { + //Instead of the line below you could use @include box-sizing($bs) + box-sizing: border-box; +} +body { + font-family: $font_0; + font-size: 22px; + background: linear-gradient(to right, $color_flamenco_approx, $color_sunglow_approx); +} +#main-header { + background-image: $url_0; + background-size: 55% 100%; + background-repeat: no-repeat; +} +h2 { + padding: 5px; +} +.section-title { + background-color: $blue; + border: 2px solid $black; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 10px; + margin: 3px; + width: 50%; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: 7px 8px 3px $color_suva_gray_approx; + margin-top: 10px; +} +.sidebar-nav { + position: relative; + bottom: 0; + right: 10; + padding: 10px 0; +} +.choices { + background-image: $url_1; + color: $white; + padding: 5px; + font-size: 16px; + cursor: pointer; + &:hover .nav-links { + display: inline; + } +} +#main-content { + border: 2px solid $black; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 10px; +} +.main-content-section { + float: left; +} +.nav-links { + display: none; + position: static; + width: 100%; + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: 0 8px 1px 0 $black_50; + z-index: 1; + margin-right: -1000px; + a:hover { + background-color: $black; + } +} +.nav-link { + position: static; + font-size: 15px; + color: $white; + padding: 0; + text-decoration: none; + display: inline; +} +.site-title { + font-family: $font_1; + font-size: 50px; + color: $white; + text-outline: 5px 2px $red; +} +.tagline { + color: $white; +} +nav ul { + list-style-type: none; + margin: 0; + padding: 0; +} +#sidebar:hover .choices { + color: $blue; +} diff --git a/sassyst/sasstyl.css b/sassyst/sasstyl.css new file mode 100644 index 0000000..6244d66 --- /dev/null +++ b/sassyst/sasstyl.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; } + +body { + font-family: Roboto; + font-size: 22px; + background: linear-gradient(to right, #ff8008, #ffc837); } + +#main-header { + background-image: url(helmet.jpg); + background-size: 55% 100%; + background-repeat: no-repeat; } + +h2 { + padding: 5px; } + +.section-title { + background-color: blue; + border: 2px solid black; + border-radius: 10px; + margin: 3px; + width: 50%; + box-shadow: 7px 8px 3px #888888; + margin-top: 10px; } + +.sidebar-nav { + position: relative; + bottom: 0; + right: 10; + padding: 10px 0; } + +.choices { + background-image: url(garden.jpg); + color: white; + padding: 5px; + font-size: 16px; + cursor: pointer; } + .choices:hover .nav-links { + display: inline; } + +#main-content { + border: 2px solid black; + border-radius: 10px; } + +.main-content-section { + float: left; } + +.nav-links { + display: none; + position: static; + width: 100%; + box-shadow: 0 8px 1px 0 rgba(0, 0, 0, 0.5); + z-index: 1; + margin-right: -1000px; } + .nav-links a:hover { + background-color: black; } + +.nav-link { + position: static; + font-size: 15px; + color: white; + padding: 0; + text-decoration: none; + display: inline; } + +.site-title { + font-family: Antic; + font-size: 50px; + color: white; + text-outline: 5px 2px red; } + +.tagline { + color: white; } + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; } + +#sidebar:hover .choices { + color: blue; } + +/*# sourceMappingURL=sasstyl.css.map */ diff --git a/style.css b/style.css index 64192bc..fe308c4 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,119 @@ /* ----------------------------------- * * Your Styles Here * ----------------------------------- */ +*{ + box-sizing: border-box; +} +body { + + font-family: 'Roboto';font-size: 22px; + background: linear-gradient(to right, #ff8008, #ffc837); +} +#main-header { + background-image: url("helmet.jpg"); + background-size: 55% 100%; + background-repeat: no-repeat; +} - \ No newline at end of file + + +h2 { + padding: 5px; +} +.section-title { +background-color: blue; +border: 2px solid black; +border-radius: 10px; +margin: 3px; +width: 50%; +box-shadow: 7px 8px 3px #888888; +margin-top: 10px; +} + +.sidebar-nav { +position: relative; + +bottom:0; +right:10; + padding:10px 0; + + + + +} +.choices { + background-image:url("garden.jpg"); + + color: white; + padding: 5px; + font-size: 16px; + + cursor: pointer; +} + + + +#main-content { + border: 2px solid black; + border-radius: 10px; +} + +.main-content-section { + float: left; +} + +nav ul { + + list-style-type:none; + margin:0; + padding:0; +} + +.nav-links { + + + display: none; + position: static; + + width: 100%; + box-shadow: 0px 8px 1px 0px rgba(0,0,0,0.5); + z-index: 1; + margin-right:-1000px; + +} +.nav-link { + position: static; + font-size: 15px; + color: white; + padding: 0px 0px; + text-decoration: none; + display: inline; + +} + +.nav-links a:hover {background-color: black} + .choices:hover .nav-links { + display: inline; +} + +#sidebar:hover .choices { + color: blue; +} + +.site-title { + font-family: 'Antic'; + font-size: 50px; + color: white; + text-outline: 5px 2px red; + +} + +.tagline { + color: white; + +} \ No newline at end of file