From cc2b015b4a9ce24cf52ffc56bc217db28166a150 Mon Sep 17 00:00:00 2001
From: Joe Friel <joseph.s.friel@gmail.com>
Date: Thu, 20 Sep 2018 10:53:52 +0100
Subject: [PATCH] Add landing page styling relates issue #56

---
 private/sass/_colors.scss               | 10 ++++
 private/sass/navbar.scss                | 80 ++++++++++++++++++-------
 private/sass/selected-page.scss         |  2 +
 private/sass/style.scss                 | 75 ++++++++++++++++++++++-
 public/css/navbar.css                   | 32 +++++++++-
 public/css/navbar.css.map               |  2 +-
 public/css/selected-page.css            |  2 +
 public/css/selected-page.css.map        |  2 +-
 public/css/style.css                    | 69 +++++++++++++++++++++
 public/css/style.css.map                |  2 +-
 src/views/landing.hbs                   | 12 ++--
 src/views/layouts/logged-out.hbs        |  4 +-
 src/views/partials/navbar-loggedout.hbs |  4 +-
 src/views/partials/navbar.hbs           |  8 +--
 14 files changed, 261 insertions(+), 43 deletions(-)

diff --git a/private/sass/_colors.scss b/private/sass/_colors.scss
index e31512d..ad1e69c 100644
--- a/private/sass/_colors.scss
+++ b/private/sass/_colors.scss
@@ -12,3 +12,13 @@ $orange1: #ff9b71;
 // black and white
 $white: #fbf6f1;
 $black: #1d2425;
+
+// gradient
+$gradient1: linear-gradient(
+  to right top,
+  #00ba9f,
+  #00a0aa,
+  #0083a7,
+  #1f6693,
+  #404973
+);
diff --git a/private/sass/navbar.scss b/private/sass/navbar.scss
index 1503189..f058259 100644
--- a/private/sass/navbar.scss
+++ b/private/sass/navbar.scss
@@ -2,9 +2,9 @@
 @import "fonts";
 @import "sizes";
 
-nav{
+.nav-main {
   position: fixed;
-  top:0;
+  top: 0;
   right: 0;
   min-width: 70%;
   height: $large;
@@ -19,23 +19,23 @@ nav{
 }
 
 // XP and XP-BAR STYLING
-#xp-section{
-display:flex;
-align-items:center;
-justify-content: space-around;
-min-width: 60%;
+#xp-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  min-width: 60%;
 }
-#xp-section > h3{
+#xp-section > h3 {
   margin: 0 $small;
   font-weight: 500;
 }
-#xp-bar{
+#xp-bar {
   margin: $small;
 }
 #xp-bar[value] {
   /* Reset the default appearance */
--webkit-appearance: none;
-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
 
   width: 25vw;
   height: $small;
@@ -47,30 +47,33 @@ appearance: none;
 }
 #xp-bar[value]::-webkit-progress-value {
   background-color: $green1;
-  background-image:
-	   -webkit-linear-gradient(-45deg, 
-	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
-	                           rgba(0,0, 0, .1) 66%, transparent 66%);
+  background-image: -webkit-linear-gradient(
+    -45deg,
+    transparent 33%,
+    rgba(0, 0, 0, 0.1) 33%,
+    rgba(0, 0, 0, 0.1) 66%,
+    transparent 66%
+  );
   border-radius: 2px;
 }
 
 // LEVEL TEXT STYLING
