diff --git a/assets/css/style1.css b/assets/css/style1.css
new file mode 100644
index 0000000..ab7c600
--- /dev/null
+++ b/assets/css/style1.css
@@ -0,0 +1,67 @@
+body {
+ font-family: 'Forum', cursive;
+ background-color: #0E0D0C;
+ color: #ffffff;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ display: grid;
+ }
+ h2 {
+ color: hsl(38, 61%, 73%);
+ font-family: 'Forum', cursive;
+ font-weight: 400;
+ line-height: 1.2em;
+ }
+ form {
+ background-color: #2e2925;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ width: 300px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ label, input {
+ margin-bottom: 10px;
+ color: black;
+ }
+ .btn {
+ width: 100%;
+ padding: 14px;
+ background-color: hsl(38, 67%, 67%);
+ color: hsla(30, 8%, 5%, 1);
+ font-size: 16px;
+ border: hsl(38, 61%, 73%);
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ &:hover{
+ background-color: hsl(38, 60%, 63%);
+ }
+}
+
+ input {
+ padding: 8px;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ }
+
+
+
+ button:hover {
+ background-color: #218838;
+ }
+
+ .msg {
+ position: fixed;
+ bottom: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: green;
+ color: white;
+ padding: 10px 20px;
+ border-radius: 4px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
index e97ba51..a62c9f6 100644
--- a/index.html
+++ b/index.html
@@ -167,7 +167,7 @@
Contact
-
+ Login
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..a97fe46
--- /dev/null
+++ b/login.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
Login Here
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/scripts1.js b/scripts1.js
new file mode 100644
index 0000000..639a945
--- /dev/null
+++ b/scripts1.js
@@ -0,0 +1,35 @@
+document.getElementById('login-form').addEventListener('submit', function(event) {
+ event.preventDefault();
+
+ const email = document.getElementById('email').value;
+ const password = document.getElementById('password').value;
+
+ // Email validator
+ const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+ if (!emailPattern.test(email)) {
+ showmsg('Please enter a valid email address');
+ return;
+ }
+
+ // pass validator
+ const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#])[A-Za-z\d@$!%*?&#]{8,}$/;
+ if (!passwordPattern.test(password)) {
+ showmsg('Password too weak! It should be at least 8 characters long, include an uppercase letter, a number, and a special character.');
+ return;
+ }
+
+
+ showmsg('Login successful!');
+ });
+
+
+ function showmsg(message) {
+ const msg = document.createElement('div');
+ msg.className = 'msg';
+ msg.innerText = message;
+ document.body.appendChild(msg);
+
+ setTimeout(() => {
+ msg.remove();
+ }, 3000);
+ }
\ No newline at end of file