-
Notifications
You must be signed in to change notification settings - Fork 31
[최권진] Sprint2 #45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The head ref may contain hidden characters: "Basic-\uCD5C\uAD8C\uC9C4"
[최권진] Sprint2 #45
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| :root { | ||
| --gray-900: #111827; | ||
| --gray-800: #1F2937; | ||
| --gray-700: #374151; | ||
| --gray-600: #4B5563; | ||
| --gray-500: #6B7280; | ||
| --gray-400: #9CA3AF; | ||
| --gray-200: #E5E7EB; | ||
| --gray-100: #F3F4F6; | ||
| --gray-50: #F9FAFB; | ||
| --blue: #3692FF; | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .empty-area { | ||
| height: 231px; | ||
| } | ||
|
|
||
| .hearder { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .panda-logo-img { | ||
| width: 396px; | ||
| height: 132px; | ||
| margin: 0 122px 40px 122px; | ||
| } | ||
|
|
||
| .main { | ||
| height: 446px; | ||
| } | ||
|
|
||
| .all-elements { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .google-logo, | ||
| .kakao-logo { | ||
| width: 42px; | ||
| height: 42px; | ||
| } | ||
|
|
||
| .google-logo { | ||
| margin-right: 16px; | ||
| } | ||
|
|
||
| .kakao-logo { | ||
| margin-right: 23px; | ||
| } | ||
|
|
||
| .eyes { | ||
| width: 20.47px; | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 피그마를 다시 확인해 주세요! 소수점까지 이용하는 경우는 거의 없습니다 :) |
||
| height: 18.07px; | ||
| position: relative; | ||
| top: 5px; | ||
| right: 50px; | ||
| } | ||
|
|
||
| #google { | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. reset css를 활용해 보셔도 좋아요 :) |
||
| text-decoration: none; | ||
| } | ||
| #kakao { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .simple-login { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| background-color: #e6f2ff; | ||
| border-radius: 8px; | ||
| color: #1f2937; | ||
| } | ||
|
|
||
| .form label { | ||
| margin-bottom: 16px; | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| font-family: "Pretendard"; | ||
| } | ||
|
|
||
| .form input { | ||
| margin-bottom: 24px; | ||
| border-radius: 12px; | ||
| width: 640px; | ||
| height: 56px; | ||
| background-color: #f3f4f6; | ||
| border: 0; | ||
| padding: 0 0 0 24px; | ||
| } | ||
|
|
||
| .form button { | ||
| margin-bottom: 24px; | ||
| width: 640px; | ||
| height: 56px; | ||
| border-radius: 40px; | ||
| border: 0; | ||
| background-color: var(--gray-400); | ||
| color: #f3f4f6; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .form button:hover { | ||
| background-color: var(--blue); | ||
| } | ||
|
|
||
| .simple-login { | ||
| width: 640px; | ||
| height: 74px; | ||
| padding-left: 23px; | ||
| } | ||
|
|
||
| .join { | ||
| margin-top: 24px; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| #join { | ||
| margin-left: 4px; | ||
| } | ||
|
|
||
| .join-first { | ||
| color: var(--gray-800); | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| :root { | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 공통 스타일은 파일을 따로 빼서 관리하시면 좋습니다 :) |
||
| --gray-900: #111827; | ||
| --gray-800: #1F2937; | ||
| --gray-700: #374151; | ||
| --gray-600: #4B5563; | ||
| --gray-500: #6B7280; | ||
| --gray-400: #9CA3AF; | ||
| --gray-200: #E5E7EB; | ||
| --gray-100: #F3F4F6; | ||
| --gray-50: #F9FAFB; | ||
| --blue: #3692FF; | ||
| } | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .empty-area { | ||
| height: 231px; | ||
| } | ||
|
|
||
| .empty-bottom { | ||
| height: 407px; | ||
| } | ||
|
|
||
| .hearder { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .panda-logo-img { | ||
| width: 396px; | ||
| height: 132px; | ||
| margin: 0 122px 40px 122px; | ||
| } | ||
|
|
||
| .main { | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| .all-elements { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .google-logo, | ||
| .kakao-logo { | ||
| width: 42px; | ||
| height: 42px; | ||
| } | ||
|
|
||
| .google-logo { | ||
| margin-right: 16px; | ||
| } | ||
|
|
||
| .kakao-logo { | ||
| margin-right: 23px; | ||
| } | ||
|
|
||
| #google { | ||
| text-decoration: none; | ||
| } | ||
| #kakao { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .simple-login { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| background-color: #e6f2ff; | ||
| border-radius: 8px; | ||
| color: var(--gray-800); | ||
| max-width: 640px; | ||
| height: 74px; | ||
| padding-left: 23px; | ||
| } | ||
|
|
||
| .form label { | ||
| margin-bottom: 16px; | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| font-family: "Pretendard"; | ||
| } | ||
|
|
||
| .form input { | ||
| margin-bottom: 24px; | ||
| border-radius: 12px; | ||
| width: 640px; | ||
| height: 56px; | ||
| background-color: #f3f4f6; | ||
| border: 0; | ||
| padding: 0 0 0 24px; | ||
| } | ||
|
|
||
| .eyes { | ||
| width: 20.47px; | ||
| height: 18.07px; | ||
| position: relative; | ||
| top: 5px; | ||
| right: 50px; | ||
| } | ||
|
|
||
| .form button { | ||
| margin-bottom: 24px; | ||
| width: 640px; | ||
| height: 56px; | ||
| border-radius: 40px; | ||
| border: 0; | ||
| background-color: var(--gray-400); | ||
| color: #f3f4f6; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .form button:hover { | ||
| background-color: var(--blue); | ||
| } | ||
|
|
||
| .join { | ||
| margin-top: 24px; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| #join { | ||
| margin-left: 4px; | ||
| } | ||
|
|
||
| .join-first { | ||
| color: var(--gray-800); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
변수를 잘 정의 해주셨네요 👍