css-lessons · ArtemDordovskyi · May 26, 2015 · May 26, 2015 · May 26, 2015 · May 26, 2015
diff --git a/level_1/1/index.html b/level_1/1/index.html
@@ -3,26 +3,6 @@
   <head>
     <title>Sven's Snowshoe Emporium</title>
     <link rel="stylesheet" href="style.css" />
-    <style>
-      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;
-      }
-    </style>
   </head>
 
   <body>

diff --git 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
@@ -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
@@ -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
@@ -7,7 +7,7 @@
 
   <body>
     <section class="content home">
-      <header style="background: #423e40;">
+      <header>
         <h1>Sven's Snowshoe Emporium</h1>
         <h2 id="slogan">"For the Snow-Savvy Shoe-Shopper"</h2>
       </header>

diff --git 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
@@ -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
@@ -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
@@ -13,15 +13,14 @@
         <li><a href="#">Contact</a></li>
       </ul>
     </nav>
-    <section class="content home">
+    <section class="content home group">
       <aside>
         <p>Did you know that Sven's Snowshoe Emporium produces the highest quality snowshoes in North America? <a href="#">Find out more</a>.</p>
       </aside>
       <article>
         <h3>New Fall Styles</h3>
         <p>Be the first at your resort to sport the hot new tennis-themed snow kicks, now available in the <a href="#">store</a>.</p>
       </article>
-      <div class="clear"></div>
     </section>
   </body>
 </html>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;