homework added

css/style.css

@@ -5,7 +5,41 @@ light blue: #1c5380
 */
 
 body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Proxima Nova', Georgia, sans-serif;
   font-size: 16px;
   margin: 0;
+  font-size: 1.4rem;
+  background-image: url("../img/bgtile.png");
+  background-repeat: repeat-x;
 }
+
+h1 { 
+	font-size: 27px;
+line-height: 32px;
+margin-right: 35%;
+color: #06365f;
+}
+
+.copyright{
+	margin: 0;
+    padding: 0;
+    display: inline-block;
+    padding: 8px 6px;
+    margin: 0 0 0 8px;
+    float: none;
+    clear: both;
+    margin-top: 10px;
+    display: block;
+}
+
+p {
+  margin: 0 0 10px; }
+
+ul#horizontal-list {
+	min-width: 696px;
+	list-style: none;
+	padding-top: 20px;
+	}
+ul#horizontal-list li {
+		display: inline;
+	}

fonts/fonts.css

@@ -0,0 +1,88 @@
+/** Proxima Nova **/
+
+
+
+@font-face {
+    font-family: 'proxima_nova_altblack';
+    src: url('Mark Simonson - Proxima Nova Alt Black-webfont.eot');
+    src: url('Mark Simonson - Proxima Nova Alt Black-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Mark Simonson - Proxima Nova Alt Black-webfont.woff2') format('woff2'),
+         url('Mark Simonson - Proxima Nova Alt Black-webfont.woff') format('woff'),
+         url('Mark Simonson - Proxima Nova Alt Black-webfont.ttf') format('truetype'),
+         url('Mark Simonson - Proxima Nova Alt Black-webfont.svg#proxima_nova_altblack') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'proxima_nova_altbold';
+    src: url('Mark Simonson - Proxima Nova Alt Bold-webfont.eot');
+    src: url('Mark Simonson - Proxima Nova Alt Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Mark Simonson - Proxima Nova Alt Bold-webfont.woff2') format('woff2'),
+         url('Mark Simonson - Proxima Nova Alt Bold-webfont.woff') format('woff'),
+         url('Mark Simonson - Proxima Nova Alt Bold-webfont.ttf') format('truetype'),
+         url('Mark Simonson - Proxima Nova Alt Bold-webfont.svg#proxima_nova_altbold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('Mark Simonson - Proxima Nova Alt Regular-webfont.eot');
+    src: url('Mark Simonson - Proxima Nova Alt Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Mark Simonson - Proxima Nova Alt Regular-webfont.woff2') format('woff2'),
+         url('Mark Simonson - Proxima Nova Alt Regular-webfont.woff') format('woff'),
+         url('Mark Simonson - Proxima Nova Alt Regular-webfont.ttf') format('truetype'),
+         url('Mark Simonson - Proxima Nova Alt Regular-webfont.svg#proxima_nova_altregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 4, 2015 */
+
+
+
+@font-face {
+    font-family: 'proxima_nova_scosfthin';
+    src: url('Mark Simonson - Proxima Nova ScOsf Thin-webfont.eot');
+    src: url('Mark Simonson - Proxima Nova ScOsf Thin-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Mark Simonson - Proxima Nova ScOsf Thin-webfont.woff2') format('woff2'),
+         url('Mark Simonson - Proxima Nova ScOsf Thin-webfont.woff') format('woff'),
+         url('Mark Simonson - Proxima Nova ScOsf Thin-webfont.ttf') format('truetype'),
+         url('Mark Simonson - Proxima Nova ScOsf Thin-webfont.svg#proxima_nova_scosfthin') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'proxima_nova_ltsemibold';
+    src: url('Mark Simonson - Proxima Nova Semibold-webfont.eot');
+    src: url('Mark Simonson - Proxima Nova Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Mark Simonson - Proxima Nova Semibold-webfont.woff2') format('woff2'),
+         url('Mark Simonson - Proxima Nova Semibold-webfont.woff') format('woff'),
+         url('Mark Simonson - Proxima Nova Semibold-webfont.ttf') format('truetype'),
+         url('Mark Simonson - Proxima Nova Semibold-webfont.svg#proxima_nova_ltsemibold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'proxima_nova_ltthin';
+    src: url('Mark Simonson - Proxima Nova Thin-webfont.eot');
+    src: url('Mark Simonson - Proxima Nova Thin-webfont.eot?#iefix') format('embedded-opentype'),
+         url('Mark Simonson - Proxima Nova Thin-webfont.woff2') format('woff2'),
+         url('Mark Simonson - Proxima Nova Thin-webfont.woff') format('woff'),
+         url('Mark Simonson - Proxima Nova Thin-webfont.ttf') format('truetype'),
+         url('Mark Simonson - Proxima Nova Thin-webfont.svg#proxima_nova_ltthin') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}

index.html

@@ -3,31 +3,40 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="css/style.css">
+  <link rel="stylesheet" type="text/css" href="fonts/fonts.css">
   <title>Instagram</title>
 </head>
 <body>
-  Instagram
+
+  <div>
+  <img src="img/phones.png">
+  <img src="img/brand.png">
 
-  Capture and Share the World's Moments
+    <div>
+    <h1>Capture and Share the World's Moments</h1>
 
-  Instagram is a fast, beautiful and fun way to share your life with friends and family.
+    <p>Instagram is a fast, beautiful and fun way to share your life with friends and family.</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>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>
 
-  Oh yeah, did we mention it's free?
+    <p>Oh yeah, did we mention it's free?</p>
 
-  Download on the App Store
-  Get it on Google Play
+    <img src="img/badge-iphone.png">
+    <img src="img/badge-android.png">
+    </div>
+  </div>  
+    <ul id="horizontal-list">
+    <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>
+    </ul>
 
-  About Us
-  Support
-  Blog
-  Press
-  API
-  Jobs
-  Privacy
-  Terms
-
-  &copy; 2014 Instagram
+  <p class="copyright">© 2014 Instagram</p>
 </body>
 </html>