diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..6f7ec41
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 73f2b36..bdf3f6c 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,13 @@
 # party-planner-ui
+
+## What did we build?
+A Party Planner App
+
+
+## What does it do?
+Allows users to 'plan' for parties by having users create an account, where they can add guests, list items needed, designate a shopping list, etc.
+
+## What was my role?
+I was in charge of UI and building the landing page. I utilized
+HTML, CSS, CSS Animations, Javascript and media queries to
+create a responsive and interactive landing page.
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..7b9ea2d
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,514 @@
+/* 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;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  font-size: 62.5%;
+  height: 100%;
+}
+html,
+body {
+  font-family: 'Roboto', sans-serif;
+}
+body {
+  background-color: #0B0B0B;
+  overflow-x: hidden;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+@media (min-width: 900px) {
+  body {
+    margin: 0 auto;
+  }
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Indie Flower', cursive;
+}
+h2 {
+  font-size: 3.2rem;
+  padding-bottom: 10px;
+}
+h4 {
+  font-size: 2.5rem;
+  padding-bottom: 10px;
+}
+p {
+  line-height: 1.5;
+}
+img {
+  height: auto;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+.content-container {
+  max-width: 700px;
+  margin: 0 auto;
+}
+nav {
+  display: block;
+}
+@media (min-width: 900px) {
+  nav {
+    display: none;
+  }
+}
+.navigation {
+  transform: translateY(-25px);
+  transition: all 0.3s;
+  opacity: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-items: center;
+  width: 245px;
+}
+.navigation li,
+.navigation li a {
+  color: #fff;
+  font-size: 1.6rem;
+  text-shadow: -3px 3px 3px #000;
+}
+.show {
+  pointer-events: all;
+  opacity: 1;
+  transform: translateY(-15px);
+}
+.slide {
+  transform: translateY(-25px);
+}
+a {
+  text-decoration: none;
+  list-style-type: none;
+  color: #fff;
+  font-size: 1.6rem;
+}
+a:hover {
+  animation-name: pulse;
+  animation-duration: 0.2s;
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.01);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  75% {
+    transform: scale(1.01);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@media (min-width: 900px) {
+  a {
+    font-size: 1.4rem;
+  }
+}
+#nav-icon {
+  display: inline-block;
+  cursor: pointer;
+}
+.bar1,
+.bar2,
+.bar3 {
+  width: 35px;
+  height: 3px;
+  background-color: #fff;
+  box-shadow: -3px 3px 3px #000;
+  margin: 6px 0;
+  transition: 0.4s;
+}
+@media (min-width: 900px) {
+  .bar1,
+  .bar2,
+  .bar3 {
+    display: none;
+  }
+}
+.change .bar1 {
+  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+  transform: rotate(-45deg) translate(-6px, 3px);
+}
+.change .bar2 {
+  opacity: 0;
+}
+.change .bar3 {
+  -webkit-transform: rotate(45deg) translate(-8px, -8px);
+  transform: rotate(45deg) translate(-8px, -8px);
+}
+footer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 6rem;
+  background-color: #0B0B0B;
+  padding-top: 2rem;
+}
+footer p {
+  color: #fff;
+  font-size: 1rem;
+}
+main {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  transition: all 0.4s;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+@media (min-width: 900px) {
+  main {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+}
+@media (min-width: 900px) {
+  .main-content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    align-items: baseline;
+    width: 35%;
+  }
+}
+.main-content p {
+  font-size: 1.6rem;
+  color: #fff;
+  text-shadow: -2px 2px 2px #000;
+  width: 75%;
+  margin: 0 auto;
+  padding: 2rem;
+  border-radius: 10px;
+}
+@media (min-width: 900px) {
+  .main-content p {
+    width: 90%;
+    font-size: 2.5vmin;
+  }
+}
+.desktop-buttons {
+  display: none;
+}
+@media (min-width: 900px) {
+  .desktop-buttons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+.desktop-buttons .button {
+  border: none;
+  padding: 2rem;
+  font-size: 2.5vmin;
+  margin: 0 auto;
+  border-radius: 50px;
+  width: 45%;
+  max-width: 360px;
+  background-color: #fff;
+  color: #000;
+  text-align: center;
+}
+.about {
+  display: none;
+  transition: all 0.6s;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.9);
+  top: 0;
+  left: 0;
+  border: 5px solid #734977;
+  border-radius: 5px;
+  transform: translateX(2000px);
+}
+.about .close {
+  color: #fff;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  font-size: 2rem;
+  cursor: pointer;
+  padding: 10px;
+}
+.about .content {
+  width: 75%;
+}
+.about .content h2 {
+  text-align: center;
+  margin: 1rem;
+}
+@media (min-width: 900px) {
+  .about .content h2 {
+    font-size: 5vmin;
+  }
+}
+.about p {
+  font-size: 1.3rem;
+  color: #fff;
+  text-shadow: -2px 2px 2px #000;
+}
+@media (min-width: 900px) {
+  .about p {
+    font-size: 2.5vmin;
+  }
+}
+.slide-in {
+  transform: translateX(0px);
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: unset;
+  align-items: center;
+  height: 100vh;
+  overflow-y: scroll;
+}
+@media (min-width: 900px) {
+  .slide-in {
+    justify-content: center;
+  }
+}
+.person {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: unset;
+  align-items: center;
+}
+h1,
+h2,
+h3 {
+  font-family: 'Roboto Condensed', sans-serif;
+  color: #fff;
+  text-shadow: -3px 3px 3px #000;
+}
+p,
+a,
+button {
+  font-family: 'Lato', sans-serif;
+}
+h1 {
+  transition: all 0.4s;
+  pointer-events: none;
+  font-size: 2.5rem;
+}
+@media (min-width: 900px) {
+  h1 {
+    font-size: 5rem;
+  }
+}
+.about img {
+  height: 75px;
+  width: 75px;
+  border-radius: 50%;
+  border: 2px solid #54354A;
+  margin: 1rem;
+  background-color: black;
+}
+@media (min-width: 900px) {
+  .about img {
+    height: 10vmin;
+    width: 10vmin;
+  }
+}
+@media (min-width: 900px) {
+  .main-image {
+    background: url("../images/art-bright-celebration.jpg");
+    width: 65%;
+    height: -webkit-fill-available;
+    background-size: cover;
+  }
+}
+header {
+  height: 30rem;
+  width: 100%;
+  background: url(../images/art-bright-celebration.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+@media (min-width: 900px) {
+  header {
+    background: #000;
+    height: 15rem;
+    transform: translateY(70px);
+  }
+}
+.header-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  transform: translateY(25px);
+}
+@media (min-width: 900px) {
+  .header-container {
+    transform: translateY(0px);
+  }
+}
diff --git a/css/index.css.map b/css/index.css.map
new file mode 100644
index 0000000..a53af16
--- /dev/null
+++ b/css/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../less/reset.less","../less/global.less","../less/mixins.less","../less/navigation.less","../less/footer.less","../less/home-page.less","../less/forms.less","../less/typography.less","../less/images.less","../less/header.less","../less/overlay.less"],"names":[],"mappings":"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","file":"index.css"}
\ No newline at end of file
diff --git a/images/IMG_2552.jpg b/images/IMG_2552.jpg
new file mode 100644
index 0000000..8ac47f8
Binary files /dev/null and b/images/IMG_2552.jpg differ
diff --git a/images/IMG_2554.jpg b/images/IMG_2554.jpg
new file mode 100644
index 0000000..0b19e30
Binary files /dev/null and b/images/IMG_2554.jpg differ
diff --git a/images/IMG_2555.jpg b/images/IMG_2555.jpg
new file mode 100644
index 0000000..de01a85
Binary files /dev/null and b/images/IMG_2555.jpg differ
diff --git a/images/IMG_2556.jpg b/images/IMG_2556.jpg
new file mode 100644
index 0000000..b3094d5
Binary files /dev/null and b/images/IMG_2556.jpg differ
diff --git a/images/IMG_2557.jpg b/images/IMG_2557.jpg
new file mode 100644
index 0000000..9f29986
Binary files /dev/null and b/images/IMG_2557.jpg differ
diff --git a/images/IMG_2558.jpg b/images/IMG_2558.jpg
new file mode 100644
index 0000000..586c4e0
Binary files /dev/null and b/images/IMG_2558.jpg differ
diff --git a/images/IMG_2559.jpg b/images/IMG_2559.jpg
new file mode 100644
index 0000000..34764ea
Binary files /dev/null and b/images/IMG_2559.jpg differ
diff --git a/images/IMG_2560.jpg b/images/IMG_2560.jpg
new file mode 100644
index 0000000..bca10a8
Binary files /dev/null and b/images/IMG_2560.jpg differ
diff --git a/images/abstract-art-blur.jpg b/images/abstract-art-blur.jpg
new file mode 100644
index 0000000..1f6ce83
Binary files /dev/null and b/images/abstract-art-blur.jpg differ
diff --git a/images/art-balloons-birthday.jpg b/images/art-balloons-birthday.jpg
new file mode 100644
index 0000000..7912e8b
Binary files /dev/null and b/images/art-balloons-birthday.jpg differ
diff --git a/images/art-bright-celebration.jpg b/images/art-bright-celebration.jpg
new file mode 100644
index 0000000..7620019
Binary files /dev/null and b/images/art-bright-celebration.jpg differ
diff --git a/images/audience-band-celebration.jpg b/images/audience-band-celebration.jpg
new file mode 100644
index 0000000..644ec11
Binary files /dev/null and b/images/audience-band-celebration.jpg differ
diff --git a/images/background-blur-bright.jpg b/images/background-blur-bright.jpg
new file mode 100644
index 0000000..b1f412f
Binary files /dev/null and b/images/background-blur-bright.jpg differ
diff --git a/images/blurred-blurry-hd-wallpaper.jpg b/images/blurred-blurry-hd-wallpaper.jpg
new file mode 100644
index 0000000..2900983
Binary files /dev/null and b/images/blurred-blurry-hd-wallpaper.jpg differ
diff --git a/images/edward.jpg b/images/edward.jpg
new file mode 100644
index 0000000..82ff8d8
Binary files /dev/null and b/images/edward.jpg differ
diff --git a/images/elisa.png b/images/elisa.png
new file mode 100644
index 0000000..cc40387
Binary files /dev/null and b/images/elisa.png differ
diff --git a/images/ian.png b/images/ian.png
new file mode 100644
index 0000000..788fac9
Binary files /dev/null and b/images/ian.png differ
diff --git a/images/josh.png b/images/josh.png
new file mode 100644
index 0000000..b43ae75
Binary files /dev/null and b/images/josh.png differ
diff --git a/images/peter.jpg b/images/peter.jpg
new file mode 100644
index 0000000..a3ba388
Binary files /dev/null and b/images/peter.jpg differ
diff --git a/images/rsz_image.jpg b/images/rsz_image.jpg
new file mode 100644
index 0000000..805518b
Binary files /dev/null and b/images/rsz_image.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3607535
--- /dev/null
+++ b/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" type="text/css" href="css/index.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Lato%7CRoboto+Condensed" rel="stylesheet">
+    <title>Party Planner</title>
+  </head>
+  <body>
+
+    <header>
+      <div class="header-container">
+        <h1>Party Planner</h1>
+        <nav>
+          <ul class="navigation">
+
+            <li><a href="https://party-planner-the-app.netlify.com" target="_blank">Planner App</a></li>
+            <li class="about-link">About Us</li>
+          </ul>
+        </nav>
+        <div id="nav-icon">
+          <div class="bar1"></div>
+          <div class="bar2"></div>
+          <div class="bar3"></div>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <div class="main-content">
+      <p>  The frustration of planning a party can be real. Who's doing what? Who’s coming?
+        What do we have? What do we need? I thought Sharon was getting that! Who’s
+        getting the paper plates!? WE RAN OUT OF PUNCH!.</p>
+
+        <p>Let us make your party planning easier!  With our intuitive and easy to
+        use app, never break a sweat over planning another party ever again!  Our
+        app was built to make your life easier when it comes to planning parties.
+        So check out our app and throw your best party yet!</p>
+        <div class="desktop-buttons">
+          <a   class="button" href="https://party-planner-the-app.netlify.com" target="_blank">Party Planner App</a>
+          <a class="button about-link" href="#">About Us</a>
+        </div>
+      </div>
+      <div class="main-image"></div>
+    </main>
+
+    <section class="about">
+      <div class="content">
+        <span class="close">X</span>
+        <h2>About</h2>
+        <div class="person">
+          <img src="images/edward.jpg" alt="Profile pic of Edward">
+          <p><b>Team Lead</b> - Edward Jeong is a Full Stack Developer and proud Lambda School graduate. </p>
+        </div>
+
+        <div class="person">
+          <p><b>Front End</b> - Josh Kersting is a full time student at Lambda School.</p>
+            <img src="images/josh.png" alt="Profie pic of Josh">
+        </div>
+
+        <div class="person">
+          <img src="images/ian.png" alt="Profile pic of Ian">
+          <p><b>Back End</b> - Laurence Van Buren is a full time at Lambda School and loves what he does. </p>
+        </div>
+
+        <div class="person">
+          <p><b>Back End</b> - Elisa Martin is attending Lamda School's full time program and enjoys the challenge. </p>
+            <img src="images/elisa.png" alt="Profile pic of Elisa">
+        </div>
+
+        <div class="person">
+          <img src="images/peter.jpg" alt="Profile pic of Peter">
+          <p><b>Web UI</b> - Peter Stone has 2 years coding experience in Front End Development.
+              He is excited to be attending Lamnbda School and is excited for what
+               future holds.  </p>
+        </div>
+      </div>
+
+    </section>
+    <footer><p>&copy;2019 Lambda School Students</p></footer>
+
+    <script src="js/main.js"></script>
+  </body>
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..46302b3
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,46 @@
+const navIcon = document.querySelector('#nav-icon');
+const nav = document.querySelector('.navigation');
+const heading = document.querySelector('h1');
+const about = document.querySelector('.about');
+const close = document.querySelector('.close');
+const aboutLink = document.querySelector('#about-link');
+const allContent = document.querySelector('html');
+
+
+//nav Icon event listener
+navIcon.addEventListener('click',()=> {
+  navIcon.classList.toggle("change");
+  nav.classList.toggle('show');
+  heading.classList.toggle('slide');
+
+});
+
+
+//Link to About page for mobile and desktop links
+class PageLink {
+  constructor(link) {
+    this.link = link;
+     this.link.addEventListener('click', this.slideIn.bind(this));
+
+  }
+  slideIn() {
+    about.style.display = 'flex';
+    setTimeout(()=>{//timeout used so that animation will work
+      about.classList.toggle('slide-in');
+      allContent.style.overflow = 'hidden';
+    },1);
+  }
+}
+
+close.addEventListener('click', ()=>{
+  about.classList.remove('slide-in');
+  allContent.style.overflow = 'initial';
+  setTimeout(function(){//display set to none after a timeout so animation will work
+    about.style.display = 'none';
+  },500);
+});
+
+
+
+
+let links = document.querySelectorAll('.about-link').forEach(link => new PageLink(link));
diff --git a/less/footer.less b/less/footer.less
new file mode 100644
index 0000000..9c7f27f
--- /dev/null
+++ b/less/footer.less
@@ -0,0 +1,12 @@
+footer {
+  .flexy(flex, row, nowrap, center, center);
+  width: 100%;
+  height: 6rem;
+  background-color: #0B0B0B;
+  padding-top: 2rem;
+
+  p {
+    color: #fff;
+    font-size: 1rem;
+  }
+}
diff --git a/less/forms.less b/less/forms.less
new file mode 100644
index 0000000..e69de29
diff --git a/less/global.less b/less/global.less
new file mode 100644
index 0000000..ce81f9e
--- /dev/null
+++ b/less/global.less
@@ -0,0 +1,68 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+  height: 100%;
+
+}
+
+html, body {
+  font-family: 'Roboto', sans-serif;
+
+}
+//#AD378B
+//#FDB5C3
+
+body {
+    background-color: #0B0B0B;
+    // background: url(../images/art-bright-celebration.jpg);
+    // background-size: cover;
+    // background-repeat: no-repeat;
+    overflow-x: hidden;
+    height: 100vh;
+
+    .flexy(flex, column, nowrap, center, center);
+  @media @desktop {
+
+    //max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: 'Indie Flower', cursive;
+}
+
+
+h2 {
+  font-size: 3.2rem;
+  padding-bottom: 10px;
+}
+
+h4 {
+  font-size: 2.5rem;
+  padding-bottom: 10px;
+}
+
+p {
+  line-height: 1.5;
+  // font-size: 1.6rem;
+  // padding-bottom: 10px;
+}
+
+img {
+  height: auto;
+}
+
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.content-container {
+  max-width: 700px;
+  .center();
+}
diff --git a/less/header.less b/less/header.less
new file mode 100644
index 0000000..5fc3126
--- /dev/null
+++ b/less/header.less
@@ -0,0 +1,24 @@
+header {
+  height: 30rem;
+  width: 100%;
+  background: url(../images/art-bright-celebration.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  .flexy(flex, column, nowrap, center, center);
+  @media @desktop {
+  //  display: none;
+  background: #000;
+  height: 15rem;
+  transform: translateY(70px);
+  }
+}
+
+.header-container {
+  .flexy(flex, column, nowrap, center, center);
+  transform: translateY(25px);
+  @media @desktop {
+    transform: translateY(0px);
+  }
+}
+//
diff --git a/less/home-page.less b/less/home-page.less
new file mode 100644
index 0000000..da50493
--- /dev/null
+++ b/less/home-page.less
@@ -0,0 +1,113 @@
+main {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  transition: all .4s;
+  .flexy(flex, column, nowrap, center, center);
+  @media @desktop {
+    .flexy(flex, row, nowrap, center, center);
+    width: 100%;
+  }
+}
+
+.main-content {
+  @media @desktop {
+    .flexy(flex, column, nowrap, center, center);
+    align-items: baseline;
+    width: 35%;
+  }
+  p {
+   font-size: 1.6rem;
+   color: #fff;
+   text-shadow: -2px 2px 2px #000;
+   width: 75%;
+   //max-width: 800px;
+   margin: 0 auto;
+   padding: 2rem;
+   border-radius: 10px;
+   @media @desktop {
+     width: 90%;
+     font-size: 2.5vmin;
+   }
+ }
+} //end
+
+.desktop-buttons {
+  display: none;
+  @media @desktop {
+    .flexy(flex, row, nowrap, space-around, center);
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .button {
+    border: none;
+    padding: 2rem;
+    font-size: 2.5vmin;
+    margin: 0 auto;
+    border-radius: 50px;
+    width: 45%;
+    max-width: 360px;
+    background-color: #fff;
+    color: #000;
+    text-align: center;
+
+  }
+}
+.about {
+  display: none;
+  transition: all .6s;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgba(0,0,0,.9);
+  top: 0;
+  left: 0;
+  border: 5px solid lighten(#362238, 20%);
+  border-radius: 5px;
+
+  transform: translateX(2000px);
+  .close {
+    color: #fff;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    font-size: 2rem;
+    cursor: pointer;
+    padding: 10px;
+  }
+  .content {
+    h2 {
+      text-align: center;
+      margin: 1rem;
+      @media @desktop {
+        font-size: 5vmin;
+      }
+    }
+    width: 75%;
+  }
+  p {
+    font-size: 1.3rem;
+    color: #fff;
+    text-shadow: -2px 2px 2px #000;
+    @media @desktop {
+      font-size: 2.5vmin;
+    }
+   }
+  }
+
+
+
+.slide-in {
+  transform: translateX(0px);
+  .flexy(flex, column, nowrap, unset, center);
+  height: 100vh;
+  overflow-y: scroll;
+  @media @desktop {
+    justify-content: center;
+  }
+}
+
+.person {
+  .flexy(flex, row, nowrap, unset, center);
+}
diff --git a/less/images.less b/less/images.less
new file mode 100644
index 0000000..bd40c99
--- /dev/null
+++ b/less/images.less
@@ -0,0 +1,25 @@
+.about {
+  img {
+    height: 75px;
+    width: 75px;
+    border-radius: 50%;
+    border: 2px solid #54354A;
+    margin: 1rem;
+    background-color: black;
+    //opacity: 1;
+    @media @desktop {
+      height: 10vmin;
+      width: 10vmin;
+    }
+  }
+}
+
+.main-image {
+  @media @desktop {
+  background: url("../images/art-bright-celebration.jpg");
+  width: 65%;
+  height: -webkit-fill-available;
+  background-size: cover;
+  }
+}
+//testing
diff --git a/less/index.less b/less/index.less
new file mode 100644
index 0000000..1136c15
--- /dev/null
+++ b/less/index.less
@@ -0,0 +1,13 @@
+// Follow the order in the readme
+@import 'variables.less';
+@import 'mixins.less';
+@import 'reset.less';
+@import 'global.less';
+@import 'navigation.less';
+@import 'footer.less';
+@import 'home-page.less';
+@import 'forms.less';
+@import 'typography.less';
+@import 'images.less';
+@import 'header.less';
+@import 'overlay.less';
diff --git a/less/mixins.less b/less/mixins.less
new file mode 100644
index 0000000..40ac945
--- /dev/null
+++ b/less/mixins.less
@@ -0,0 +1,48 @@
+// Mixins in here
+.link-reset(@color) {
+  text-decoration: none;
+  list-style-type: none;
+  color: @color;
+}
+
+@desktop: ~"(min-width: 900px)";
+
+.flexy(
+  @disp: flex,
+  @dir: null,
+  @wrap: null,
+  @just: null,
+	@ai: null) {
+  display: @disp;
+  flex-direction: @dir;
+  flex-wrap: @wrap;
+  justify-content: @just;
+	align-items: @ai;
+
+}
+
+.btn-styles(@background-color: #fff, @font-color: #fff, @width, @height ){
+  background-color: @background-color;
+  color: @font-color;
+  width: @width;
+  height: @height;
+  border-radius: 5px;
+  font-size: 2rem;
+  cursor: pointer;
+}
+
+.center() {
+  margin: 0 auto;
+}
+
+.pulse() {
+  animation-name: pulse;
+  animation-duration: .2s;
+  @keyframes pulse {
+    0%   {transform: scale(1);}
+    25%  {transform: scale(1.01);}
+    50%  {transform: scale(1.05);}
+    75%  {transform: scale(1.01);}
+    100% {transform: scale(1);}
+  }
+}
diff --git a/less/navigation.less b/less/navigation.less
new file mode 100644
index 0000000..de635bc
--- /dev/null
+++ b/less/navigation.less
@@ -0,0 +1,87 @@
+//Navigation Styles here
+nav {
+  display: block;
+  @media @desktop {
+    display: none;
+  }
+}
+
+.navigation {
+  transform: translateY(-25px);
+  transition: all .3s;
+  opacity: 0;
+  cursor: pointer;
+  .flexy(flex, row, nowrap, space-around, center);
+  width: 245px;
+  //pointer-events: none;
+  li,li a {
+    color: #fff;
+    font-size: 1.6rem;
+    text-shadow: -3px 3px 3px #000;
+
+  }
+}
+
+
+.show {
+  pointer-events: all;
+  opacity: 1;
+  transform: translateY(-15px);
+}
+
+.slide {
+  transform: translateY(-25px);
+
+}
+
+
+
+  a {
+    &:hover {
+      .pulse();
+      }
+    .link-reset(#fff);
+    font-size: 1.6rem;
+    @media @desktop {
+      font-size: 1.4rem;
+    }
+  }
+
+
+
+
+
+#nav-icon {
+  display: inline-block;
+  cursor: pointer;
+  //transform: translateY(50%) skewY(2deg);
+
+}
+
+
+.bar1, .bar2, .bar3 {
+    width: 35px;
+    height: 3px;
+    background-color: #fff;
+    box-shadow: -3px 3px 3px #000;
+    margin: 6px 0;
+    transition: 0.4s;
+    @media @desktop {
+      display: none;
+    }
+}
+
+.change .bar1 {
+    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+    transform: rotate(-45deg) translate(-6px, 3px);
+}
+
+.change .bar2 {
+  opacity: 0;
+}
+
+.change .bar3 {
+    -webkit-transform: rotate(45deg) translate(-8px, -8px);
+    transform: rotate(45deg) translate(-8px, -8px);
+}
+//test
diff --git a/less/overlay.less b/less/overlay.less
new file mode 100644
index 0000000..e69de29
diff --git a/less/reset.less b/less/reset.less
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/less/reset.less
@@ -0,0 +1,48 @@
+/* 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/less/typography.less b/less/typography.less
new file mode 100644
index 0000000..57d6228
--- /dev/null
+++ b/less/typography.less
@@ -0,0 +1,19 @@
+
+h1, h2, h3 {
+  font-family: 'Roboto Condensed', sans-serif;
+  color: #fff;
+  text-shadow: -3px 3px 3px #000;
+}
+
+p, a, button {
+  font-family: 'Lato', sans-serif;
+}
+
+h1 {
+  transition: all .4s;
+  pointer-events: none;
+  font-size: 2.5rem;
+  @media @desktop {
+   font-size: 5rem;
+}
+}
diff --git a/less/variables.less b/less/variables.less
new file mode 100644
index 0000000..916eb0b
--- /dev/null
+++ b/less/variables.less
@@ -0,0 +1,14 @@
+
+// Color assignments 
+@font-color: @shark;
+@button-bg: @eastern-blue;
+@main-bg:  @white;
+@navigation-border: @silver;
+@footer-bg: @sandy-beach;
+
+// Colors
+@white: #FFFFFF;
+@silver: #C0C0C0;
+@shark: #212529;
+@eastern-blue: #17A2B8;
+@sandy-beach: #FFEBCD;
\ No newline at end of file