vikingeducation · AshMcD · Sep 9, 2017 · Sep 9, 2017 · Sep 9, 2017 · Sep 11, 2017
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
 prep_facebook_pages
 ===================
 
+Ashley McDonnell
+
 [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).
diff --git a/about.css b/about.css
@@ -0,0 +1,148 @@
+
+.navbar {
+  height: 83px;
+  width: 100%;
+  background-color: #3B5998;
+  color: #FFFFFF;
+  display: inline-block;
+
+}
+
+.navbar h1 {
+  display: inline-block;
+  font-size: 50px;
+  padding-left: 120px;
+  padding-top: 15px;
+  width: 210px;
+  margin: 0;
+}
+
+.navbar input {
+  display: inline-block;
+  font-size: 1.5em;
+  padding-left: 15px;
+  color: grey;
+  width: 50%;
+}
+
+.navbar p {
+  display: inline-block;
+  font-size: 1.3em;
+  padding-right: 120px;
+  padding-left: 240px;
+}
+
+.header-border {
+  height: 550px;
+  width: 75%;
+  background-color: white;
+  margin: auto;
+  border: 1px solid black;
+}
+
+.profile-pic {
+  height: 200px;
+  width: 200px;
+  background-color: white;
+  position: absolute;
+  margin-top: 350px;
+  margin-left: 25px;
+  border: 1px solid black;
+}
+
+.user-name {
+  position: absolute;
+  color: black;
+  font-size: 25px;
+  margin-top: 500px;
+  margin-left: 250px;
+}
+
+.user-nav {
+  width: 75%;
+  height: 2em;
+  margin: auto;
+  text-align: center;
+  border: 1px solid black;
+
+}
+
+.user-nav a { /* styling for timeline, about, etc. */
+  font-size: 1.4em;
+  width: 75px;
+  height: inherit;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 4px;
+  color: red;
+  border: 1px solid black;
+  margin-left: 10px;
+  margin-right: 10px;
+
+}
+
+a[href$="edit"] { /* to float edit profile to right */
+  float: right;
+  font-size: 1em;
+  height: 50%;
+  padding-top: 0.3em;
+  border: 0;
+  color:  #3B5998;
+}
+
+.about-bar {
+  width: 75%;
+  height: auto;
+  margin: auto;
+  text-align: center;
+  border: 1px solid black;
+  margin-top: 20px;
+  font-size: 1.6em;
+  background-color: white;
+  border-bottom: none;
+}
+
+.about-text {
+  width: 75%;
+  height: 1000px;
+  background-color: grey;
+  margin: auto;
+  border: 1px solid black;
+}
+
+.basic-content {
+  width: 35%;
+
+  float: left;
+  padding-left: 100px;
+}
+
+.basic-content h2 {
+  font-size: 1.4em;
+  padding: 15px;
+}
+
+.basic-content h3, p {
+  display: inline;
+  padding: 10px;
+  font-size: 1.2em;
+  line-height: 50px;
+
+}
+
+.basic-content h3 {
+  padding-right: 50px;
+  height: 40px;
+  width: 250px;
+
+}
+
+.blurb-content h2 {
+  font-size: 1.4em;
+  padding: 15px;
+}
+
+.blurb-content p {
+  font-size: 1em;
+  line-height: normal;
+}
diff --git a/about.html b/about.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="master.css">
+    <link rel="stylesheet" href="about.css">
+    <title>About</title>
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
+
+  </head>
+  <body>
+    <header> <!--page navigation bar -->
+      <nav class="navbar">
+      <h1>facebook</h1>
+      <input type="text" name="search" value="Search for Users">
+      <p>George</p>
+      </nav>
+    </header>
+
+    <section class="header-border"> <!-- header image and profile pic -->
+
+        <div class="profile-pic">
+
+        </div>
+        <div class="user-name">
+          <p>George Costanza</p>
+        </div>
+    </section>
+
+    <section class="user-nav"> <!-- user navigation bar-->
+    <nav>
+      <a href="/Timeline/">Timeline</a>
+      <a href="/About/">About</a>
+      <a href="/Photos/">Photos</a>
+      <a href="/Friends/">Friends</a>
+      <a href="/edit">Edit Profile</a>
+    </nav>
+    </section>
+
+    <section class="about-bar"> <!-- about heading bar-->
+      <h1>About</h1>
+    </section>
+
+    <section class="about-text">
+      <div class="basic-content">
+      <h2>Basic Information</h2><br>
+      <h3>Birthday:</h3><p>July 1st, 1986</p>
+      <h3>College:</h3><p>NYU</p><br>
+      <h3>Hometown:</h3><p>New Jersey</p><br>
+      <h3>Currently Lives:</h3><p>New York</p><br>
+      <h2>Contact Information</h2><br>
+      <h3>Email:</h3><p>[email protected]</p><br>
+      <h3>Phone Number:</h3><p>0488 121 293</p><br>
+
+      </div>
+
+
+
+
+    <div class="blurb-text">
+      <div class="blurb-content">
+      <h2>Words to Live By</h2><br>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing
+        elit, sed do eiusmod tempor incididunt ut labore et
+        dolore magna aliqua. Ut enim ad minim veniam, quis
+        nostrud exercitation ullamco laboris nisi ut aliquip
+         ex ea commodo consequat. Duis aute irure dolor in
+         reprehenderit in voluptate velit esse cillum dolore
+          eu fugiat nulla pariatur. Excepteur sint occaecat
+          cupidatat non proident,</p><br>
+      <h2>About Me</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+         sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+           ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit
+             esse cillum dolore eu fugiat nulla pariatur. Excepteur
+             sint occaecat cupidatat non proident, sunt in culpa qui
+             officia deserunt mollit anim id est laborum.</p>
+
+      </div>
+      </div>
+    </section>
+
+  </body>
+</html>
diff --git a/home.css b/home.css
@@ -0,0 +1,75 @@
+
+
+.login {
+  height: 83px;
+  width: 100%;
+  background-color: #3B5998;
+  color: #FFFFFF;
+  display: inline-block;
+
+
+}
+
+.login p {
+  font-size: 1.7em;
+  padding-left: 280px;
+  padding-top: 29px;
+  width: 350px;
+  margin: 0;
+
+}
+
+.login input, label {
+  display: inline-block;
+  margin-bottom: 10px;
+  padding-top: 0px;
+
+
+}
+
+.login button {
+
+}
+
+.thank-you {
+  display: inline-block;
+  height: auto;
+  padding-left: 280px;
+  padding-top: 15px;
+}
+
+.sign-up {
+  display: inline-block;
+  float: right;
+  width: 650px;
+  height: auto;
+  padding-right: 80px;
+  padding-top: 15px;
+  text-align: left;
+}
+
+.sign-up h1 {
+  font-size: 2.5em;
+  font-weight: bold;
+}
+
+.sign-up h2 {
+  font-size: 1.5em;
+  padding-bottom: 20px;
+}
+
+.sign-up input {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 1.2em;
+  display: inline-block;
+
+}
+
+.sign-up button {
+  width: 200px;
+  height: 40px;
+  background-color: green;
+  font-family: 'PT Sans', sans-serif;
+  font-size: 1.5em;
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="master.css">
+    <link rel="stylesheet" href="reset.css">
+    <link rel="stylesheet" href="home.css">
+    <title>Facebook</title>
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
+  </head>
+  <body>
+
+    <header class="login">
+
+      <p>facebook</p>
+
+        <label for="email">Email</label>
+        <input type="email" name="email" maxlength="30" value="">
+        <label for="password">Password</label>
+        <input type="password" name="password" maxlength="20" value="">
+        <button type="button" name="logIn">Log In</button>
+
+
+    </header>
+
+    <section class="thank-you">
+
+        <img src="images/thanks.png" alt="thanks">
+        <h2>Thanks for stopping by!</h2>
+        <p>We hope to see you again soon.</p>
+
+
+    </section>
+
+    <section class="sign-up">
+      <h1>Create an account</h1>
+      <h2>It's free and always will be.</h2>
+      <form class="sign-up-input" action="index.html" method="post">
+        <input type="text" name="firstName" value="First name">
+        <input type="text" name="lastName" value="Last name"><br>
+        <input type="email" name="emailAddress" value="Email address"> <br>
+        <input type="password" name="password" value="New password"><br>
+        <p>Birthday</p>
+        <input type="date" name="birthDate" value=""><br>
+        <input type="radio" name="gender" value="Female"><span class="label label-default">Female</span>
+        <input type="radio" name="gender" value="Male"><span class="label label-default">Male</span><br>
+        <button type="button" name="submit">Submit</button>
+      </form>
+    </section>
+
+  </body>
+</html>
diff --git a/images/thanks.png b/images/thanks.png
diff --git a/master.css b/master.css
@@ -0,0 +1,3 @@
+html {
+  font-family: 'PT Sans', sans-serif;
+}