Aj Designer Code Details
Modern Registration From
Modern Login and Signup Page
Web Development
html
css
js
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n <link\r\n rel=\"stylesheet\"\r\n href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\"\r\n />\r\n <link rel=\"stylesheet\" href=\"style.css\" />\r\n <title>Login Page | Caged coder</title>\r\n </head>\r\n\r\n <body>\r\n <div class=\"container\" id=\"container\">\r\n <div class=\"form-container sign-up\">\r\n <form>\r\n <h1>Create Account</h1>\r\n <div class=\"social-icons\">\r\n <a href=\"#\" class=\"icon\"\r\n ><i class=\"fa-brands fa-google-plus-g\"></i\r\n ></a>\r\n <a href=\"#\" class=\"icon\"><i class=\"fa-brands fa-facebook-f\"></i></a>\r\n <a href=\"#\" class=\"icon\"><i class=\"fa-brands fa-github\"></i></a>\r\n <a href=\"#\" class=\"icon\"\r\n ><i class=\"fa-brands fa-linkedin-in\"></i\r\n ></a>\r\n </div>\r\n <span>or use your email for registeration</span>\r\n <input type=\"text\" placeholder=\"Name\" />\r\n <input type=\"email\" placeholder=\"Email\" />\r\n <input type=\"password\" placeholder=\"Password\" />\r\n <button>Sign Up</button>\r\n </form>\r\n </div>\r\n <div class=\"form-container sign-in\">\r\n <form>\r\n <h1>Sign In</h1>\r\n <div class=\"social-icons\">\r\n <a href=\"#\" class=\"icon\"\r\n ><i class=\"fa-brands fa-google-plus-g\"></i\r\n ></a>\r\n <a href=\"#\" class=\"icon\"><i class=\"fa-brands fa-facebook-f\"></i></a>\r\n <a href=\"#\" class=\"icon\"><i class=\"fa-brands fa-github\"></i></a>\r\n <a href=\"#\" class=\"icon\"\r\n ><i class=\"fa-brands fa-linkedin-in\"></i\r\n ></a>\r\n </div>\r\n <span>or use your email password</span>\r\n <input type=\"email\" placeholder=\"Email\" />\r\n <input type=\"password\" placeholder=\"Password\" />\r\n <a href=\"#\">Forget Your Password?</a>\r\n <button>Sign In</button>\r\n </form>\r\n </div>\r\n <div class=\"toggle-container\">\r\n <div class=\"toggle\">\r\n <div class=\"toggle-panel toggle-left\">\r\n <h1>Welcome Back!</h1>\r\n <p>Enter your personal details to use all of site features</p>\r\n <button class=\"hidden\" id=\"login\">Sign In</button>\r\n </div>\r\n <div class=\"toggle-panel toggle-right\">\r\n <h1>Hello, Friend!</h1>\r\n <p>\r\n Register with your personal details to use all of site features\r\n </p>\r\n <button class=\"hidden\" id=\"register\">Sign Up</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <script src=\"script.js\"></script>\r\n </body>\r\n</html>@import url(\'https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap\');\r\n\r\n*{\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: \'Montserrat\', sans-serif;\r\n}\r\n\r\nbody{\r\n background-color: #c9d6ff;\r\n background: linear-gradient(to right, #e2e2e2, #c9d6ff);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n height: 100vh;\r\n}\r\n\r\n.container{\r\n background-color: #fff;\r\n border-radius: 30px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);\r\n position: relative;\r\n overflow: hidden;\r\n width: 768px;\r\n max-width: 100%;\r\n min-height: 480px;\r\n}\r\n\r\n.container p{\r\n font-size: 14px;\r\n line-height: 20px;\r\n letter-spacing: 0.3px;\r\n margin: 20px 0;\r\n}\r\n\r\n.container span{\r\n font-size: 12px;\r\n}\r\n\r\n.container a{\r\n color: #333;\r\n font-size: 13px;\r\n text-decoration: none;\r\n margin: 15px 0 10px;\r\n}\r\n\r\n.container button{\r\n background-color: #2da0a8;\r\n color: #fff;\r\n font-size: 12px;\r\n padding: 10px 45px;\r\n border: 1px solid transparent;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n margin-top: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.container button.hidden{\r\n background-color: transparent;\r\n border-color: #fff;\r\n}\r\n\r\n.container form{\r\n background-color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n padding: 0 40px;\r\n height: 100%;\r\n}\r\n\r\n.container input{\r\n background-color: #eee;\r\n border: none;\r\n margin: 8px 0;\r\n padding: 10px 15px;\r\n font-size: 13px;\r\n border-radius: 8px;\r\n width: 100%;\r\n outline: none;\r\n}\r\n\r\n.form-container{\r\n position: absolute;\r\n top: 0;\r\n height: 100%;\r\n transition: all 0.6s ease-in-out;\r\n}\r\n\r\n.sign-in{\r\n left: 0;\r\n width: 50%;\r\n z-index: 2;\r\n}\r\n\r\n.container.active .sign-in{\r\n transform: translateX(100%);\r\n}\r\n\r\n.sign-up{\r\n left: 0;\r\n width: 50%;\r\n opacity: 0;\r\n z-index: 1;\r\n}\r\n\r\n.container.active .sign-up{\r\n transform: translateX(100%);\r\n opacity: 1;\r\n z-index: 5;\r\n animation: move 0.6s;\r\n}\r\n\r\n@keyframes move{\r\n 0%, 49.99%{\r\n opacity: 0;\r\n z-index: 1;\r\n }\r\n 50%, 100%{\r\n opacity: 1;\r\n z-index: 5;\r\n }\r\n}\r\n\r\n.social-icons{\r\n margin: 20px 0;\r\n}\r\n\r\n.social-icons a{\r\n border: 1px solid #ccc;\r\n border-radius: 20%;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 0 3px;\r\n width: 40px;\r\n height: 40px;\r\n}\r\n\r\n.toggle-container{\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: 50%;\r\n height: 100%;\r\n overflow: hidden;\r\n transition: all 0.6s ease-in-out;\r\n border-radius: 150px 0 0 100px;\r\n z-index: 1000;\r\n}\r\n\r\n.container.active .toggle-container{\r\n transform: translateX(-100%);\r\n border-radius: 0 150px 100px 0;\r\n}\r\n\r\n.toggle{\r\n background-color: #2da0a8;\r\n height: 100%;\r\n background: linear-gradient(to right, #5c6bc0, #2da0a8);\r\n color: #fff;\r\n position: relative;\r\n left: -100%;\r\n height: 100%;\r\n width: 200%;\r\n transform: translateX(0);\r\n transition: all 0.6s ease-in-out;\r\n}\r\n\r\n.container.active .toggle{\r\n transform: translateX(50%);\r\n}\r\n\r\n.toggle-panel{\r\n position: absolute;\r\n width: 50%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n padding: 0 30px;\r\n text-align: center;\r\n top: 0;\r\n transform: translateX(0);\r\n transition: all 0.6s ease-in-out;\r\n}\r\n\r\n.toggle-left{\r\n transform: translateX(-200%);\r\n}\r\n\r\n.container.active .toggle-left{\r\n transform: translateX(0);\r\n}\r\n\r\n.toggle-right{\r\n right: 0;\r\n transform: translateX(0);\r\n}\r\n\r\n.container.active .toggle-right{\r\n transform: translateX(200%);\r\n}const container = document.getElementById(\"container\");\r\nconst registerBtn = document.getElementById(\"register\");\r\nconst loginBtn = document.getElementById(\"login\");\r\n\r\nregisterBtn.addEventListener(\"click\", () => {\r\n container.classList.add(\"active\");\r\n});\r\n\r\nloginBtn.addEventListener(\"click\", () => {\r\n container.classList.remove(\"active\");\r\n});