diff --git a/src/front/index.html b/src/front/index.html
new file mode 100644
index 0000000..7d86a64
--- /dev/null
+++ b/src/front/index.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+ Popup Login Form Design | CodingNepal
+
+
+
+
+
+
+
+
+
+
+
+
Pixels
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+
+
+
+
+
\ No newline at end of file
diff --git a/src/front/login-signup.css b/src/front/login-signup.css
new file mode 100644
index 0000000..a80b99c
--- /dev/null
+++ b/src/front/login-signup.css
@@ -0,0 +1,110 @@
+.login-container,
+.signup-container {
+ --width: 410px;
+ display: none;
+ visibility: visible;
+ background: #fff;
+ width: var(--width);
+ margin: 30px;
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+ position: absolute;
+ left: calc(50% - var(--width) / 2);
+ top: 30%;
+}
+
+#show-login:checked~.login-container {
+ display: flex;
+}
+
+#show-signup:checked~.signup-container {
+ display: flex;
+}
+
+.login-container .close-btn,
+.signup-container .close-btn {
+ position: absolute;
+ right: 20px;
+ top: 15px;
+ font-size: 18px;
+ cursor: pointer;
+}
+
+.login-container .close-btn:hover,
+.signup-container .close-btn:hover {
+ color: #3498db;
+}
+
+.login-container .text,
+.signup-container .text {
+ font-size: 35px;
+ font-weight: 600;
+ text-align: center;
+}
+
+.login-container form,
+.signup-container form {
+ margin-top: -20px;
+}
+
+.login-container form .data,
+.signup-container form .data {
+ height: 45px;
+ width: 100%;
+ margin: 40px 0;
+}
+
+form .data label {
+ font-size: 18px;
+}
+
+form .data input {
+ height: 100%;
+ width: 100%;
+ padding-left: 10px;
+ font-size: 17px;
+ border: 1px solid silver;
+}
+
+form .data input:focus {
+ border-color: #3498db;
+ border-bottom-width: 2px;
+}
+
+form .forgot-pass {
+ margin-top: -8px;
+}
+
+form .forgot-pass a {
+ color: #3498db;
+ text-decoration: none;
+}
+
+form .forgot-pass a:hover {
+ text-decoration: underline;
+}
+
+form .btn {
+ margin: 30px 0;
+ height: 45px;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+}
+
+form .btn button {
+ height: 100%;
+ width: 100%;
+ background: none;
+ border: none;
+ color: #fff;
+ font-size: 18px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ cursor: pointer;
+ background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
+}
+
+form .signup-login-link {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/front/logo.png b/src/front/logo.png
new file mode 100644
index 0000000..8ae5c03
Binary files /dev/null and b/src/front/logo.png differ
diff --git a/src/front/pixels.css b/src/front/pixels.css
new file mode 100644
index 0000000..707f68e
--- /dev/null
+++ b/src/front/pixels.css
@@ -0,0 +1,6 @@
+.pixel
+{
+ background: #0f0;
+ width: 10px;
+ height: 10px;
+}
\ No newline at end of file
diff --git a/src/front/test.css b/src/front/test.css
deleted file mode 100644
index fe0d485..0000000
--- a/src/front/test.css
+++ /dev/null
@@ -1,127 +0,0 @@
-* {
- margin: 0;
- padding: 0;
- outline: none;
- box-sizing: border-box;
- font-family: 'Poppins', sans-serif;
-}
-body {
- height: 100vh;
- width: 100%;
- background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
-}
-
-.href {
- color: #3498db;
- cursor: pointer;
-}
-.href:hover {
- text-decoration: underline;
-}
-
-
-.login-btn,
-.signup-btn {
- background: #fff;
- padding: 10px 20px;
- font-size: 20px;
- font-weight: 500;
- color: #3498db;
- cursor: pointer;
- box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
-}
-
-.show {
- display: none;
-}
-.login-container,
-.signup-container{
- display: none;
- background: #fff;
- width: 410px;
- padding: 30px;
- box-shadow: 0 0 8px rgba(0,0,0,0.1);
-}
-
-#show-login:checked ~ .login-container{
- display: block;
-}
-#show-signup:checked ~ .signup-container{
- display: block;
-}
-
-.login-container .close-btn,
-.signup-container .close-btn{
- position: absolute;
- right: 20px;
- top: 15px;
- font-size: 18px;
- cursor: pointer;
-}
-.login-container .close-btn:hover,
-.signup-container .close-btn:hover{
- color: #3498db;
-}
-.login-container .text,
-.signup-container .text{
- font-size: 35px;
- font-weight: 600;
- text-align: center;
-}
-.login-container form,
-.signup-container form{
- margin-top: -20px;
-}
-.login-container form .data,
-.signup-container form .data{
- height: 45px;
- width: 100%;
- margin: 40px 0;
-}
-form .data label{
- font-size: 18px;
-}
-form .data input{
- height: 100%;
- width: 100%;
- padding-left: 10px;
- font-size: 17px;
- border: 1px solid silver;
-}
-form .data input:focus{
- border-color: #3498db;
- border-bottom-width: 2px;
-}
-form .forgot-pass{
- margin-top: -8px;
-}
-form .forgot-pass a{
- color: #3498db;
- text-decoration: none;
-}
-form .forgot-pass a:hover{
- text-decoration: underline;
-}
-form .btn{
- margin: 30px 0;
- height: 45px;
- width: 100%;
- position: relative;
- overflow: hidden;
-}
-form .btn button{
- height: 100%;
- width: 100%;
- background: none;
- border: none;
- color: #fff;
- font-size: 18px;
- font-weight: 500;
- text-transform: uppercase;
- letter-spacing: 1px;
- cursor: pointer;
- background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
-}
-form .signup-login-link{
- text-align: center;
-}
\ No newline at end of file
diff --git a/src/front/test.html b/src/front/test.html
deleted file mode 100644
index 554f687..0000000
--- a/src/front/test.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
-
-
- Popup Login Form Design | CodingNepal
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/front/title-bar.css b/src/front/title-bar.css
new file mode 100644
index 0000000..5c43ea7
--- /dev/null
+++ b/src/front/title-bar.css
@@ -0,0 +1,40 @@
+.title-bar {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ background: #3333;
+ height: 100px;
+}
+
+.title {
+ display: flex;
+ align-items: center;
+ font-size: 50px;
+}
+
+.title img {
+ width: 80%;
+ height: 80%;
+ border-radius: 10%;
+ margin: 10%;
+}
+
+.profil {
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+}
+
+.login-btn,
+.signup-btn {
+ background: #fff;
+ margin: 10% 10px;
+ padding: 10% 10px;
+ font-size: auto;
+ color: #3498db;
+ cursor: pointer;
+}
+
+.show {
+ display: none;
+}
\ No newline at end of file
diff --git a/src/front/utils.css b/src/front/utils.css
new file mode 100644
index 0000000..ef2f190
--- /dev/null
+++ b/src/front/utils.css
@@ -0,0 +1,20 @@
+* {
+ margin: 0;
+ padding: 0;
+ outline: none;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+
+body {
+ background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
+}
+
+.href {
+ color: #3498db;
+ cursor: pointer;
+}
+
+.href:hover {
+ text-decoration: underline;
+}
\ No newline at end of file