From 97c2c953d11e13950b39a4f43e80faf8a849e98e Mon Sep 17 00:00:00 2001 From: Jun Hong Park Date: Fri, 28 Jul 2023 20:29:25 +0900 Subject: [PATCH] =?UTF-8?q?[#11]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/=ED=9A=8C?= =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=AA=A8=EB=8B=AC=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- images/Google__G__Logo 1.png | Bin 0 -> 809 bytes images/check-white.svg | 4 + images/check.svg | 3 + images/close.svg | 4 + images/facebook.png | Bin 0 -> 422 bytes images/message-circle.png | Bin 0 -> 537 bytes images/naver-logo.png | Bin 0 -> 323 bytes loginPage.css | 267 +++++++++++++++++++++++++++++++++++ loginPage.html | 57 ++++++++ 9 files changed, 335 insertions(+) create mode 100644 images/Google__G__Logo 1.png create mode 100644 images/check-white.svg create mode 100644 images/check.svg create mode 100644 images/close.svg create mode 100644 images/facebook.png create mode 100644 images/message-circle.png create mode 100644 images/naver-logo.png create mode 100644 loginPage.css create mode 100644 loginPage.html diff --git a/images/Google__G__Logo 1.png b/images/Google__G__Logo 1.png new file mode 100644 index 0000000000000000000000000000000000000000..94ad107e9423b2cf28d9ab57b02e413190a8c138 GIT binary patch literal 809 zcmV+^1J?YBP)0(@#3^Of$CVhs|89=6EX6|uKuUef;{k_Qs zgsin12(H|QX^fmywUSpS+be2$AeNC3#`g&WB2b!Y#CWc7`Ft#aK$G4fqynKP`b#1@ z$_b;0Ape5toEv?es-{Cw;P#&Jq6nAWAmZ%y@#5SYcg)H_EX_G3{a~KJAJ1Ad>-p1Z zzSd}O&K;YXPeC2DYY(L(mEpD=W_Abm-`~sPX>5d7w2QsEZtLqesJlZ@{1&SL*H_H61mMZvGYX5_8N%0xC zxABV6uHI|kiQTn_nsIdW*4nu$tU7BzSvn+T!AHu&vMlnKwzr8htlD9oz?=u|QKL^}1rKug{E!6ajt zwN?PZrEZa#(ykSBuTI}5Ml?SpOK7Cg=ZRsZm=R>=hhB`;@(cWkvcL=~3Pb1;VbSei n(#7>xLPmx8tCO>Ep#PztH!BV-pZ{ + + + \ No newline at end of file diff --git a/images/check.svg b/images/check.svg new file mode 100644 index 0000000..4fe8223 --- /dev/null +++ b/images/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/close.svg b/images/close.svg new file mode 100644 index 0000000..23271c6 --- /dev/null +++ b/images/close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 0000000000000000000000000000000000000000..d9d3ec93486a453be68ea42aa6a4bd5a277f251d GIT binary patch literal 422 zcmV;X0a^ZuP)#j!llaC6n!BIX<|91Jz5a zxKK)s&LbRgI>RRTcR}mLKbn4w(uvTS8HV}IG!doa)P+^JyyykCnD(X-HOowjX7H`? z`S}4QbMpycq0y2uC@Ax3R8S|$bD2+rf)c)89)@LJ)-zPZqcj}Tcf%B#2DFK`c2I;0 zRDPcN)77;S++^1_@cg&&{wEyR{fplUwt~)7e(|;N3&ERb*Y>SJ+5KkbS0Js61Ku%ytMB~nG4C+G44d4U?HPL8i zz5_}krPKoB!i2YJ^ZWB(X8!LCz!J%jS(2TW8CT!jBoMj|gvSRl1lDGJ#n#jHPM8{@ zgig~m6v|G;YfdQQzJ&-_?guaEJ6AR=BJAH~^P*UBn#c6BYy!@_PEZ z^Q%zCk1wvMQf#|X_4_sq#Vy35xC8pNmoOdZDMFPa|6NyKK zM_#JlA@MSHJq@-~LAN!MM6^h4b@RMCmebrbR7Fc5iW5m35}Kmf-ki`lxBJQ0$D;%+ b`A>WTj*FOiUB-cG00000NkvXXu0mjfQ5xdz literal 0 HcmV?d00001 diff --git a/images/naver-logo.png b/images/naver-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..1b486381abcfd896ca57d225ada0e25dd8450971 GIT binary patch literal 323 zcmeAS@N?(olHy`uVBq!ia0vp^G9b*s1|*Ak?@s|zoCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{tZtT$B+ufw^KLrHX8`I?zd$OoiZu#16yPx zr;?e6*$K9DY&{H%cW|qwS{12rF}f>#y7}&pO7y3nN3P2*&sPwZ+-O;Pyvs?~K(wQI zVW>0jUv-7KEV6-Tf-Zf(RqF6h?TDL5b<@d{O=W%WO;VF01JU^Td=d9hIP;ODnf1YjL4{ol?IG3w0{>snP6`j?ykA->N zg0JqpY>Ixtfm6jR9_?!v4l=O5GCSwqO4iDMKiD@bYfPOja4g25*T*YPtWkF!(~gSe QKtD2gy85}Sb4q9e03ykE4*&oF literal 0 HcmV?d00001 diff --git a/loginPage.css b/loginPage.css new file mode 100644 index 0000000..a81b8ee --- /dev/null +++ b/loginPage.css @@ -0,0 +1,267 @@ +@font-face { + font-family: 'SpoqaHanSansNeo-400'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} + +/* 폰트 */ + + +/* ctrl + shift 하고 클릭하면 복수 선택가능 */ +* { + font-family: 'SpoqaHanSansNeo-400'; + padding: 0; + margin: 0; + font-size: inherit; +} + +a { + text-decoration: none; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: #e5e5e5; +} + +/* 초기화 작업 */ + +.wrapper { + border-radius: 10px; + background-color: #ffffff; + width: 520px; +} + +/* 제일 큰테두리 작업 */ + +header { + border-bottom: 1px solid #C4C4C4; + padding-top: 20px; + padding-bottom: 18px; + position: relative; +} + +header h1 { + text-align: center; + font-family: 500; + font-size: 16px; +} + +header .x-btn { + width: 16px; + height: 16px; + position: absolute; + background-size: 16px; + background-image: url(./images/close.svg); + background-repeat: no-repeat; + transform: translateY(-50%); + top: 50%; + right: 24px; +} + +/* header에 대한 작업 */ +main h2 { + margin-top: 26px; + margin-bottom: 24px; + font-size: 20px; + font-weight: 500; +} + +/* header2에 대한 작업 */ + +main { + padding-left: 24px; + padding-right: 24px; +} + +/* header 밑에 있는 몸통 초기 크기 잡는 곳 */ + +.input-content { + display: flex; + flex-direction: column; + position: relative; +} + +.input-content input { + border: 2px solid #F4492E; + border-radius: 5px; + padding-top: 15px; + padding-bottom: 15px; + padding-left: 16px; +} + +label[for="id"], +label[for="pw"] { + color: #F4492E; + font-weight: 400; + font-size:14px; + padding-left: 4px; +} + +.input-content #id { + margin-bottom: 6px; +} + +.input-content label[for="id"] { + margin-bottom: 10px; +} + +.input-content #pw { + margin-bottom: 10px; +} + + +.state { + margin-left:4px; + margin-top: 12px; + margin-bottom: 20px; + padding-left: 30px; + position: relative; +} + +.box { + font-weight: 500; + color: #767676; + font-size: 16px; +} + +/* 여기서부터 로그인 상태 유지 구현해야됨. 커스텀 */ +.txt-hide { + width: 1px; + height: 1px; + overflow: hidden; + clip-path: inset(50%); +} + +.box::after { + position: absolute; + content: ""; + width: 22px; + height: 22px; + border: 1px solid #767676; + border-radius: 50%; + left: 0; + cursor: pointer; + background-image: url(./images/check.svg); + background-repeat: no-repeat; + background-position: 50% 50%; +} + +input[type="checkbox"]:checked+.box::after { + background-image: url(./images/check-white.svg); + background-color: #2F80ED; + border: 1px solid #2F80ED; +} + +/* 여기까지(완료) */ + + + +.login-button { + font-weight: 700; + width: 100%; + padding-top: 14px; + padding-bottom: 14px; + border: none; + background-color: #2F80ED; + font-size: 18px; + color: #ffffff; + margin-bottom: 20px; +} + +/* 회원가입 및 또는에 대한 정렬 */ +.register, +.line { + text-align: center; +} + +/* 회원가입 */ +.register { + font-size: 14px; + vertical-align: top; + margin-bottom: 30px; + position: relative; +} + +.register, +.register a { + color: #767676; +} + +.split { + padding-left: 12px; + padding-right: 12px; +} + + +/* 또는 */ +.line { + color: #767676; + margin-bottom: 20px; + position: relative; +} + +.string-line::before, +.string-line::after { + content: ""; + position: absolute; + top: 50%; + background-color: #C4C4C4; + height: 1px; + width: 210px; +} + +.string-line::before { + left: 0; +} + +.string-line::after { + right: 0; +} + +.login-form { + display: flex; + flex-direction: column; + gap: 10px; + position: relative; +} + +button { + font-weight: 500; + color: #767676; + background-color: #ffffff; + padding-top: 10px; + padding-bottom: 10px; + background-position: 12px 50%; + background-repeat: no-repeat; + border-radius: 5px; +} + +button:nth-child(1) { + background-image: url(./images/Google__G__Logo\ 1.png); + border: 1px solid #767676; +} + +button:nth-child(2) { + background-image: url(./images/facebook.png); + border: 1px solid #2D9CDB; +} + +button:nth-child(3) { + background-image: url(./images/naver-logo.png); + border: 1px solid #00BF18; +} + +.last-button { + background-image: url(./images/message-circle.png); + border: 1px solid #F2C94C; +} + +section { + padding-bottom: 25px; +} \ No newline at end of file diff --git a/loginPage.html b/loginPage.html new file mode 100644 index 0000000..02299cf --- /dev/null +++ b/loginPage.html @@ -0,0 +1,57 @@ + + + + + + + + login Page + + + + +
+
+

로그인 또는 회원가입

+
+
+
+

위니브에서 여러분의 궁금증을 해결하세요! :)

+
+ + + + +
+ +
+ + + +
+ + + +
+ 회원가입 + | + 아이디/비밀번호 찾기 +
+ +
+ 또는 +
+
+ + +
+
+
+ + + \ No newline at end of file