From c453e95cd6a9364fa9b5442dd101c85d568d9966 Mon Sep 17 00:00:00 2001 From: aicul313 Date: Wed, 2 Aug 2023 21:35:41 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[#1]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=B0=8F=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Log-in.html" | 32 ++ .../css/modal.css" | 280 ++++++++++++++++++ .../images/icon-check.svg" | 3 + .../images/icon-checked.svg" | 3 + .../images/icon-facebook.svg" | 3 + .../images/icon-google.svg" | 6 + .../images/icon-kakao.svg" | 3 + .../images/icon-naver.svg" | 3 + .../images/weniv-logo.svg" | 7 + .../modal-1-2-3.html" | 85 ++++++ .../modal-4.html" | 88 ++++++ .../modal-5.html" | 88 ++++++ 12 files changed, 601 insertions(+) create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/Log-in.html" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/css/modal.css" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-check.svg" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-checked.svg" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-facebook.svg" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-google.svg" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-kakao.svg" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-naver.svg" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/weniv-logo.svg" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-1-2-3.html" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-4.html" create mode 100644 "\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-5.html" diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/Log-in.html" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/Log-in.html" new file mode 100644 index 0000000..6652789 --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/Log-in.html" @@ -0,0 +1,32 @@ + + + + + + + + + + 로그인 + + + + + + + +
+

+ 위니브 로고 +

+ + +
+ + + + \ No newline at end of file diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/css/modal.css" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/css/modal.css" new file mode 100644 index 0000000..8039c59 --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/css/modal.css" @@ -0,0 +1,280 @@ +@font-face { + font-family: 'SpoqaHanSansNeo-Regular'; + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +/* ------ reset ------ */ +body { + margin: 0; + padding: 0; + font-family: 'SpoqaHanSansNeo-Regular'; +} + +h1, h2, h3, h4, h5, h6, p, button { + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + color: inherit; +} + +button { + font: inherit; + border: none; + background: none; +} + +button:enabled { + cursor: pointer; +} + +/* ------ css ------ */ +.a11y-hidden { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; +} + +/* ------ wrap ------ */ +.wrap { + margin: 100px auto; + width: 520px; + box-sizing: border-box; + border-radius: 5px; + border: 1px solid #C4C4C4; +} + +/* ------ wrap login ------ */ +.wrap-login { + width: 500px; + border: 1px solid #cacaca; + border-radius: 5px; + margin: 280px auto; +} + +.wrap-login .logo-weniv { + width: fit-content; + margin: 30px auto 28px auto; +} + +.wrap-login .login-text { + width: fit-content; + margin: 0 auto; + font-size: 16px; +} + +.wrap-login .login-btn { + width: calc(100% - (30px * 2)); + margin: 32px 30px 30px; +} + + + +/* ------ header ------ */ +.header { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 1px solid #C4C4C4; +} + +.title { + font-size: 16px; + width: fit-content; + margin: 20px auto 18px auto; + transform: translateX(23px); +} + +/* ------ toggle ------ */ +.toggle { + width: 23px; + height: 23px; + transform: translateY(50%); + margin-right: 24px; +} + +.bar { + width: 22.4px; + border: 1px solid #767676; +} + +.toggle .bar:nth-of-type(1) { + transform: rotate(45deg); +} + +.toggle .bar:nth-of-type(2) { + transform: rotate(-45deg); +} + +/* ------ login-main ------ */ +.login-main { + margin: 26px 24px 25px 24px; +} + +.welcome { + font-size: 20px; +} + +/* ------ login-box ------ */ +.login-box { + margin: 24px 0 20px 0; +} + +.user-box > input { + width: calc(100% - 32px); + padding: 15px 16px; + border: 1px solid #C4C4C4; + border-radius: 5px; + outline: 1px solid #C4C4C4; +} + +.user-box > input:placeholder { + color: #767676; + font-size: 16px; +} + +.user-box:first-child { + margin-bottom: 10px; +} + +.user-box:nth-child(2) { + margin-bottom: 16px; +} + +.login-state { + display: flex; +} + +input[id="input-hold"] { + display: none; +} + +input[id="input-hold"] + label { + display: inline-block; + width: 22px; + height: 22px; + background-image: url(../images/icon-check.svg); + background-repeat: no-repeat; + background-position: center; + border: 1px solid #767676; + border-radius: 50%; + cursor: pointer; +} + +input[id="input-hold"]:checked + label { + background-color: #2f80ed; + border-color: #2f80ed; + background-image: url(../images/icon-checked.svg); + background-repeat: no-repeat; + background-position: center; +} + +.login-state .state-text { + display: inline-block; + font-size: 16px; + color: #767676; + margin-left: 8px; +} + +.login-btn { + width: 100%; + border-radius: 5px; + background-color: #2f80ed; + color: #fff; + font-size: 18px; + font-weight: bold; + padding: 14px 0; + margin-top: 20px; +} + +.login-link { + font-size: 14px; + color: #767676; + width: fit-content; + margin: 0 auto; +} + +.login-link span{ + margin: 0 12px; +} + +/* ------ id alert ------ */ +.user-box .user-id { + outline: #f4492e; + border: 2px solid #f4492e; +} + +.user-box .id-alert { + color: #f4492e; + font-size: 14px; + margin-top: 6px; + margin-left: 4px; + margin-bottom: -4px; +} + +/* ------ dividing area ------ */ +.dividing-area { + font-size: 14px; + color: #767676; + width: fit-content; + margin: 30px auto 20px auto; +} + +.dividing-area::before, .dividing-area::after { + content: ''; + display: inline-block; + width: 205px; + border-bottom: 1px solid #767676; + vertical-align: middle; +} + +.dividing-area::before { + transform: translateX(-13px); +} + +.dividing-area::after { + transform: translateX(13px); +} + +/* ------ login-social ------ */ +.social-signin { + width: 100%; + height: 50px; + border-radius: 5px; + background-repeat: no-repeat; + background-position: 12px 11px; + border: 1px solid; + margin-bottom: 10px; + font-size: 16px; + font-weight: 500; +} + +.google { + background-image: url(../images/icon-google.svg); + border-color: #767676; +} + +.facebook { + background-image: url(../images/icon-facebook.svg); + border-color: #2d9cdb; +} + +.naver { + background-image: url(../images/icon-naver.svg); + border-color: #00bf18; +} + +.kakaotalk { + background-image: url(../images/icon-kakao.svg); + border-color: #f2c94c; +} \ No newline at end of file diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-check.svg" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-check.svg" new file mode 100644 index 0000000..2a63bc8 --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-check.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-checked.svg" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-checked.svg" new file mode 100644 index 0000000..9071be1 --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-checked.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-facebook.svg" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-facebook.svg" new file mode 100644 index 0000000..243ff78 --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-facebook.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-google.svg" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-google.svg" new file mode 100644 index 0000000..801e609 --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-google.svg" @@ -0,0 +1,6 @@ + + + + + + diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-kakao.svg" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-kakao.svg" new file mode 100644 index 0000000..ac8c71d --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-kakao.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-naver.svg" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-naver.svg" new file mode 100644 index 0000000..fe479f5 --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/icon-naver.svg" @@ -0,0 +1,3 @@ + + + diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/weniv-logo.svg" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/weniv-logo.svg" new file mode 100644 index 0000000..c37b6df --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/images/weniv-logo.svg" @@ -0,0 +1,7 @@ + + + + + + + diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-1-2-3.html" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-1-2-3.html" new file mode 100644 index 0000000..e42f324 --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-1-2-3.html" @@ -0,0 +1,85 @@ + + + + + + + + + + 로그인 또는 회원가입 + + + + + + + +
+ +
+

로그인 또는 회원가입

+
+
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-4.html" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-4.html" new file mode 100644 index 0000000..6466d6a --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-4.html" @@ -0,0 +1,88 @@ + + + + + + + + + + 로그인 또는 회원가입 + + + + + + + +
+ +
+

로그인 또는 회원가입

+
+
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-5.html" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-5.html" new file mode 100644 index 0000000..5ed72bb --- /dev/null +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-5.html" @@ -0,0 +1,88 @@ + + + + + + + + + + 로그인 또는 회원가입 + + + + + + + +
+ +
+

로그인 또는 회원가입

+
+
+
+
+
+ + +
+ + + + \ No newline at end of file From 44e99ebee16d2c2ee085f5edb90b25968c3a8e27 Mon Sep 17 00:00:00 2001 From: aicul313 Date: Sat, 5 Aug 2023 12:10:47 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[#1]=20=EA=B5=AC=ED=98=84=EA=B3=BC=EC=A0=9C?= =?UTF-8?q?=20-=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EB=AA=A8=EB=8B=AC=20-=20=ED=98=84=EC=A7=80=5F1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/modal.css" | 11 ++++++++--- .../modal-1-2-3.html" | 6 +++--- .../modal-4.html" | 6 +++--- .../modal-5.html" | 6 +++--- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/css/modal.css" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/css/modal.css" index 8039c59..1989ea1 100644 --- "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/css/modal.css" +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/css/modal.css" @@ -101,19 +101,21 @@ button:enabled { height: 23px; transform: translateY(50%); margin-right: 24px; + cursor: pointer; } .bar { width: 22.4px; + background-color: #767676; border: 1px solid #767676; } .toggle .bar:nth-of-type(1) { - transform: rotate(45deg); + transform: rotate(45deg) translate(1px, -0.5px); } .toggle .bar:nth-of-type(2) { - transform: rotate(-45deg); + transform: rotate(-45deg) translateX(1px); } /* ------ login-main ------ */ @@ -135,7 +137,7 @@ button:enabled { padding: 15px 16px; border: 1px solid #C4C4C4; border-radius: 5px; - outline: 1px solid #C4C4C4; + /* outline: 1px solid #C4C4C4; */ } .user-box > input:placeholder { @@ -267,14 +269,17 @@ input[id="input-hold"]:checked + label { .facebook { background-image: url(../images/icon-facebook.svg); border-color: #2d9cdb; + background-position-x: 20px; } .naver { background-image: url(../images/icon-naver.svg); border-color: #00bf18; + background-position: 15px, 10px; } .kakaotalk { background-image: url(../images/icon-kakao.svg); border-color: #f2c94c; + background-position: 15px, 12px; } \ No newline at end of file diff --git "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-1-2-3.html" "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-1-2-3.html" index e42f324..cf9c1bc 100644 --- "a/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-1-2-3.html" +++ "b/\353\241\234\352\267\270\354\235\270 \355\231\224\353\251\264/modal-1-2-3.html" @@ -17,13 +17,13 @@
-
-

로그인 또는 회원가입

+
+

로그인 또는 회원가입

-
+