diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..42c36749 --- /dev/null +++ b/faq.html @@ -0,0 +1,32 @@ + + + + + + + + + 판다마켓 - FAQ + + + + + + +

임시 FAQ 페이지

+ + diff --git a/images/Component 2.png b/images/Component 2.png new file mode 100644 index 00000000..431a9567 Binary files /dev/null and b/images/Component 2.png differ diff --git a/images/Component 2@2x.png b/images/Component 2@2x.png new file mode 100644 index 00000000..46ce43f8 Binary files /dev/null and b/images/Component 2@2x.png differ diff --git a/images/Component 2@3x.png b/images/Component 2@3x.png new file mode 100644 index 00000000..72d9016d Binary files /dev/null and b/images/Component 2@3x.png differ diff --git a/images/Component 3.png b/images/Component 3.png new file mode 100644 index 00000000..a6833c9c Binary files /dev/null and b/images/Component 3.png differ diff --git a/images/Component 3@2x.png b/images/Component 3@2x.png new file mode 100644 index 00000000..6ebf1ae8 Binary files /dev/null and b/images/Component 3@2x.png differ diff --git a/images/Component 3@3x.png b/images/Component 3@3x.png new file mode 100644 index 00000000..0c487607 Binary files /dev/null and b/images/Component 3@3x.png differ diff --git a/images/Img_home_01.png b/images/Img_home_01.png new file mode 100644 index 00000000..574c0af7 Binary files /dev/null and b/images/Img_home_01.png differ diff --git a/images/Img_home_01@2x.png b/images/Img_home_01@2x.png new file mode 100644 index 00000000..f91a52ec Binary files /dev/null and b/images/Img_home_01@2x.png differ diff --git a/images/Img_home_01@3x.png b/images/Img_home_01@3x.png new file mode 100644 index 00000000..1070ff0f Binary files /dev/null and b/images/Img_home_01@3x.png differ diff --git a/images/Img_home_02-1.png b/images/Img_home_02-1.png new file mode 100644 index 00000000..a8d0faba Binary files /dev/null and b/images/Img_home_02-1.png differ diff --git a/images/Img_home_02.png b/images/Img_home_02.png new file mode 100644 index 00000000..a8d0faba Binary files /dev/null and b/images/Img_home_02.png differ diff --git a/images/Img_home_02@2x.png b/images/Img_home_02@2x.png new file mode 100644 index 00000000..20d1fc9b Binary files /dev/null and b/images/Img_home_02@2x.png differ diff --git a/images/Img_home_03.png b/images/Img_home_03.png new file mode 100644 index 00000000..89a63504 Binary files /dev/null and b/images/Img_home_03.png differ diff --git a/images/Img_home_03@2x.png b/images/Img_home_03@2x.png new file mode 100644 index 00000000..d83ec586 Binary files /dev/null and b/images/Img_home_03@2x.png differ diff --git a/images/Img_home_03@3x.png b/images/Img_home_03@3x.png new file mode 100644 index 00000000..b10f618c Binary files /dev/null and b/images/Img_home_03@3x.png differ diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png new file mode 100644 index 00000000..fa13afd8 Binary files /dev/null and b/images/Img_home_bottom.png differ diff --git a/images/Img_home_bottom@2x.png b/images/Img_home_bottom@2x.png new file mode 100644 index 00000000..a6accd38 Binary files /dev/null and b/images/Img_home_bottom@2x.png differ diff --git a/images/Img_home_bottom@3x.png b/images/Img_home_bottom@3x.png new file mode 100644 index 00000000..2c3d4b94 Binary files /dev/null and b/images/Img_home_bottom@3x.png differ diff --git a/images/Img_home_top.png b/images/Img_home_top.png new file mode 100644 index 00000000..b9b24ac8 Binary files /dev/null and b/images/Img_home_top.png differ diff --git a/images/Img_home_top@2x.png b/images/Img_home_top@2x.png new file mode 100644 index 00000000..709c5167 Binary files /dev/null and b/images/Img_home_top@2x.png differ diff --git a/images/Img_home_top@3x.png b/images/Img_home_top@3x.png new file mode 100644 index 00000000..9965d3ee Binary files /dev/null and b/images/Img_home_top@3x.png differ diff --git a/images/Property 1=Typo.png b/images/Property 1=Typo.png new file mode 100644 index 00000000..242c3d5b Binary files /dev/null and b/images/Property 1=Typo.png differ diff --git a/images/Property 1=lg@3x.png b/images/Property 1=lg@3x.png new file mode 100644 index 00000000..b511a0cd Binary files /dev/null and b/images/Property 1=lg@3x.png differ diff --git a/images/Property 1=md.png b/images/Property 1=md.png new file mode 100644 index 00000000..15077902 Binary files /dev/null and b/images/Property 1=md.png differ diff --git a/images/Property 1=sm.png b/images/Property 1=sm.png new file mode 100644 index 00000000..70314302 Binary files /dev/null and b/images/Property 1=sm.png differ diff --git a/images/btn_large-1.png b/images/btn_large-1.png new file mode 100644 index 00000000..f1c1933c Binary files /dev/null and b/images/btn_large-1.png differ diff --git a/images/btn_large-2.png b/images/btn_large-2.png new file mode 100644 index 00000000..29df6c1e Binary files /dev/null and b/images/btn_large-2.png differ diff --git a/images/btn_large-3.png b/images/btn_large-3.png new file mode 100644 index 00000000..c80c7522 Binary files /dev/null and b/images/btn_large-3.png differ diff --git a/images/btn_large.png b/images/btn_large.png new file mode 100644 index 00000000..427e2a7e Binary files /dev/null and b/images/btn_large.png differ diff --git a/images/btn_small-1.png b/images/btn_small-1.png new file mode 100644 index 00000000..f6853d6b Binary files /dev/null and b/images/btn_small-1.png differ diff --git a/images/btn_small-2.png b/images/btn_small-2.png new file mode 100644 index 00000000..b9aa484a Binary files /dev/null and b/images/btn_small-2.png differ diff --git a/images/btn_small-3.png b/images/btn_small-3.png new file mode 100644 index 00000000..6d8053d8 Binary files /dev/null and b/images/btn_small-3.png differ diff --git a/images/btn_small.png b/images/btn_small.png new file mode 100644 index 00000000..0f522132 Binary files /dev/null and b/images/btn_small.png differ diff --git a/images/btn_visibility_off_24px.png b/images/btn_visibility_off_24px.png new file mode 100644 index 00000000..55fd2834 Binary files /dev/null and b/images/btn_visibility_off_24px.png differ diff --git a/images/btn_visibility_on_24px.png b/images/btn_visibility_on_24px.png new file mode 100644 index 00000000..072bac45 Binary files /dev/null and b/images/btn_visibility_on_24px.png differ diff --git a/images/ic_facebook.png b/images/ic_facebook.png new file mode 100644 index 00000000..c2288153 Binary files /dev/null and b/images/ic_facebook.png differ diff --git a/images/ic_facebook.svg b/images/ic_facebook.svg new file mode 100644 index 00000000..b9c9d493 --- /dev/null +++ b/images/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_facebook@2x.png b/images/ic_facebook@2x.png new file mode 100644 index 00000000..638ca7db Binary files /dev/null and b/images/ic_facebook@2x.png differ diff --git a/images/ic_facebook@3x.png b/images/ic_facebook@3x.png new file mode 100644 index 00000000..f346ce4b Binary files /dev/null and b/images/ic_facebook@3x.png differ diff --git a/images/ic_instagram.png b/images/ic_instagram.png new file mode 100644 index 00000000..a99667b9 Binary files /dev/null and b/images/ic_instagram.png differ diff --git a/images/ic_instagram.svg b/images/ic_instagram.svg new file mode 100644 index 00000000..0b9337b0 --- /dev/null +++ b/images/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_instagram@2x.png b/images/ic_instagram@2x.png new file mode 100644 index 00000000..0036ecc2 Binary files /dev/null and b/images/ic_instagram@2x.png differ diff --git a/images/ic_instagram@3x.png b/images/ic_instagram@3x.png new file mode 100644 index 00000000..e35c4d22 Binary files /dev/null and b/images/ic_instagram@3x.png differ diff --git a/images/ic_twitter.png b/images/ic_twitter.png new file mode 100644 index 00000000..62301123 Binary files /dev/null and b/images/ic_twitter.png differ diff --git a/images/ic_twitter.svg b/images/ic_twitter.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/images/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_twitter@2x.png b/images/ic_twitter@2x.png new file mode 100644 index 00000000..3a3737a7 Binary files /dev/null and b/images/ic_twitter@2x.png differ diff --git a/images/ic_twitter@3x.png b/images/ic_twitter@3x.png new file mode 100644 index 00000000..1dd8bf62 Binary files /dev/null and b/images/ic_twitter@3x.png differ diff --git a/images/ic_youtube.png b/images/ic_youtube.png new file mode 100644 index 00000000..6546fcf5 Binary files /dev/null and b/images/ic_youtube.png differ diff --git a/images/ic_youtube.svg b/images/ic_youtube.svg new file mode 100644 index 00000000..699b5380 --- /dev/null +++ b/images/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/ic_youtube@2x.png b/images/ic_youtube@2x.png new file mode 100644 index 00000000..d00c8b85 Binary files /dev/null and b/images/ic_youtube@2x.png differ diff --git a/images/ic_youtube@3x.png b/images/ic_youtube@3x.png new file mode 100644 index 00000000..7f412fb3 Binary files /dev/null and b/images/ic_youtube@3x.png differ 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/panda-market-logo.png b/images/logo/panda-market-logo.png new file mode 100644 index 00000000..a1dc1c6a Binary files /dev/null and b/images/logo/panda-market-logo.png differ diff --git a/images/panda_logo_1.png b/images/panda_logo_1.png new file mode 100644 index 00000000..138bee48 Binary files /dev/null and b/images/panda_logo_1.png differ diff --git a/images/panda_logo_1_2x.png b/images/panda_logo_1_2x.png new file mode 100644 index 00000000..51aa0be0 Binary files /dev/null and b/images/panda_logo_1_2x.png differ diff --git a/images/pandaface.png b/images/pandaface.png new file mode 100644 index 00000000..98f75f0e Binary files /dev/null and b/images/pandaface.png differ diff --git a/images/pandamarket.png b/images/pandamarket.png new file mode 100644 index 00000000..ffccec87 Binary files /dev/null and b/images/pandamarket.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..b5c08a93 --- /dev/null +++ b/index.html @@ -0,0 +1,112 @@ + + + + + + 판다마켓 + + + + + + +
+
+ + + +
+
+ + + +
+
+
+
+
+

