From 48692780c1d36bfa045670bf77ae508da4bd8f3b Mon Sep 17 00:00:00 2001 From: oxone-999 Date: Sat, 7 Oct 2023 02:26:49 +0530 Subject: [PATCH] add login signup page --- images/user-picture.png | Bin 0 -> 2729 bytes pages/login.html | 50 ++++++++++++++ pages/signup.html | 62 +++++++++++++++++ styles/login.css | 145 ++++++++++++++++++++++++++++++++++++++++ styles/signup.css | 144 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 401 insertions(+) create mode 100644 images/user-picture.png create mode 100644 pages/login.html create mode 100644 pages/signup.html create mode 100644 styles/login.css create mode 100644 styles/signup.css diff --git a/images/user-picture.png b/images/user-picture.png new file mode 100644 index 0000000000000000000000000000000000000000..ecaaeda83d75fed7876d8b2b3c2b0a65868ac320 GIT binary patch literal 2729 zcmeH}c{CJ?9>-@0V;1WuMkZt##Z0y+)QmBgu}s5|ZPc|-O+-Tz70-+;<65#uWhRoP z+?Em1BE5M+G(uS>%aF)cvQ)(7op;W=_wRSk`|JMB`F(!N`JVGT=lj<$l}xgSfe~N; z001L8*tr1!z|9s207-5Z`fV@w%_7OLCAxz^puy22Bb%dago8H&007~)5_kz17QeYv ziz0YMQBH?MG5ya31DH%E`b0RL5$GQgj6QuPw0O=M0RTvZk)7QM8yg#&`oH6E2mTKZ zkQ{e;Z=UIlawAayKnclhQqnRYSug|&lap6aR8oek>`+xhsPEK3?$XrK-mR;TGT4L0 z>@zkoH8bCDap0hp^`XO9Tf76&(aG6`bcF2Yan#ex+n4Hh?D((#0fE6Gp|q2y!op8S zM4n+ppJkqli9LVeVqE+`64;lLl2cMSY3W&)bMx{G3a=Cum+)?s-7LRVQCU@e`%ca8 z5BLx3>K`>ee)9C$^B01am#uB>9j}F5Z+d#)zUv=+KQuftDjxqZ@o{qM)AY>j-2CS+ z3ttzPmRG)g|FOFEa~+AHvH<|;9-V9G08!r_@0jIA4+J#^!Qx)2^kGeQ}LC=D8a=!m`nVtG_ zHO}2GU$k<5Ui1-|i=y{8YzV2}KCNmHcH|X^e>#2t8-Li4B2IoF5w8(#n zpJ>8VmOS+cYSMgsW{k1h+D~r1@ZQ9(wIq$tb}`e#U~4w=od4W>QcTGADO3z4{yX~F z`*~L};$g|ScXS>v%42QKFYZ=d`3<{{3k#6zY4J6cIN65CRn^zMeVr31N5{3$#+bOI z^$RO2 zaa4#5yvUDRn0i1MYAO|$bg+8?o?9XvHegVtF)&kF@r0~LDXXwmYFNu^-i|HsfIn1f zu(tP)PelKOzm@R_D24Awu=Tt-?Y23Ff?ys|<*(2cc;IpzIn^vZwZGy7r#eyZ-!Rzf z{tF_f9h;*g2<8&A#U?@>T%;N;n_CYxtK`<3{RycQDx&D0256W|n*mzt&p>UBTL^#` zByJnWd7c5=C|>G|=Ne=~7M+In(YZii>zeeSwV} zAs>#K>&fH_bcYg^Y$Y;m>0r;`QwY1_Q2othp;z89rSe{a$!G;jKBgcBfH0u8vOX zs-nEZKHBfoD?O`yz$Z5i`(!}N$J8AnBXXvPCn+B**TuYmE%D2c8LB*$-4OyAzF4we z47g(n@EkuuKxR~w>E=b?ZHy|D)r)9EWzpT=@(tPQbGLL?Ucl68t^EMX9G0gzAnIO-rE@oDR>CJn#7q*bZgxWkJOR9Hpk04 z&!rr`w1~gCWzjG4uCMUIisXP;F1cfyz_|xok_YE2{TN4~WTLBDP_)~Kf!o{)6>>=1 zAbe>VPRph;a+@=1h_-3>R}Te(4mJJ`McC!fhdL}{GBu-|hC@?^j&mZ+m-hwPq=R0I zJS&^38HyPP208A$`Y^fij!8r*BGAuNvpSY?y=vUT15Y~n-nfc!$`5SP<_RO;Oz`+{ z7Zck8tco7VKpE2e@x9CZrt)%T#gLWD-46rrCKKP)T!JlOwoj#q)0PTP6&$i6CI5E# zyn$YKPlj^TtJI9jLc=NhXJzcC7tGRI6^`3D*u!cv#sUbQ7o3wXKGx=>otaLK5+&D( zn~gpN%TD?wLKqh_bhVi_ox^z;6>k#`#xM0NqyMW^es1&Ef>Dvn`Pf|D(8Z|}mKIl* z74yq3FGHXD3MBD{-gtTUk(mHyTyyqv>ow!6glT)jm|eBvLBqMy9Y3~@IfwTVPR}#| zhwolL=AGG1XqdcG17d9#T0s + + + + + + Document + + +
+
+ +
+
+ +
+
+ + + + +
+
+ +
+ +
+
+
+ + diff --git a/pages/signup.html b/pages/signup.html new file mode 100644 index 0000000..4d4c43d --- /dev/null +++ b/pages/signup.html @@ -0,0 +1,62 @@ + + + + + + + Document + + +
+
+ +
+
+ +
+
+ +
+
+ + + + +
+
+ + + + +
+
+
+ +
+
+
+ + diff --git a/styles/login.css b/styles/login.css new file mode 100644 index 0000000..258376e --- /dev/null +++ b/styles/login.css @@ -0,0 +1,145 @@ +body{ + margin:0; + padding: 0; + font-family: sans-serif; + background-color: #DAFFFB; +} + +.main{ + width: 100%; + height: 100vh; + background-color: #DAFFFB; + display: flex; + justify-content: center; + align-items: center; +} + +.container{ + width: 30%; + height: 60%; + background-color: #fff; + border-radius: 20px; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + justify-content: left; + align-items: center; + overflow: hidden; +} + +.login_container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + background-color: #176B87; +} + +.login_container span{ + font-size: 30px; + font-weight: 600; + color: #DAFFFB; + padding: 1rem; +} + +.login_container img{ + margin-top: 1.5rem; + width: 20%; + transition: transform 0.9s ease-in-out; + border-radius: 50%; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + background-color: #DAFFFB; +} + +input{ + width: 80%; + height: 50px; + outline: none; + border: 1px solid #DAFFFB; + border-radius: 5px; + padding: 0 1rem; + font-size: 1rem; + margin: 1rem 0; + transition: all 0.3s ease-in-out; +} + +.group { + display: flex; + line-height: 30px; + align-items: center; + position: relative; + max-width: 200px; +} + +.input { + width: 100%; + height: 45px; + line-height: 30px; + padding: 0 5rem; + padding-left: 3rem; + border: 2px solid transparent; + border-radius: 10px; + outline: none; + background-color: #f8fafc; + color: #0d0c22; + transition: .5s ease; +} + +.input::placeholder { + color: #94a3b8; +} + +.input:focus, input:hover { + outline: none; + border-color: rgba(129, 140, 248); + background-color: #fff; + box-shadow: 0 0 0 5px rgb(129 140 248 / 30%); +} + +.icon { + position: absolute; + left: 1rem; + fill: none; + width: 1rem; + height: 1rem; +} + +.input_container{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-direction: column; +} + +button{ + width: 5rem; + height: 2rem; + border: none; + outline: none; + border-radius: 5px; + background-color: #176B87; + color: #DAFFFB; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease-in-out; +} + +button:hover{ + background-color: #DAFFFB; + color: #176B87; +} + +.login_btn{ + margin: 1rem 0 0 0; +} + +.forget_link{ + font-size: 0.8rem; + color: #176B87; + text-decoration: none; + padding-top: 1rem; +} \ No newline at end of file diff --git a/styles/signup.css b/styles/signup.css new file mode 100644 index 0000000..4dbd0cc --- /dev/null +++ b/styles/signup.css @@ -0,0 +1,144 @@ +body{ + margin:0; + padding: 0; + font-family: sans-serif; + background-color: #DAFFFB; +} + +.main{ + width: 100%; + height: 100vh; + background-color: #DAFFFB; + display: flex; + justify-content: center; + align-items: center; +} + +.container{ + width: 32%; + height: 82%; + background-color: #fff; + border-radius: 20px; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + display: flex; + flex-direction: column; + justify-content: left; + align-items: center; + overflow: hidden; +} + +.signup_container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + background-color: #176B87; +} + +.signup_container span{ + font-size: 30px; + font-weight: 600; + color: #DAFFFB; + padding: 1rem; +} + +.signup_container img{ + margin-top: 1.5rem; + width: 20%; + transition: transform 0.9s ease-in-out; + border-radius: 50%; + box-shadow: 0 0 10px rgba(0,0,0,0.3); + background-color: #DAFFFB; +} + +input{ + width: 90%; + height: 50px; + outline: none; + border: 1px solid #DAFFFB; + border-radius: 5px; + padding: 0 1rem; + font-size: 1rem; + margin: 1rem 0; + transition: all 0.3s ease-in-out; +} + +.group { + display: flex; + line-height: 30px; + align-items: center; + position: relative; + max-width: 400px; +} + +.input { + width: 100%; + height: 45px; + line-height: 30px; + padding: 0 2rem; + padding-left: 3rem; + border: 2px solid transparent; + border-radius: 10px; + outline: none; + background-color: #f8fafc; + color: #0d0c22; + transition: .5s ease; +} + +.input::placeholder { + color: #94a3b8; +} + +.input:focus, input:hover { + outline: none; + border-color: rgba(129, 140, 248); + background-color: #fff; + box-shadow: 0 0 0 5px rgb(129 140 248 / 30%); +} + +.icon { + position: absolute; + left: 1rem; + fill: none; + width: 1rem; + height: 1rem; +} + +.input_container{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + flex-direction: column; +} + +button{ + width: 5rem; + height: 2rem; + border: none; + outline: none; + border-radius: 5px; + background-color: #176B87; + color: #DAFFFB; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease-in-out; +} + +button:hover{ + background-color: #DAFFFB; + color: #176B87; +} + +.signup_btn{ + margin: 1rem 0 0 0; +} + +.forget_link{ + font-size: 0.8rem; + color: #176B87; + text-decoration: none; +} \ No newline at end of file