diff --git a/Login-e-Registro.html b/Login-e-Registro.html
new file mode 100644
index 0000000..86d9989
--- /dev/null
+++ b/Login-e-Registro.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ Login e Registro
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/Login-e-Registro.css b/css/Login-e-Registro.css
new file mode 100644
index 0000000..26bc37f
--- /dev/null
+++ b/css/Login-e-Registro.css
@@ -0,0 +1,256 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Inter', sans-serif;
+}
+
+
+body {
+ background-color: #1d1d1d;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ overflow: hidden;
+}
+
+
+.form-wrapper {
+ position: relative;
+ width: 350px;
+ height: 450px;
+ overflow: hidden;
+ border-radius: 20px;
+ box-shadow: 0 0 20px rgba(0,0,0,0.5);
+ background-color: #0000001e; /
+}
+
+
+.login-container,
+.register-container {
+ padding: 40px;
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ transition: transform 0.6s ease-in-out;
+}
+
+
+.login-container.active {
+ transform: translateX(0%);
+}
+
+
+.register-container {
+ transform: translateX(100%);
+}
+
+
+.register-container.active {
+ transform: translateX(0%);
+}
+
+
+.login-container:not(.active) {
+ transform: translateX(-100%);
+}
+
+
+.login-container h2,
+.register-container h2 {
+ color: white;
+ margin-bottom: 30px;
+ font-weight: 500;
+}
+
+
+.input-box {
+ position: relative;
+ margin-bottom: 20px;
+}
+
+
+.input-box i {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ left: 10px;
+ color: white;
+ z-index: 2;
+}
+
+
+.input-box input {
+ width: 100%;
+ padding: 10px 10px 10px 35px;
+ border: none;
+ border-radius: 10px;
+ background: #1f1f1f;
+ color: white;
+ box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
+ transition: all 0.2s ease-in-out;
+}
+
+
+.input-box input::placeholder {
+ color: transparent;
+ transition: opacity 0.2s ease;
+}
+
+
+.input-box input:focus::placeholder {
+ opacity: 1;
+ color: #555;
+}
+
+
+.input-box label {
+ position: absolute;
+ top: 50%;
+ left: 35px;
+ transform: translateY(-50%);
+ color: #aaa;
+ pointer-events: none;
+ transition: all 0.2s ease-in-out;
+ z-index: 2;
+}
+
+
+.input-box input:focus + label,
+.input-box input:not(:placeholder-shown) + label {
+ top: -15px;
+ transform: translateY(-50%) translatex(-60%)scale(0.85);
+ font-size: 0.9em;
+ color: #ffffff;
+ background-color: #1d1d1d;
+ padding: 0 5px;
+}
+
+
+.buttons {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 10px;
+}
+
+.btn {
+ width: 48%;
+ padding: 10px;
+ background-color: #0000cc;
+ border: none;
+ border-radius: 8px;
+ color: white;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+.btn:hover {
+ background-color: #444;
+}
+
+.forgot {
+ width: 100%;
+ margin-top: 10px;
+}
+
+
+.register-container form {
+ margin-top: 20px;
+}
+
+.form-group {
+ margin-bottom: 20px;
+ text-align: left;
+}
+
+
+.form-group input {
+
+ padding: 12px 10px;
+ border: none;
+ border-radius: 5px;
+ font-size: 16px;
+ background: #1f1f1f;
+ color: white;
+ box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
+ z-index: 1;
+}
+
+.register-button {
+ width: 100%;
+ padding: 15px;
+ border: none;
+ border-radius: 5px;
+ font-size: 18px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ background-color: #0000cc;
+ color: white;
+ margin-top: 20px;
+}
+
+.register-button:hover {
+ background-color: #444;
+}
+
+
+#showLoginBtn {
+ width: 100%;
+ margin-top: 15px;
+ background-color: #555;
+}
+
+#showLoginBtn:hover {
+ background-color: #777;
+}
+
+
+.custom-alert-hidden {
+ display: none;
+}
+
+.custom-alert-visible {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.custom-alert-content {
+ background-color: #333;
+ padding: 30px;
+ border-radius: 10px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+ text-align: center;
+ color: white;
+ max-width: 300px;
+}
+
+.custom-alert-content p {
+ margin-bottom: 20px;
+ font-size: 1.1em;
+}
+
+.custom-alert-content button {
+ background-color: #0000cc;
+ color: white;
+ padding: 10px 20px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 1em;
+ transition: background-color 0.3s;
+}
+
+.custom-alert-content button:hover {
+ background-color: #444;
+}
\ No newline at end of file
diff --git a/javascript/script.js b/javascript/script.js
new file mode 100644
index 0000000..94624d2
--- /dev/null
+++ b/javascript/script.js
@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const loginContainer = document.querySelector('.login-container');
+ const registerContainer = document.querySelector('.register-container');
+ const showRegisterBtn = document.getElementById('showRegisterBtn');
+ const showLoginBtn = document.getElementById('showLoginBtn');
+
+ // Função para mostrar o formulário de registro
+ showRegisterBtn.addEventListener('click', () => {
+ loginContainer.classList.remove('active');
+ registerContainer.classList.add('active');
+ });
+
+ // Função para mostrar o formulário de login
+ showLoginBtn.addEventListener('click', () => {
+ registerContainer.classList.remove('active');
+ loginContainer.classList.add('active');
+ });
+
+ // Você pode adicionar aqui a lógica de validação dos formulários se quiser
+ const loginBtn = document.getElementById('loginBtn');
+ const registerBtn = document.getElementById('registerBtn');
+
+ loginBtn.addEventListener('click', (e) => {
+ // e.preventDefault(); // Descomente para evitar o envio do formulário padrão
+ const username = document.getElementById('loginUsername').value;
+ const password = document.getElementById('loginPassword').value;
+
+ if (username === "" || password === "") {
+ alert("Por favor, preencha todos os campos de login.");
+ } else {
+ console.log("Login tentado com:", { username, password });
+ // Aqui você adicionaria a lógica de envio para o servidor
+ }
+ });
+
+ registerBtn.addEventListener('click', (e) => {
+ // e.preventDefault(); // Descomente para evitar o envio do formulário padrão
+ const username = document.getElementById('registerUsername').value;
+ const email = document.getElementById('registerEmail').value;
+ const password = document.getElementById('registerPassword').value;
+
+ if (username === "" || email === "" || password === "") {
+ alert("Por favor, preencha todos os campos de registro.");
+ } else {
+ console.log("Registro tentado com:", { username, email, password });
+ // Aqui você adicionaria a lógica de envio para o servidor
+ }
+ });
+});
\ No newline at end of file
diff --git a/login.html b/login.html
deleted file mode 100644
index c97cec8..0000000
--- a/login.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
- Login
-
-
-
-
-
LOGIN
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-