Update popup for mobile

Talha-Hanif5666 · Jul 12, 2023 · ce95a7c · ce95a7c
1 parent de7456d
commit ce95a7c
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -43,9 +43,9 @@
         <div class="placeholder"><a>Talha Hanif</a></div>
         <div class="nav-detail">
           <ul>
-            <li>Portfolio</li>
-            <li>About</li>
-            <li>Contact</li>
+            <li><a href="#recent-work">Portfolio</a></li><hr>
+             <li><a href="#about-myself">About</a></li><hr>
+            <li><a href="#contact">Contact</a></li> <hr>
             <li><a><img src="Images\Message.png" alt="message.png"></a></li>
           </ul>
 
@@ -65,15 +65,15 @@ <h2 class="secondary-text">I'am a Software Developer</h2>
         work and experience! If you like what you see and have a project you need coded, <br>
         don’t hestiate to contact me.</p>
       <ul class="social-media">
-        <li><a href="#" id="github">
+        <li><a href="https://github.com/Talha-Hanif5666" id="github">
             <img src="Images\github.png" alt="github"></a></li>
-        <li><a href="#" id="linkedin">
+        <li><a href="https://www.linkedin.com/in/muhammad-talha-hanif-6b1355116" id="linkedin">
             <img src="Images\linkedin.png" alt="linkedin"></a></li>
-        <li><a href="#" id="angelist">
+        <li><a href="https://wellfound.com/u/muhammad-talha-hanif-1" id="angelist">
             <img src="Images\angel.png" alt="angelist"></a></li>
-        <li><a href="#" id="twitter">
+        <li><a href="https://twitter.com/TalhaHa45039660?t=R4git6jFgsysI4xPxmN-ag&s=09" id="twitter">
             <img src="Images\twitter.png" alt="twitter"></a></li>
-        <li><a href="#" id="medium">
+        <li><a href="https://medium.com/@talhahanif5666" id="medium">
             <img src="Images\medium.png" alt="medium"></a></li>
       </ul>
     </div>

diff --git a/index.js b/index.js
@@ -40,7 +40,7 @@ worksection.innerHTML = `
   <li>bootstrap</li>
   <li>Ruby</li>
 </ul>
-<button class="smallbutton-mob">See Project</button>
+<button class="smallbutton-mob" id="project">See Project</button>
 </div>
       <div class="frame43">
         <div class="content-defaults content1">
@@ -403,7 +403,7 @@ worksectiondesk.innerHTML = `
   <li>bootstrap</li>
   <li>Ruby</li>
 </ul>
-<a href="#main-id"><button class="smallbutton" id="project" type="submit" value="submit">See Project</button></a>
+<a href="#main-id"><button class="smallbutton deskbutton" id="project" type="submit" value="submit">See Project</button></a>
 </div>
 <div class="frame-desk" id="framedesk">
   <div class="content-defaults-desk content1-desk">

diff --git a/style.css b/style.css
@@ -801,10 +801,8 @@
     width: 343px;
     height: 718px;
     background-color: #fff;
-    margin-top: 600px !important;
-    margin-left: 32px;
     z-index: 1 !important;
-    position: absolute;
+    position: fixed;
     border: solid #5b5957;
   }
 
@@ -817,12 +815,7 @@
     line-height: 44px;
     line-height: 117%;
     vertical-align: top;
-    margin-top: 76px;
-  }
-
-  .pop-up-mobile h2 {
-    margin-top: 32px;
-    color: #172b4d;
+    margin-top: 20px;
   }
 
   .close {
@@ -844,13 +837,13 @@
     flex-grow: 0;
     align-self: baseline;
     list-style-type: none;
-    margin-top: -30px;
+    margin-top: -40px;
     margin-left: 32px;
   }
 
-  .mobile-popup-img {
-    height: 120px;
-    width: 311px;
+  .mobile-popup-img img {
+    height: 320px;
+    width: 271px;
     margin-top: 10px;
     border-radius: 0;
     margin-left: 32px;
@@ -859,7 +852,7 @@
 
   .popup-description {
     height: 220px;
-    width: 318px;
+    width: 310px;
     left: 16px;
     margin-top: 0;
     border-radius: nullpx;
@@ -873,13 +866,12 @@
     line-height: 24px;
     letter-spacing: 0;
     text-align: left;
-    margin-top: 138px;
+    margin-top: 10
   }
-
   .popup-buttons {
-    margin-top: -40px;
+    margin-top: 65px;
     display: flex;
-    margin-left: 16px;
+    margin-left: -3px;
   }
 
   #see-live {
@@ -1027,7 +1019,7 @@
     width: 120px;
   }
 
-  .nav-detail ul {
+  .nav-detail ul{
     list-style: none;
     width: 255px;
     font-weight: 700;
@@ -1038,6 +1030,19 @@
     height: 20px;
     margin-left: 991px;
     margin-top: -18px;
+    text-decoration: none;
+  }
+
+  .nav-detail ul a{
+    text-decoration: none;
+    list-style: none;
+    color: #fff;
+    margin-top: 1px;
+    margin-left: 20px;
+  }
+
+  .nav-detail ul a img{
+    margin-top: -10px;
   }
 
   .headline {
@@ -2093,13 +2098,17 @@
   .other-content-tags li:hover,
   .textblock-tags li:hover,
   .social-media li:hover,
-  .pop-up-tags-desk li:hover,
-  .nav-detail ul li:hover
+  .pop-up-tags-desk li:hover
    {
     background: #ff6b00;
     cursor: pointer;
   }
 
+  .nav-detail ul li a:hover {
+    color: #ff6b00;
+    cursor: pointer;
+  }
+
   .content1-desk button:hover,
   .featured button:hover,
   .about-top a:hover,
@@ -2124,6 +2133,21 @@
   }
 }
 
+.placeholder,
+ #text {
+  animation: rotate 1s linear 2s;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 #img-deskt:hover {
   width: 600px;
   height: 400px;