refine layout on landing page

added profile pic menu in header. relates #4

css/landing.css

@@ -1,14 +1,38 @@
 .landing_header {
-  background: grey;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  padding: 1em;
 }
 
 .container {
   display: flex;
   justify-content: center;
-  align-items: center; 
+  align-items: center;
   flex-direction: column;
-  margin-top: 10em;
+  margin-top: 3em;
+}
+
+.header_calendar {
+  height: 2em;
+}
+
+.header_profile_pic {
+  height: 2.7em;
+}
+
+.header_menu_items {
+  visibility: hidden;
+  background: silver;
+  padding: .3em;
+  line-height: 1.5em;
+}
+
+.header_menu {
+  text-align: right;
+}
+
+.logameal_button {
+  background: silver;
+  padding: .3em;
 }

css/main.css

@@ -1,3 +1,8 @@
 body, html {
   margin: 0 auto;
 }
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

landing.html

@@ -12,25 +12,27 @@
 
   <header class="landing_header">
 
-    <div class="landing_header_menu">
-
-      <a href="calendar.html">Calendar</a></br>
-      <a href="settings.html">Settings</a>
-
+    <div class="header_calendar">
+      <a href="calendar.html"><img src="images/header_menu.png" alt="" class="header_calendar"></a></br>
     </div>
 
-    <div class="landing_logout">
-      <a href="./login.html">Log out</a>
+    <div class="header_menu">
+      <img src="images/header_profile.png" alt="your profile image" class="header_profile_pic"></br>
+      <div class="header_menu_items">
+        <a href="settings.html" class="header_menu_item">Settings</a></br>
+        <a href="./login.html" class="header_menu_item">Log out</a>
+      </div>
     </div>
 
   </header>
 
   <div class="container">
 
     <h1 class="landing_greeting">Hello, Kim.</h1>
-    <a href="logameal.html" class="landing_logameal">Log a meal</a>
+    <a href="logameal.html" class="logameal_button">Log a meal</a>
 
   </div>
 
+  <script src="landing.js"></script>
 </body>
 </html>

landing.js

@@ -0,0 +1,6 @@
+var headerMenu = document.querySelector('.header_menu_items');
+var headerProfilePic = document.querySelector('.header_profile_pic');
+
+headerProfilePic.addEventListener('click', () => {
+  headerMenu.style.visibility = headerMenu.style.visibility === 'hidden' ? 'visible' : 'hidden'
+})

login.html

@@ -21,7 +21,7 @@
       </div>
   </form>
 
-  <p class="login_info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  <p class="login_info">Recover-eat is for patients who have been diagnosed with an eating disorder and are receiving treatment from a therapist. It replaces the paper version of your food diary.</p>
 </div>
 <script src="login.js"></script>
 </body>