wdi-hk-9 · ianienchoo · Sep 24, 2015
diff --git a/.DS_Store b/.DS_Store
diff --git a/starter-code/.DS_Store b/starter-code/.DS_Store
diff --git a/starter-code/css/main.css b/starter-code/css/main.css
@@ -5,6 +5,138 @@ 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;
+}
+
+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 {
+	float: right;
+	margin-top: 20px;
+	background-color: linear-gradient(#6c90ad,#4a7598);
+	bottom: 1px solid #1c5380;
+	border-radius: 2px;
+	padding: 5px 7px;
+	color: white;
+
+}
+
+main section.section-right nav button img{
+	padding: 3px;
+}
+
+main section.section-right nav button span{
+	font-size: 15px;
+	position: relative;
+	bottom: 5px;
+	margin-left: 5px;
+}
+
+main section.section-right article {
+	background: url("../images/frame.png") no-repeat;
+	padding: 40px;
+}
+
+main section.section-right article h1{
+	color: #06365f;
+	font-size: 27px;
+	margin-top: 0;
+	line-height: 1.3;
+}
+
+
+footer ul {
+	clear: both;
+	list-style: none;
+	text-align: center;
+	padding: 0;
+	margin: 0 0 20px;
+}
+
+footer ul li {
+	display: inline;
+	margin: 0 10px;
+	text-transform: uppercase;
+}
+
+footer ul li a{
+	color: #1c5380;
+	text-decoration: none;
+}
+
+footer ul li a:hover{
+	text-decoration: underline;
+}
+/*body {
   font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0;
+  background-color: white;
+  width: 100%;
+  height: 1000px;
 }
+
+h1 {
+	font-size: 10px;
+}
+
+#blue {
+	background-color: #1c5380;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 300px;
+	z-index: 1
+}
+
+#phone, #main {
+	position: absolute;
+	top: 100px;
+	z-index: 2
+}
+
+#phone {
+	margin-left: 50px;
+	float: right;
+}
+
+#main {
+	right: 0;
+	margin-right: 50px;
+	height: 518px;
+	width: 504px;
+}
+
+#login-button {
+	background: url('images/home.png') left center no-repeat;
+	width: 100px;
+	height: 50px;
+	border-radius: 20%;
+	margin-top: 14px;
+	margin-bottom: 14px;
+	margin-right: 10px;
+}
+
+#description {
+	position: relative;
+}
+
+#text {
+	position: absolute;
+	left: 0;
+	top: 0;
+}*/
diff --git a/starter-code/index.html b/starter-code/index.html
@@ -2,30 +2,97 @@
 <html lang="en">
 <head>
   <title>Instagram</title>
+  <link rel="stylesheet" href="css/main.css">
 </head>
 <body>
-  Instagram
 
-  Capture and Share the World's Moments
+  <main>
+     <section class="section-left">
+       <img src="images/phones.png" alt="Product Photo">
+     </section>
 
-  Instagram is a fast, beautiful and fun way to share your life with friends and family.
+     <section class="section-right">
+       <nav>
+         <img src="images/brand.png" alt="logo">
+         <button>
+           <img src="images/home.png" alt="logo">
+           <span>Login</span>
+         </button>
+       </nav>
 
-  Take a picture or video, choose a filter to transform its look and feel, then post to Instagram &mdash; it's that easy. You can even share to Facebook, Twitter, Tumblr and more. It's a new way to see the world.
+       <article>
+        <h1>Capture and Share<br> the World's Moments</h1>
 
-  Oh yeah, did we mention it's free?
+        <p>Instagram is a <strong>fast</strong>, <strong>beautiful</strong> and <strong>fun</strong> way to share your life with friends and family.</p>
 
-  Download on the App Store
-  Get it on Google Play
+        <p>Take a picture or video, choose a filter to transform its look and feel, then post to Instagram &mdash; it's that easy. You can even share to Facebook, Twitter, Tumblr and more. It's a new way to see the world.</p>
 
-  About Us
-  Support
-  Blog
-  Press
-  API
-  Jobs
-  Privacy
-  Terms
+        <p>Oh yeah, did we mention it's free?</p>
 
-  &copy; 2014 Instagram
+        <a href="images/badge-iphone.png" alt="App Store"></a>
+        <a href="images/badge-android.png" alt="Google Play"></a>
+         </h1>
+       </article>
+     </section>
+   </main>
+
+     <footer>
+       <ul>
+        <li><a href="#">About Us</a></li>
+        <li><a href="#">Support</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Press</a></li>
+        <li><a href="#">API</a></li>
+        <li><a href="#">Jobs</a></li>
+        <li><a href="#">Privacy</a></li>
+        <li><a href="#">Terms</a></li>
+        <li>&copy; 2014 Instagram</li>
+       </ul>
+     </footer>
+<!--
+  </main>
+
+
+  <div id="blue"></div>
+
+  <div id="phone">
+    <img src="images/phones.png" alt="iphones">
+  </div>
+
+  <div id="main">
+    <img src="images/brand.png" alt="logo">
+
+    <input type="button" value="Log in" id="login-button">
+
+    <div id="description">
+      <img src="images/frame.png" alt="fade out frame">
+
+      <div id="text">
+        <h1>Capture and Share</h1>
+        <h1> the World's Moments</h1>
+        <p>Instagram is a <strong>fast</strong>, <strong>beautiful</strong> and <strong>fun</strong> way to share your life with friends and family.</p>
+        <p>Take a picture or video, choose a filter to transform its look and feel, then post to Instagram &mdash; it's that easy. You can even share to Facebook, Twitter, Tumblr and more. It's a new way to see the world.</p>
+        <p>Oh yeah, did we mention it's free?</p>
+
+        <input type="button" value="Download on the App Store" id="app-store">
+
+        <input type="button" value="Get it on Google Play" id="google-play">
+      </div>
+    </div>
+  </div>
+
+  <footer>
+    <nav>
+      <a href="#">About Us</a>
+      <a href="#">Support</a>
+      <a href="#">Blog</a>
+      <a href="#">Press</a>
+      <a href="#">API</a>
+      <a href="#">Jobs</a>
+      <a href="#">Privacy</a>
+      <a href="#">Terms</a>
+    </nav>
+    <small>&copy; 2014 Instagram</small>
+  </footer> -->
 </body>
 </html>