responsive student added button js

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

buttons.js

@@ -0,0 +1,47 @@
+let len = 800;
+
+function change_view(){
+    let box = document.querySelector('.jd_table');
+    if(box.style.visibility == 'visible' && window.innerHeight<800){
+        hide();
+    }
+    else{
+        show();
+    }
+}
+
+function show(){
+    box = document.querySelector('.jd_table');
+    obj = document.querySelector('#box_hide');
+    box.style.visibility = 'visible';
+    obj.style.background = '#fff';
+    obj.style.borderColor = 'red';
+    obj.style.color = 'red';
+    obj.innerHTML = 'Close';
+    obj.style.bottom = '22.5rem';
+}
+
+function hide(){
+    box = document.querySelector('.jd_table');
+    obj = document.querySelector('#box_hide');
+    box.style.visibility = 'hidden';
+    obj.style.background = '#0C2695';
+    obj.style.borderColor = '#fff';
+    obj.style.color = '#fff';
+    obj.innerHTML = 'Menu'; 
+    obj.style.bottom = '5rem';   
+    console.log('roman')
+}
+
+if(window.innerWidth < len) hide();
+
+if(window.innerWidth < 800){
+    window.addEventListener('scroll', function() {
+        hide();
+    });
+    window.addEventListener('resize', function() {
+        hide();
+    });
+}
+
+

student.css

@@ -278,7 +278,7 @@ body{
     line-height: normal;
 }
 
-/* ------------------------------ */
+/* ---------------------------------------------------------------------------- */
 .ab{
     color: #FFF;
     text-align: center;
@@ -371,9 +371,6 @@ body{
     /* margin-top: 16px; */
     display: inline-block;
 }
-/* .jdsc{
-    display: inline-block;
-} */
 
 /* //////////////////////////////////////////////////////// */
 
@@ -451,7 +448,11 @@ body{
     line-height: normal;
     display: inline-block;
 }
+/* ----------------------------------------------------------------------------- */
 
+.dir{
+    overflow: hidden;
+}
 .jd_table{
     width: fit-content;
     max-width: min-content;
@@ -460,14 +461,13 @@ body{
     box-shadow: 0.1px 0.1px 3px rgba(0, 0,0,0.2);
     border-radius: 2px;
     font-family:'Plus Jakarta Sans';
-    margin-left: 165px;
+    margin-left: 10%;
     border-radius:8px;
     padding-top: 12px;
     padding-bottom: 15px;
     padding-left: 15px;
-    padding-right: 17px;
+    padding-right: 15px;
     cursor: pointer;
-
 }
 
 .jd_table ul p{
@@ -508,12 +508,55 @@ body{
 
 #sub-nav{
     font-size: 14px;
-    /* background-color: #f5f5f5; */
     display: flex;
     align-items: center;
     padding-left: 20px;
 }
 
+@media only screen and (max-width : 800px){
+
+#box_hide, .jd_table{
+    position: fixed;
+    bottom: 5rem;
+    right: 0;
+    cursor: pointer;
+  }
+
+  .jd_table{
+
+    background: #fff;
+    width: fit-content;
+    max-width: min-content;
+    max-height: 20rem;
+    min-width: 225px;
+    box-shadow: 0.1px 0.1px 3px rgba(0, 0,0,0.2);
+    border-radius: 2px;
+    font-family:'Plus Jakarta Sans';
+    border-radius:8px;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-right: 17px;
+    z-index: 8;
+    overflow-y: scroll;
+    bottom: 1rem;
+  }
+
+  #box_hide{
+    background: #0C2695;
+    border: #fff 1px solid;
+    border-radius: .5rem;
+    height: 2.5rem;
+    width: 2.5rem;
+    cursor: pointer;
+    z-index: 9;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    color: #fff;
+    opacity: 0.7;
+  }
+} 
 
 /* ---------------- --------------------------------*/
 .about_us{
@@ -1070,6 +1113,7 @@ text-decoration: none;
 
 
 /* ---------------------------------------------------------------- */
+/*  */
 .scholar{
     margin-left: 1.88rem;
 }
@@ -1352,4 +1396,5 @@ gap: 9.8rem;
 .read-mag{
     font-size: 1rem;
     /* margin-left: ; */
-}
+}
+

student.html

@@ -115,17 +115,17 @@ <h2 class="scholar_sop" style="margin-bottom: 40px;">Standard Operating Procedur
 
                         </div>
                         <div class="industrial_visit_links">
-
                             <img src="vector 2.png">
                             <a href="https://firebasestorage.googleapis.com/v0/b/ait-website-81159.appspot.com/o/AIT-STUDENTS%2FSCHOLORSHIPS%2FSOP%20-%20Merit%20Cum%20Means%20Scholarship.pdf?alt=media&token=39db8519-5355-4570-a391-ceef2748c263" class="prior">SOP For Award of Merit cum Means Scholarship to Students of AIT(Jul 2021)</a>
 
                         </div>
                 </div>
             </div>
         </div>
-
+        <div id="box_hide" onclick="change_view()">Menu</div>
 
     </div>
+
     <script>
         function stopReload(event){
             event.preventDefault;
@@ -149,5 +149,8 @@ <h2 class="scholar_sop" style="margin-bottom: 40px;">Standard Operating Procedur
                 .catch(error => console.error('Error:', error));
         }
     </script>
+    <script src="./buttons.js"></script>  
+    <script src="./script.js"></script>
+
 </body>
 </html>