일상의 모든 물건을
거래해 보세요

+ + 구경하러 가기 버튼 + +
+
+ 메인 판다 그림 +
+
+
+
+
+
+ Hot item 그림 +
+

Hot item

+

인기 상품을
확인해보세요

+

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

+
+
+
+
+
+ Search 그림 +
+

Search

+

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

+

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

+
+
+
+
+
+ Register 그림 +
+

Register

+

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

+

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

+
+
+
+
+
+
+
+ 믿을 수 있는
+ 판다마켓 중고 거래 +
+
+ bottom 판다 그림 +
+
+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..94781ffb --- /dev/null +++ b/index.js @@ -0,0 +1,31 @@ +document.addEventListener("click", function(event) { + if (event.target.closest(".toggle-password")) { + const toggle = event.target.closest(".toggle-password"); + const passwordField = toggle.previousElementSibling; + const icon = toggle.querySelector("i"); + + const isPassword = passwordField.type === "password"; + passwordField.type = isPassword ? "text" : "password"; + + icon.classList.toggle("fa-eye"); + icon.classList.toggle("fa-eye-slash"); + } +}); + + +document.querySelectorAll("form").forEach(function(form) { + form.addEventListener("input", function() { + const inputs = form.querySelectorAll("input"); + const submitButton = form.querySelector("button"); + + const allFilled = Array.from(inputs).every(input => input.value.trim() !== ""); + + if (allFilled) { + submitButton.classList.add("button-on"); + submitButton.classList.remove("button-off"); + } else { + submitButton.classList.add("button-off"); + submitButton.classList.remove("button-on"); + } + }); +}); \ No newline at end of file diff --git a/items.html b/items.html new file mode 100644 index 00000000..a515835d --- /dev/null +++ b/items.html @@ -0,0 +1,20 @@ + + + + + + 판다마켓 - 상품 리스트 + + + + + + +

