Algo-Phantoms
diff --git a/‎DSA.html
Lines changed: 76 additions & 4 deletions b/‎DSA.html
Lines changed: 76 additions & 4 deletions
@@ -20,6 +20,12 @@
     <!-- style.css For Custom Styling -->
     <link rel="stylesheet" href="css/style.css">
 
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+        crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+        crossorigin="anonymous"></script>
     <script src="https://kit.fontawesome.com/bd43ee06c8.js" crossorigin="anonymous"></script>
 
     <title>Complete RoadMap to DSA</title>
@@ -40,12 +46,78 @@
 </head>
 
 <body>
+    <section>
+        <nav class="navbar navbar-expand-lg navbar-dark fixed-top nav-col top">
+            <a class="navbar-brand" href="index.html"><img src="images/icon.png" alt="Algo Phantoms" width="50"
+                    height="50"><span class="brand1">Algo</span>Phantoms
+            </a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
 
-    <iframe title="DSA" style="border:none" width="1400" height="635"
-        src="https://whimsical.com/embed/L7xNuV2ZRSsLd6vrVtyvrQ"></iframe>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item">
+                        <a class="nav-link font-weight-bold nav-items" href="index.html">Home </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link font-weight-bold nav-items" href="index.html#about">About</a>
+                    </li>
 
-    <button class="button1"><a href="index.html">Go Back </a></button>
-    
+                    <li class="nav-item">
+                        <a class="nav-link  font-weight-bold nav-items" href="team.html">Team<span
+                                class="sr-only">(current)</span></a>
+                    </li>
+                    
+                    <li class="nav-item dropdown">
+                        <a class="nav-link font-weight-bold nav-items dropdown-toggle" href="#" id="navbarDropdown"
+                            role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            More
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item" href="DSA.html">RoadMap to your DSA</a>
+
+                            <a class="dropdown-item" href="https://github.com/Algo-Phantoms" target="_blank">Contribute
+                                to Project</a>
+
+                            <a class="dropdown-item" href="practicedsa.html">DSA Problems</a>
+
+                        </div>
+                    <li class="nav-item">
+                        <a class="nav-link  font-weight-bold nav-items" href="#footer">Contact</a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        <script>
+            const navbar = document.getElementsByTagName("nav")[0];
+            let scrolled=false;
+            window.onscroll=function(){
+                if(window.pageYOffset>100)
+                {
+                    navbar.classList.remove("top");
+                    if(!scrolled)
+                    {
+                        navbar.style.transform="translateY(-70px)";
+                    }
+                    setTimeout(function(){
+                     navbar.style.transform = 'translateY(0)';
+                     scrolled = true;
+                    },200);
+                }
+                else{
+                    navbar.classList.add("top");
+                    scrolled=false;
+                }
+            };
+            </script>
+    </section>
+
+
+
+    <iframe title="DSA" style="border:none" width="100%" height="600vh"
+        src="https://whimsical.com/embed/L7xNuV2ZRSsLd6vrVtyvrQ"></iframe>
     <!--footer starts-->
     <footer id="footer">
         <div class="container">