diff --git a/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pix.scssc b/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pix.scssc new file mode 100644 index 0000000..93f9f88 Binary files /dev/null and b/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pix.scssc differ diff --git a/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pixels.cssc b/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pixels.cssc new file mode 100644 index 0000000..065b81b Binary files /dev/null and b/.sass-cache/701f7d84ab64cd4a26addac3794c39ecb3ea7c98/pixels.cssc differ diff --git a/src/front/index.html b/src/front/index.html new file mode 100644 index 0000000..4597cc0 --- /dev/null +++ b/src/front/index.html @@ -0,0 +1,811 @@ + + + + + + Popup Login Form Design | CodingNepal + + + + + + + + + + +
+
+ Pixels +
+
+ + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+ + + \ No newline at end of file diff --git a/src/front/index2.html b/src/front/index2.html new file mode 100644 index 0000000..0264876 --- /dev/null +++ b/src/front/index2.html @@ -0,0 +1,816 @@ + + + + + + Popup Login Form Design | CodingNepal + + + + + + + + + + +
+
+ Pixels +
+
+ + + + + + +
My name is Amogus
+ +
+ +
+ Menu +
+
+ + + +
+
+ +
+ +
+ Wallet +
+
+ +
+ +
+ My pixels +
+
+ +
+ +
+ Settings +
+
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+ 		+
+
Moi
+
Petit desc oklm
+
+
+
+
+ + + \ 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..e8b07eb --- /dev/null +++ b/src/front/login-signup.css @@ -0,0 +1,114 @@ +.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%; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 5px #000; +} + +#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; + border-radius: 45px; +} + +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/pix.css b/src/front/pix.css new file mode 100644 index 0000000..badb65f --- /dev/null +++ b/src/front/pix.css @@ -0,0 +1,301 @@ +#r0c0 { + background: #bd8226; } + +#r0c1 { + background: #6ad2bb; } + +#r0c2 { + background: #ac6816; } + +#r0c3 { + background: #f0e5ad; } + +#r0c4 { + background: #9b7ae2; } + +#r0c5 { + background: #fc4b16; } + +#r0c6 { + background: #493562; } + +#r0c7 { + background: #597b58; } + +#r0c8 { + background: #f68af4; } + +#r0c9 { + background: #29d291; } + +#r1c0 { + background: #a9da86; } + +#r1c1 { + background: #ee5ccc; } + +#r1c2 { + background: #c2170c; } + +#r1c3 { + background: #38cd2b; } + +#r1c4 { + background: #7c2adf; } + +#r1c5 { + background: #fcbc48; } + +#r1c6 { + background: #31aa29; } + +#r1c7 { + background: #b65dd9; } + +#r1c8 { + background: #cab125; } + +#r1c9 { + background: #b41569; } + +#r2c0 { + background: #308164; } + +#r2c1 { + background: #5fe6c4; } + +#r2c2 { + background: #740cd8; } + +#r2c3 { + background: #16340a; } + +#r2c4 { + background: #0f48dc; } + +#r2c5 { + background: #047373; } + +#r2c6 { + background: #a683c6; } + +#r2c7 { + background: #acf056; } + +#r2c8 { + background: #5261ea; } + +#r2c9 { + background: #1dc6ce; } + +#r3c0 { + background: #05f60b; } + +#r3c1 { + background: #a7e815; } + +#r3c2 { + background: #1ed985; } + +#r3c3 { + background: #7154e4; } + +#r3c4 { + background: #fbd471; } + +#r3c5 { + background: #3dccb7; } + +#r3c6 { + background: #b021a9; } + +#r3c7 { + background: #b2f2fc; } + +#r3c8 { + background: #2b21a2; } + +#r3c9 { + background: #65f83b; } + +#r4c0 { + background: #dfbfad; } + +#r4c1 { + background: #e99270; } + +#r4c2 { + background: #b36216; } + +#r4c3 { + background: #5d531b; } + +#r4c4 { + background: #76da95; } + +#r4c5 { + background: #79884f; } + +#r4c6 { + background: #e8dfc5; } + +#r4c7 { + background: #8971f4; } + +#r4c8 { + background: #1ceb1f; } + +#r4c9 { + background: #a15e02; } + +#r5c0 { + background: #604930; } + +#r5c1 { + background: #65274c; } + +#r5c2 { + background: #61bd26; } + +#r5c3 { + background: #5759a2; } + +#r5c4 { + background: #b9cda2; } + +#r5c5 { + background: #961983; } + +#r5c6 { + background: #a3cc2b; } + +#r5c7 { + background: #7e8361; } + +#r5c8 { + background: #50f4f9; } + +#r5c9 { + background: #b14f97; } + +#r6c0 { + background: #1e8113; } + +#r6c1 { + background: #e004b9; } + +#r6c2 { + background: #7ed1ec; } + +#r6c3 { + background: #26c544; } + +#r6c4 { + background: #426012; } + +#r6c5 { + background: #ef7356; } + +#r6c6 { + background: #4399f5; } + +#r6c7 { + background: #89d054; } + +#r6c8 { + background: #746b0f; } + +#r6c9 { + background: #b616f7; } + +#r7c0 { + background: #27ed47; } + +#r7c1 { + background: #c570e7; } + +#r7c2 { + background: #379b0a; } + +#r7c3 { + background: #d0dcf9; } + +#r7c4 { + background: #b6ba04; } + +#r7c5 { + background: #0f563d; } + +#r7c6 { + background: #4e34b0; } + +#r7c7 { + background: #e3c32d; } + +#r7c8 { + background: #f39d9e; } + +#r7c9 { + background: #e9f9e0; } + +#r8c0 { + background: #1a4571; } + +#r8c1 { + background: #5ad67d; } + +#r8c2 { + background: #e6a830; } + +#r8c3 { + background: #3b089a; } + +#r8c4 { + background: #033b9c; } + +#r8c5 { + background: #9e0d6e; } + +#r8c6 { + background: #b29f25; } + +#r8c7 { + background: #1d33d8; } + +#r8c8 { + background: #053658; } + +#r8c9 { + background: #23b71d; } + +#r9c0 { + background: #5c32c5; } + +#r9c1 { + background: #9d7d3e; } + +#r9c2 { + background: #172f58; } + +#r9c3 { + background: #850343; } + +#r9c4 { + background: #79eac9; } + +#r9c5 { + background: #ff9abd; } + +#r9c6 { + background: #4ca78c; } + +#r9c7 { + background: #d25aae; } + +#r9c8 { + background: #9130d0; } + +#r9c9 { + background: #7529f8; } + +/*# sourceMappingURL=pix.css.map */ diff --git a/src/front/pix.css.map b/src/front/pix.css.map new file mode 100644 index 0000000..0f485e5 --- /dev/null +++ b/src/front/pix.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAEQ,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C;;AAD1D,KAAc;EACV,UAAU,EAAE,OAA0C", +"sources": ["pix.scss"], +"names": [], +"file": "pix.css" +} diff --git a/src/front/pix.scss b/src/front/pix.scss new file mode 100644 index 0000000..be12397 --- /dev/null +++ b/src/front/pix.scss @@ -0,0 +1,7 @@ +@for $i from 0 through 9 { + @for $j from 0 through 9 { + #r#{$i}c#{$j} { + background: rgb(random(255), random(255), random(255)); + } + } +} \ No newline at end of file diff --git a/src/front/pixels.css b/src/front/pixels.css new file mode 100644 index 0000000..7d6cf9d --- /dev/null +++ b/src/front/pixels.css @@ -0,0 +1,55 @@ +.pixel-container { + display: flex; + justify-content: space-evenly; + align-items: center; + width: 100%; + height: 1000px; +} + +table { + --side: 80px; + --border-width: 3px; + border-spacing: 0; + table-layout: fixed; + width: calc(10 * var(--side)); + height: calc(10 * var(--side)); +} + +.pixel { + background: #fff; + width: var(--side); + height: var(--side); + display: inline-block; +} + +.pixel:hover { + box-shadow: 0px 0px 0px var(--border-width) #333; + z-index: 5; +} + +.info-pixel { + display: none; + position: relative; + width: max-content; + top: var(--side); + box-shadow: 0px 0px 0px var(--border-width) #333; + background: #888; +} + +.pixel:hover .info-pixel { + display: block; +} + +.patch-shadow { + display: none; + width: 3px; + position: relative; + height: var(--side); + left: var(--side); + top: calc(var(--side) / (-2) + var(--border-width)); + background: #333; +} + +.pixel:hover .patch-shadow { + display: block; +} \ No newline at end of file diff --git a/src/front/profil.css b/src/front/profil.css new file mode 100644 index 0000000..d907e2a --- /dev/null +++ b/src/front/profil.css @@ -0,0 +1,148 @@ +.menu-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%; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 5px #000; + +} + +#show-menu:checked~.menu-container { + display: block; +} + +.menu-container .close-btn { + position: absolute; + right: 20px; + top: 15px; + font-size: 18px; + cursor: pointer; +} + +.menu-container .close-btn:hover { + color: #3498db; +} + +.menu-container div { + display: flex; + justify-content: space-evenly; +} + +.wallet-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%; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 5px #000; + +} + +#show-wallet:checked~.wallet-container { + display: block; +} + +.wallet-container .close-btn { + position: absolute; + right: 20px; + top: 15px; + font-size: 18px; + cursor: pointer; +} + +.wallet-container .close-btn:hover { + color: #3498db; +} + +.mypixel-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%; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 5px #000; + +} + +#show-mypixel:checked~.mypixel-container { + display: block; +} + +.mypixel-container .close-btn { + position: absolute; + right: 20px; + top: 15px; + font-size: 18px; + cursor: pointer; +} + +.mypixel-container .close-btn:hover { + color: #3498db; +} + + +.settings-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%; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 5px #000; + +} + +#show-settings:checked~.settings-container { + display: block; +} + +.settings-container .close-btn { + position: absolute; + right: 20px; + top: 15px; + font-size: 18px; + cursor: pointer; +} + +.settings-container .close-btn:hover { + color: #3498db; +} + + +.wallet-btn, +.mypixel-btn, +.settings-btn { + background: #fff; + margin: 10px 10px; + padding: 10px 10px; + color: #3498db; + cursor: pointer; +} \ 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 - - - - - - - - - - - -
- -
- Login -
-
-
- - -
-
- - -
-
- Forgot Password? -
-
- -
- -
-
- -
- -
- Signup -
-
-
- - -
-
- - -
-
- -
- -
-
- - \ 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..e59d474 --- /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, +.menu-btn { + background: #fff; + margin: 10% 10px; + padding: 10% 10px; + 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