임시 상품 리스트 페이지

+ + diff --git a/login.html b/login.html new file mode 100644 index 00000000..a50ba3c1 --- /dev/null +++ b/login.html @@ -0,0 +1,67 @@ + + + + + + 판다마켓 - 로그인 + + + + + + +
+
+ +
+
+ + + +
+ + + + +
+ +
+ + +
+
+ + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..d37e54e5 --- /dev/null +++ b/privacy.html @@ -0,0 +1,32 @@ + + + + + + + + + 판다마켓 - 이용약관 + + + + + + +

임시 이용약관 페이지

+ + diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..8f294345 --- /dev/null +++ b/signup.html @@ -0,0 +1,86 @@ + + + + + + 판다마켓 - 회원가입 + + + + + + +
+
+ +
+ + + + + + +
+ + + + +
+ +
+ + + + +
+ +
+ + +
+
+ + + diff --git a/styles/home.css b/styles/home.css new file mode 100644 index 00000000..8f5a4965 --- /dev/null +++ b/styles/home.css @@ -0,0 +1,253 @@ +* { + box-sizing: border-box; +} + +:root { + --primary-color100: #3692FF; + --primary-color200: #1967D6; + --primary-color300: #1251AA; + --error-color: #F74747; + --background-color0: #ffffff; + --background-color1: #d2e5ff; + --background-color2: #FCFCFC; + --secondary-color-gray900: #111827; + --secondary-color-gray800: #1F2937; + --secondary-color-gray700: #374151; + --secondary-color-gray600: #4B5563; + --secondary-color-gray500: #6B7280; + --secondary-color-gray400: #9CA3AF; + --secondary-color-gray200: #E5E7EB; + --secondary-color-gray100: #F3F4F6; + --secondary-color-gray50: #F9FAFB; + --font-family: 'Pretendard', sans-serif; +} + + +header { + max-width: 1920px; + height: 70px; + display: flex; + justify-content: space-between; + margin: 0 auto; + align-items: center; + padding: 0px 200px 0px 200px; +} + +.header-logo-box { + display: flex; + align-items: center; +} + +.header-login-box { + display: flex; + align-items: center; +} + +.header-logo { + height: 48px; +} + +.header-login { + height: 48px; +} + +main { + background-color: var(--background-color1); +} + + +.main-box { + max-width: 1920px; + padding: 275px 200px 0px 200px; + margin: 0 auto ; + display: grid; + grid-template-columns: 490px 512.5px 512.5px; + grid-template-rows: 465px; + gap: 0; +} + +.main-box-kid1 { + color: var(--secondary-color-gray700); + height: 465px; + font-size: 40px; + font-weight: 700; + line-height: 56px; + text-align: left; + grid-column: 1 / 2; + padding: 54px 5px 54px 0px; +} + +.sightseeing { + width: 490px; +} + +.cursor_pointer { + cursor: pointer; +} + +.main-box-kid2 { + grid-column: 2 / 4; + display: flex; + flex-direction: column-reverse; +} + +.main-panda { + width: 1010px; +} + +.section-background { + background-color: var(--background-color0); +} + +.section-container { + max-width: 1920px; + height: 985px; + padding: 190px 200px 190px 200px; + margin: 0 auto; +} + +.section-container-right { + max-width: 1920px; + height: 985px; + padding: 190px 200px 190px 200px; + margin: 0 auto; + display: flex; + flex-direction: row-reverse; +} + +.section-box { + width: 1308px; + height: 608px; + display: flex; + flex-direction: row; +} + +.section-box-right { + width: 1308px; + height: 608px; + display: flex; + flex-direction: row-reverse; +} + +.section_content { + height: 608px; + width: 805px; +} + +.section_content_p_box { + padding: 103px 29px 103px 29px; + text-align: left; + display: inline-block; + display: flex; + flex-direction: column; + justify-content: center; + margin: 0; + background-color: var(--background-color2); +} + +.section_content_p1 { + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 26px; + color: var(--primary-color100); + margin: 0; +} + +.section_content_p2 { + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + color: var(--secondary-color-gray700); + margin: 12px 0px 24px 0px; +} + +.section_content_p3 { + font-family: Pretendard; + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: var(--secondary-color-gray700); + margin: 0; +} + + + + +.bottom-container { + margin-top: 190px; + background-color: var(--background-color1); +} + +.bottom-box { + max-width: 1920px; + padding: 200px 200px 0px 200px; + height: 740px; + margin: 0 auto; + display: flex; + flex-direction: row; +} + +.bottom-p { + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + padding: 154px 95px 154px 0px; + width: 490px; + color: var(--secondary-color-gray700); +} + +.bottom-img { + display: flex; + flex-direction: column-reverse; +} + +.bottom-panda { + width: 1025px; +} + +.footer-container { + background-color: var(--secondary-color-gray900); +} + +.footer-box { + color: var(--secondary-color-gray200); + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 19px; + max-width: 1920px; + height: 220px; + margin: 0 auto; + padding: 45px 200px 0px 200px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.footer-kid2 { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.footer-kid-a { + display: inline-block; + text-decoration: none; + margin: 0px 40px 0px 4px; + color: var(--secondary-color-gray200); +} + +.footer-kid3 { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.footer-link { + margin: 0px 10px 0px 10px; + width: 27.5px; + height: 27.5px; +} \ No newline at end of file diff --git a/styles/login-signup.css b/styles/login-signup.css new file mode 100644 index 00000000..8ce62765 --- /dev/null +++ b/styles/login-signup.css @@ -0,0 +1,177 @@ +* { + box-sizing: border-box; + font-family: var(--font-family1); +} + + +:root { + --primary-color100: #3692FF; + --primary-color200: #1967D6; + --primary-color300: #1251AA; + --error-color: #F74747; + --background-color0: #ffffff; + --background-color1: #d2e5ff; + --background-color2: #FCFCFC; + --secondary-color-gray900: #111827; + --secondary-color-gray800: #1F2937; + --secondary-color-gray700: #374151; + --secondary-color-gray600: #4B5563; + --secondary-color-gray500: #6B7280; + --secondary-color-gray400: #9CA3AF; + --secondary-color-gray200: #E5E7EB; + --secondary-color-gray100: #F3F4F6; + --secondary-color-gray50: #F9FAFB; + --font-family1: 'Pretendard', sans-serif; + --font-family2: 'rokaf-sans-bold' +} + + +.login-background { + background-color: var(--background-color0); + margin: 0 auto; + padding: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.login-container { + display: flex; + flex-direction: column; + width:640px; + margin-top: 231px; + margin-bottom: 231px; + align-items: center; + justify-content: center; +} + +.login-logo-box { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 396px; + height: 132px; +} + +.gohome { + text-decoration: none; + display: inline-block; +} + +.login-logo2 { + margin: 20px 0px 20px 20px; + align-items: center; + justify-content: center; +} + +.form-box { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 40px; + width: 640px; +} + +form { + width: 640px; +} + +label { + font-size: 18px; + font-weight: 700; + font-family: 'pretendard'; + color: var(--secondary-color-gray800); + display: block; + margin: 0px 0px 8px; + width: 640px; +} + +input { + font-size: 16px; + font-weight: 400; + line-height: 26px; + font-family: var(--font-family1); + background-color: var(--secondary-color-gray100); + border-radius: 12px; + outline: none; + border: none; + width: 640px; + height: 56px; + margin-bottom: 24px; + padding: 15px 24px 15px 24px ; +} + +.password-container { + position: relative; + width: 100%; +} + +.toggle-password { + position: absolute; + top: 40%; + right: 15px; + transform: translateY(-50%); + cursor: pointer; +} + +.toggle-password i { + font-size: 18px; +} + +button { + font-size: 20px; + font-weight: 600; + line-height: 32px; + color: var(--secondary-color-gray100); + align-items: center; + justify-content: center; + width:100%; + border-radius: 40px; + outline: none; + border: none; + padding: 16px 124px 16px 124px; +} + +.button-off { + background-color: var(--secondary-color-gray400); +} + +.button-on { + background-color: var(--primary-color100); +} + +button.active { + background-color: var(--primary-color100); + cursor: pointer; +} + + +.social-login-box { + background-color: #e6f2ff; + border-radius: 8px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 640px; + height: 74px; + padding: 16px 23px 16px 23px; + margin-top: 24px; +} + + +.social-login { + text-decoration: none; +} + + +.sign-up-login { + margin-top: 24px; +} + + +input:focus { + border: 2px solid var(--primary-color100); +}