vikingeducation · MarketingCoder · Sep 20, 2017 · Sep 21, 2017 · Sep 21, 2017 · Sep 21, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -2,3 +2,5 @@ prep_facebook_pages
 ===================
 
 [This is an HTML and CSS project from the Viking Code School Prep Work](http://www.vikingcodeschool.com/web-markup-and-coding/let-s-build-facebook).
+
+isaac asimov
diff --git a/about.html b/about.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Facebook About</title>
+
+
+    <link rel="stylesheet" href="fbstyles.css">
+  </head>
+  <body>
+
+
+  <div >
+
+
+<span id="nav-loggedin">
+
+
+<span ><img class="thumbnail-face" src="harry1.jpg" ></span>
+<span ><img class="logo-loggedin" src="facebook-logo-vector-400x400" ></span>
+
+
+
+
+  <span><input class="search" type="text" name="search" placeholder="Search for users"></span>
+
+
+</div>
+
+<span ><img id="background-image" src="background.jpg" >
+
+<div class="categories"><div class="cat1"></div><div class="cat2"><p>Timeline</p></div><div class="cat3"><p >About</p></div><div class="cat4"><p >Photos</p></div><div class="cat5"><p >Friends</p></div><div></div class="cat6"></div></span>
+<span ><img class="main-face" src="harry1.jpg" ></span>
+
+<div class="About-Heading"><h2>About</h2>
+<span class="edit-button">
+<input type="submit" value="Edit"></span></div>
+
+<div id="about-description">
+  <div id="personal-stats"><p>Email and Shit</p><p>Email and Shit</p><p>Email and Shit</p><p>Email and Shit</p><p>Email and Shit</p><p>Email and Shit</p></div> <div id="personal-detailed"><p>My Story</p><p>My Story</p><p>My Story</p><p>My Story</p><p>My Story</p><p>My Story</p><p>My Story</p></div> 
+
+
+
+</div>
+
+
+
+
+
+</body>
+
diff --git a/background.jpg b/background.jpg
diff --git a/facebook-logo-vector-400x400 b/facebook-logo-vector-400x400
diff --git a/fbstyles.css b/fbstyles.css
@@ -0,0 +1,213 @@
+
+
+#logo{
+position: absolute;
+    right: 500px;
+	    top: -145px;
+
+
+}
+.thumbnail-face{
+	position: absolute;
+    left: 50px;
+    top:15px; 
+    width: 3%;
+	    height: 6%;  
+}
+
+
+.logo-loggedin{
+	position: absolute;
+    left: 100px;
+	    top: -40px;
+	    width: 10%;
+	    height: 25%;
+}
+
+.search{
+position: absolute;
+top:15px;
+right: 400px;
+width: 500px;
+}
+.main-face {
+position: absolute;
+    right: 920px;
+	    top: 435px;
+	    width: 12%;
+	    height: 24%;
+	    border:100px;
+	    border-color: grey;   
+}
+
+
+#background-image{
+
+position: absolute;
+    right: 60px;
+
+	    top: 50px;
+	    width: 85%;
+	    height: 85%;  
+
+
+}
+.categories{
+	display:flex;
+	position: absolute;
+	width: 900px;
+	height: :1px;
+	margin-left: 200px;
+	margin-right:200px;
+	top: 500px;
+	border:1px solid black;
+
+
+
+}
+
+.cat1{
+
+margin-left: 60px;
+margin-right:30px;
+font-weight: bold;
+
+
+
+}
+.cat2{
+margin-left: 30px;
+margin-right:30px;
+font-weight: bold;
+
+
+
+
+}
+
+.cat3{
+margin-left: 30px;
+margin-right:30px;
+font-weight: bold;
+
+
+}
+.cat4{
+margin-left: 30px;
+margin-right:30px;
+font-weight: bold;
+
+}
+.cat5{
+margin-left: 30px;
+margin-right:30px;
+font-weight: bold;
+
+
+}
+.cat6{
+margin-left: 30px;
+margin-right:30px;
+font-weight: bold;
+
+}
+
+
+.About-Heading{
+	position: absolute;
+	top: 620px;
+	width: 900px;
+	margin-left: 200px;
+	margin-right:200px;
+background-color: grey;
+text-align:center;
+border:1px solid black;
+}
+.edit-button{
+
+	position:absolute;
+	top:20px;
+	right:10px;
+
+}
+
+#about-description{
+position: absolute;
+	top: 690px;
+	width:900px;
+	width: 900px;
+	margin-left: 200px;
+	margin-right:200px;
+	border:1px solid black;
+
+}
+#personal-stats{
+float:left;
+
+
+
+}
+#personal-detailed{
+float:right;
+
+
+
+}
+
+
+
+#nav{
+display: flex;
+
+background-color: #3b5998;
+	width:100%;
+	height: 120px;
+
+}
+#nav-loggedin{
+display: flex;
+
+background-color: #3b5998;
+	width:100%;
+	height: 50px;
+
+}
+
+#login-email{
+
+position: absolute;
+    right: 300px;
+    top: 10px;
+    color: white;
+
+
+
+}
+#login-password{	
+
+position: absolute;
+    right: 150px;
+    top: 10px;
+    color: white;
+
+
+}
+#login-button{	
+
+position: absolute;
+	right:50px;
+    top: 30px;
+}
+
+aside{
+
+	font-size:2em;
+	font-weight: bold;
+}
+
+#signup{
+
+float:right;
+margin: 5px;
+
+}
diff --git a/harry1.jpg b/harry1.jpg
diff --git a/homepage.html b/homepage.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Facebook Log-In</title>
+
+
+    <link rel="stylesheet" href="fbstyles.css">
+  </head>
+  <body>
+
+
+  <div class="nav">
+
+
+<span id="nav">
+
+<span id="login-email">
+<span ><img id="logo"src="facebook-logo-vector-400x400"></span>
+
+  <label for="email">Email or Phone</label><br />
+  <input type="email" name="email" placeholder="Email" required></span>
+
+
+
+
+<span id="login-password">
+<label for="password">Password</label> <br />
+
+<input type="password" name="password" placeholder="Password" required></span>
+
+<span id="login-button">
+<input type="submit" value="Submit"></span>
+
+</span></span></div>
+
+<br /><br /><br /><br />
+<aside>FakeBook-----The Place for Narcissists!</aside>
+
+
+
+<br /><br /><br /><br />
+
+
+<div id="signup">
+
+<span id="signup-fname">
+<input type="text" name="first-name" placeholder="First name"></span>
+
+<span id="signup-lname">
+<input type="text" name="last-name" placeholder="Last name"></span>
+<br /><br />
+
+<span id="signup-email">
+<input type="email" name="email" placeholder="Your Email" required></span><br /><br />
+
+  <span id="signup-email-reenter">
+  <input type="email" name="email" placeholder="Re-enter Email" required></span>
+
+<br /><br />
+<span id="signup-password">
+<input type="password" name="password" placeholder="New Password" required></span>
+
+<br /><br />
+
+
+<label for="month">Birth Month</label>
+<select name="Month">
+  <option value="Jan">Jan</option>
+  <option value="Feb">Feb</option>
+  <option value="Mar">Mar</option>
+<option value="Apr">Apr</option>
+<option value="May">May</option>
+<option value="Jun">Jun</option>
+<option value="Jul">Jul</option>
+<option value="Aug">Aug</option>
+<option value="Sep">Sep</option>
+<option value="Oct">Oct</option>
+<option value="Nov">Nov</option>
+<option value="Dec">Dec</option>
+</select>
+
+<label for="year">Birth Year</label>
+<select name="Month">
+  <option value="2005">Before 2005</option>
+  <option value="1995">Before 1995</option>
+  <option value="1985">Before 1985</option>
+<option value="1975">Before 1975</option>
+<option value="1965">Before 1965</option>
+<option value="1955">Before 1955</option>
+</select>
+<br /><br />
+<label for="gender">Male</label>
+<input type="radio" name="gender" value="m">
+<label for="gender">Female</label>
+<input type="radio" name="gender" value="f"><br /><br />
+
+<span id="signin-button">
+<input type="submit" value="Submit"></span>
+
+</div>
+
+
+
+</body>
+