changed solution structure to better reflect design html process

dshcheung · dshcheung · commit f6e1eafe9f02 · 2015-09-24T09:34:04.000+08:00
diff --git a/solution-code/css/main.css b/solution-code/css/main.css
@@ -8,19 +8,45 @@ light blue: #1c5380
 body {
   background: #fff url('../images/bgtile.png') repeat-x;
   font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
-  margin: 0 auto;
-  padding-top: 90px;
-  padding-left: 10px;
-  padding: right: 10px;
-  width: 880px;
+  margin: 0;
 }
 
 /*Main CSS*/
+main {
+  width: 880px;
+  margin: 90px auto 0;
+}
+
+main section.section-left {
+  float: left;
+}
+
 main section.section-right {
   float: right;
   width: 500px;
 }
 
+main section.section-right nav button.home {
+  float: right;
+  margin-top: 20px;
+  background: linear-gradient(#6c90ad, #4a7598);
+  border: 1px solid #1c5380;
+  border-radius: 2px;
+  padding: 5px 7px;
+  color: white;
+}
+
+main section.section-right nav button.home img {
+  padding-top: 3px;
+}
+
+main section.section-right nav button.home span {
+  margin-left: 5px;
+  position: relative;
+  bottom: 5px;
+  font-size: 15px;
+}
+
 main section.section-right article {
   background: url("../images/frame.png") no-repeat;
   padding: 40px;
diff --git a/solution-code/index.html b/solution-code/index.html
@@ -7,8 +7,17 @@
 <body>
 
   <main>
+    <section class="section-left">
+      <img src="images/phones.png" alt="Product Photo">
+    </section>
+
     <section class="section-right">
-      <img src="images/brand.png" alt="Instagram">
+      <nav>
+        <img src="images/brand.png" alt="Instagram">
+        <button class="home">
+          <img src="images/home.png" alt="Home"><span>Login</span>
+        </button>
+      </nav>
 
       <article>
         <h1>Capture and Share<br>the World's Moments</h1>
@@ -23,11 +32,6 @@ <h1>Capture and Share<br>the World's Moments</h1>
         <a href="#"><img src="images/badge-android.png" alt="Get it on Google Play"></a>
       </article>
     </section>
-
-    <section class="section-left">
-      <img src="images/phones.png" alt="Product Photo">
-    </section>
-
   </main>
 
   <footer>
