Header Portfolio Links and Help Container Added

help.js

@@ -0,0 +1,15 @@
+const helpButton = document.getElementById("helpImg");
+
+helpButton.addEventListener("click", help);
+
+function help() {
+  const helpTextContainer = document.getElementsByClassName(
+    "help-text-container"
+  );
+  //   console.log("clicked");
+  //   console.log(this);
+
+  //   console.log(helpTextContainer[0]);
+
+  helpTextContainer[0].classList.toggle("active");
+}

index.html

@@ -59,7 +59,26 @@ <h5 class="sound">Open Hi-Hat</h5>
         </section>
       </div>
 
-      <div class="text-container"></div>
+      <div class="text-container">
+        <section class="header-text-container">
+          <a href="https://github.com/markdavepanado" target="_blank"
+            ><img src="images/Github_icon-icons.ico" alt="GitHub Logo"
+          /></a>
+          <a href="https://gitlab.com/markdavepanado" target="_blank"
+            ><img src="images/gitlab_icon-icons.ico" alt="GitLab Logo"
+          /></a>
+          <a
+            href="https://www.linkedin.com/in/mark-dave-panado-0040b2180"
+            target="_blank"
+            ><img src="images/linkedin_icon-icons.ico" alt="LinkedIn Logo"
+          /></a>
+        </section>
+
+        <section class="help-text-container">
+          <h1>How to Use</h1>
+          <img src="images/Logo.png" alt="Dabe Logo" id="helpImg" />
+        </section>
+      </div>
     </div>
 
     <audio data-key="82" src="audio/China-Cymbal-Crash-Level-4A.mp3"></audio>
@@ -75,5 +94,6 @@ <h5 class="sound">Open Hi-Hat</h5>
     <audio data-key="77" src="audio/Hi-Hat-Open-Hit-B1.mp3"></audio>
 
     <script src="sound.js"></script>
+    <script src="help.js"></script>
   </body>
 </html>

style.css

@@ -7,6 +7,7 @@
 
 body {
   background-color: #868686;
+  overflow: hidden;
 }
 
 .page-container {
@@ -30,6 +31,8 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
+
+  box-shadow: inset 1px 1px 5px #000;
 }
 
 .key {
@@ -67,6 +70,7 @@ body {
   color: #868686;
   text-transform: uppercase;
   letter-spacing: 0.2em;
+  padding: 0 5px;
 }
 
 .bass-hh-container,
@@ -134,6 +138,77 @@ body {
   background: transparent;
 }
 
+/* ==> text container  */
+
+/* --> header  */
+
+.header-text-container {
+  position: relative;
+  top: -20px;
+  background-color: #868686;
+  border-radius: 0 0 50px 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  width: 35%;
+  height: 10vh;
+  margin: auto;
+
+  box-shadow: inset 1px 1px 5px #000;
+}
+
+.header-text-container img {
+  width: 90%;
+}
+
+.header-text-container a {
+  margin: 0 10px;
+  transition: all 0.3s ease;
+}
+
+.header-text-container a:hover {
+  transform: scale(1.2);
+}
+
+.help-text-container {
+  position: absolute;
+  right: 0;
+  background-color: #868686;
+  padding: 20px;
+  border-radius: 40px 0 0 40px;
+  padding: 40px;
+  width: 35%;
+  height: 80vh;
+  margin-top: 20px;
+  box-shadow: inset 1px 1px 5px #000;
+  transform: translateX(100%);
+  transition: transform 1s ease;
+}
+
+.help-text-container.active {
+  transform: translateX(0);
+}
+
+.help-text-container img {
+  width: 20%;
+  position: absolute;
+  top: 80%;
+  left: -20%;
+  background-color: #868686;
+  padding: 10px;
+  border-radius: 10px 0 0 10px;
+  box-shadow: inset 1px 1px 5px #000;
+  transition: all 0.07s ease;
+}
+
+.help-text-container img:hover {
+  transform: scale(1.05);
+  /* -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5); */
+}
+
 @media only screen and (max-width: 1024px) {
   .key-container .key {
     margin: 5px;
@@ -158,6 +233,13 @@ body {
   }
 }
 
+@media only screen and (max-width: 840px) {
+  .bass-hh-container div[data-key="66"] {
+    height: 150px;
+    width: 150px;
+  }
+}
+
 @media only screen and (max-width: 768px) {
   .bass-hh-container,
   .hh-container {
@@ -237,5 +319,35 @@ body {
 }
 
 /* not finished media query */
-@media only screen and (max-width: 472px) {
+@media only screen and (max-width: 460px) {
+  .bass-hh-container div[data-key="66"] {
+    height: 150px;
+    width: 150px;
+  }
+}
+
+@media only screen and (max-width: 425px) {
+  .bass-hh-container {
+    flex-direction: column;
+  }
+
+  .key-container .key .sound,
+  .bass-hh-container .key .sound,
+  .hh-container .key .sound {
+    font-size: 0.65em;
+  }
+}
+
+@media only screen and (max-width: 410px) {
+  .key-container .key,
+  .hh-container .key {
+    height: 100px;
+  }
+}
+
+@media only screen and (max-width: 390px) {
+  .key-container .key,
+  .hh-container .key {
+    height: 100px;
+  }
 }