Added Click Event

Just finished adding my click event to the mobile view of the application.  This is a very rough draft that I will revisit, but for now, I'm going to start working on the responsiveness and jump to the desktop version of this project

index.html

@@ -53,10 +53,10 @@ <h1 class="heading">
     <div id="share-row">
       <h2>SHARE</h2>
       <img src="share-row-images/facebook-share-column.png" alt="facebook mini icon">
-      <img src="share-row-images/twitter-share-column.png" alt="twitter mini icon">
-      <img src="share-row-images/pintrest-share-column.png" alt="pintrest mini icon">
+      <img src="share-row-images/twitter-share-column.png" alt="twitter mini icon" class="twitter-icon">
+      <img src="share-row-images/pintrest-share-column.png" alt="pintrest mini icon" class="pintrest-icon">
     </div>
-
+      <img src="share-row-images/share-share-column.png" alt="dark share icon" class="share" id="dark-share">
   </div>
 
   <div class="attribution">

script.js

@@ -1,12 +1,22 @@
+let display = true;
+let cont = true
 
-const shareBtn = document.getElementById('share-btn');
+const lightShareBtn = document.getElementById('share-btn');
+const darkShareBtn = document.getElementById('dark-share');
 
 const nameDate = document.getElementById('name-date-container');
 const profilePic = document.querySelector('.michelle');
-const sigSect = document.getElementById('sig-section');
+const sigSect = document.getElementById('sig-section-event');
 
-shareBtn.addEventListener('click', function() {
+lightShareBtn.addEventListener('click', function() {
   nameDate.style.visibility = 'hidden';
   profilePic.style.visibility = 'hidden';
-  sigSect.style.backgroundColor = '#48556A'
-})
+  sigSect.style.visibility = 'visible';
+})      
+
+darkShareBtn.addEventListener('click', function() {
+    nameDate.style.visibility = 'visible';
+    profilePic.style.visibility = 'visible';
+    sigSect.style.visibility = 'hidden';
+})
+

style.css

@@ -28,8 +28,9 @@ body {
   flex-direction: column;
   width: 327px;
   height: 512px;
-  border: 2px solid black;
+  /* border: 2px solid black; */
   border-radius: 8px;
+  box-shadow: 1px 22px 15px -1px #DEDEDE;
 }
 
 .drawers {
@@ -66,34 +67,43 @@ body {
   width: 327px;
   height: 66px;
   border-radius: 0 0 10px 10px;
-  margin: 39px 0 0 0;
+  margin: 32px 0 0 0;
   /* border: 2px solid black; */
 }
 
 /* FOR JAVASCRIPT BOILERPLATE */
 
 #sig-section-event {
+  visibility: hidden;
   display: flex;
+  position: absolute;
   justify-content: space-around;
   width: 327px;
   height: 66px;
   border-radius: 0 0 10px 10px;
-  margin: 39px 0 0 0;
+  margin: 400px 0 0 0;
   background-color: #48556A;
   /* border: 2px solid black; */
 }
 
 /* FOR JAVASCRIPT BOILERPLATE */
 
-.share-row {
+#share-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 175px;
   height: 20px;
-  border: 2px solid black;
+  /* border: 2px solid black; */
+  margin: 22px 0 0 0;
 }
 
 #share-row h2 {
   font-family: 'Manrope', sans-serif;
   font-size: 13px;
+  letter-spacing: 5px;
+  color: #9DAEC2;
+  font-weight: 200;
 }
 
 /* ------------------------------- */
@@ -121,7 +131,12 @@ body {
 .share {
   width: 32px;
   height: 32px;
-  margin: 11px 40px 0 -15px;
+  margin: 9px 40px 0 -15px;
+}
+
+#dark-share {
+  display: inline-block;
+  margin: 14px 18px 0 0;
 }
 
 .michelle {
@@ -135,6 +150,13 @@ body {
   margin-top: 35px;
 }
 
+/* Hover Animations */
+
 .share:hover {
   cursor: pointer;
+}
+
+.pintrest-icon:hover,
+.twitter-icon:hover {
+  cursor: pointer;
 }