diff --git a/about.html b/about.html
new file mode 100644
index 0000000..4d6d140
--- /dev/null
+++ b/about.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title>About Droom</title>
+
+    <!-- Custom Styles -->
+    <link rel="stylesheet" href="css/index.css">
+    <!-- <style>
+        @import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
+    </style>
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
+    </style> -->
+</head>
+
+<body>
+    <nav class ="topnav">
+        <div class = "toplogo">
+         <h2>Droom</h2>
+        </div>
+
+        <div class = "links2">
+            <a href = "index.html">Home</a>
+            <a href = "about.html">About</a>
+            <a href = "https://droom-bw-3-lol.herokuapp.com/login">Login</a> 
+            <a href = "https://droom-bw-3-lol.herokuapp.com/signup">Sign Up</a>
+        </div>
+    <section class = "aboutteam">
+        <div class = "sec-one">
+            <div class = "meetthe">
+            <h2 class = "meet">Meet the Team</h2>
+            <p>The team of developers that put this amazing web site together are all Lambda School students.</p>
+            </div>
+            <img class ="aboutimg" src = "https://static-2.gumroad.com/res/gumroad/1211634803146/asset_previews/d6d3d972c548df4ee76bbc474264ffbf/retina/drawkit-phone-conversation-colour-thumbnail.jpg">
+        </div>
+        
+        <div class = "peopleboxes">
+            <div class = "JShep">
+                <h3>J. Tyler Sheppard</h3>
+                <img class = "peopleimgs" src ="https://ca.slack-edge.com/T4JUEB3ME-UGZH15RT9-92ca3b38606a-512">
+                <h4>Team Lead</h4>
+                <p>Awesome Team Lead. 10/10 will knock your socks off with skills.</p>
+            </div>
+
+            <div class = "JDess">
+                <h3>Jeffrey Dessir</h3>
+                <img class = "peopleimgs" src = "https://avatars0.githubusercontent.com/u/8616589?s=460&v=4">
+                <h4>Back End Developer</h4>
+                <p>Technomancer (n.) - a righteous practitioner of Technomancy; the interdisciplinary art of expressive programming to code truth, & purge evil.</p>
+            </div>
+
+            <div class = "PresM">
+                <h3>Preston Middleton</h3>
+                <img class = "peopleimgs" src = "https://ca.slack-edge.com/T4JUEB3ME-UHZCMRH55-b3217ff370b3-512">
+                <h4>Back End Developer</h4>
+                <p>Awesome Back End Developer. 10/10 will knock your socks off with skills.</p>
+            </div>
+
+            <div class = "ShawnD">
+                <h3>Shawn DelPercio</h3>
+                <img class = "peopleimgs" src = "https://ca.slack-edge.com/T4JUEB3ME-UQAQQ3H38-f073269b6822-512">
+                <h4>React 1 Developer</h4>
+                <p>Web Developer with a passion for solving problems</p>
+            </div>
+
+            <div class = "KatP">
+                <h3>Katya Pavlopoulos</h3>
+                <img class = "peopleimgs" src = "https://ca.slack-edge.com/T4JUEB3ME-UQ1NHK9DM-2fad76ae07b1-512">
+                <h4>React 1 Developer</h4>
+                <p>Awesome React 1 Developer. 10/10 will knock your socks off.</p>
+            </div>
+
+            <div class = "AAnd">
+                <h3>Aaron Anderson</h3>
+                <img class = "peopleimgs" src ="https://ca.slack-edge.com/T4JUEB3ME-UPGESA99N-8fd4e163fbd4-512">
+                <h4>React 2 Developer</h4>
+                <p>Awesome React 2 Developer. 10/10 will knock your socks off with skills.</p>
+            </div>
+
+            <div class = "TristD">
+                <h3>Tristan Depew</h3>
+                <img class = "peopleimgs" src ="https://ca.slack-edge.com/T4JUEB3ME-UPHLXMMBK-g9913a7df3bc-512">
+                <h4>React 2 Developer</h4>
+                <p>Full stack web developer studying at Lambda School</p>
+            </div>
+
+            <div class = "me">
+                <h3>Naomi Priest</h3>
+                <img class = "peopleimgs" src = "https://ca.slack-edge.com/T4JUEB3ME-URDAV2AV7-a4e719e888aa-512">
+                <h4>UI Developer</h4>
+                <p>Lover of dogs, Mexican food, and amazing CSS pages.</p>
+            </div>
+
+            <div class = "ColinB">
+                <h3>Colin Barnes</h3>
+                <img class = "peopleimgs" src = "https://ca.slack-edge.com/T4JUEB3ME-US7PQKGBX-9f749ab516bc-512">
+                <h4>UI Developer</h4>
+                <p>Full-Stack Web Development student at Lambda School</p>
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <div class = "footlogo">
+            <h2>Droom</h2>
+        </div>
+        <div class = "links">
+            <a href = "index.html">Home</a>
+            <a href = "about.html">About</a>
+            <a href = "https://droom-bw-3-lol.herokuapp.com/login">Login</a>
+            <a href = "https://droom-bw-3-lol.herokuapp.com/signup">Sign Up</a>
+        </div>
+    </footer>
+    
+</body>
+</html>
diff --git a/css/about.css b/css/about.css
new file mode 100644
index 0000000..299a6d1
--- /dev/null
+++ b/css/about.css
@@ -0,0 +1,135 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 55c1f5c..3ed16e0 100644
--- a/css/index.css
+++ b/css/index.css
@@ -126,3 +126,667 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+.topnav {
+  display: flex;
+  flex-wrap: wrap;
+  color: #CAA767;
+  justify-content: space-between;
+  background-color: #213159;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  width: 100%;
+  margin: 0 auto;
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:800px ) {
+  .topnav {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    margin: 0;
+  }
+}
+@media ( max-width: 500px ) {
+  .topnav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    width: 100%;
+    margin: 0;
+  }
+}
+@media ( max-width:400px ) {
+  .topnav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+  }
+}
+.topnav .toplogo {
+  width: 20rem;
+  padding: 0% 1%;
+  justify-content: flex-end;
+  text-align: center;
+  margin-left: 50px;
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:800px ) {
+  .topnav .toplogo {
+    margin-left: 0px;
+    justify-content: flex-start;
+    font-size: 5rem;
+  }
+}
+@media ( max-width: 500px ) {
+  .topnav .toplogo {
+    text-align: center;
+    padding: 0px;
+    width: 100%;
+    justify-content: center;
+  }
+}
+@media ( max-width:400px ) {
+  .topnav .toplogo {
+    text-align: center;
+    margin-bottom: 2rem;
+    justify-content: center;
+  }
+}
+.topnav .links2 {
+  width: 60rem;
+  align-content: center;
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:1000px ) {
+  .topnav .links2 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+@media ( max-width:800px ) {
+  .topnav .links2 {
+    width: 80%;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    justify-content: center;
+  }
+}
+@media ( max-width: 500px ) {
+  .topnav .links2 {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+}
+@media ( max-width:400px ) {
+  .topnav .links2 {
+    width: 100%;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+  }
+}
+.topnav .links2 a {
+  text-decoration: none;
+  color: white;
+  padding: 0% 4%;
+  cursor: pointer;
+  margin: 0.5rem;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+}
+.topnav .links2 a:hover {
+  color: #CAA767;
+  border-top: 1px dashed #CAA767;
+  border-bottom: 1px dashed #CAA767;
+}
+@media ( max-width:400px ) {
+  .topnav .links2 a {
+    justify-content: center;
+    width: 25%;
+    align-items: center;
+    margin-top: 1.5rem;
+  }
+}
+footer {
+  display: flex;
+  flex-wrap: wrap;
+  color: #CAA767;
+  justify-content: space-between;
+  background-color: #213159;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  width: 100%;
+  margin: 0 auto;
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:800px ) {
+  footer {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    margin: 0;
+  }
+}
+@media ( max-width: 500px ) {
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    width: 100%;
+    margin: 0;
+  }
+}
+@media ( max-width:400px ) {
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+  }
+}
+footer .footlogo {
+  width: 20rem;
+  padding: 0% 1%;
+  justify-content: flex-end;
+  text-align: center;
+  margin-left: 50px;
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:800px ) {
+  footer .footlogo {
+    margin-left: 0px;
+    justify-content: flex-start;
+    font-size: 5rem;
+  }
+}
+@media ( max-width: 500px ) {
+  footer .footlogo {
+    text-align: center;
+    width: 100%;
+    justify-content: center;
+    padding: 0px;
+  }
+}
+@media ( max-width:400px ) {
+  footer .footlogo {
+    text-align: center;
+    margin-bottom: 2rem;
+    justify-content: center;
+  }
+}
+footer .links {
+  width: 60rem;
+  align-content: center;
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:1000px ) {
+  footer .links {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+}
+@media ( max-width:800px ) {
+  footer .links {
+    width: 80%;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    justify-content: center;
+  }
+}
+@media ( max-width: 500px ) {
+  footer .links {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+}
+@media ( max-width:400px ) {
+  footer .links {
+    width: 100%;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+  }
+}
+footer .links a {
+  text-decoration: none;
+  color: white;
+  padding: 0% 4%;
+  cursor: pointer;
+  margin: 0.5rem;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+}
+footer .links a:hover {
+  color: #CAA767;
+  border-top: 1px dashed #CAA767;
+  border-bottom: 1px dashed #CAA767;
+}
+@media ( max-width:400px ) {
+  footer .links a {
+    justify-content: center;
+    width: 25%;
+    align-items: center;
+    margin-top: 1.5rem;
+  }
+}
+html {
+  font-size: 62.5%;
+}
+#navandheader {
+  background-color: #213159;
+  background-image: linear-gradient(180deg, #213159 12%, #8ec5fc 50%, #caa767 100%);
+  margin-bottom: 2%;
+}
+@media ( max-width: 500px ) {
+  #navandheader {
+    margin-bottom: 5%;
+  }
+}
+#navandheader .droomit {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+#navandheader .droomit h1 {
+  font-size: 5.5rem;
+  font-family: 'Dancing Script', cursive;
+  text-align: center;
+  color: #213159;
+  margin-bottom: 4rem;
+}
+@media ( max-width: 500px ) {
+  #navandheader .droomit h1 {
+    width: 100%;
+  }
+}
+#navandheader .droomit .logoimg {
+  width: 30%;
+  padding: 6rem 6rem;
+  border-radius: 13rem;
+}
+@media ( max-width: 500px ) {
+  #navandheader .droomit .logoimg {
+    width: 40%;
+  }
+}
+#navandheader .droomit .letsgo {
+  padding: 1rem 10rem;
+  border: none;
+  border-radius: 5rem;
+  background: #213159;
+  margin-left: 5rem;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+  color: #CAA767;
+  margin-left: 10rem;
+}
+#navandheader .droomit .letsgo:hover {
+  color: #213159;
+  background-color: #CAA767;
+  cursor: pointer;
+}
+@media ( max-width:1000px ) {
+  #navandheader .droomit .letsgo {
+    margin-left: 4rem;
+  }
+}
+@media ( max-width:800px ) {
+  #navandheader .droomit .letsgo {
+    padding: 1rem 5rem;
+  }
+}
+@media ( max-width: 500px ) {
+  #navandheader .droomit .letsgo {
+    margin-left: 10rem;
+  }
+}
+@media ( max-width:400px ) {
+  #navandheader .droomit .letsgo {
+    margin-left: 5rem;
+  }
+}
+#navandheader .droomit .h1andbutton {
+  width: 40%;
+  margin: 5rem;
+  justify-content: center;
+}
+@media ( max-width: 500px ) {
+  #navandheader .droomit .h1andbutton {
+    width: 100%;
+  }
+}
+.section-one {
+  background-color: #8EC5FC;
+  justify-content: space-evenly;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 2%;
+}
+@media ( max-width:800px ) {
+  .section-one {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 5%;
+  }
+}
+@media ( max-width:400px ) {
+  .section-one {
+    margin-bottom: 10%;
+  }
+}
+.section-one .what {
+  font-size: 6rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:400px ) {
+  .section-one .what {
+    font-size: 5rem;
+  }
+}
+.section-one .one-text {
+  width: 40%;
+  text-align: center;
+  padding: 4%;
+  line-height: 1.5;
+  color: #213159;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:800px ) {
+  .section-one .one-text {
+    width: 90%;
+    margin: 20px;
+  }
+}
+@media ( max-width: 500px ) {
+  .section-one .one-text {
+    margin: 0px;
+  }
+}
+@media ( max-width:400px ) {
+  .section-one .one-text {
+    font-size: 3rem;
+    padding: 0px;
+  }
+}
+.section-one .section-one-image {
+  width: 30%;
+  order: -1;
+  padding: 8rem 10rem;
+  border-radius: 13rem;
+}
+@media ( max-width:800px ) {
+  .section-one .section-one-image {
+    width: 40%;
+    padding: 0;
+    border-radius: 5rem;
+    margin-top: 30px;
+  }
+}
+@media ( max-width:400px ) {
+  .section-one .section-one-image {
+    width: 50%;
+    border-radius: 5rem;
+  }
+}
+.section-two {
+  background-color: #8ec5fc;
+  background-image: linear-gradient(0deg, #8ec5fc 25%, #e9d896 100%);
+  padding: 2rem;
+  margin-bottom: 3rem;
+}
+.section-two .boximg {
+  width: 60%;
+}
+.section-two .how {
+  text-align: center;
+  width: 100%;
+  margin: 0 auto;
+  padding: 2%;
+  color: #213159;
+  font-size: 6rem;
+  font-family: 'Dancing Script', cursive;
+}
+.section-two p {
+  line-height: 1.4;
+  padding-top: 4rem;
+  color: #CAA767;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+}
+.section-two .boxes {
+  display: flex;
+  width: 90%;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin: 0 auto;
+  margin-bottom: 2%;
+}
+@media ( max-width:800px ) {
+  .section-two .boxes {
+    display: flex;
+    flex-direction: column;
+  }
+}
+.section-two .boxes h3 {
+  background-color: #213159;
+  margin-bottom: 2rem;
+  color: white;
+  padding: 1rem;
+  text-align: center;
+  border-radius: 20rem;
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+.section-two .boxes .box1,
+.section-two .boxes .box2,
+.section-two .boxes .box3 {
+  width: 20%;
+  padding: 5%;
+  background-color: white;
+  align-items: center;
+  color: #213159;
+  text-align: center;
+  border-radius: 2rem;
+}
+@media ( max-width:800px ) {
+  .section-two .boxes .box1,
+  .section-two .boxes .box2,
+  .section-two .boxes .box3 {
+    width: 90%;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+}
+.section-three {
+  background-color: #213159;
+  background-image: linear-gradient(90deg, #213159 12%, #8ec5fc 50%, #213159 100%);
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 2%;
+  padding: 4rem;
+}
+@media ( max-width:800px ) {
+  .section-three {
+    margin-bottom: 5%;
+  }
+}
+@media ( max-width:400px ) {
+  .section-three {
+    margin-bottom: 10%;
+  }
+}
+.section-three .started {
+  color: #213159;
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+.section-three .letsgo {
+  padding: 1rem 10rem;
+  border: none;
+  margin: 1rem 2rem;
+  border-radius: 5rem;
+  background: #213159;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+  color: #CAA767;
+}
+.section-three .letsgo:hover {
+  color: #213159;
+  background-color: #CAA767;
+  cursor: pointer;
+}
+@media ( max-width:800px ) {
+  .section-three .letsgo {
+    padding: 1rem 5rem;
+  }
+}
+@media ( max-width:400px ) {
+  .section-three .letsgo {
+    margin-left: 0rem;
+  }
+}
+html {
+  font-size: 62.5%;
+}
+.aboutteam {
+  background-color: #213159;
+  background-image: linear-gradient(180deg, #213159 12%, #8ec5fc 50%, #caa767 100%);
+}
+.aboutteam .sec-one {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+}
+.aboutteam .sec-one .aboutimg {
+  width: 35%;
+  padding: 8rem 10rem;
+  border-radius: 15rem;
+}
+@media ( max-width:800px ) {
+  .aboutteam .sec-one .aboutimg {
+    display: none;
+  }
+}
+.aboutteam .sec-one .meetthe {
+  display: flex;
+  flex-direction: column;
+  width: 35%;
+  text-align: center;
+  padding: 4%;
+  line-height: 1.5;
+  color: #CAA767;
+  font-size: 4rem;
+  font-family: 'Dancing Script', cursive;
+}
+@media ( max-width:800px ) {
+  .aboutteam .sec-one .meetthe {
+    width: 80%;
+  }
+}
+.aboutteam .sec-one .meet {
+  font-size: 5rem;
+  font-family: 'Dancing Script', cursive;
+}
+.aboutteam .peopleboxes {
+  padding: 2rem;
+  margin-bottom: 3rem;
+  display: flex;
+  width: 90%;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin: 0 auto;
+  font-size: 2rem;
+  margin-bottom: 2%;
+}
+.aboutteam .peopleboxes p {
+  line-height: 1.4;
+  padding-top: 2rem;
+  color: #8ec5fc;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+}
+.aboutteam .peopleboxes .peopleimgs {
+  width: 90%;
+  border-radius: 10px;
+}
+.aboutteam .peopleboxes h3 {
+  background-color: #213159;
+  margin-bottom: 2rem;
+  color: white;
+  padding: 1rem;
+  text-align: center;
+  border-radius: 15rem;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+}
+.aboutteam .peopleboxes h4 {
+  color: #CAA767;
+  padding: 1rem;
+  font-size: 3rem;
+  font-family: 'Dancing Script', cursive;
+}
+.aboutteam .peopleboxes .JShep,
+.aboutteam .peopleboxes .JDess,
+.aboutteam .peopleboxes .PresM,
+.aboutteam .peopleboxes .ShawnD,
+.aboutteam .peopleboxes .KatP,
+.aboutteam .peopleboxes .AAnd,
+.aboutteam .peopleboxes .TristD,
+.aboutteam .peopleboxes .me,
+.aboutteam .peopleboxes .ColinB {
+  width: 20%;
+  padding: 5%;
+  margin-bottom: 5%;
+  background-color: white;
+  align-items: center;
+  color: #213159;
+  text-align: center;
+  border-radius: 2rem;
+}
+@media ( max-width:800px ) {
+  .aboutteam .peopleboxes .JShep,
+  .aboutteam .peopleboxes .JDess,
+  .aboutteam .peopleboxes .PresM,
+  .aboutteam .peopleboxes .ShawnD,
+  .aboutteam .peopleboxes .KatP,
+  .aboutteam .peopleboxes .AAnd,
+  .aboutteam .peopleboxes .TristD,
+  .aboutteam .peopleboxes .me,
+  .aboutteam .peopleboxes .ColinB {
+    width: 80%;
+  }
+}
+@font-face {
+  font-family: 'Indie Flower';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuC.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Dancing Script';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/dancingscript/v14/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup5.ttf) format('truetype');
+}
diff --git a/index.html b/index.html
index 13f4147..7f5f3f2 100644
--- a/index.html
+++ b/index.html
@@ -5,15 +5,87 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
+    <link rel="icon" href="http://example.com/favicon.png">
     <title>Droom</title>
 
     <!-- Custom Styles -->
     <link rel="stylesheet" href="css/index.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
+    </style>
 </head>
 
 <body>
+    <section id = "navandheader">
+        <nav class ="topnav">
+            <div class = "toplogo">
+             <h2>Droom</h2>
+            </div>
+
+            <div class = "links2">
+                <a href = "index.html">Home</a>
+                <a href = "about.html">About</a>
+                <a href = "https://droom-bw-3-lol.herokuapp.com/login">Login</a> 
+                <a href = "https://droom-bw-3-lol.herokuapp.com/signup">Sign Up</a>
+            </div>
+        </nav>
+        <header class = "droomit">
+            <div class = "h1andbutton">
+                <h1>If you can dream it, you can Droom it!</h1>
+                <form>
+                <button class = "letsgo" formaction = "https://droom-bw-3-lol.herokuapp.com/signup">Let's go!</button>
+                </form>
+            </div>   
+                <img class = "logoimg" src = "https://static-2.gumroad.com/res/gumroad/1211634803146/asset_previews/f6f7b8b0c8c92e3b299a5d2350b0379f/retina/drawkit-web-dev-colour-thumbnail.png">
+        </header>
+    </section>
+    <section class = "section-one">
+        <div class = "one-text">
+            <h3 class = "what">What is Droom?</h3>
+            <p>Droom provides a way to match up with your dream job by swiping left or right. Think Tinder and LinkedIn together.</p>
+        </div>   
+        <img class = "section-one-image" src= "https://static-2.gumroad.com/res/gumroad/1211634803146/asset_previews/c5e881fcdeb6b7b42ba029656925af47/retina/handshake-colour-thumbnail.png">
+    </section>
+
+    <section class = "section-two">
+        <h2 class = "how">How it works</h2>
+        <div class =  "boxes">
+            <div class = "box1">
+                <h3>1</h3>
+                <img class = "boximg" src = "https://static-2.gumroad.com/res/gumroad/1211634803146/asset_previews/25c9fe6481563597cf75a0d84cb37f3e/retina/holding-phone-colour-thumbnail.png">
+                <p>Create a Droom account, and check out dream job listings at a swipe of a finger.</p>
+            </div>
+            <div class ="box2">
+                <h3>2</h3>
+                <img class = "boximg" src = "https://static-2.gumroad.com/res/gumroad/1211634803146/asset_previews/7f49369d84e68eca72517dad81dcc052/retina/app-user-colour-thumbnail.png">
+                <p>Once you find your dream job and you want to apply, swipe right and begin a seamless application.</p>
+            </div>
+            <div class = "box3">
+                <h3>3</h3>
+                <img class = "boximg" src ="https://static-2.gumroad.com/res/gumroad/1211634803146/asset_previews/6465b3a3bcf65803a29fb423affad124/retina/revenue-graph-colour-thumbnail.png">
+                <p>Lastly, sit back and relax as top-notch employers match with you.</p>
+            </div>
+        </div>
+    </section>
+
+    <section class = "section-three">
+        <h2 class = "started">Get Started</h2>
+        <form>
+        <button class = "letsgo" formaction = "https://droom-bw-3-lol.herokuapp.com/signup">Let's go!</button>
+        </form>
+    </section>
 
+    <footer>
+        <div class = "footlogo">
+            <h2>Droom</h2>
+        </div>
+        <div class = "links">
+            <a href = "index.html">Home</a>
+            <a href = "about.html">About</a>
+            <a href = "https://droom-bw-3-lol.herokuapp.com/login">Login</a>
+            <a href = "https://droom-bw-3-lol.herokuapp.com/signup">Sign Up</a>
+        </div>
+    </footer>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/less/about-page.less b/less/about-page.less
new file mode 100644
index 0000000..94e643f
--- /dev/null
+++ b/less/about-page.less
@@ -0,0 +1,109 @@
+html{
+    font-size: 62.5%;
+   // font-family: 'Dancing Script', cursive;
+}
+
+
+
+
+.aboutteam{
+    background-color: #213159;
+    background-image: linear-gradient(180deg, #213159 12%, #8ec5fc 50%, #caa767 100%);
+
+    .sec-one{
+        display:flex;
+        flex-direction:row;
+        justify-content: space-evenly;
+        flex-wrap:wrap;
+        align-items:center;
+
+        .fonts(3rem, @main-font);
+
+        .aboutimg{
+            width:35%;
+            padding: 8rem 10rem;
+            border-radius: 15rem;
+
+            @media @tablet{
+                display:none;
+            }
+        }
+
+        .meetthe{
+            display:flex;
+            flex-direction:column;
+            font-size:4rem;
+            width:35%;
+            text-align:center;
+            padding:4%;
+            line-height:1.5;
+            color: @main-color;
+            .fonts(4rem, @main-font);
+
+            @media @tablet {
+                width:80%;
+            }
+        }
+
+        .meet{
+            .fonts(5rem, @heading-font);
+
+        }
+    }//closes sec-one
+   
+   .peopleboxes{
+        padding: 2rem;
+        margin-bottom: 3rem;
+        display: flex;
+        width: 90%;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        margin: 0 auto;
+        font-size: 2rem;
+        margin-bottom: 2%;
+
+        
+
+        p{
+            line-height:1.4;
+            padding-top: 2rem;
+            color: #8ec5fc;
+            .fonts(3rem, @main-font);
+        }
+        .peopleimgs{
+            width:90%;
+            border-radius:10px;
+        }
+
+        h3 {
+            background-color: #213159;
+            margin-bottom: 2rem;
+            color: white;
+            padding: 1rem;
+            text-align: center;
+            border-radius: 15rem; 
+            .fonts(3rem, @heading-font);
+        }
+        h4 {
+            color:#CAA767;
+            padding:1rem;
+            .fonts(3rem, @heading-font);
+        }
+        .JShep, .JDess, .PresM, .ShawnD, .KatP, .AAnd, .TristD, .me, .ColinB{
+            width: 20%;
+            padding: 5%;
+            margin-bottom: 5%;
+            background-color: white;
+            align-items: center;
+            color: #213159;
+            text-align: center;
+            border-radius: 2rem; 
+
+            @media @tablet {
+                width:80%;
+            }
+        }
+    } 
+
+}
+
diff --git a/less/about.less b/less/about.less
new file mode 100644
index 0000000..b7fefd2
--- /dev/null
+++ b/less/about.less
@@ -0,0 +1,14 @@
+
+// Vars and Mixins
+@import "variables";
+@import "mixins";
+
+// Global styles
+@import "reset.less";
+@import "global";
+
+// Page styles
+@import "navigation";
+@import "footer";
+@import "about-page";
+@import "marketing-page";
\ No newline at end of file
diff --git a/less/footer.less b/less/footer.less
index e69de29..40a07ae 100644
--- a/less/footer.less
+++ b/less/footer.less
@@ -0,0 +1,129 @@
+footer {
+    display:flex;
+    flex-wrap:wrap;
+    color:#CAA767;
+    justify-content: space-between;
+    background-color: #213159;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    width: 100%;
+    margin: 0 auto;
+    .fonts(5rem, @heading-font);
+
+    // @media @lg-tablet {
+    //     display:flex;
+    //     flex-direction:row;
+    //     width: 100%;
+    //     justify-content:center;
+        
+    // } // closes media 1000
+
+    @media @tablet {
+        display:flex;
+        justify-content:space-evenly;
+        width:100%;
+        margin:0;
+        
+    } // closes media 1000
+
+    @media @phone {
+        display:flex;
+        flex-direction:column;
+        justify-content:space-evenly;
+        width:100%;
+        margin:0;
+    } // closes media 500
+    
+    @media @sm-phone{
+        display:flex;
+        flex-direction:column;
+        justify-content:space-evenly;
+    }//closes media 400
+
+    .footlogo{
+        width: 20rem;
+        padding: 0% 1%;
+        justify-content: flex-end;
+        text-align: center;
+        margin-left:50px;
+        .fonts(5rem, @heading-font);
+        
+        @media @tablet {
+            margin-left:0px;
+            justify-content:flex-start;
+            font-size:5rem;
+        }
+        @media @phone{
+            text-align:center;
+            width:100%;
+            justify-content:center;
+            padding:0px;
+        } // closes media 500
+
+        @media @sm-phone{
+            text-align:center;
+            margin-bottom:2rem;
+            justify-content:center;
+        } // closes media 500
+    } //closes footlogo
+
+    .links{
+        width:60rem;
+        align-content:center;
+        .fonts(5rem, @heading-font);
+
+        @media @lg-tablet {
+            margin-left:0px;
+            margin-right:0px;
+        }//closes media 1000
+
+        @media @tablet{
+            width:80%;
+            padding-top:0px;
+            padding-bottom:0px;
+            justify-content:center;
+            
+        } // closes media 800
+
+        @media @phone{
+            display:flex;
+            justify-content:center;
+            width:100%;
+        }//closes media 500
+
+        @media @sm-phone{
+            width:100%;
+            justify-content:center;
+            flex-direction:column;
+            align-items:center;
+            padding:0;
+             
+        }//closes media 400
+
+    }//closes .links
+
+    .links a{
+        text-decoration: none;
+        color: white;
+        padding: 0% 4%;
+        cursor: pointer;
+        margin: .5rem;
+
+        .fonts(3rem, @heading-font);
+
+        &:hover{
+            color:#CAA767;
+            border-top:1px dashed #CAA767;
+            border-bottom:1px dashed #CAA767; 
+        }//closes hover
+
+        @media @sm-phone{
+            justify-content:center;
+            width: 25%;
+            align-items:center;
+            margin-top:1.5rem; 
+        }//closes media 400
+    } //closes links a
+    
+} //closes footer
\ No newline at end of file
diff --git a/less/index.less b/less/index.less
index c94b2a6..7024175 100644
--- a/less/index.less
+++ b/less/index.less
@@ -9,4 +9,9 @@
 // Page styles
 @import "navigation";
 @import "footer";
-@import "marketing-page";
\ No newline at end of file
+@import "marketing-page";
+@import "about-page";
+
+// Font Styles
+@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
\ No newline at end of file
diff --git a/less/marketing-page.less b/less/marketing-page.less
index e69de29..e46800a 100644
--- a/less/marketing-page.less
+++ b/less/marketing-page.less
@@ -0,0 +1,278 @@
+html{
+    font-size: 62.5%;
+}//closes html
+
+#navandheader{
+    background-color: #213159;
+    background-image: linear-gradient(180deg, #213159 12%, #8ec5fc 50%, #caa767 100%);
+    margin-bottom: 2%;
+
+    @media @phone{
+        margin-bottom:5%;
+    }
+
+    .droomit{
+        display:flex;
+        flex-wrap:wrap;
+        align-items:center;
+        justify-content:center;
+
+        h1{
+            .fonts(5.5rem, @heading-font);
+            text-align:center;
+            color:@main-color2;
+            margin-bottom:4rem;
+
+            @media @phone{
+                width:100%;
+            }
+
+        }
+        .logoimg{
+            width: 30%;
+            padding:6rem 6rem;
+            border-radius: 13rem;
+            @media @phone{
+                width:40%;
+            }
+            
+        }
+
+        .letsgo{
+            padding: 1rem 10rem;
+            border: none;
+        // margin: 1rem 2rem;
+            border-radius: 5rem;
+            background: #213159;
+            margin-left:5rem;
+        .fonts(3rem, @main-font);
+            color: #CAA767;
+            margin-left:10rem;
+            
+            &:hover{
+                color:#213159;
+                background-color:#CAA767;
+                cursor:pointer;
+            }//closes hover
+
+            @media @lg-tablet {
+                margin-left:4rem;
+            }
+            @media @tablet{
+                padding: 1rem 5rem;
+            }
+            @media @phone{
+                margin-left:10rem;
+            }
+            @media @sm-phone{
+                margin-left:5rem;
+                
+            }
+        }//closes lets go
+
+        .h1andbutton{
+            width:40%;
+            margin:5rem;
+            justify-content:center;
+
+            @media @phone {
+                width:100%;
+            }
+        }
+    }
+}
+
+.section-one{
+    background-color: #8EC5FC;
+    justify-content: space-evenly;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 2%;
+
+    @media @tablet{
+        display:flex;
+        flex-direction:column;
+        margin-bottom: 5%;
+    }//closes 800 media
+
+    @media @sm-phone {
+        margin-bottom:10%;;
+    }//closes 400 media
+    .what{
+        .fonts(6rem, @heading-font);
+
+        @media @sm-phone {
+            font-size:5rem;
+        }// closes media 400
+    }//closes .what
+
+    .one-text{
+        width:40%;
+        text-align:center;
+        padding:4%;
+        line-height:1.5;
+        color: #213159;
+
+        .fonts(3rem, @main-font);
+        
+
+        @media @tablet{
+            width:90%;
+            margin:20px;
+        }//closes media 800
+        
+        @media @phone{
+            margin:0px;
+        }
+
+        @media @sm-phone{
+            font-size:3rem;
+            padding:0px;
+           
+        }//closes 400
+    }//closes one-text
+
+
+    .section-one-image{
+        width: 30%;
+        order: -1;
+        padding:8rem 10rem;
+        border-radius: 13rem;
+        
+        @media @tablet {
+            width:40%;
+            padding:0;
+            border-radius: 5rem;
+            margin-top:30px;
+        } //closes media 800
+
+        @media @sm-phone{
+            width:50%;
+            border-radius: 5rem;
+        } // closes media 400
+    } // closes section-one image
+
+}
+
+.section-two {
+    background-color: #8ec5fc;
+    background-image: linear-gradient(0deg, #8ec5fc 25%, #e9d896 100%);
+    padding: 2rem;
+    margin-bottom: 3rem;
+    
+    .boximg{
+        width:60%;
+    } // closes boximg
+
+    .how {
+        text-align: center;
+        width: 100%;
+        margin: 0 auto;
+        padding: 2%;
+        color: #213159;
+        .fonts(6rem, @heading-font);
+    } // closes .how
+
+    p {
+        line-height: 1.4;
+        padding-top: 4rem;
+        color: #CAA767;
+        .fonts(3rem, @main-font);
+    } // closes p
+
+    .boxes {
+        display: flex;
+        width: 90%;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        margin: 0 auto;
+        //font-size: 2rem;
+        margin-bottom: 2%;
+
+        @media @tablet{
+            display:flex;
+            flex-direction:column;
+            
+        } //closes media 800
+
+        h3 {
+            background-color: #213159;
+            margin-bottom: 2rem;
+            color: white;
+            padding: 1rem;
+            text-align: center;
+            border-radius: 20rem;
+            .fonts(5rem, @heading-font);
+        } // closes h3
+   
+        .box1, .box2, .box3{
+            width: 20%;
+            padding: 5%;
+            background-color: white;
+            align-items: center;
+            color: #213159;
+            text-align: center;
+            border-radius: 2rem;
+
+            @media @tablet{
+                width:90%;
+                margin-top:20px;
+                margin-bottom:20px;
+            } // closes media 800
+
+        } // closes .box1 .box2 .box3
+    }// closes boxes
+}//closes section 2
+
+
+.section-three{
+    background-color: #213159;
+    background-image: linear-gradient(90deg, #213159 12%, #8ec5fc 50%, #213159 100%);
+
+    justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 2%;
+    padding: 4rem;
+
+    @media @tablet{
+        margin-bottom:5%;
+    } //closes media 800
+    @media @sm-phone{
+        margin-bottom:10%;
+    }   //closes media 400
+
+    .started{
+        color: @main-color2;
+        .fonts(5rem, @heading-font);
+    } //closes started
+
+    .letsgo{
+        padding: 1rem 10rem;
+        border: none;
+        margin: 1rem 2rem;
+        border-radius: 5rem;
+        background: #213159;
+       .fonts(3rem, @main-font);
+        color: #CAA767;
+        
+        &:hover{
+            color:#213159;
+            background-color:#CAA767;
+            cursor:pointer;
+        }//closes hover
+
+        @media @tablet{
+            padding: 1rem 5rem;
+        }
+        @media @sm-phone{
+            margin-left:0rem;     
+        } 
+        
+    }//closes lets go
+}//closes section three
+
+
+
diff --git a/less/mixins.less b/less/mixins.less
index e69de29..431ad7f 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -0,0 +1,10 @@
+.fonts(@fontSize, @fontFamily){
+    font-size:@fontSize;
+    font-family:@fontFamily;
+}
+
+//Escapings
+@tablet: ~"( max-width:800px )";
+@lg-tablet: ~"( max-width:1000px )";
+@phone: ~"( max-width: 500px )";
+@sm-phone: ~"( max-width:400px )";
\ No newline at end of file
diff --git a/less/navigation.less b/less/navigation.less
index e69de29..893f98a 100644
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -0,0 +1,121 @@
+.topnav{
+    display:flex;
+    flex-wrap:wrap;
+    color:#CAA767;
+    justify-content: space-between;
+    background-color: #213159;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    width: 100%;
+    margin: 0 auto;
+    .fonts(5rem, @heading-font);
+
+    @media @tablet{
+        display:flex;
+        justify-content:space-evenly;
+        width:100%;
+        margin:0;
+    }
+    @media @phone {
+        display:flex;
+        flex-direction:column;
+        justify-content:space-evenly;
+        width:100%;
+        margin:0;
+    } // closes media 500
+    
+    @media @sm-phone{
+        display:flex;
+        flex-direction:column;
+        justify-content:space-evenly;
+    }//closes media 400
+
+    .toplogo{
+        width: 20rem;
+        padding: 0% 1%;
+        justify-content: flex-end;
+        text-align: center;
+        margin-left:50px;
+        .fonts(5rem, @heading-font);
+        
+        @media @tablet{
+            margin-left:0px;
+            justify-content:flex-start;
+            font-size:5rem;
+        }
+        @media @phone{
+            text-align:center;
+            padding:0px;
+            width:100%;
+            justify-content:center;
+        } // closes media 500
+
+        @media @sm-phone{
+            text-align:center;
+            margin-bottom:2rem;
+            justify-content:center;
+
+        } // closes media 500
+    } //closes toplogo
+
+    .links2{
+        width:60rem;
+        align-content:center;
+        .fonts(5rem, @heading-font);
+
+        @media @lg-tablet {
+            margin-left:0px;
+            margin-right:0px;
+        }//closes media 1000
+
+        @media @tablet{
+            width:80%;
+            padding-top:0px;
+            padding-bottom:0px;
+            justify-content:center;
+            
+        } // closes media 800
+
+        @media @phone{
+            display:flex;
+            width:100%;
+            justify-content:center;
+
+        }//closes media 500
+
+        @media @sm-phone{
+            width:100%;
+            justify-content:center;
+            flex-direction:column;
+            align-items:center;
+            padding:0;
+
+        }//closes media 400
+
+    }//closes .links
+    
+    .links2 a{
+        text-decoration: none;
+        color: white;
+        padding: 0% 4%;
+        cursor: pointer;
+        margin: .5rem;
+
+        .fonts(3rem, @heading-font);
+
+        &:hover{
+            color:#CAA767;
+            border-top:1px dashed #CAA767;
+            border-bottom:1px dashed #CAA767; 
+        }//closes hover
+
+        @media @sm-phone{
+            justify-content:center;
+            width: 25%;
+            align-items:center;
+            margin-top:1.5rem;
+        }//closes media 400
+    } //closes links a
+    
+} //closes footer
diff --git a/less/variables.less b/less/variables.less
index e69de29..10267dd 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -0,0 +1,5 @@
+@main-color:#CAA767;
+@main-color2:#213159;
+//'Indie Flower', cursive;
+@main-font:  'Dancing Script' , cursive;
+@heading-font: 'Dancing Script', cursive;
\ No newline at end of file
