Modified the ui of the contact page and set the minimum width of the …

…contact page form to be 300px (#123)

contact.html

@@ -104,28 +104,28 @@ <h2 class="navbar-header">
         <div class="container categories-heading">
           <!-- <span style="color: #ffc400;">Contact Us </span><br> -->
         </div>
-        <div class="modal-box" style="margin-top: -1rem;">
+        <div class="modal-box" style="margin-top: -1rem; min-width: 300px;">
           <img class="banner-img-contact" src="homepage/contact4.svg"></img>
 
           <form class='modal-div' action="https://formspree.io/f/xzbnpqae" method="POST">
 
             <p class='contact-subheader'>Get In Touch</p>
-            <div class='input-contact-flexbox'>
-              <div style="margin:3vh 4vh">
+            <div>
+              <div style="margin:3vh 4vh ;display: block;">
                 <label class='input-header'>First Name</label>
                 <input class='input-box' name="First Name" style="width:100%; border-radius: none;" type="text"
                   placeholder='Shwet' id="FNAME" required></input>
 
               </div>
 
-              <div style="margin:3vh 4vh">
+              <div style="margin:3vh 4vh;display: block;">
                 <label class='input-header'>Last Name</label>
                 <input class='input-box' name="Last Name" style="width:100%" type="text" placeholder='Khatri'
                   id="LNAME"></input>
 
               </div>
             </div>
-            <div class='input-contact-flexbox'>
+            <div >
               <div style="margin:3vh 4vh">
                 <label class='input-header'>Email</label>
                 <input class='input-box' name="Email" style="width:100%" type="text" placeholder='[email protected]'

index.html

@@ -103,6 +103,7 @@
         <span class="icon-bar"></span>
       </button>
       </div>
+
       <div class="max-lg-display">
         <div class="collapse navbar-collapse" id="collapsable-nav">
           <ul id="nav-list" class="nav navbar-nav navbar-right">

script.js

@@ -4,8 +4,7 @@ const initSlider = () => {
     let maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;
 
     const scrollAmount = imageList.clientWidth;
-
-    const handleSlideButtons = () => {
+      const handleSlideButtons = () => {
         slideButtons[0].style.visibility = imageList.scrollLeft <= 0 ? "hidden" : "visible";
         slideButtons[1].style.visibility = imageList.scrollLeft >= maxScrollLeft ? "hidden" : "visible";
     };

swetify.css

@@ -2,6 +2,7 @@ body {
 
   font-size: 14px;
 }
+
 #cont2 h1{
   font-size: 60px; 
   color: #ffc400;

swetify.js

@@ -43,6 +43,14 @@ const jsonPaths = [
   './playlists/sonusongs.json',
   './playlists/shreyasongs.json',
 ];
+function toggleNavbar() {
+  var navbar = document.getElementById("navbar");
+  if (navbar.style.left === "0px") {
+    navbar.style.left = "-250px";
+  } else {
+    navbar.style.left = "0px";
+  }
+}
 
 let globalSong, allsongs;
 const fetchData = async (path) => {