diff --git a/login.html b/login.html
new file mode 100644
index 0000000..c370ff0
--- /dev/null
+++ b/login.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+ Dhaverd
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/login.php b/src/login.php
new file mode 100644
index 0000000..5283bda
--- /dev/null
+++ b/src/login.php
@@ -0,0 +1,21 @@
+store_result();
+ if ($stmt->num_rows() = 1) {
+ mysql_close($con);
+ echo 'done';
+ }
+} else {
+ echo 'error';
+}
diff --git a/src/scripts/login.js b/src/scripts/login.js
new file mode 100644
index 0000000..aa34de8
--- /dev/null
+++ b/src/scripts/login.js
@@ -0,0 +1,19 @@
+$("#form").on("submit", function(){
+ $.ajax({
+ url: '/src/login.php',
+ method: 'post',
+ dataType: 'html',
+ data: $(this).serialize(),
+ success: function(data){
+ $('#message').html(data);
+ }
+ });
+});
+
+$('body').on('click', '#password-checkbox', function(){
+ if ($(this).is(':checked')){
+ $('#password').attr('type', 'text');
+ } else {
+ $('#password').attr('type', 'password');
+ }
+});
\ No newline at end of file
diff --git a/src/styles/style.css b/src/styles/style.css
index 05c2a8e..ffbec80 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -312,4 +312,67 @@ h2 {
.workout-main-content {
height: 820px;
padding-bottom: 10px;
+}
+
+.login-main-content {
+ height: 300px;
+ padding-bottom: 10px;
+}
+
+.login-form {
+ width: 50%;
+ text-align: center;
+ grid-area: login-form;
+}
+
+.login-input {
+ width: 100%;
+ border: none;
+ border-radius: 5px;
+ height: 30px;
+}
+
+.login-button {
+ background-color: #609A21;
+ border: none;
+ border-radius: 5px;
+ width: 90%;
+ color: #E0E0E0;
+ font-family: segoe print;
+ font-size: 16px;
+ margin-top: 5px;
+}
+
+.login-main {
+ padding-left: 10px;
+ width: 97%;
+ display: grid;
+ grid-template-columns: 35% 60% 5%;
+ grid-template-areas: "login-left login-form login-right";
+}
+
+.login-left {
+ grid-area: login-left;
+}
+
+.login-right {
+ grid-area: login-right;
+}
+
+#login {
+ margin-bottom: 10px;
+ font-family: Arial;
+ font-size: 16px;
+}
+
+#password {
+ margin-bottom: 10px;
+ font-family: Arial;
+ font-size: 16px;
+}
+
+.password-label {
+ font-family: segoe print;
+ font-size: 14px;
+ color: #E0E0E0;
}
\ No newline at end of file
+