Update index.html

index.html

@@ -95,7 +95,8 @@
     }
 
     input[type="text"],
-    input[type="password"] {
+    input[type="password"],
+      input[type="email"] {
       width: 400px;
       padding: 10px;
       margin-bottom: 15px;
@@ -144,8 +145,8 @@
             <div class="collapse navbar-collapse ml-auto" id="navbarNavAltMarkup">
               <div class="navbar-nav ml-auto">
                 <a class="nav-link active text-white" href="#">Home <span class="sr-only">(current)</span></a>
-                <a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal" href="#">LogIn</a>
-                <a class="nav-link text-white" href="#">SignUp</a>
+                <a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal1" href="#">LogIn</a>
+                <a class="nav-link text-white" data-toggle="modal" data-target="#exampleModal2" href="#">SignUp</a>
                 <a class="nav-link text-white" href="#">PlayList</a>
                 <a class="nav-link text-white" href="#">About</a>
                 <a class="nav-link text-white" href="#">Settings</a>
@@ -156,7 +157,7 @@
     </div>
 
 <!-- Modal -->
-    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
          
              <div class="container1">
@@ -180,6 +181,31 @@
   </div>
     
   </div>
+</div>
+    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
+             
+                 <div class="container1">
+    <div class="m-auto">
+          <button type="button" class="close mb-auto" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+        <div class="m-4">
+            <h2>Signup</h2>
+        </div>
+    <form action="" method="POST" onsubmit="return validateSignup();" name="signupForm">
+        <div class="card1">
+      <input type="text" name="username" placeholder="Username" required>
+      <input type="password" name="password" placeholder="Password" required>
+      <input type="email" name="email" placeholder="Email" required>
+      <input type="submit" value="Signup">
+      </div>
+    </form>
+    <p class="message">Username already exists.</p>
+  </div>
+        
+      </div>
 </div>
     <div>
         <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">