vikingeducation · SarahSchoonmaker · Nov 4, 2017 · Nov 4, 2017 · Nov 4, 2017 · Nov 4, 2017
diff --git a/About/README.md b/About/README.md
@@ -0,0 +1,4 @@
+Facebook About Page
+
+
+[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/fields.jpg b/About/fields.jpg
diff --git a/About/index.html b/About/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Facebook About Page</title> 
+    <link href="style1.css" rel="stylesheet" type="text/css"> 
+</head> 
+<body>
+    <nav class="top-navigation">
+        <div class="content">
+            <div class="header">
+              <img src="#" alt="Profile Pic" border="2">
+              <h1>Facebook</h1>
+                <div class="wrapper">
+                  <input class="search" type="text" placeholder="Search for users" id="search" />
+                  <input class="submit" type="submit" value=" " />
+                </div>
+                <a href="#">Login Name</a>
+            </div>
+        </div>
+    </nav>
+    <section class="introduction">
+        <div class="content">
+            <section class="about-top">
+                <div class="bottom-border">
+                   <img src="" alt="Profile Pic" border="2">
+                  <div class="outer">
+                      <a href="#">Edit Profile</a>
+                    <ul class="wrap">
+                      <li>Timeline</li>
+                      <li>About </li>
+                      <li>Photos</li>
+                      <li>Friends</li>
+                    </ul> 
+                 </div>
+                </div>
+              <div class="top-menu">
+                <h1>About</h1>
+                <hr/>
+              </div>
+              <div class="bottom-border-lower">
+                <div class="basic-info">
+                  <h1>Basic Information</h1>
+                    <table>
+                      <tr>
+                        <td>Birthday:</td>
+                        <td>1/1/1111</td>
+                       </tr>
+                      <tr>
+                        <td>College:</td>
+                        <td>Some College</td>
+                      </tr>
+                      <tr>
+                        <td>Hometown:</td>
+                        <td>Home</td>
+                       </tr>
+                      <tr>
+                        <td>Current Location:</td>
+                        <td>Current place</td>
+                      </tr>
+                    </table>
+                <h1>Contact Information</h1>
+                  <table>
+                      <tr>
+                        <td>Email:</td>
+                        <td>[email protected]</td>
+                      </tr>
+                      <tr>
+                        <td>Phone Number:</td>
+                        <td>000-000-0000</td>
+                      </tr>
+                    </table>
+              <div class="description-right">
+                <h1>Words to Live By</h1>
+                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</p>
+                <h1>About Me</h1>
+                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
+              </div>
+           </div> 
+          </section> 
+         </div>
+      </section>
+    <footer class="footer">
+        <div class="content-footer">
+            <span class="copy">
+                &copy; Sarah Schoonmaker, Inc.
+            </span>
+        </div>
+    </footer>
+  </body>
+ </head>
+</html>
+
+
diff --git a/About/search.png b/About/search.png
diff --git a/About/style.css b/About/style.css
@@ -0,0 +1,245 @@
+html, body {
+ margin: 0; 
+ padding: 0;
+ overflow-y: auto;
+ background: #f2f2f2;
+ font-family: 'Open Sans', sans-serif;
+}
+
+/*Header */
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  border:2px solid #505559;
+  background: #036EEE; 
+  height: 30px;
+  padding-bottom: 2em;
+
+}
+
+.header h1 {
+    margin-left: 10%;
+    bottom:20px;
+    float: left;
+    color: #FFFFFF;
+    font: 30px arial, sans-serif; 
+}
+
+.header img {
+    position: fixed;
+    height:50px;
+    width:50px; 
+    widows: 4px;0px;
+    right:90%;
+    margin:5px 8px 0 5px;
+
+}
+
+
+.header a {
+    position: fixed;
+    left:80%;
+    top: 5%;
+    text-decoration: none;
+    color: #FFFFFF;
+
+}
+.wrapper {
+  position: fixed;
+  width: 100%;
+  height: 80px;
+  font-size: 0;
+  top: 10%;
+  left:32%;
+  -webkit-transform: translateY(-40%);
+  transform: translateY(-40%);
+}
+
+.search {
+  width:30%;
+  font-size: 18px;
+  max-width: 400px;
+  height: 19px;
+  border: 1px solid #b3b3b3;
+  border-radius: 15px 0 0 15px;
+}
+
+.submit {
+   top:.4em;
+  cursor: pointer;
+  border: none;
+  background: url("http://thesuiteworld.com/wp-admin/maint/search-icon-white-png-540.png") no-repeat center center, #1E1E20;
+  background-size: 22px 22px;
+  border-radius: 0 12px 12px 0;
+  padding: 8px 3px 16px 3px;
+  display: inline-block;
+  width: 80px;
+  height: 5px;
+}
+
+/**
+ * Body
+ */
+.introduction {
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    height: 595px;
+    overflow: auto;
+    width:100%;
+}
+
+.about-top {
+    margin: 100px auto;
+    margin-top:8.3%;
+    width: 1050px;
+    height: 303px;
+    border: 2px solid #92939C;
+    box-sizing: border-box;
+    margin-left: 12%;
+    background-image: url("fields.jpg");
+
+}
+
+.bottom-border img {
+  margin-top:11%;
+  background-color: #92939C;
+  margin-left: 1em;
+  padding:40px 50px 50px 40px;
+
+}
+
+.about-top img:hover {
+    cursor: pointer;
+}
+
+.bottom-border {
+    height: 10%;
+    width:100%;
+}
+.outer{background:#E6E0D3; width:100%; height:56px;}
+.wrap{margin-left:30%;  }
+.wrap li{
+    padding:15px;
+    text-align: left;
+    width:26%;
+    display:table-cell;
+    border-right:solid #5E5C58 1.5px;
+    line-height: 1.7;
+}
+li:first-child {
+    border-left:solid #5E5C58 1.5px;
+}
+
+
+li:hover {
+    cursor: pointer;
+}
+
+
+.outer a {
+  float: right;
+  text-decoration: none;
+  margin-right:10%;
+  margin-top:1em;
+
+
+}
+
+.bottom-border-lower {
+    width:100%;
+    height: 140%;
+    border: 2px solid #92939C;
+    border-top:none;
+    box-sizing: border-box;
+    margin-top: -1.6%;
+    margin-bottom:5%;
+}
+
+.basic-info h1 {
+    margin-left:10%;
+}
+
+.basic-info table {
+    margin-left: 10%;
+}
+
+.top-menu {
+    margin-top:28%;
+    background-color: #A6A49E;
+}
+
+.top-menu h1 {
+    padding-top:.6em;
+    text-align: center;
+    font-size: 18px;
+    color: #140E01;
+
+}
+
+.basic-info {
+   margin:1em;
+   padding:.5em;
+
+}
+
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 2px solid #92939C;
+    margin: 1em 0;
+    padding: 0;
+}
+
+/* Not sure how to 
+align two divs without negative
+margin.  */
+
+.description-right {
+    float: right;
+    width: 50%;
+    margin-top:-26%;
+}
+
+
+/**
+ * Footer
+ */
+.footer {
+    background-color: #DBD7CF;
+    overflow: auto;
+    padding-bottom: 9.375rem;
+    text-align: center;
+    padding-bottom:0;
+    height: 50px;
+}
+
+.content-footer{
+    text-align: center;
+    margin-top:1em;
+}
+
+
+/**
+ * Responsive Design
+ */
+@media (min-width: 45rem) {
+    .content {
+        width: 65rem;
+    }
+}
+@media (min-width: 62rem) {
+    .content {
+        width: 60rem;
+    }
+}
+@media (min-width: 75rem) {
+    .content {
+        width: 60%;
+    }
+}
+
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-prep_facebook_pages
-===================
+Facebook About Page
+
+Preview: https://facebook-about-page-sarahs.c9users.io/
+
 
 [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).