doing stuff

MorpheusZI · Oct 17, 2023 · cf18bf6 · cf18bf6
1 parent 90965f8
commit cf18bf6
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 43 deletions.
diff --git a/amogus.js b/amogus.js
@@ -8,7 +8,6 @@ hamburg.addEventListener("click", () => {
     nav.classList.toggle("open");
     acc.classList.toggle("acpen");
   } else {
-    acc.classList.remove("acpen");
     nav.classList.remove("open");
     hamburg.setAttribute("aria-expanded", "false");
   }

diff --git a/contact.html b/contact.html
@@ -8,7 +8,6 @@
     <title>Morpheus</title>
   </head>
   <body>
-    <a href="index.html" class="acc">MZI</a>
     <div class="nav">
       <button
         class="burga"
@@ -21,8 +20,18 @@
         </svg>
       </button>
       <nav class="sidebar" aria-expanded="false">
-        <a href="skillz.html"> Skillz </a>
-        <a href="contact.html "> Contact </a>
+        <div class="isco">
+          <img src="/icons/home.png" class="iscoimg" alt="">
+          <a href="index.html"> Home </a>
+        </div>
+        <div class="isco">
+          <img src="/icons/pencil.png" class="iscoimg" alt="">
+          <a href="skillz.html"> Skillz </a>
+        </div>
+        <div class="isco">
+          <img src="/icons/contact-mail.png" class="iscoimg" alt="">
+          <a href="contact.html"> Contact </a>
+        </div>
       </nav>
     </div>
 

diff --git a/icons/contact-mail.png b/icons/contact-mail.png
diff --git a/icons/home.png b/icons/home.png
diff --git a/icons/pencil.png b/icons/pencil.png
diff --git a/index.html b/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <a href="index.html" class="acc">MZI</a>
     <div class="nav">
       <button
         class="burga"
@@ -21,8 +20,18 @@
         </svg>
       </button>
       <nav class="sidebar" aria-expanded="false">
-        <a href="skillz.html"> Skillz </a>
-        <a href="contact.html "> Contact </a>
+        <div class="isco">
+          <img src="/icons/home.png" alt="" class="iscoimg">
+          <a href="index.html"> Home </a>
+        </div>
+        <div class="isco">
+          <img src="/icons/pencil.png" alt="" class="iscoimg">
+          <a href="skillz.html"> <span class="csz">Skillz</span> </a>
+        </div>
+        <div class="isco">
+          <img src="/icons/contact-mail.png" alt="" class="iscoimg">
+          <a href="contact.html "> Contact </a>
+        </div>
       </nav>
     </div>
     <section class="Landingpage">

diff --git a/skillz.html b/skillz.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <a href="index.html" class="acc">MZI</a>
     <div class="nav">
       <button
         class="burga"
@@ -21,8 +20,18 @@
         </svg>
       </button>
       <nav class="sidebar" aria-expanded="false">
-        <a href="skillz.html"> Skillz </a>
-        <a href="contact.html"> Contact </a>
+        <div class="isco">
+          <img src="/icons/home.png" class="iscoimg" alt="">
+          <a href="index.html"> Home </a>
+        </div>
+        <div class="isco">
+          <img src="/icons/pencil.png" class="iscoimg" alt="">
+          <a href="skillz.html"> Skillz </a>
+        </div>
+        <div class="isco">
+          <img src="/icons/contact-mail.png" class="iscoimg" alt="">
+          <a href="contact.html"> Contact </a>
+        </div>
       </nav>
     </div>
     <section class="Frontend">

diff --git a/style.css b/style.css
@@ -49,35 +49,34 @@ body {
   color: white;
   background-color: black;
 }
-.nav {
+
+.nav{
   display: flex;
-  align-items: center;
-  height: 100%;
-  padding-block: 20px;
   justify-content: center;
+  align-items: center;
 }
-
 .sidebar > a {
-  text-decoration: none;
-  color: white;
-  font-size: 4vh;
+  font-size: 2vw;
 }
-.sidebar {
-  width: 100%;
+.sidebar > a:hover{
+  color: crimson;
+  transition: 1s;
+}
+
+.sidebar{
+  width: 90%;
   transition: 2s;
-  height: 100%;
-  font-family: var(--prim-font);
-  transform: translateX(-1500px);
+  transform: translateX(-100vw);
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-around;
   align-items: center;
-  flex-direction: row;
+  height: 6.7vw;
 }
 
-.open {
-  margin-top: 1%;  
-  transform: translateX(0px);
+.open{
+  transform: translateX(0);
 }
+
 .heru {
   color: crimson;
 }
@@ -108,6 +107,9 @@ body {
   color: rgb(255, 233, 233);
   font-family: var(--prim-font);
 }
+.iscoimg{
+  display: none;
+}
 .emdot {
   color: crimson;
   font-size: 55px;
@@ -127,7 +129,8 @@ body {
     font-size: 20px;
   }
 }
-@media only screen and (max-width: 800px) {
+.isco > a{
+  font-size: 2vw;
 }
 /* button styling */
 button {
@@ -138,6 +141,7 @@ button {
   position: absolute;
   top: 1%;
   left: 1%;
+  z-index: 1;
   border: none;
   padding-inline: 28px;
 }
@@ -191,10 +195,49 @@ footer {
   body {
     overflow-x: hidden !important;
   }
-
-  .sidebar > a {
-    margin-top: 2%;
-    font-size: 4vw;
+  .nav{
+    justify-content: start;
+    margin-bottom: 20px;
+  }
+
+  .isco > a{ 
+    height: 100%;
+    font-size: 6vw;
+  }
+  button{
+    position: fixed;
+    top: 0%;
+    left: 0%;
+    z-index: 2 !important;
+  }
+  .open{
+    position: fixed;
+  }
+  .iscoimg{
+    display: block;
+    width: 20px;
+    height: 20px;
+  }
+  .isco{
+    gap: 1rem;
+    display: flex;
+  }
+  .sidebar{
+    flex-direction: column;
+    width: 50%;
+    margin-top: -5%;
+    background-color: crimson;
+    padding-top: 6rem;
+    top: 1vh;
+    gap: 2rem;
+    padding-inline-start: 1rem;
+    justify-content:start;
+    align-items: start;
+    gap: -25rem;
+    z-index: 1 !important;
+    position:fixed;
+    border-radius: 0px 0px 30px 0px;
+    height: 50vh;
   }
   svg {
     width: 20px;
@@ -209,18 +252,12 @@ footer {
   .Landingpage {
     display: flex;
     flex-direction: column-reverse;
-  }
-  button {
-    padding-block: 3vh;
-    padding-inline: 4vw;
-  }
-  .open {
-    margin-top: -5px;
-  }
+  } 
   .gimp {
     width: 100%;
   }
   .Frontend {
+    margin-top: 100px;
     padding: 15px !important;
   }
   .Frow1 {
@@ -261,7 +298,7 @@ footer {
     font-size: 1.5rem !important;
   }
   .contact{
-    margin-top: 2rem !important;
+    margin-top: 5em !important;
   }
 
   .cinfo{
@@ -377,7 +414,7 @@ hr {
 }
 .icons {
   position: static;
-  z-index: 1;
+  z-index: 0;
   display: flex;
   margin-bottom: 20px;
   gap: 20px;