diff --git a/css/common.css b/css/common.css deleted file mode 100644 index 0344ea4f..00000000 --- a/css/common.css +++ /dev/null @@ -1,25 +0,0 @@ -@font-face { - font-family: "Pretendard-Regular"; - src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") - format("woff"); - font-weight: 400; - font-style: normal; -} - -:root { - --blue: #3692ff; - --gray900: #111827; - --gray800: #1f2937; - --gray700: #374151; - --gray600: #4b5563; - --gray500: #6b7280; - --gray400: #9ca3af; - --gray200: #e5e7eb; - --gray100: #f3f4f6; - --gray50: #f9fafb; -} - -body { - font-family: "Pretendard-Regular", sans-serif; - color: #374151; -} diff --git a/css/login.css b/css/login.css deleted file mode 100644 index bc238c92..00000000 --- a/css/login.css +++ /dev/null @@ -1,14 +0,0 @@ -.eye { - position: absolute; - cursor: pointer; - width: 24px; - height: 24px; - right: 24px; - top: 60%; -} - -#toggle-password { - width: 100%; - height: 100%; - object-fit: contain; -} diff --git a/css/signup.css b/css/signup.css deleted file mode 100644 index f6121402..00000000 --- a/css/signup.css +++ /dev/null @@ -1,97 +0,0 @@ -* { - box-sizing: border-box; - font-family: "Pretendard-Regular", sans-serif; - color: var(--gray800); -} - -a { - color: inherit; -} - -label { - font-size: 18px; - font-weight: 700; - display: block; -} - -input { - display: block; - width: 100%; - height: 56px; - border-radius: 12px; - border: none; - background-color: var(--gray100); - margin: 16px 0 24px; - padding: 16px 24px; -} - -.login-button { - display: block; - margin-bottom: 24px; -} - -.login-as { - height: 74px; - background-color: rgba(230, 242, 255, 1); - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 23px; - margin: 24px 0; -} - -.join { - display: table; - margin: 24px auto; -} - -.join-us { - color: var(--blue); -} - -.border { - margin: 231px auto; - width: 640px; -} - -.main img { - display: block; - margin: 0 auto; -} - -.container { - margin-top: 40px; -} - -.social { - display: flex; - gap: 16px; -} - -.pass-wrapper { - position: relative; -} - -.eye1 { - position: absolute; - cursor: pointer; - width: 24px; - height: 24px; - right: 24px; - top: 25%; -} - -.eye2 { - position: absolute; - cursor: pointer; - width: 24px; - height: 24px; - right: 24px; - top: 82%; -} - -#toggle-password { - width: 100%; /* 부모 요소 .eye의 너비에 맞춤 */ - height: 100%; /* 부모 요소 .eye의 높이에 맞춤 */ - object-fit: contain; /* 아이콘이 부모 안에 꽉 차도록 */ -} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 1e6f96d2..00000000 --- a/css/style.css +++ /dev/null @@ -1,131 +0,0 @@ -* { - box-sizing: border-box; -} - -header.container { - background-color: white; - height: 70px; - display: flex; - justify-content: center; - align-items: center; - position: sticky; - top: 0; - z-index: 1; -} - -nav { - width: 1120px; - display: flex; - justify-content: space-between; -} - -.hero { - background-color: rgba(207, 229, 255, 1); - padding-top: 270px; -} - -.hero .script h1, -footer .script h1 { - color: rgba(55, 65, 81, 1); - font-size: 40px; - font-weight: 700; - line-height: 140%; - margin: 0; -} - -.hero .container { - display: flex; - justify-content: center; -} - -.hero .container .script h1 { - margin-bottom: 32px; -} - -.features { - max-width: 1920px; - margin: 0 auto; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; -} - -.feature-wrapper { - background-color: rgba(252, 252, 252, 1); - display: flex; - align-items: center; - justify-content: center; - height: 444px; - width: auto; - gap: 65px; -} - -.feature-content span { - color: #3692ff; - font-size: 18px; - line-height: 25px; - font-weight: 700; - margin-bottom: 12px; -} - -.feature-content p { - font-size: 24px; - font-weight: 500; - line-height: 120%; - letter-spacing: 0.08em; - margin-top: 24px; - white-space: nowrap; -} - -.padding { - padding: 138px 466px; -} - -.feature-content { - padding-right: 24px; -} - -#feature-content { - text-align: right; - padding-left: 24px; -} - -.footer-banner { - background-color: rgba(207, 229, 255, 1); - padding-top: 143px; -} - -.footer-container { - display: flex; - justify-content: center; -} - -footer .script-container { - padding-top: 112.5px; -} - -.footer-links { - background-color: rgba(17, 24, 39, 1); - color: rgba(156, 163, 175, 1); - font-size: 16px; - font-weight: 400; - line-height: 100%; - padding-top: 32px; - padding-bottom: 108px; -} - -.footer-content { - height: 20px; - display: flex; - justify-content: space-around; -} - -.policy-faq a { - text-decoration: none; - color: inherit; -} - -a:hover { - cursor: pointer; -} diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..e69de29b diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png new file mode 100644 index 00000000..4a5f85b2 Binary files /dev/null and b/images/home/bottom-banner-image.png differ diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png new file mode 100644 index 00000000..4684b9a7 Binary files /dev/null and b/images/home/feature1-image.png differ diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png new file mode 100644 index 00000000..31e20b97 Binary files /dev/null and b/images/home/feature2-image.png differ diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png new file mode 100644 index 00000000..5b8084a7 Binary files /dev/null and b/images/home/feature3-image.png differ diff --git a/images/home/hero-image.png b/images/home/hero-image.png new file mode 100644 index 00000000..d28fb652 Binary files /dev/null and b/images/home/hero-image.png differ diff --git a/images/icons/eye-invisible.svg b/images/icons/eye-invisible.svg new file mode 100644 index 00000000..92252b05 --- /dev/null +++ b/images/icons/eye-invisible.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons/eye-visible.svg b/images/icons/eye-visible.svg new file mode 100644 index 00000000..35a75305 --- /dev/null +++ b/images/icons/eye-visible.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico new file mode 100644 index 00000000..9fecc692 Binary files /dev/null and b/images/logo/favicon.ico differ diff --git a/images/logo/logo.svg b/images/logo/logo.svg new file mode 100644 index 00000000..55a63efc --- /dev/null +++ b/images/logo/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo/og-image.png b/images/logo/og-image.png new file mode 100644 index 00000000..e7d7b5bf Binary files /dev/null and b/images/logo/og-image.png differ diff --git "a/images/logo/\355\214\220\353\213\244\353\247\210\354\274\223.svg" "b/images/logo/\355\214\220\353\213\244\353\247\210\354\274\223.svg" new file mode 100644 index 00000000..9b20d2d7 --- /dev/null +++ "b/images/logo/\355\214\220\353\213\244\353\247\210\354\274\223.svg" @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/images/social/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/google-logo.png b/images/social/google-logo.png new file mode 100644 index 00000000..199f3d62 Binary files /dev/null and b/images/social/google-logo.png differ diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/images/social/instagram-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/kakao-logo.png b/images/social/kakao-logo.png new file mode 100644 index 00000000..bfadc1d3 Binary files /dev/null and b/images/social/kakao-logo.png differ diff --git a/images/social/twitter-logo.svg b/images/social/twitter-logo.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/images/social/twitter-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/youtube-logo.svg b/images/social/youtube-logo.svg new file mode 100644 index 00000000..5fcc0ff3 --- /dev/null +++ b/images/social/youtube-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/Hot item.png b/img/Hot item.png deleted file mode 100644 index 51d9c5a3..00000000 Binary files a/img/Hot item.png and /dev/null differ diff --git a/img/Img_home_01.jpg b/img/Img_home_01.jpg deleted file mode 100644 index a72d9e8c..00000000 Binary files a/img/Img_home_01.jpg and /dev/null differ diff --git a/img/Img_home_02.jpg b/img/Img_home_02.jpg deleted file mode 100644 index 01661502..00000000 Binary files a/img/Img_home_02.jpg and /dev/null differ diff --git a/img/Img_home_03.jpg b/img/Img_home_03.jpg deleted file mode 100644 index cdb92625..00000000 Binary files a/img/Img_home_03.jpg and /dev/null differ diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png deleted file mode 100644 index c3c26daa..00000000 Binary files a/img/Img_home_bottom.png and /dev/null differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png deleted file mode 100644 index 3c97e8a9..00000000 Binary files a/img/Img_home_top.png and /dev/null differ diff --git a/img/btn_goto.png b/img/btn_goto.png deleted file mode 100644 index 683fc586..00000000 Binary files a/img/btn_goto.png and /dev/null differ diff --git a/img/btn_large.png b/img/btn_large.png deleted file mode 100644 index 01161f7d..00000000 Binary files a/img/btn_large.png and /dev/null differ diff --git a/img/btn_large_join.jpg b/img/btn_large_join.jpg deleted file mode 100644 index 74ba9beb..00000000 Binary files a/img/btn_large_join.jpg and /dev/null differ diff --git a/img/closed.png b/img/closed.png deleted file mode 100644 index 69a949ba..00000000 Binary files a/img/closed.png and /dev/null differ diff --git a/img/favicon-16x16.png b/img/favicon-16x16.png deleted file mode 100644 index 75d4aa8c..00000000 Binary files a/img/favicon-16x16.png and /dev/null differ diff --git a/img/googlelogo.png b/img/googlelogo.png deleted file mode 100644 index f75dc761..00000000 Binary files a/img/googlelogo.png and /dev/null differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png deleted file mode 100644 index a3e343c7..00000000 Binary files a/img/ic_facebook.png and /dev/null differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png deleted file mode 100644 index c47e044d..00000000 Binary files a/img/ic_instagram.png and /dev/null differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png deleted file mode 100644 index 3f74b730..00000000 Binary files a/img/ic_twitter.png and /dev/null differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png deleted file mode 100644 index 874150b0..00000000 Binary files a/img/ic_youtube.png and /dev/null differ diff --git a/img/kakaologo.png b/img/kakaologo.png deleted file mode 100644 index bd767800..00000000 Binary files a/img/kakaologo.png and /dev/null differ diff --git a/img/login_button.png b/img/login_button.png deleted file mode 100644 index a3a145eb..00000000 Binary files a/img/login_button.png and /dev/null differ diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index 9b5b0af2..00000000 Binary files a/img/logo.png and /dev/null differ diff --git a/img/logobig.png b/img/logobig.png deleted file mode 100644 index 8248f602..00000000 Binary files a/img/logobig.png and /dev/null differ diff --git a/img/opened.png b/img/opened.png deleted file mode 100644 index e8a0fba8..00000000 Binary files a/img/opened.png and /dev/null differ diff --git a/index.html b/index.html index c4eef6b5..6866d386 100644 --- a/index.html +++ b/index.html @@ -3,153 +3,171 @@ - - - - 판다 마켓 + + + + + + + 판다마켓 + + + + -
- +
+
+ + 로그인 +
+
-
-
-
+ + +
+
+ 인기 상품 +
+

Hot item

- 일상의 모든 물건을
- 거래해 보세요 + 인기 상품을
확인해 + 보세요

- 구경하러가기버튼 +

+ 가장 HOT한 중고거래 물품을
판다마켓에서 확인해 보세요 +

- 쇼핑하러 가는 판다의 모습
-
-
-
-
- 인기 상품을 구경하는 판다의 모습 -
- Hot item -

인기 상품을
확인해 보세요

-

- 가장 HOT한 중고거래 물품을
- 판다마켓에서 확인해 보세요 -

-
+
+ 검색 기능 +
+

Search

+

+ 구매를 원하는
상품을 + 검색하세요 +

+

+ 구매하고 싶은 물품은 검색해서 +
쉽게 찾아보세요 +

-
-
-
- Search -

구매를 원하는
상품을 검색하세요

-

- 구매하고 싶은 물품은 검색해서
- 쉽게 찾아보세요 -

-
- 검색하는 판다 +
+ 판매 상품 등록 +
+

Register

+

+ 판매를 원하는
상품을 + 등록하세요 +

+

+ 어떤 물건이든 판매하고 싶은 상품을 +
쉽게 등록하세요 +

-
-
- 판매할 상품을 등록하는 판다 -
- Register -

- 판매를 원하는
- 상품을 등록하세요 -

-

- 어떤 물건이든 판매하고 싶은 상품을
- 쉽게 등록하세요 -

-
-
+
+ +
+ diff --git a/items.html b/items.html new file mode 100644 index 00000000..e69de29b diff --git a/login.html b/login.html deleted file mode 100644 index aecd7f39..00000000 --- a/login.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - - - - 판다마켓 - - -
-
- 판다마켓 로고 -
- - -
- - -
- 비밀번호 보기 -
-
-
- - -
-

판다마켓이 처음이신가요? 회원가입

-
-
-
- - - \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..e69de29b diff --git a/script/signin.js b/script/signin.js new file mode 100644 index 00000000..9db7d7c8 --- /dev/null +++ b/script/signin.js @@ -0,0 +1,81 @@ +const emailInput = document.getElementById("email"); +const passwordInput = document.getElementById("password"); +const emailError = document.getElementById("email-error"); +const passwordError = document.getElementById("password-error"); +const loginButton = document.getElementById("login-btn"); + +// 이메일 유효성 검사 +function validateEmail() { + const emailValue = emailInput.value; + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + emailError.textContent = ""; + emailInput.classList.remove("input-error"); + + if (!emailValue) { + emailError.textContent = "이메일을 입력해주세요."; + emailInput.classList.add("input-error"); + } else if (!emailPattern.test(emailValue)) { + emailError.textContent = "잘못된 이메일 형식입니다."; + emailInput.classList.add("input-error"); + } +} + +// 비밀번호 유효성 검사 +function validatePassword() { + const passwordValue = passwordInput.value; + passwordError.textContent = ""; + + if (!passwordValue) { + passwordError.textContent = "비밀번호를 입력해주세요."; + passwordInput.classList.add("input-error"); + } else if (passwordValue.length < 8) { + passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordInput.classList.add("input-error"); + } +} + +// 입력 변화 시 실시간 검증 추가 +emailInput.addEventListener("input", () => { + validateEmail(); + toggleLoginButton(); +}); + +passwordInput.addEventListener("input", () => { + validatePassword(); + toggleLoginButton(); +}); + +// 로그인 버튼 활성화/비활성화 +function toggleLoginButton() { + const emailIsValid = emailInput.value && !emailError.textContent; + const passwordIsValid = passwordInput.value && !passwordError.textContent; + loginButton.disabled = !(emailIsValid && passwordIsValid); +} + +emailInput.addEventListener("focusout", () => { + validateEmail(); + toggleLoginButton(); +}); + +passwordInput.addEventListener("focusout", () => { + validatePassword(); + toggleLoginButton(); +}); + +loginButton.addEventListener("click", () => { + if (!loginButton.disabled) { + window.location.href = "/items"; + } +}); + +//비밀번호 가리기/보이기 +const toggleIcon = document.getElementById("toggle-password"); + +toggleIcon.addEventListener("click", () => { + const isPasswordVisible = passwordInput.type === "text"; + passwordInput.type = isPasswordVisible ? "password" : "text"; + toggleIcon.src = isPasswordVisible + ? "images/icons/eye-invisible.svg" + : "images/icons/eye-visible.svg"; + toggleIcon.alt = isPasswordVisible ? "비밀번호 가리기" : "비밀번호 보이기"; //alt속성 +}); diff --git a/script/signup.js b/script/signup.js new file mode 100644 index 00000000..9168d99b --- /dev/null +++ b/script/signup.js @@ -0,0 +1,138 @@ +const emailInput = document.getElementById("email"); +const passwordInput = document.getElementById("password"); +const emailError = document.getElementById("email-error"); +const passwordError = document.getElementById("password-error"); +const loginButton = document.getElementById("login-btn"); +const nicknameInput = document.getElementById("nickname"); +const confirmPasswordInput = document.getElementById("passwordConfirmation"); +const confirmPasswordError = document.getElementById("confirmPassword-error"); +const signupButton = document.getElementById("signupButton"); + +// 이메일 유효성 검사 +function validateEmail() { + const emailValue = emailInput.value; + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + emailError.textContent = ""; + emailInput.classList.remove("input-error"); + + if (!emailValue) { + emailError.textContent = "이메일을 입력해주세요."; + emailInput.classList.add("input-error"); + } else if (!emailPattern.test(emailValue)) { + emailError.textContent = "잘못된 이메일 형식입니다."; + emailInput.classList.add("input-error"); + } +} + +// 비밀번호 유효성 검사 +function validatePassword() { + const passwordValue = passwordInput.value; + passwordError.textContent = ""; + + if (!passwordValue) { + passwordError.textContent = "비밀번호를 입력해주세요."; + passwordInput.classList.add("input-error"); + } else if (passwordValue.length < 8) { + passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordInput.classList.add("input-error"); + } +} + +// 비밀번호 확인 유효성 검사 +function validateConfirmPassword() { + const confirmPasswordValue = confirmPasswordInput.value; + confirmPasswordError.textContent = ""; + + if (!confirmPasswordValue) { + confirmPasswordError.textContent = "비밀번호를 입력해주세요."; + confirmPasswordInput.classList.add("input-error"); + } else if (confirmPasswordValue.length < 8) { + confirmPasswordError.textContent = "비밀번호를 8자 이상 입력해주세요."; + confirmPasswordInput.classList.add("input-error"); + } +} + +// 입력 변화 시 실시간 검증 추가 +emailInput.addEventListener("input", () => { + validateEmail(); + toggleLoginButton(); +}); + +passwordInput.addEventListener("input", () => { + validatePassword(); + toggleLoginButton(); +}); + +// 회원가입 버튼 활성화/비활성화 +function toggleSignupButton() { + const emailIsValid = emailInput.value && !emailError.textContent; + const passwordIsValid = + passwordInput.value && passwordError.textContent === ""; + const confirmPasswordIsValid = + confirmPasswordInput.value && confirmPasswordError.textContent === ""; + signupButton.disabled = !( + emailIsValid && + passwordIsValid && + confirmPasswordIsValid && + !nicknameInput + ); + // 버튼 활성화 조건 + signupButton.disabled = !( + emailIsValid && + passwordIsValid && + confirmPasswordIsValid + ); +} + +// 이벤트 리스너 설정 +emailInput.addEventListener("input", () => { + validateEmail(); + toggleSignupButton(); +}); + +// 닉네임 유효성 검사 +nicknameInput.addEventListener("input", toggleSignupButton); + +passwordInput.addEventListener("input", () => { + validatePassword(); + validateConfirmPassword(); + toggleSignupButton(); +}); + +confirmPasswordInput.addEventListener("input", () => { + validateConfirmPassword(); + toggleSignupButton(); +}); + +// 회원가입 버튼 클릭 시 이동 +signupButton.addEventListener("click", () => { + if (!signupButton.disabled) { + window.location.href = "/login"; // 로그인 페이지로 이동 + } +}); + +//비밀번호 가리기/보이기 +const toggleIcon = document.getElementById("toggle-password"); + +toggleIcon.addEventListener("click", () => { + const isPasswordVisible = passwordInput.type === "text"; + passwordInput.type = isPasswordVisible ? "password" : "text"; + toggleIcon.src = isPasswordVisible + ? "images/icons/eye-invisible.svg" + : "images/icons/eye-visible.svg"; + toggleIcon.alt = isPasswordVisible ? "비밀번호 가리기" : "비밀번호 보이기"; //alt속성 +}); + +//비밀번호 확인 가리기/보이기 +const confirmToggleIcon = document.getElementById("toggle-confirm-password"); + +confirmToggleIcon.addEventListener("click", () => { + const isConfirmPasswordVisible = confirmPasswordInput.type === "text"; + confirmPasswordInput.type = isConfirmPasswordVisible ? "password" : "text"; + confirmToggleIcon.src = isConfirmPasswordVisible + ? "images/icons/eye-invisible.svg" + : "images/icons/eye-visible.svg"; + confirmToggleIcon.alt = isConfirmPasswordVisible + ? "비밀번호 가리기" + : "비밀번호 보이기"; +}); diff --git a/signin.html b/signin.html new file mode 100644 index 00000000..a027a3f4 --- /dev/null +++ b/signin.html @@ -0,0 +1,94 @@ + + + + + + 판다마켓 - 로그인 + + + + + + + + +
+ 판다마켓 홈 + +
+
+ + +
+
+
+ +
+ + 비밀번호 숨김 +
+
+
+ + +
+ + + +
+ 판다마켓이 처음이신가요? 회원가입 +
+
+ + diff --git a/signup.html b/signup.html index 5ea33bbf..f0d76488 100644 --- a/signup.html +++ b/signup.html @@ -3,77 +3,123 @@ + 판다마켓 - 회원가입 + - - - - 판다마켓 + + + + -
-
- 판다마켓 로고 -
- - - - -
- - -
- 비밀번호 감추기 -
- - -
- 비밀번호 보기 -
+
+ 판다마켓 홈 + +
+
+ + +
+
+
+ + +
+
+
+ +
+ + 비밀번호 숨김
-
+
+
+ +
+ + 비밀번호 숨김 +
+
+
+ + + + + + +
+ 이미 회원이신가요? + 로그인 +
diff --git a/styles/auth.css b/styles/auth.css new file mode 100644 index 00000000..3147fb8e --- /dev/null +++ b/styles/auth.css @@ -0,0 +1,127 @@ +.auth-container { + max-width: 400px; + margin: 0 auto; + padding: 0 16px; +} + +.logo-home-button { + margin: 0 auto; + display: block; + margin-top: 24px; + margin-bottom: 24px; + width: 198px; +} + +.logo-home-button img { + width: 100%; +} + +.input-item { + margin-bottom: 24px; + display: flex; + flex-direction: column; +} + +label { + display: block; + font-weight: 700; + font-size: 14px; + margin-bottom: 8px; +} + +input { + padding: 16px 24px; + background-color: #f3f4f6; + border: none; + border-radius: 12px; + font-size: 16px; + line-height: 24px; + width: 100%; +} + +.error { + color: red; +} + +.input-error { + border: 1px solid red; +} + +input::placeholder { + color: #9ca3af; + font-size: 16px; + line-height: 24px; +} + +input:focus { + outline-color: var(--blue); +} + +.input-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.toggle-password { + position: absolute; + right: 24px; + cursor: pointer; +} + +.social-login-container { + background-color: #e6f2ff; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 23px; + margin: 24px 0; +} + +.social-login-container h3 { + font-weight: 500; + font-size: 16px; + line-height: 24px; +} + +.social-login-buttons-container { + display: flex; + gap: 16px; +} + +.auth-switch { + font-weight: 500; + font-size: 15px; + text-align: center; +} + +.auth-switch a { + color: #3182f6; + text-decoration: underline; + text-underline-offset: 2px; +} + +@media (min-width: 768px) { + .auth-container { + max-width: 640px; + } + + .logo-home-button { + width: 396px; + margin-top: 48px; + margin-bottom: 40px; + } + + label { + font-size: 18px; + margin-bottom: 16px; + } +} + +@media (min-width: 1280px) { + .logo-home-button { + margin-top: 60px; + margin-bottom: 40px; + } +} diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 00000000..4f52f943 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,200 @@ +:root { + /* Gray scale */ + --gray-900: #1b1d1f; + --gray-800: #26282b; + --gray-600: #454c53; + --gray-500: #72787f; + --gray-400: #9ea4a8; + --gray-200: #e5e7eb; + --gray-100: #e8ebed; + --gray-50: #f7f7f8; + --blue: #3692ff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #374151; + word-break: keep-all; + font-family: "Pretendard", sans-serif; +} + +header { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 70px; + + background-color: #ffffff; + border-bottom: 1px solid #dfdfdf; +} +.header-wrapper { + width: 100%; + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; +} + +.logo { + width: 103px; + height: 51px; + background-image: url("../images/logo/logo.svg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +main { + margin-top: 70px; +} + +footer { + background-color: #111827; + padding: 32px; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 60px; +} + +#copyright { + order: 3; + flex-basis: 100%; + color: #9ca3af; +} + +#footerMenu { + display: flex; + gap: 30px; + color: var(--gray-200); +} + +#socialMedia { + display: flex; + gap: 12px; +} + +a { + text-decoration: none; + color: inherit; +} + +img { + vertical-align: bottom; +} + +.wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; + padding: 0 16px; +} + +button { + background: none; + border: none; + outline: none; + box-shadow: none; + cursor: pointer; + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.button { + background-color: var(--blue); + color: #ffffff; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.button:hover { + background-color: #1967d6; +} + +.button:focus { + background-color: #1251aa; +} + +.button:disabled { + background-color: #9ca3af; + cursor: default; + pointer-events: none; +} + +.pill-button { + font-size: 16px; + font-weight: 600; + border-radius: 999px; + padding: 14.5px 33.5px; +} + +.full-width { + width: 100%; +} + +.break-on-desktop { + display: none; +} + +@media (min-width: 768px) { + header { + padding: 0 24px; + } + + .logo { + width: 153px; + height: 51px; + background-size: cover; + background-image: url("../images/logo/판다마켓.svg"); + background-repeat: no-repeat; + background-position: center; + } + + .wrapper { + padding: 0 24px; + } + + .pill-button { + font-size: 20px; + font-weight: 700; + padding: 16px 126px; + } + + footer { + padding: 32px 104px 108px 104px; + } + + #copyright { + flex-basis: auto; + order: 0; + } +} + +@media (min-width: 1280px) { + header { + padding: 0 400px; + } + + .break-on-desktop { + display: inline; + } + + footer { + padding: 32px 200px 108px 200px; + } +} diff --git a/styles/home.css b/styles/home.css new file mode 100644 index 00000000..1bc338e6 --- /dev/null +++ b/styles/home.css @@ -0,0 +1,161 @@ +.banner { + background-color: #cfe5ff; + height: 540px; + text-align: center; + background-repeat: no-repeat; + background-position: bottom; + background-size: 130%; +} + +#hero { + background-image: url("../images/home/hero-image.png"); +} + +.banner h1 { + font-weight: 700; + font-size: 32px; + line-height: 140%; + padding: 48px 67px 18px 68px; +} + +#bottomBanner { + background-image: url("../images/home/bottom-banner-image.png"); +} + +#signinLinkButton { + font-size: 16px; + font-weight: 600; + border-radius: 8px; + padding: 11px 43px; +} + +#features { + padding-top: 52px; +} + +.feature { + margin-bottom: 64px; +} + +.feature img { + width: 100%; + margin-bottom: 20px; +} + +.feature:nth-child(2) { + text-align: right; +} + +.feature-content { + flex: 1; +} + +.feature-content h2 { + color: var(--blue); + font-size: 16px; + line-height: 22.4px; + font-weight: 700; + margin-bottom: 8px; +} + +.feature-content h1 { + font-weight: 700; + font-size: 24px; +} + +.feature-description { + font-weight: 500; + font-size: 16px; + line-height: 26px; + margin-top: 16px; +} + +@media (min-width: 768px) { + .banner { + height: 90vh; + background-size: 120%; + } + + .banner h1 { + font-size: 40px; + line-height: 56px; + padding-top: 84px; + padding-bottom: 24px; + } + + #hero h1 br { + display: none; + } + + #features { + padding-top: 24px; + padding-bottom: 16px; + } + + .feature-content h2 { + font-size: 18px; + line-height: 25.2px; + margin-bottom: 12px; + } + + .feature-content h1 { + font-size: 32px; + line-height: 44.8px; + } + + .feature-description { + font-size: 18px; + line-height: 21.6px; + } +} + +@media (min-width: 1280px) { + .banner { + text-align: left; + height: 540px; + display: flex; + align-items: center; + background-position: 80% bottom; + background-size: 55%; + } + + .banner h1 { + padding-top: 0; + padding-bottom: 32px; + } + + #hero h1 br { + display: inline; + } + + #features { + padding: 138px 0; + } + + .feature { + margin-bottom: 138px; + display: flex; + align-items: center; + gap: 5%; + } + + .feature:nth-child(2) { + flex-direction: row-reverse; + } + + .feature img { + width: 50%; + margin-bottom: 0; + } + + .feature-content h1 { + font-size: 40px; + line-height: 56px; + } + + .feature-description { + font-size: 24px; + line-height: 28.8px; + margin-top: 24px; + } +} diff --git a/css/reset.css b/styles/reset.css similarity index 99% rename from css/reset.css rename to styles/reset.css index b6eb8216..bb6e2a7d 100644 --- a/css/reset.css +++ b/styles/reset.css @@ -8,7 +8,7 @@ * 2. Prevent adjustments of font size after orientation changes in iOS. */ - html { +html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } @@ -174,7 +174,8 @@ textarea { */ button, -input { /* 1 */ +input { + /* 1 */ overflow: visible; } @@ -184,7 +185,8 @@ input { /* 1 */ */ button, -select { /* 1 */ +select { + /* 1 */ text-transform: none; } @@ -346,4 +348,4 @@ template { [hidden] { display: none; -} \ No newline at end of file +}