wdi-hk-9 · tonianner · Sep 23, 2015 · Sep 23, 2015 · Sep 23, 2015 · 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/Notes/.DS_Store b/starter-code/Notes/.DS_Store
diff --git a/starter-code/Notes/replication-CSS-SolutionNotes.css b/starter-code/Notes/replication-CSS-SolutionNotes.css
@@ -0,0 +1,116 @@
+
+
+body {
+  background: #fff url('../images/bgtile.png') repeat-x; 
+  font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+/*
+repeat-x: repeat vertically
+../ since we need to go back to be inline with index.html
+be specific locating elements so it's easy to find
+
+
+width was set of main (the whole window) so that when you minimize, it will not go to next line
+*/
+
+/*Main CSS*/
+main {
+  width: 880px;
+  margin: 90px auto 0; /* so main can go down */
+}
+
+main section.section-left {
+  float: left;
+}
+
+main section.section-right {
+  float: right;
+  width: 500px; /* adust width so it can fit with -right */
+}
+
+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 nav button.home{
+  float: right;
+  margin-top: 20px; /* be in line with instagram*/
+  background: linear-gradient(#6c90ad, #4a7598);/* mages it gradient*/
+  border: 1 px 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{
+  position: relative;
+  margin-left: 5px;
+  bottom:5px;
+  font-size: 15px;
+
+}
+
+main section.section-right article {
+  background: url("../images/frame.png") no-repeat;
+  padding: 40px; /* put content inside */
+}
+
+main section.section-right article h1 { 
+  color: #06365f;
+  font-size: 27px;
+  margin-top: 0; /* get rid of excessive margin */
+  line-height: 1.3; /* spacing between texts vertically */
+}
+
+/**/
+
+/*Footer CSS*/
+footer ul {
+  clear: both; /*clear both: to clear everything and go to next line. clear from left and right element -right and -left*/
+  list-style: none; /* to clear bullets in list*/
+  margin: 0 0 20px; /*left and right: seperate eachother*/
+  padding: 0; /*get rid of extra padding on the left (for some reason there's an extra)*/
+  text-align: center;
+}
+
+footer ul li {
+  color: #999;  /*change color of 2014*/
+  display: inline; /*to stack against each other*/
+  font-size: 11px;
+  font-weight: bold;
+  margin: 0 10px;
+  text-transform: uppercase; /*make texts uppdercase*/
+}
+
+footer ul li a {
+  color: #1c5380; /*change color of links footer*/
+  text-decoration: none; /*formatting links so no underline*/
+}
+
+footer ul li a:hover{
+  text-decoration: underline; /*when hovering there will be underline*/
+}
diff --git a/starter-code/css/.DS_Store b/starter-code/css/.DS_Store
diff --git a/starter-code/css/main-REDO.css b/starter-code/css/main-REDO.css
@@ -0,0 +1,84 @@
+/*
+Colors to use:
+dark blue: #06365f
+light blue: #1c5380
+*/
+
+/*	#fff, white
+	../images, .. to go back one folder from CSS
+	repeat-x, repeats horizontally
+*/
+
+body {
+  background: #fff url('../images/bgtile.png') repeat-x; font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: 0;
+}
+
+main {
+	width: 800px;
+	margin: 90px auto;
+}
+
+
+main section.section-Left { 
+	float: left;
+}
+
+main section.section-Right{
+	float: right;
+	width: 450px;
+}
+
+main section.section-Right nav button.home{
+	border-radius: 5px;
+	float: right;
+	margin: 20px;
+	background: linear-gradient(#06365f, #6c90ad);
+}
+
+main section.section-Right nav button.home a{
+	text-decoration: none;
+}
+
+main section.section-Right nav button.home span{
+	text-decoration: none;
+	color: #fff;
+	font-size: 14px;
+}
+
+main section.section-Right article {
+  background: url('../images/frame.png') no-repeat;
+  padding: 40px;
+}
+
+main section.section-Right h1 {
+	font-size: 27px;
+	margin-top: 0;
+	color: #06365f;
+}
+
+main section.section-Right article img{
+	padding: 0 10px 10px;
+}
+
+footer ul{
+	clear: both;
+	list-style: none;
+	text-align: center;
+}
+
+footer ul li{
+	display: inline;
+	margin: 0 7px;
+	text-transform: uppercase;
+	color: #696969;
+}
+
+footer ul li a{
+	text-decoration: none;
+	color: #1c5380
+}
+
+footer ul li a:hover{
+	text-decoration: underline;
+}
diff --git a/starter-code/css/main.css b/starter-code/css/main.css
@@ -4,7 +4,87 @@ dark blue: #06365f
 light blue: #1c5380
 */
 
+
 body {
   font: 200 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
   margin: 0;
 }
+
+h1 {
+	color: #06365f;
+}
+span {
+	padding-left: 20px;
+}
+#button{
+	height: 50px;
+	width: 50px;
+	background-color: #99CCFF;
+	margin-top: 8%;
+	margin-left: 80%;
+	float: left;
+	position: relative;
+	border-radius: 5%;
+	border-color: #6699FF;
+	border: 1px solid white;
+	padding-right: 50px;
+	color: 3px white;
+	text-align: right;
+}
+
+#home-icon{
+	position: absolute;
+	height: 30px;
+	width: 30px;
+	margin-top: 10px;
+}
+
+#container{
+	height:300px;
+	width: 100%;
+	background-color:#06365f;}
+#phone img {
+	margin-top: 8%;
+	margin-left: 20%;
+	float: left;
+	position: absolute;
+}
+#brand img {
+	margin-top: 8%;
+	margin-left: 50%;
+	float: left;
+	position: absolute;
+
+}
+#content{
+	float:right;
+	width:40%;
+	margin-top: 14%;
+	margin-left: 50%;
+	position: absolute;
+	background:white;
+	border-radius: 5%;
+	padding: 0 5px 0 5px;
+}
+
+.download{
+	text-align: center; 
+	padding-left: 10px;
+}
+
+#footer{
+	width:100%;
+	text-align: center;
+	margin-top: 26%;
+	margin-bottom: 5%;
+	color: #1c5380;
+	font-size: 12px;
+}
+
+#footer-color{
+	color: gray;
+}
+
+
+
+
diff --git a/starter-code/images/.DS_Store b/starter-code/images/.DS_Store
diff --git a/starter-code/index-REDO.html b/starter-code/index-REDO.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Instagram</title>
+  <link rel="stylesheet" type="text/css" href="css/main-REDO.css">
+</head>
+<body>
+	<main>
+		<section class="section-Left"><img src="images/phones.png" alt="phone"></section>
+
+		<section class="section-Right">
+			<nav>
+				<a href="#"><img src="images/brand.png" alt="Instagram Home"></a>
+				<!-- 
+        class = button, for easy edit in css later, 
+        span, it won't go to next line
+        -->
+        <button class="home">
+          <a href="#"><img src="images/home.png" alt="Log In">
+          <span>Log In</span></a>
+        </button>
+			</nav>
+
+      <article>
+        <h1>Capture and Share <br> the World's Moments</h1>
+
+        <p>Instagram is a <b>fast</b>, <b>beautiful</b> and <b>fun</b> 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>
+
+        <a href="#"><img src="images/badge-iphone.png" alt="Iphone app download"></a>
+        <a href="#"><img src="images/badge-android.png" alt="Android app download"></a>
+      </article>
+    </section>
+
+		<footer>
+      <ul>
+        <a href="#"><li>About Us</a></li>
+        <a href="#"><li>Support</a></li>
+        <a href="#"><li>Blog</a></li>
+        <a href="#"><li>Press</a></li>
+        <a href="#"><li>API</a></li>
+        <a href="#"><li>Jobs</a></li>
+        <a href="#"><li>Privacy</a></li>
+        <a href="#"><li>Terms</a></li>
+
+        <li>&copy; 2014 Instagram </li>
+      </ul>
+    </footer>
+	</main>
+</body>
+</html>