팝업 등록 양식 Javascript | Html에서 팝업 양식 만들기

<script src="https://kit.fontawesome.com/f9275dded9.js" crossorigin="anonymous"></script>  
 <!--Trigger-->  
 <a class="login-trigger" href="#" data-target="#login" data-toggle="modal">Login/Register</a>  
 <div id="login" class="modal fade" role="dialog">  
  <div class="modal-dialog">  
   <div class="modal-content">  
    <div class="modal-body">  
     <button data-dismiss="modal" class="close">&times;</button>  
     <div class="container" id="container">  
                               <div class="form-container sign-up-container">  
                                    <form action="#">  
                                         <h1>Create Account</h1>  
                                         <div class="social-container">  
                                              <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>  
                                         </div>   
                                         <span>or use your email for registration</span>  
                                         <input type="text" placeholder="Name" />  
                                         <input type="email" placeholder="Email" />  
                                         <input type="password" placeholder="Password" />  
                                         <button>Sign Up</button>  
                                    </form>  
                               </div>  
                               <div class="form-container sign-in-container">  
                                    <form action="#">  
                                         <h1>Sign in</h1>  
                                         <div class="social-container">  
                                              <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>  
                                         </div>  
                                         <span>or use your account</span>  
                                         <input type="email" placeholder="Email" />  
                                         <input type="password" placeholder="Password" />  
                                         <a href="#">Forgot your password?</a>  
                                         <button>Sign In</button>  
                                    </form>  
                               </div>  
                               <div class="overlay-container">  
                                    <div class="overlay">  
                                         <div class="overlay-panel overlay-left">  
                                              <h1>Welcome Back!</h1>  
                                              <p>To keep connected with us please login with your personal info</p>  
                                              <button class="ghost" id="signIn">Sign In</button>  
                                         </div>  
                                         <div class="overlay-panel overlay-right">  
                                              <h1>Hello, Friend!</h1>  
                                              <p>Enter your personal details and start journey with us</p>  
                                              <button class="ghost" id="signUp">Sign Up</button>  
                                         </div>  
                                    </div>  
                               </div>  
                           </div>  
    </div>  
   </div>  
  </div>   
 </div>