diff --git a/assets/icons/ic_eye.svg b/assets/icons/ic_eye.svg new file mode 100644 index 0000000..43a5af1 --- /dev/null +++ b/assets/icons/ic_eye.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/ic_eye_off.svg b/assets/icons/ic_eye_off.svg new file mode 100644 index 0000000..43cfd03 --- /dev/null +++ b/assets/icons/ic_eye_off.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/ic_google.png b/assets/icons/ic_google.png new file mode 100644 index 0000000..91e0f16 Binary files /dev/null and b/assets/icons/ic_google.png differ diff --git a/assets/icons/ic_kakao.png b/assets/icons/ic_kakao.png new file mode 100644 index 0000000..5e6a0ff Binary files /dev/null and b/assets/icons/ic_kakao.png differ diff --git a/assets/images/img_home_01.png b/assets/images/img_home_01.png deleted file mode 100644 index 20000c8..0000000 Binary files a/assets/images/img_home_01.png and /dev/null differ diff --git a/assets/images/img_home_01.svg b/assets/images/img_home_01.svg new file mode 100644 index 0000000..56aa003 --- /dev/null +++ b/assets/images/img_home_01.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_home_02.png b/assets/images/img_home_02.png deleted file mode 100644 index da6c7e3..0000000 Binary files a/assets/images/img_home_02.png and /dev/null differ diff --git a/assets/images/img_home_02.svg b/assets/images/img_home_02.svg new file mode 100644 index 0000000..be6cba6 --- /dev/null +++ b/assets/images/img_home_02.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_home_03.png b/assets/images/img_home_03.png deleted file mode 100644 index 6bdf988..0000000 Binary files a/assets/images/img_home_03.png and /dev/null differ diff --git a/assets/images/img_home_03.svg b/assets/images/img_home_03.svg new file mode 100644 index 0000000..82ad0e3 --- /dev/null +++ b/assets/images/img_home_03.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_home_bottom.png b/assets/images/img_home_bottom.png deleted file mode 100644 index ecebda4..0000000 Binary files a/assets/images/img_home_bottom.png and /dev/null differ diff --git a/assets/images/img_home_bottom.svg b/assets/images/img_home_bottom.svg new file mode 100644 index 0000000..8aac2a0 --- /dev/null +++ b/assets/images/img_home_bottom.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/img_home_top.png b/assets/images/img_home_top.png deleted file mode 100644 index 3761b56..0000000 Binary files a/assets/images/img_home_top.png and /dev/null differ diff --git a/assets/images/img_home_top.svg b/assets/images/img_home_top.svg new file mode 100644 index 0000000..687771d --- /dev/null +++ b/assets/images/img_home_top.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/css/auth.css b/css/auth.css new file mode 100644 index 0000000..1352070 --- /dev/null +++ b/css/auth.css @@ -0,0 +1,159 @@ +body { + font-family: 'Pretendard', sans-serif; +} +.auth-container{ + max-width: 640px; + margin: 0 auto; +} +.auth-login-layout { + display: flex; + flex-direction: column; + justify-content: center; + height: 100vh; +} + +.auth-signup-layout { + margin-top: 60px; + margin-bottom: 60px; +} + +.auth-logo { + display: flex; + justify-content: center; + margin-bottom: 40px; +} + +.logo-img { + width: 396px; + height: 132px; +} + +.auth-form { + margin-bottom: 24px; +} + +.auth-field { + display: flex; + flex-direction: column; + gap: 16px; + margin-bottom: 24px; +} + +.auth-label { + font-size: 18px; + font-weight: 700; + line-height: 26px; + color: var(--color-secondary-800); +} + +.auth-input { + width: 100%; + height: 56px; + border-radius: 12px; + background-color: var(--color-secondary-100); + padding: 16px 24px; + font-size: 16px; + font-weight: 400; + line-height: 26px; + color: var(--color-secondary-800); + border: none; +} + +.auth-input::placeholder { + color: var(--color-secondary-400); +} + +.auth-password-container { + position: relative; +} + +.auth-password-toggle { + position: absolute; + right: 24px; + top: 16px; + cursor: pointer; + border: none; + background-color: transparent; +} + +.auth-password-toggle img { + width: 24px; + height: 24px; +} + +.auth-submit-button { + width: 100%; + height: 56px; + border-radius: 40px; + background-color: var(--color-primary-100); + color: var(--color-secondary-100); + font-size: 20px; + font-weight: 600; + line-height: 32px; + cursor: pointer; + border: none; +} + +.auth-submit-button:hover { + background-color: var(--color-primary-200); +} + +.auth-submit-button:active { + background-color: var(--color-primary-300); +} + +.auth-submit-button:disabled { + background-color: var(--color-secondary-200); + cursor: not-allowed; +} + +.auth-sns-section { + display: flex; + gap: 16px; + padding: 16px 23px; + justify-content: space-between; + align-items: center; + border-radius: 8px; + background-color: #E6F2FF; + margin-bottom: 24px; +} + +.auth-sns-text { + font-size: 16px; + font-weight: 500; + line-height: 26px; + color: var(--color-secondary-800); +} + +.auth-sns-icons { + display: flex; + gap: 16px; +} + +.auth-sns-icons img { + width: 42px; + height: 42px; +} + +.auth-signup-section { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; +} + +.auth-signup-text { + font-size: 14px; + font-weight: 500; + line-height: 24px; + color: var(--color-secondary-800); +} + +.auth-signup-section a { + color: var(--color-primary-100); + text-decoration: underline; +} + +.auth-signup-section a:hover { + color: var(--color-primary-200); +} \ No newline at end of file diff --git a/colors.css b/css/colors.css similarity index 100% rename from colors.css rename to css/colors.css diff --git a/style.css b/css/index.css similarity index 92% rename from style.css rename to css/index.css index c31fc41..434cdf1 100644 --- a/style.css +++ b/css/index.css @@ -37,9 +37,17 @@ body { } /*헤더*/ +header { + position: sticky; + top: 0; + right: 0; + left: 0; + background-color: #ffffff; + border-bottom: 1px solid #DFDFDF; +} + .header-inner { height: 70px; - border-bottom: 1px solid #DFDFDF; display: flex; justify-content: space-between; align-items: center; @@ -56,7 +64,7 @@ body { } /*hero*/ -.hero-banner{ +.hero-banner { padding-top: 200px; } @@ -142,7 +150,7 @@ body { } /*bottom*/ -.bottom-banner{ +.bottom-banner { padding-top: 143px; } @@ -158,25 +166,24 @@ body { } /*footer*/ -.footer{ - padding: 32px 0; +footer { + height: 160px; background-color: var(--color-secondary-900); } -.footer-inner{ - height: 160px; +.footer-inner { + padding-top: 32px; display: flex; - margin: 0 auto; justify-content: space-between; } -.footer-info{ +.footer-info { font-size: 16px; font-weight: 400; color: var(--color-secondary-400); } -.footer-links{ +.footer-links { display: flex; gap: 30px; font-size: 16px; @@ -184,7 +191,7 @@ body { color: var(--color-secondary-200); } -.footer-sns{ +.footer-sns { display: flex; gap: 12px; } diff --git a/reset.css b/css/reset.css similarity index 100% rename from reset.css rename to css/reset.css diff --git a/index.html b/index.html index 40082ab..d9d2aa8 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,14 @@ - - - + + + @@ -26,7 +26,7 @@

판다마켓

- 로그인 + 로그인 @@ -34,11 +34,11 @@