-nav > h4{
+nav > h4 {
   font-size: $medium;
   margin: 0;
 }
-.level{
+.level {
   margin-left: $small;
   margin-right: $small;
 }
 
-// AVATAR-PIC and BUTTON STYLING 
-#avatar-section{
+// AVATAR-PIC and BUTTON STYLING
+#avatar-section {
   position: fixed;
   right: 0;
   top: $large;
 }
-#profile-pic{
+#profile-pic {
   height: 4rem;
   border: $navy1 $small solid;
   border-radius: 100%;
@@ -84,8 +87,7 @@ nav > h4{
   border-radius: 50%;
   background: $navy1;
   cursor: pointer;
-  transition: background 250ms ease-in-out, 
-              transform 150ms ease;
+  transition: background 250ms ease-in-out, transform 150ms ease;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
@@ -114,4 +116,36 @@ nav > h4{
 
 .popout-menu--visible {
   transform: translateY(0);
-}
\ No newline at end of file
+}
+
+// logged out navbar styling
+
+.logged-out-nav {
+  position: fixed;
+  right: 0;
+  margin: $small;
+  height: $large;
+}
+
+.sign-in-button {
+  background-color: $green1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $medium;
+  color: $white;
+  cursor: pointer;
+  padding: $small $medium $small $medium;
+  border: none;
+}
+
+.sign-in-button:focus {
+  background-color: $orange1;
+}
+
+.sign-in-button-text {
+  text-align: center;
+  font-family: $main-text;
+  margin: auto;
+  font-weight: 500;
+}
diff --git a/private/sass/selected-page.scss b/private/sass/selected-page.scss
index 86c57c0..3c0d7c1 100644
--- a/private/sass/selected-page.scss
+++ b/private/sass/selected-page.scss
@@ -16,6 +16,7 @@
   margin: 0;
   border-radius: $medium;
   padding: $medium;
+  box-shadow: -3px 3px $navy1;
 }
 
 #close-button {
@@ -32,6 +33,7 @@
   align-items: center;
   cursor: pointer;
   transition: transform 0.5s ease;
+  border: $white solid 2px;
 }
 
 .close-icon {
diff --git a/private/sass/style.scss b/private/sass/style.scss
index 4dfb782..85aa07c 100644
--- a/private/sass/style.scss
+++ b/private/sass/style.scss
@@ -6,11 +6,15 @@
 // paste line below into terminal to keep css updating
 // sass --watch private/sass:public/css
 
-*{
+* {
   box-sizing: border-box;
 }
 
-main{
+*:focus {
+  outline: solid $orange1 2px;
+}
+
+main {
   margin-top: $larger;
   margin-bottom: $large;
 }
@@ -44,3 +48,70 @@ h3 {
 p {
   margin-bottom: $small;
 }
+
+// Landing page
+
+.logged-out-body {
+  background-image: $gradient1;
+  display: flex;
+  min-height: 100vh;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.logged-out-main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: $large $medium $large $medium;
+  margin: 0;
+  padding-top: $larger;
+}
+
+.landing-title {
+  text-align: center;
+  text-shadow: -4px 4px $green1;
+  color: $white;
+  margin-bottom: $large;
+}
+
+.intro {
+  color: white;
+  margin-bottom: $large;
+  text-align: center;
+}
+
+.landing-button {
+  text-align: center;
+  display: flex;
+  width: 100%;
+  background-color: $orange1;
+  justify-content: center;
+  align-items: center;
+  border-radius: $large;
+  padding: $small;
+  cursor: pointer;
+  color: $white;
+  border: 2px $white solid;
+}
+
+.start-button {
+  margin-bottom: $medium;
+}
+
+.landing-button:focus {
+  color: $orange1;
+  background-color: $white;
+}
+
+.landing-button:hover {
+  color: $orange1;
+  background-color: $white;
+}
+
+.landing-button-text {
+  font-family: $main-text;
+  margin: auto;
+  font-weight: 500;
+}
diff --git a/public/css/navbar.css b/public/css/navbar.css
index 425d23c..cda07ca 100644
--- a/public/css/navbar.css
+++ b/public/css/navbar.css
@@ -3,7 +3,7 @@
   font-family: "V-Gerb-Bold";
   src: url("../../public/assets/fonts/V-GERB-BOLD.ttf") format("truetype");
 }
-nav {
+.nav-main {
   position: fixed;
   top: 0;
   right: 0;
@@ -118,4 +118,34 @@ nav > h4 {
   transform: translateY(0);
 }
 
+.logged-out-nav {
+  position: fixed;
+  right: 0;
+  margin: 0.5rem;
+  height: 2rem;
+}
+
+.sign-in-button {
+  background-color: #00ba9f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 1rem;
+  color: #fbf6f1;
+  cursor: pointer;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  border: none;
+}
+
+.sign-in-button:focus {
+  background-color: #ff9b71;
+}
+
+.sign-in-button-text {
+  text-align: center;
+  font-family: "Dosis", sans-serif;
+  margin: auto;
+  font-weight: 500;
+}
+
 /*# sourceMappingURL=navbar.css.map */
diff --git a/public/css/navbar.css.map b/public/css/navbar.css.map
index d8ff50a..40fb34f 100644
--- a/public/css/navbar.css.map
+++ b/public/css/navbar.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../private/sass/_fonts.scss","../../private/sass/navbar.scss","../../private/sass/_sizes.scss","../../private/sass/_colors.scss"],"names":[],"mappings":"AAKQ;AALR;EACE;EACA;;ACEF;EACE;EACA;EACA;EACA;EACA,QCLM;EDMN;EACA;EACA;EACA;EACA,kBETM;EFUN,OEHM;EFIN,SChBS;EDiBT;;;AAIF;EACA;EACA;EACA;EACA;;;AAEA;EACE;EACA;;;AAEF;EACE,QC/BM;;;ADiCR;AACE;EACF;EACA;EAEE;EACA,QCvCM;;;ADyCR;EACE,kBE/BM;EFgCN;EACA;;;AAEF;EACE,kBE/CO;EFgDP,kBACE;EAGF;;;AAIF;EACE,WCxDO;EDyDP;;;AAEF;EACE,aC7DM;ED8DN,cC9DM;;;ADkER;EACE;EACA;EACA,KClEM;;;ADoER;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YE/EM;EFgFN;EACA;EAEA;EACA;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA,QCpGS;EDqGT;EACA;EACA,kBExGM;EFyGN;EACA;;;AAGF;EACE","file":"navbar.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../private/sass/_fonts.scss","../../private/sass/navbar.scss","../../private/sass/_sizes.scss","../../private/sass/_colors.scss"],"names":[],"mappings":"AAKQ;AALR;EACE;EACA;;ACEF;EACE;EACA;EACA;EACA;EACA,QCLM;EDMN;EACA;EACA;EACA;EACA,kBETM;EFUN,OEHM;EFIN,SChBS;EDiBT;;;AAIF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE,QC/BM;;;ADiCR;AACE;EACA;EACA;EAEA;EACA,QCvCM;;;ADyCR;EACE,kBE/BM;EFgCN;EACA;;;AAEF;EACE,kBE/CO;EFgDP;EAOA;;;AAIF;EACE,WC3DO;ED4DP;;;AAEF;EACE,aChEM;EDiEN,cCjEM;;;ADqER;EACE;EACA;EACA,KCrEM;;;ADuER;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,YElFM;EFmFN;EACA;EACA;EACA;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA,QCtGS;EDuGT;EACA;EACA,kBE1GM;EF2GN;EACA;;;AAGF;EACE;;;AAKF;EACE;EACA;EACA,QC5HM;ED6HN,QC1HM;;;AD6HR;EACE,kBEjIO;EFkIP;EACA;EACA;EACA,eCpIO;EDqIP,OE3HM;EF4HN;EACA;EACA;;;AAGF;EACE,kBErIQ;;;AFwIV;EACE;EACA,aD1IU;EC2IV;EACA","file":"navbar.css"}
\ No newline at end of file
diff --git a/public/css/selected-page.css b/public/css/selected-page.css
index 8a7ee38..3cc2d9b 100644
--- a/public/css/selected-page.css
+++ b/public/css/selected-page.css
@@ -17,6 +17,7 @@
   margin: 0;
   border-radius: 1rem;
   padding: 1rem;
+  box-shadow: -3px 3px #404973;
 }
 
 #close-button {
@@ -33,6 +34,7 @@
   align-items: center;
   cursor: pointer;
   transition: transform 0.5s ease;
+  border: #fbf6f1 solid 2px;
 }
 
 .close-icon {
diff --git a/public/css/selected-page.css.map b/public/css/selected-page.css.map
index 4378abf..16b3521 100644
--- a/public/css/selected-page.css.map
+++ b/public/css/selected-page.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../private/sass/_fonts.scss","../../private/sass/selected-page.scss","../../private/sass/_sizes.scss","../../private/sass/_colors.scss"],"names":[],"mappings":"AAKQ;AALR;EACE;EACA;;ACEF;EACE,SCHO;EDIP;EACA;;;AAGF;EACE,kBEVO;EFWP;EACA;EACA;EACA;EACA,eCdO;EDeP,SCfO;;;ADkBT;EACE;EACA,OCrBM;EDsBN,KCtBM;EDuBN,OCnBO;EDoBP,QCpBO;EDqBP;EACA,kBElBQ;EFmBR,OEhBM;EFiBN,WCzBM;ED0BN;EACA;EACA;EACA;;;AAGF;EACE;EACA,SCrCM;;;ADwCR;EACE;;;AAGF;EACE;EACA;EACA,QC5CM;ED6CN,kBExCQ;EFyCR,eChDO;EDiDP,WCjDO;EDkDP,aD3CU;EC4CV;EACA,OE1CM;EF2CN,YCnDM;;;ADsDR;EACE,eCrDS;;;ADwDX;EACE;EACA;EACA;EACA,aC9DM;ED+DN;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,eChFM;;;ADmFR;EACE;;;AAGF;EACE","file":"selected-page.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../private/sass/_fonts.scss","../../private/sass/selected-page.scss","../../private/sass/_sizes.scss","../../private/sass/_colors.scss"],"names":[],"mappings":"AAKQ;AALR;EACE;EACA;;ACEF;EACE,SCHO;EDIP;EACA;;;AAGF;EACE,kBEVO;EFWP;EACA;EACA;EACA;EACA,eCdO;EDeP,SCfO;EDgBP;;;AAGF;EACE;EACA,OCtBM;EDuBN,KCvBM;EDwBN,OCpBO;EDqBP,QCrBO;EDsBP;EACA,kBEnBQ;EFoBR,OEjBM;EFkBN,WC1BM;ED2BN;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA,SCvCM;;;AD0CR;EACE;;;AAGF;EACE;EACA;EACA,QC9CM;ED+CN,kBE1CQ;EF2CR,eClDO;EDmDP,WCnDO;EDoDP,aD7CU;EC8CV;EACA,OE5CM;EF6CN,YCrDM;;;ADwDR;EACE,eCvDS;;;AD0DX;EACE;EACA;EACA;EACA,aChEM;EDiEN;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,eClFM;;;ADqFR;EACE;;;AAGF;EACE","file":"selected-page.css"}
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
index ef45d46..46a6924 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -142,6 +142,10 @@ table {
   box-sizing: border-box;
 }
 
+*:focus {
+  outline: solid #ff9b71 2px;
+}
+
 main {
   margin-top: 4rem;
   margin-bottom: 2rem;
@@ -177,4 +181,69 @@ p {
   margin-bottom: 0.5rem;
 }
 
+.logged-out-body {
+  background-image: linear-gradient(to right top, #00ba9f, #00a0aa, #0083a7, #1f6693, #404973);
+  display: flex;
+  min-height: 100vh;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.logged-out-main {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: 2rem 1rem 2rem 1rem;
+  margin: 0;
+  padding-top: 4rem;
+}
+
+.landing-title {
+  text-align: center;
+  text-shadow: -4px 4px #00ba9f;
+  color: #fbf6f1;
+  margin-bottom: 2rem;
+}
+
+.intro {
+  color: white;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.landing-button {
+  text-align: center;
+  display: flex;
+  width: 100%;
+  background-color: #ff9b71;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  color: #fbf6f1;
+  border: 2px #fbf6f1 solid;
+}
+
+.start-button {
+  margin-bottom: 1rem;
+}
+
+.landing-button:focus {
+  color: #ff9b71;
+  background-color: #fbf6f1;
+}
+
+.landing-button:hover {
+  color: #ff9b71;
+  background-color: #fbf6f1;
+}
+
+.landing-button-text {
+  font-family: "Dosis", sans-serif;
+  margin: auto;
+  font-weight: 500;
+}
+
 /*# sourceMappingURL=style.css.map */
diff --git a/public/css/style.css.map b/public/css/style.css.map
index 1c8c80c..95babd0 100644
--- a/public/css/style.css.map
+++ b/public/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../private/sass/_fonts.scss","../../private/sass/_reset.scss","../../private/sass/style.scss","../../private/sass/_sizes.scss","../../private/sass/_colors.scss"],"names":[],"mappings":"AAKQ;AALR;EACE;EACA;;ACFF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAiFE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EACE;EACA;;;ACvHF;EACE;;;AAGF;EACE,YCRO;EDSP,eCVM;;;ADaR;EACE;EACA;EACA,OEPM;EFQN,kBETM;;;AFYR;EACE;EACA,WCrBO;EDsBP,eCzBO;;;AD4BT;EACE,WC3BM;ED4BN;EACA,eC/BO;EDgCP,YChCO;;;ADmCT;EACE,WCnCQ;EDoCR;EACA,eCtCO;;;ADyCT;EACE,eC3CM","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../private/sass/_fonts.scss","../../private/sass/_reset.scss","../../private/sass/style.scss","../../private/sass/_sizes.scss","../../private/sass/_colors.scss"],"names":[],"mappings":"AAKQ;AALR;EACE;EACA;;ACFF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAiFE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EACE;EACA;;;ACvHF;EACE;;;AAGF;EACE;;;AAGF;EACE,YCZO;EDaP,eCdM;;;ADiBR;EACE;EACA;EACA,OEXM;EFYN,kBEbM;;;AFgBR;EACE;EACA,WCzBO;ED0BP,eC7BO;;;ADgCT;EACE,WC/BM;EDgCN;EACA,eCnCO;EDoCP,YCpCO;;;ADuCT;EACE,WCvCQ;EDwCR;EACA,eC1CO;;;AD6CT;EACE,eC/CM;;;ADoDR;EACE,kBEtCU;EFuCV;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,aC/DO;;;ADkET;EACE;EACA;EACA,OE9DM;EF+DN,eCvEM;;;AD0ER;EACE;EACA,eC5EM;ED6EN;;;AAGF;EACE;EACA;EACA;EACA,kBE/EQ;EFgFR;EACA;EACA,eCvFM;EDwFN,SC3FM;ED4FN;EACA,OElFM;EFmFN;;;AAGF;EACE,eCjGO;;;ADoGT;EACE,OE9FQ;EF+FR,kBE5FM;;;AF+FR;EACE,OEnGQ;EFoGR,kBEjGM;;;AFoGR;EACE,aFxGU;EEyGV;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/src/views/landing.hbs b/src/views/landing.hbs
index 47c2879..214289f 100644
--- a/src/views/landing.hbs
+++ b/src/views/landing.hbs
@@ -1,18 +1,18 @@
 {{!-- hello --}}
 
-<h1>RACE TO ZERO</h1>
+<h1 class="landing-title">RACE TO ZERO</h1>
 
-<p>Your step-by-step guide to start reducing
+<p class="intro">Your step-by-step guide to start reducing
   waste and set you on the way to
   achieving a zero waste lifestyle.
 
   Tackle the challenges, save your city and
   become a true Zero Hero!</p>
 
-<button class="start-button" name="start-button" onclick="window.location.href='/dashboard'">
-  <h3>Start your adventure!</h3>
+<button class="start-button landing-button" name="start-button" onclick="window.location.href='/dashboard'">
+  <h3 class="landing-button-text">Start your adventure!</h3>
 </button>
 
-<button class="learn-button" name="learn-button" onclick="window.location.href='/learn'">
-  <h3>Wait! What's zero waste?</h3>
+<button class="learn-button landing-button" name="learn-button" onclick="window.location.href='/learn'">
+  <h3 class="landing-button-text">Wait! What's zero waste?</h3>
 </button>
\ No newline at end of file
diff --git a/src/views/layouts/logged-out.hbs b/src/views/layouts/logged-out.hbs
index eed765b..c3c4e8e 100644
--- a/src/views/layouts/logged-out.hbs
+++ b/src/views/layouts/logged-out.hbs
@@ -4,9 +4,9 @@
 <html lang="en">
 {{> header}}
 
-<body>
+<body class="logged-out-body">
   {{> navbar-loggedout}}
-  <main>
+  <main class="logged-out-main">
     {{{body}}}
   </main>
 
diff --git a/src/views/partials/navbar-loggedout.hbs b/src/views/partials/navbar-loggedout.hbs
index 56fc3f9..d0b0fab 100644
--- a/src/views/partials/navbar-loggedout.hbs
+++ b/src/views/partials/navbar-loggedout.hbs
@@ -1,8 +1,8 @@
 <header>
-  <nav>
+  <nav class="logged-out-nav">
     <div id="sign-in">
       <button class="sign-in-button" name="sign-in-button" onclick="window.location.href='/dashboard'">
-        <h3>Sign In</h3>
+        <h3 class="sign-in-button-text">Sign In</h3>
       </button>
     </div>
   </nav>
diff --git a/src/views/partials/navbar.hbs b/src/views/partials/navbar.hbs
index 849e72e..68c02c0 100644
--- a/src/views/partials/navbar.hbs
+++ b/src/views/partials/navbar.hbs
@@ -1,5 +1,5 @@
 <header>
-    <nav>
+    <nav class="nav-main">
         <div id="xp-section">
             <h3>XP</h3>
             <h4 class="getPoints"></h4>
@@ -7,9 +7,9 @@
         </div>
         <h4 class="level">Waste Warrior</h4>
         <div id="avatar-section">
-        <button class="menu-button">
-        <img id="profile-pic" src="/public/imgs/Avatar.png" alt="Profile picture">
-        </button>
+            <button class="menu-button">
+                <img id="profile-pic" src="/public/imgs/Avatar.png" alt="Profile picture">
+            </button>
         </div>
     </nav>
     <menu class="popout-menu">