diff --git a/level_1/1/index.html b/level_1/1/index.html index 5b8dcd6..84f7d47 100644 --- a/level_1/1/index.html +++ b/level_1/1/index.html @@ -3,26 +3,6 @@ Sven's Snowshoe Emporium - diff --git a/level_1/1/style.css b/level_1/1/style.css index e69de29..e8f37fa 100644 --- a/level_1/1/style.css +++ b/level_1/1/style.css @@ -0,0 +1,18 @@ +body { + color: #4b4648; + font-family: tahoma, arial, sans-serif; + font-size: 14px; +} + +.content { + border: 1px solid #cac3c6; + margin: 0 auto; + padding: 20px; + width: 260px; +} + +h1 { + color: #6d9fac; + font-size: 22px; + text-align: center; +} diff --git a/level_1/2/style.css b/level_1/2/style.css index 73f2643..7cb5195 100644 --- a/level_1/2/style.css +++ b/level_1/2/style.css @@ -16,3 +16,8 @@ h1 { padding: 20px; width: 260px; } + +#slogan { + text-align: center; + font-style: italic; +} diff --git a/level_1/3/style.css b/level_1/3/style.css index 3656c17..97b5037 100644 --- a/level_1/3/style.css +++ b/level_1/3/style.css @@ -22,3 +22,7 @@ h2 { padding: 20px; width: 260px; } + +.content.home { + border: none; +} diff --git a/level_1/4/index.html b/level_1/4/index.html index 457c90a..6157d0f 100644 --- a/level_1/4/index.html +++ b/level_1/4/index.html @@ -7,7 +7,7 @@
-
+

Sven's Snowshoe Emporium

"For the Snow-Savvy Shoe-Shopper"

