diff --git a/images/Google__G__Logo 1.png b/images/Google__G__Logo 1.png new file mode 100644 index 0000000..94ad107 Binary files /dev/null and b/images/Google__G__Logo 1.png differ diff --git a/images/check-white.svg b/images/check-white.svg new file mode 100644 index 0000000..c3d3e03 --- /dev/null +++ b/images/check-white.svg @@ -0,0 +1,4 @@ + + + + \ 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 0000000..d9d3ec9 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/message-circle.png b/images/message-circle.png new file mode 100644 index 0000000..f7131be Binary files /dev/null and b/images/message-circle.png differ diff --git a/images/naver-logo.png b/images/naver-logo.png new file mode 100644 index 0000000..1b48638 Binary files /dev/null and b/images/naver-logo.png differ 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