diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..780477e Binary files /dev/null and b/.DS_Store differ diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..74cc77d Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/check-box.svg b/images/check-box.svg new file mode 100644 index 0000000..79a8b3b --- /dev/null +++ b/images/check-box.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/checkmark.png b/images/checkmark.png new file mode 100644 index 0000000..998433d Binary files /dev/null and b/images/checkmark.png differ diff --git a/images/close.png b/images/close.png new file mode 100644 index 0000000..dedb7af Binary files /dev/null and b/images/close.png differ diff --git a/images/icon_facebook.png b/images/icon_facebook.png new file mode 100644 index 0000000..d972b04 Binary files /dev/null and b/images/icon_facebook.png differ diff --git a/images/icon_google.png b/images/icon_google.png new file mode 100644 index 0000000..9a43b8c Binary files /dev/null and b/images/icon_google.png differ diff --git a/images/icon_kakao.png b/images/icon_kakao.png new file mode 100644 index 0000000..b8305be Binary files /dev/null and b/images/icon_kakao.png differ diff --git a/images/icon_naver.png b/images/icon_naver.png new file mode 100644 index 0000000..e6fdd2f Binary files /dev/null and b/images/icon_naver.png differ diff --git a/images/icon_sprites.png b/images/icon_sprites.png new file mode 100644 index 0000000..a32ecec Binary files /dev/null and b/images/icon_sprites.png differ diff --git a/index3.html b/index3.html new file mode 100644 index 0000000..f350ce6 --- /dev/null +++ b/index3.html @@ -0,0 +1,67 @@ + + + + + + + + 로그인 또는 회원가입 + + + + +

로그인 페이지

+
+ +
+

로그인 또는 회원가입

+ +
+
+
+

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

+
+ + +
+ + +
+ +
+ 회원가입| 아이디/비밀번호 찾기 + +
+
+

다른 계정으로 로그인

+ 또는 + +
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6953314 --- /dev/null +++ b/style.css @@ -0,0 +1,261 @@ +@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; +} + +h1, +h2, +h3, +p, +input, +button, +ul, +a { + margin: 0; + padding: 0; + font: inherit; +} + +ul, +li { + list-style: none; +} + +button:enabled { + cursor: pointer; +} + +button { + background: none; + border: 0; +} + +a { + text-decoration: none; + color: inherit; +} + +strong { + font: inherit; +} + +img { + vertical-align: top; +} + +.a11y-hidden { + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + width: 1px; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; +} + +body { + background-color: #F2F2F2; +} + + + +.box { + display: flex; + flex-direction: column; + width: 520px; + margin: auto; + background-color: #FFFFFF; + border-radius: 10px; + justify-content: center; + +} + +header { + position: relative; + border-bottom: 1px solid #C4C4C4; +} + +header h2 { + + font-size: 16px; + padding-top: 20px; + padding-bottom: 18px; + text-align: center; + +} + +.btn-close { + position: absolute; + right: 24px; + top: 50%; + transform: translate(50%, -50%); +} + +.section1 h3 { + font-family: 'SpoqaHanSansNeo-Regular'; + font-size: 20px; + font-weight: 500; + line-height: 24px; + margin-left: 24px; + margin-top: 26px; + margin-bottom: 24px; +} + +.form { + width: 472px; + margin: 0 24px; + +} + + +.form .login input { + box-sizing: border-box; + width: 100%; + height: 50px; + padding: 15px 16px; + margin-bottom: 10px; + border-radius: 5px; + border: 1px solid #C4C4C4; + background: #FFF; +} + +.form .hold { + margin-top: 7px; + + font-size: 16px; + color: #767676; + font-weight: 500; +} + + + +.txt-hide { + overflow: hidden; + width: 1px; + height: 1px; + clip-path: inset(50%); +} + +.label-hold { + position: relative; +} + +.label-hold::before { + display: inline-block; + content: ''; + vertical-align: -5px; + width: 22px; + height: 22px; + margin-right: 8px; + background: url(./images/check-box.svg) +} + +.btn-login { + width: 100%; + height: 50px; + margin: 20px auto; + border-radius: 5px; + background: #2F80ED; +} + +.join { + color: #767676; + font-size: 14px; + font-weight: 400; + text-align: center; + margin-left: 158px; + +} + +.bar { + margin: 12px; +} + +.section2 { + margin-top: 30px; +} + +.or { + color: #767676; + font-size: 14px; + font-weight: 400; + text-align: center; + display: block; + margin: 0 24px; + position: relative; +} + +.or::before, +.or::after { + content: ''; + height: 1px; + width: 210px; + background-color: #C4C4C4; + display: block; + position: absolute; + vertical-align: middle; +} + +.or::before { + top: 50%; +} + +.or::after { + top: 50%; + right: 0; +} + +.account { + display: flex; + flex-direction: column; + gap: 10px; + margin: 28px 24px 25px 24px; + +} + +[class^="icon"] { + display: flex; + + color: #767676; + text-align: center; + border-radius: 5px; + height: 50px; + width: 100%; + box-sizing: border-box; + align-items: center; + position: relative; +} + +.imgcon { + width: auto; + height: auto; + position: absolute; + left: 12px; +} + +[class^="icon"] p { + margin: 0 auto; +} + +.icon-google { + border: 1px solid #767676; + +} + +.icon-face { + + border: 1px solid #2D9CDB; +} + +.icon-naver { + border: 1px solid #00BF18; + + +} + +.icon-kakao { + border: 1px solid #F2C94C; +} \ No newline at end of file