Fixed logout button functionality

src/main/resources/static/css/login.css

@@ -288,20 +288,23 @@ and (max-device-width: 640px) {
     .container .toggle-left {
         transform: translateY(-100%);
         opacity: 0;
+        z-index: 1;
     }
     .container.active .toggle-right{
         transform: translateY(50%);
         opacity: 0;
+        z-index: 1;
     }
     .container.active .toggle-left{
         transform: translateY(-25%);
         opacity: 1;
+        z-index: 5;
     }
 
     .container .sign-up {
         opacity: 0;
         z-index: -1;
-        transform: translateY(0%);
+        transform: translateY(150%);
     }
     .container .sign-in {
         transform: translateY(-100%);
@@ -310,13 +313,13 @@ and (max-device-width: 640px) {
     }
 
     .container.active .sign-in{
-        transform: translateY(-100%);
+        transform: translateY(-150%);
         opacity: 0;
         z-index: -1;
     }
     .container.active .sign-up{
         opacity: 1;
-        z-index: 10;
+        z-index: 5;
         transform: translateY(100%);
     }
 

src/main/resources/templates/users/login.html

@@ -20,7 +20,6 @@
             <div class="form-container sign-up">
                 <h1 class="form-title">Create Account</h1>
                 <form th:object="${user}" action="#" th:action="@{/login/register}" th:method="POST" onsubmit="return registerFormValidation()">
-                    <h1>Create Account</h1>
                     <div th:if="${error.equals('User exists')}" class="alert alert-error">User already exist</div>
                     <label>
                         <input class="input" th:field="*{name}" id="register-username" type="text" placeholder="Name">