diff --git a/level_1/4/style.css b/level_1/4/style.css index aa12a5f..e9d3e68 100644 --- a/level_1/4/style.css +++ b/level_1/4/style.css @@ -1,5 +1,5 @@ header { - background: #e0e2e6 !important; + background: #e0e2e6; } body { diff --git a/level_1/5/style.css b/level_1/5/style.css index 8f56187..2efb9af 100644 --- a/level_1/5/style.css +++ b/level_1/5/style.css @@ -7,6 +7,8 @@ section { aside { font-style: italic; width: 120px; + float: right; + margin: 0 0 10px 10px; } p { diff --git a/level_1/6/style.css b/level_1/6/style.css index f190a40..f78be45 100644 --- a/level_1/6/style.css +++ b/level_1/6/style.css @@ -8,7 +8,11 @@ section { aside { font-style: italic; +} + +aside, article { width: 120px; + float: left; } p { diff --git a/level_2/1/index.html b/level_2/1/index.html index c444d2d..2dc991d 100644 --- a/level_2/1/index.html +++ b/level_2/1/index.html @@ -13,7 +13,7 @@
  • Contact
    • -
    +
    @@ -21,7 +21,6 @@

    New Fall Styles

    Be the first at your resort to sport the hot new tennis-themed snow kicks, now available in the store.

    -
    diff --git a/level_2/1/style.css b/level_2/1/style.css index 52c4136..61f5514 100644 --- a/level_2/1/style.css +++ b/level_2/1/style.css @@ -57,10 +57,6 @@ h3 { margin: 0 0 15px; } -.clear { - clear: both; -} - /* clearfix */ .group:before, .group:after { content:""; diff --git a/level_2/2/style.css b/level_2/2/style.css index 02e6632..8f7ff89 100644 --- a/level_2/2/style.css +++ b/level_2/2/style.css @@ -29,6 +29,7 @@ aside { aside p { font-size: 10px; margin: 0; + font-style: italic; } article { @@ -47,7 +48,6 @@ a { p { font-size: 14px; - font-style: italic; line-height: 19px; margin: 0 0 15px; } diff --git a/level_2/3/style.css b/level_2/3/style.css index 02eb69e..041e85c 100644 --- a/level_2/3/style.css +++ b/level_2/3/style.css @@ -32,6 +32,10 @@ aside p { font-style: italic; } +aside p a { + font-style: normal; +} + article { float: left; width: 120px; diff --git a/level_2/4/style.css b/level_2/4/style.css index f550920..f02aadb 100644 --- a/level_2/4/style.css +++ b/level_2/4/style.css @@ -84,14 +84,14 @@ h3 { color: #7ab2c1; } -.active a { - color: #826c55 !important; +li.active a { + color: #826c55; } .primary p { font-size: 12px; } -.copyright { - font-size: 10px !important; +p.copyright { + font-size: 10px; } diff --git a/level_2/5/style.css b/level_2/5/style.css index b75d031..46592e5 100644 --- a/level_2/5/style.css +++ b/level_2/5/style.css @@ -84,11 +84,11 @@ h3 { zoom: 1; } -#home a { +.home a { color: #c09e79; } -#home article .button { +article .button { color: #fff; } diff --git a/level_3/1/style.css b/level_3/1/style.css index 4f30e02..d7da3b4 100644 --- a/level_3/1/style.css +++ b/level_3/1/style.css @@ -16,6 +16,7 @@ footer figure { background: #e0e2e6; border: 1px solid #c5c9cf; padding: 15px; + width: 88px; } footer figure img { diff --git a/level_3/2/style.css b/level_3/2/style.css index d7da3b4..22eeaaf 100644 --- a/level_3/2/style.css +++ b/level_3/2/style.css @@ -17,6 +17,9 @@ footer figure { border: 1px solid #c5c9cf; padding: 15px; width: 88px; + height: 120px; + overflow-x: hidden; + overflow-y: scroll; } footer figure img { diff --git a/level_3/3/style.css b/level_3/3/style.css index b82210b..a080874 100644 --- a/level_3/3/style.css +++ b/level_3/3/style.css @@ -77,6 +77,7 @@ a:hover, a:focus { .button { float: right; position: relative; + top: 3px; } .button, .more { diff --git a/level_3/4/style.css b/level_3/4/style.css index e9b01e2..2f5934b 100644 --- a/level_3/4/style.css +++ b/level_3/4/style.css @@ -9,6 +9,7 @@ body { footer { width: 260px; + position: relative; } .newsletter { diff --git a/level_3/5/style.css b/level_3/5/style.css index 87f53e5..35f5730 100644 --- a/level_3/5/style.css +++ b/level_3/5/style.css @@ -18,6 +18,7 @@ footer { font-size: 12px; margin: 0; text-align: center; + z-index: 1; } .newsletter a { @@ -54,6 +55,9 @@ figure { -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px; + position: absolute; + top: 0; + right: 0; } h4 { diff --git a/level_4/1/style.css b/level_4/1/style.css index 0a3ca6a..c14f1d3 100644 --- a/level_4/1/style.css +++ b/level_4/1/style.css @@ -4,27 +4,24 @@ body { } article h1 { - color: #444; text-align: left; } +article h1, article p { + color: #444; +} + h1 { color: #7ab2c1; - font: bold 22px/28px Tahoma, Arial, sans-serif; + font-weight: bold; + font-size: 22px; + line-height: 28px; margin: 0 0 10px; text-align: center; } -article p { - color: #444; -} - p { font-size: 14px; line-height: 19px; margin: 0 0 15px; } - -article p.disclaimer { - color: #444; -} diff --git a/level_4/2/style.css b/level_4/2/style.css index 5543111..dbb2eee 100644 --- a/level_4/2/style.css +++ b/level_4/2/style.css @@ -4,7 +4,7 @@ body { line-height: 1; } -header { +header, article { margin: 0 0 20px 0; } @@ -17,17 +17,15 @@ h1 { color: #7ab2c1; font: bold 22px/28px Tahoma, Arial, sans-serif; margin: 0 0 10px; - text-align: center; } h2 { color: #999; font: italic 18px/24px Georgia, serif; - text-align: center; } -article { - margin: 0 0 20px 0; +h1, h2 { + text-align: center; } article h1 { diff --git a/level_4/3/style.css b/level_4/3/style.css index d8815ad..a359295 100644 --- a/level_4/3/style.css +++ b/level_4/3/style.css @@ -3,13 +3,13 @@ body { font-family: Tahoma,Arial,sans-serif; } -header { +header, article { background: #ccc; padding: 20px; font-size: 16px; } -h1 { +h1, h2 { color: #7ab2c1; font: bold 22px/28px Tahoma,Arial,sans-serif; text-align: center; @@ -19,17 +19,16 @@ h1 { h2 { color: #423e40; font: italic 18px/24px Georgia,serif; - text-align: center; + margin: 0; } article { font-size: 14px; - padding: 20px; - margin-bottom: 20px + margin-bottom: 20px; + background: none; } p { - font-size: 14px; line-height: 19px; margin: 0 0 15px; } diff --git a/level_4/4/style.css b/level_4/4/style.css index 98b3a08..3c94dfa 100644 --- a/level_4/4/style.css +++ b/level_4/4/style.css @@ -15,10 +15,7 @@ article h1 { } p { - margin-top: 0; - margin-right: 0; - margin-bottom: 10px; - margin-left: 0; + margin: 0 0 10px; font-family: tahoma, arial, sans-serif; font-size: 14px; line-height: 16px; diff --git a/level_4/5/style.css b/level_4/5/style.css index 4fe61d6..481b5bb 100644 --- a/level_4/5/style.css +++ b/level_4/5/style.css @@ -14,6 +14,11 @@ ul { list-style: none; } +nav li { + display: inline; + margin: 0 5px; +} + nav li a { font-weight: bold; } diff --git a/level_4/6/style.css b/level_4/6/style.css index 1685217..ebd5570 100644 --- a/level_4/6/style.css +++ b/level_4/6/style.css @@ -12,6 +12,8 @@ nav { ul { list-style: none; + width: 250px; + margin: 12px auto; } nav li a { diff --git a/level_5/1/style.css b/level_5/1/style.css index 58081fd..d5d8575 100644 --- a/level_5/1/style.css +++ b/level_5/1/style.css @@ -3,8 +3,8 @@ body { font-family: Tahoma, Arial, sans-serif; } -header { - margin-top: 20px; +header, article, aside { + margin: 20px 0; } h1 { @@ -20,10 +20,6 @@ h2 { text-align: center; } -article { - margin: 20px 0; -} - article h1, aside h1 { color: #848990; font: bold 16px/20px tahoma, arial, sans-serif; diff --git a/level_5/2/style.css b/level_5/2/style.css index 7bda3c7..3a06b1e 100644 --- a/level_5/2/style.css +++ b/level_5/2/style.css @@ -6,10 +6,7 @@ body { header, article, aside { padding: 10px; background: #e0e2e6; -} - -article { - margin: 20px 0; + margin: 0 0 20px; } h1 { diff --git a/level_5/3/style.css b/level_5/3/style.css index 1dd4f0e..f0d01e1 100644 --- a/level_5/3/style.css +++ b/level_5/3/style.css @@ -9,12 +9,12 @@ article h1 { h1 { color: #7ab2c1; - font: bold 22px/28px Tahoma, Arial, sans-serif; - margin: 0 0 10px; + font: bold 20px/28px Tahoma, Arial, sans-serif; + margin: 0 0 20px; text-align: center; } -section article p { +p { background: #e0e2e6; font-size: 15px; line-height: 20px; @@ -23,9 +23,3 @@ section article p { width: 260px; padding: 10px; } - -section article h1 { - font-size: 20px; - font-family: tahoma, arial, sans-serif; - margin: 0 0 20px 0; -} diff --git a/level_5/4/style.css b/level_5/4/style.css index 1586d83..3f12efa 100644 --- a/level_5/4/style.css +++ b/level_5/4/style.css @@ -21,17 +21,14 @@ h1 { } p { + font-size: 14px; + line-height: 19px; + margin: 0 0 15px; +} + +p.history { background: #e0e2e6; - font-size: 15px; - line-height: 20px; - margin-bottom: 20px; min-height: 140px; width: 260px; padding: 10px; } - -p { - font-size: 14px; - line-height: 19px; - margin: 0 0 15px; -} diff --git a/level_6/1/index.html b/level_6/1/index.html index 9c697ed..3d869c3 100644 --- a/level_6/1/index.html +++ b/level_6/1/index.html @@ -8,7 +8,7 @@

    The Woven Wonder

    -
    +
    Wovenwonder

    The last snowshoe you'll ever own. Sporting quad-band tuning technology, The Woven Wonder® lives up to its name. And then some. Really.

    diff --git a/level_6/1/style.css b/level_6/1/style.css index 35f9bcc..0106fcb 100644 --- a/level_6/1/style.css +++ b/level_6/1/style.css @@ -15,7 +15,6 @@ article h1 { } figure { - background: url(images/wovenwonder.jpg) no-repeat; border: 2px solid #c5c9cf; height: 150px; width: 150px; diff --git a/level_6/2/index.html b/level_6/2/index.html index 4c8593f..ba7219b 100644 --- a/level_6/2/index.html +++ b/level_6/2/index.html @@ -13,7 +13,7 @@

    The Woven Wonder

    The last snowshoe you'll ever own. Sporting quad-band tuning technology, The Woven Wonder® lives up to its name. And then some. Really. - More Information Arrow + More Information

    diff --git a/level_6/2/style.css b/level_6/2/style.css index 032a7a0..d1f0b54 100644 --- a/level_6/2/style.css +++ b/level_6/2/style.css @@ -46,7 +46,7 @@ a:hover, a:focus { } .more { - background-color: #c09d78; + background: url('arrow.png') #c09d78 no-repeat 100% 0; display: block; position: relative; padding: 0 50px; @@ -55,15 +55,8 @@ a:hover, a:focus { .more { line-height: 40px; margin: 15px 0; - padding: 0 50px; } .more:hover, .more:focus { color: #fff; } - -.more img { - position: absolute; - right: 0; - top: 0; -} diff --git a/level_6/3/style.css b/level_6/3/style.css index e8db287..8cac931 100644 --- a/level_6/3/style.css +++ b/level_6/3/style.css @@ -23,13 +23,11 @@ ul.store li { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); float: left; margin: 0 15px 15px 0; + height: 150px; + width: 150px; + overflow: hidden; } ul.store li img { display: block; } - -.store li img { - height: 150px; - width: 150px; -} diff --git a/level_6/4/style.css b/level_6/4/style.css index d0cf2a0..48c2a8c 100644 --- a/level_6/4/style.css +++ b/level_6/4/style.css @@ -30,3 +30,8 @@ ul.store li { width: 150px; overflow: hidden; } + +.store li img{ + height: 150px; + width: auto; +} diff --git a/level_6/5/style.css b/level_6/5/style.css index d0cf2a0..bae884b 100644 --- a/level_6/5/style.css +++ b/level_6/5/style.css @@ -30,3 +30,8 @@ ul.store li { width: 150px; overflow: hidden; } + +.store li { + width: 150px; + height: auto; +} diff --git a/level_7/1/index.html b/level_7/1/index.html index 7b8bbbd..47ddad3 100644 --- a/level_7/1/index.html +++ b/level_7/1/index.html @@ -8,7 +8,7 @@
    -

    +

    "For the Snow-Savvy Shoe-Shopper"

    diff --git a/level_7/1/style.css b/level_7/1/style.css index 5eff0a7..49bf85b 100644 --- a/level_7/1/style.css +++ b/level_7/1/style.css @@ -15,6 +15,7 @@ h1 { display: block; height: 75px; width: 250px; + text-indent: -9999px; } .logo { diff --git a/level_7/2/style.css b/level_7/2/style.css index 057efa0..09fd684 100644 --- a/level_7/2/style.css +++ b/level_7/2/style.css @@ -32,3 +32,7 @@ a { .logo { margin: 0 auto 15px; } + +.logo:hover, .logo:focus { + background-position: 0 -75px; +} diff --git a/level_7/3/style.css b/level_7/3/style.css index a7dc226..87ce9fe 100644 --- a/level_7/3/style.css +++ b/level_7/3/style.css @@ -36,3 +36,7 @@ a { .logo:hover, .logo:focus { background-position: 0 -75px; } + +.logo:active { + background-position: 0 -150px; +} diff --git a/level_7/4/style.css b/level_7/4/style.css index fc55530..66bad86 100644 --- a/level_7/4/style.css +++ b/level_7/4/style.css @@ -39,9 +39,10 @@ a:hover, a:focus { } .sidebar .featured, .sidebar .sales { - background: url() no-repeat; + background: url('sidebar.png') no-repeat 0 0; padding-left: 50px; } .sidebar .sales { + background-position: 0 -80px; } diff --git a/level_7/5/style.css b/level_7/5/style.css index 6ab331f..b0ccfc1 100644 --- a/level_7/5/style.css +++ b/level_7/5/style.css @@ -46,3 +46,11 @@ a:hover, a:focus { .sidebar .sales { background-position: 0 -80px; } + +.sidebar .featured:hover, .sidebar .featured:focus { + background-position: 0 -40px; +} + +.sidebar .sales:hover, .sidebar .sales:focus { + background-position: 0 -120px; +} diff --git a/level_8/1/style.css b/level_8/1/style.css index 5f59606..fd1c12b 100644 --- a/level_8/1/style.css +++ b/level_8/1/style.css @@ -8,3 +8,8 @@ p { line-height: 19px; margin: 0 0 15px; } + +p:first-child { + color: #999; + font-style: italic; +} diff --git a/level_8/2/style.css b/level_8/2/style.css index 87ca5a5..0b0561b 100644 --- a/level_8/2/style.css +++ b/level_8/2/style.css @@ -21,3 +21,7 @@ ol, ul { .hours li { padding: 5px 10px; } + +.hours li:nth-child(odd) { + background-color: #c5c9cf; +} diff --git a/level_8/3/style.css b/level_8/3/style.css index 87ca5a5..05e014d 100644 --- a/level_8/3/style.css +++ b/level_8/3/style.css @@ -21,3 +21,7 @@ ol, ul { .hours li { padding: 5px 10px; } + +.hours li:nth-child(4n+1) { + background-color: #c5c9cf; +} diff --git a/level_8/4/style.css b/level_8/4/style.css index 5f59606..94b5def 100644 --- a/level_8/4/style.css +++ b/level_8/4/style.css @@ -8,3 +8,7 @@ p { line-height: 19px; margin: 0 0 15px; } + +p:first-child:first-line{ + font-weight: bold; +} diff --git a/level_8/5/style.css b/level_8/5/style.css index e5aa669..8585fa6 100644 --- a/level_8/5/style.css +++ b/level_8/5/style.css @@ -8,3 +8,8 @@ p { line-height: 19px; margin: 0 0 15px; } + +p:before { + content: '->'; + margin-right: 5px; +} diff --git a/level_8/6/style.css b/level_8/6/style.css index 02047b1..aeafe79 100644 --- a/level_8/6/style.css +++ b/level_8/6/style.css @@ -34,16 +34,22 @@ a.store { .store:before, .store:after { display: block; + position: absolute; + content: ''; } .store:before { background: url(store-before.png); height: 23px; width: 54px; + top: -3px; + left: -3px; } .store:after { background: url(store-after.png); height: 20px; width: 41px; + bottom: -3px; + right: -3px; } diff --git a/level_8/7/style.css b/level_8/7/style.css index 3ea776a..b4bfdc4 100644 --- a/level_8/7/style.css +++ b/level_8/7/style.css @@ -53,3 +53,13 @@ a.store { bottom: -3px; right: -3px; } + +.store:hover:before, .store:focus:before { + top: -8px; + left: -8px; +} + +.store:hover:after, .store:focus:after { + bottom: -8px; + right: -8px; +}