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 @@
+
+
+
+
+
+
+ Party Planner
+
+
+
+
+
+
+
+
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!.
+
+
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!
+
+
+
+
+
+
+
+
X
+
About
+
+
+
Team Lead - Edward Jeong is a Full Stack Developer and proud Lambda School graduate.
+
+
+
+
Front End - Josh Kersting is a full time student at Lambda School.
+
+
+
+
+
+
Back End - Laurence Van Buren is a full time at Lambda School and loves what he does.
+
+
+
+
Back End - Elisa Martin is attending Lamda School's full time program and enjoys the challenge.
+
+
+
+
+
+
Web UI - 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.
+
+
+
+
+
+
+
+
+
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