diff --git a/banner_bt.png b/banner_bt.png new file mode 100644 index 000000000..0dd77302d Binary files /dev/null and b/banner_bt.png differ diff --git a/banner_image.png b/banner_image.png new file mode 100644 index 000000000..7cf217f2f Binary files /dev/null and b/banner_image.png differ diff --git a/bottom_banner_img.png b/bottom_banner_img.png new file mode 100644 index 000000000..175fd317b Binary files /dev/null and b/bottom_banner_img.png differ diff --git a/faq.html b/faq.html new file mode 100644 index 000000000..cb6385846 --- /dev/null +++ b/faq.html @@ -0,0 +1,12 @@ + + + + + 판다마켓 + + + + + + + \ No newline at end of file diff --git a/home_sec1_img.png b/home_sec1_img.png new file mode 100644 index 000000000..9257b5c00 Binary files /dev/null and b/home_sec1_img.png differ diff --git a/home_sec2_img.png b/home_sec2_img.png new file mode 100644 index 000000000..f828d4df9 Binary files /dev/null and b/home_sec2_img.png differ diff --git a/home_sec3_img.png b/home_sec3_img.png new file mode 100644 index 000000000..f9a3271e1 Binary files /dev/null and b/home_sec3_img.png differ diff --git a/home_style.css b/home_style.css new file mode 100644 index 000000000..a982527e3 --- /dev/null +++ b/home_style.css @@ -0,0 +1,575 @@ +*{ + box-sizing: border-box; +} + +header{ + position: sticky; + top: 0px; + height: 70px; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 10px 0; + background-color: #FFFFFF; +} + + +.page_logo{ + display: flex; + align-items: center; + gap: 5px; + margin-left: 200px; +} + +button{ + cursor: pointer; +} + +.logo_button:hover{ + cursor: pointer; +} + +.login_bt{ + font-family: pretendard; + font-size: 16px; + font-weight: 600; + line-height: 19.09px; + margin-right: 200px; + padding: 10px 20px; + text-align: center; + color: #FFFFFF; + background-color: #3692FF; + border-radius: 8px; + border: none; + width: 128px; + height: 48px; +} + +.login_bt:hover{ + background-color: #1967D6; + transition: 0.3s; +} + +.login_bt:active{ + background-color: #1251AA; +} + +.header_spacer{ + flex-grow: 1; + max-width: 1241px; +} + +.top_banner{ + height: 540px; + display:flex; + justify-content: center; + background-color: #CFE5FF; + overflow: hidden; +} + +.banner_bt{ + font-family: pretendard; + font-size: 20px; + font-weight: 600; + line-height: 24px; + padding: 16px 124px; + text-align: center; + color: #FFFFFF; + background-color: #3692FF; + border-radius: 40px; + border: none; + width: 357px; + height: 56px; + gap: 10px +} + +.top_center{ + display:flex; +} + +.top_left_spacer{ + width: 360px; + flex-grow: 1; +} + +.top_right_spacer{ + width: 223px; + flex-grow: 1; +} + + +.banner_txt_bt{ + display: flex; + flex-direction: column; +} + +.banner_bt:hover{ + background-color: #1967D6; + transition: 0.3s; +} + +.banner_bt:active{ + background-color: #1251AA; +} + +.top_center{ + display: flex; + align-items: center; +} + +.banner_image{ + margin: 93px -16px 0px 0px; +} + +.banner_text{ + font: #374151; + font-family: pretendard; + font-weight: 700; + font-size: 40px; + line-height: 56px; + width: 295px; + height: 112px; +} + +.home_main_sec1{ + display: flex; + justify-items: center; + +} + +.home_main_spacer{ + width: 360px; + flex-grow: 1; +} + +.home_main_sec1 > .home_container{ + display: flex; + justify-content: flex-start; + width: 1200px; + padding: 137.5px 0; + padding-right: 212px; +} + +.sec_img{ + width: 588px; + height: 444px; +} + +.home_main_sec1 .sec_txt{ + margin-left: 64px; + display: flex; + justify-content: center; + flex-direction: column; + width: Hug (303px); + height: Hug (194px); + gap: 24px; +} + +.sec_txt_tag{ + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 25.2px; + text-align: left; + color: #3692FF; +} + +.sec_txt_title{ + width: 343px; + height: 112px; + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02px; + text-align: left; + color: #374151; +} + +.sec_txt_content{ + font-family: Pretendard; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + letter-spacing: 0.08px; + text-align: left; + color: #374151; + width: 343px; + height: 58px; + +} + +.home_main_sec2{ + display: flex; +} + +.home_main_sec2 > .home_container{ + display: flex; + justify-content: flex-end; + width: 1200px; + padding: 137.5px 0; + padding-left: 212px; +} + +.home_main_sec2 .sec_txt{ + margin-right: 64px; + display: flex; + justify-content: center; + flex-direction: column; + width: Hug (303px); + height: Hug (194px); + gap: 24px; +} + +.home_main_sec2 .sec_txt .sec_txt_title{ + text-align: right; +} + +.home_main_sec2 .sec_txt .sec_txt_tag{ + text-align: right; +} + +.home_main_sec2 .sec_txt .sec_txt_content{ + text-align: right; +} + +.home_main_sec3{ + display: flex; +} + +.home_main_sec3 > .home_container{ + display: flex; + justify-content: flex-start; + width: 1200px; + padding: 137.5px 0; +} + +.home_main_sec3 .sec_txt{ + margin-left: 64px; + display: flex; + justify-content: center; + flex-direction: column; + width: Hug (333px); + height: Hug (194px); + gap: 24px; +} + +.bottom_banner{ + display:flex; + background-color: #CFE5FF; +} + +.bottom_banner > .home_container{ + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.bottom_banner_txt{ + width: 296px; + height: 112px; + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02px; + text-align: left; + color: #374151; +} + +.bottom_banner.img{ + width: 996px; + height: 540px; +} + +footer{ + display:flex; + justify-content: center; + background-color: #111827; + height: 160px; +} + +.footer_menu{ + padding-top: 30px; + display: flex; + width: 1520px; + justify-content: space-between; +} + +.codeit-2024{ + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 19.09px; + text-align: center; + color: #9CA3AF; +} + +a{ + color: inherit; + text-decoration: none; + margin: 0 15px; +} + +.privacy_policy_and_faq{ + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 19.09px; + text-align: flex-start; + color: #E5E7EB; +} + +.sns_links{ + display: flex; + justify-content: space-between; + width: 116px; + align-items: flex-start; +} + +.facebook_bt{ + background:url("ic_facebook.png") no-repeat; + width: 20px; + height: 20px; + background-color: #111827; + border: none; +} + +.twitter_bt{ + background:url("ic_twitter.png") no-repeat; + width: 20px; + height: 20px; + background-color: #111827; + border: none; +} + +.youtube_bt{ + background:url("ic_youtube.png") no-repeat; + width: 20px; + height: 20px; + background-color: #111827; + border: none; +} + +.instagram_bt{ + background:url("ic_instagram.png") no-repeat; + width: 20px; + height: 20px; + background-color: #111827; + border: none; +} + + + +@media screen and (max-width: 1920px) { + header { + height: 3.3vw; + padding-left: 200px; + padding-right: 200px; + max-width: none; + } + + .image_logo{ + width: 2.1vw; + } + + .text_logo{ + width: 5.4vw; + } + + .login_bt { + font-size: 0.8125vw; + line-height: 0.969414vw; + padding: 0.609375vw 1.015625vw; + width: 6.6vw; + height: 2.5vw; + margin-right: 0px; + } + + .page_logo { + margin-left: 0px; + } + + .banner_bt{ + width: 18.6vw; + height: 2.9vw; + font-size: 1.05vw; + line-height: 1vw; + padding: 0.6vw 4.2vw; + } + + .header_spacer { + flex-grow: 1; + } + + + .top_banner{ + height: auto; + } + + + .banner_image{ + margin: 4.82205vw -0.8296vw 0vw 0vw; + width: 52vw; + } + + .banner_text{ + font-size: 2.074vw; + line-height: 2.9036vw; + width: 15.29575vw; + height: 5.8072vw; + } + + .home_main_sec1 > .home_container{ + width: 62.5vw; + padding: 6.875vw 0; + padding-right: 10.5vw; + } + + .home_main_sec2 > .home_container{ + width: 62.5vw; + padding: 6.875vw 0; + padding-left: 10.6vw; + } + + .home_main_sec3 > .home_container{ + width: 62.5vw; + padding: 6.875vw 0; + padding-right: -1vw; + } + + .home_main_sec3 > .home_container > .sec_img{ + width: 33vw; + height: 23vw; + } + .sec_img{ + width: 33vw; + height: 23vw; + } + + .home_main_sec1 .sec_txt{ + margin-left: 3.2vw; + width: 18.65vw; + height: 23vw; + gap: 1.5vw; + } + + .home_main_sec2 .sec_txt{ + margin-right: 3.2vw; + width: 18.65vw; + height: 23vw; + gap: 1.5vw; + } + + .home_main_sec3 .sec_txt{ + margin-left: 3.2vw; + width: 18.65vw; + height: 23vw; + gap: 1.5vw; + } + + .sec_txt_tag{ + font-size: 0.9vw; + line-height: 1.205vw; + } + + .sec_txt_title{ + font-size: 2.1vw; + letter-spacing: 0.02vw; + width: 18vw; + height: 5.5vw; + line-height: 2.8vw; + } + + + .sec_txt_content{ + font-size: 1.2vw; + line-height: 1.44vw; + letter-spacing: 0.004vw; + width: 18vw; + height: 2.9vw; + } + + .bottom_banner_txt{ + height: 5.6vw; + width: 14.8vw; + font-family: Pretendard; + font-size: 2vw; + font-weight: 700; + line-height: 2.8vw; + letter-spacing: 0.001vw; + text-align: left; + color: #374151; + } + + .bottom_banner_img{ + width: 48vw; + height: 27vw;; + } + + .codeit-2024{ + font-size: 0.8vw; + line-height: 0.95vw; + } + + .privacy_policy_and_faq{ + line-height: 0.9vw; + font-size: 0.8vw + } + + footer{ + display:flex; + justify-content: center; + background-color: #111827; + height: 8.4vw; + } + + .sns_links{ + width: 5.8vw; + } + + .footer_menu{ + padding-top: 2vw; + display: flex; + width: 76vw; + justify-content: space-between; + } + + .facebook_bt{ + width: 1vw; + height: 1vw; + background-color: #111827; + background-position: center; + background-size: cover; + border: none; + } + + .twitter_bt{ + width: 1vw; + height: 1vw; + background-color: #111827; + background-position: center; + background-size: cover; + border: none; + } + + .youtube_bt{ + width: 1vw; + height: 1vw; + background-color: #111827; + background-position: center; + background-size: cover; + border: none; + } + + .instagram_bt{ + width: 1vw; + height: 1vw; + background-color: #111827; + background-position: center; + background-size: cover; + border: none; + } +} \ No newline at end of file diff --git a/ic_eye.png b/ic_eye.png new file mode 100644 index 000000000..5dc09fbe1 Binary files /dev/null and b/ic_eye.png differ diff --git a/ic_facebook.png b/ic_facebook.png new file mode 100644 index 000000000..a3e343c77 Binary files /dev/null and b/ic_facebook.png differ diff --git a/ic_google.png b/ic_google.png new file mode 100644 index 000000000..e8f90b22d Binary files /dev/null and b/ic_google.png differ diff --git a/ic_instagram.png b/ic_instagram.png new file mode 100644 index 000000000..c47e044d1 Binary files /dev/null and b/ic_instagram.png differ diff --git a/ic_kakao.png b/ic_kakao.png new file mode 100644 index 000000000..6922673a0 Binary files /dev/null and b/ic_kakao.png differ diff --git a/ic_twitter.png b/ic_twitter.png new file mode 100644 index 000000000..3f74b730a Binary files /dev/null and b/ic_twitter.png differ diff --git a/ic_youtube.png b/ic_youtube.png new file mode 100644 index 000000000..874150b0b Binary files /dev/null and b/ic_youtube.png differ diff --git a/image_logo.png b/image_logo.png new file mode 100644 index 000000000..0a1a4f202 Binary files /dev/null and b/image_logo.png differ diff --git a/image_logo_big.png b/image_logo_big.png new file mode 100644 index 000000000..e6472cdf5 Binary files /dev/null and b/image_logo_big.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..799e96687 --- /dev/null +++ b/index.html @@ -0,0 +1,96 @@ + + + + + 판다마켓 + + + + + +
+ +
+ +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
Hot item
+
인기 상품을
확인해 보세요
+
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
+
+ +
+
+
+
+ +
+
Search
+
구매를 원하는
상품을 검색하세요
+
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
+
+ + +
+
+
+
+ + +
+
Register
+
판매를 원하는
상품을 등록하세요
+
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
+
+ +
+
+
+
+ +
믿을 수 있는
판다마켓 중고거래
+ + +
+
+ + + \ No newline at end of file diff --git a/items.html b/items.html new file mode 100644 index 000000000..cb6385846 --- /dev/null +++ b/items.html @@ -0,0 +1,12 @@ + + + + + 판다마켓 + + + + + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 000000000..0405c12f4 --- /dev/null +++ b/login.html @@ -0,0 +1,41 @@ + + + + + 판다마켓 + + + + + +
+ + +
+
+
+ + +
+
+ 비밀번호 +
+ + +
+
+ +
+ +
+ + +
+
+
+ 판다마켓이 처음이신가요?회원가입 +
+
+ + + \ No newline at end of file diff --git a/login_bt.png b/login_bt.png new file mode 100644 index 000000000..5f3a7d2fa Binary files /dev/null and b/login_bt.png differ diff --git a/privacy.html b/privacy.html new file mode 100644 index 000000000..cb6385846 --- /dev/null +++ b/privacy.html @@ -0,0 +1,12 @@ + + + + + 판다마켓 + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 000000000..9a5634b2d --- /dev/null +++ b/script.js @@ -0,0 +1,41 @@ +document.addEventListener('DOMContentLoaded', () => { + const form = document.querySelector('.login_block'); + const emailInput = form.querySelector('#email'); + const passwordInput = form.querySelector('#password'); + const submitButton = form.querySelector('.login_bt'); + const nicknameInput = form.querySelector('#nickname'); + const passwordCheckInput = form.querySelector('#password_check'); + const signUpButton = form.querySelector('.sign_up_bt'); + + function checkInputs() { + const emailValue = emailInput.value; + const emailFilled = emailValue.includes('@') && emailValue.includes('.') && emailValue.indexOf('@') < emailValue.lastIndexOf('.'); + const passwordFilled = passwordInput.value.trim() !== ''; + if(!signUpButton){ + if (emailFilled && passwordFilled) { + submitButton.disabled = false; + submitButton.classList.add('enabled'); + } else { + submitButton.disabled = true; + submitButton.classList.remove('enabled'); + } + } + else{ + const nicknameFilled = nicknameInput.value.trim() !== ''; + const passwordCheckFilled = passwordCheckInput.value.trim() !== ''; + const passwordMatchChecked = passwordInput.value.trim() === passwordCheckInput.value.trim(); + if (emailFilled && passwordFilled && nicknameFilled && passwordCheckFilled && passwordMatchChecked) { + signUpButton.disabled = false; + signUpButton.classList.add('enabled'); + } else { + signUpButton.disabled = true; + signUpButton.classList.remove('enabled'); + } + nicknameInput.addEventListener('input', checkInputs); + passwordCheckInput.addEventListener('input', checkInputs); + } + } + + emailInput.addEventListener('input', checkInputs); + passwordInput.addEventListener('input', checkInputs); +}); \ No newline at end of file diff --git a/sign_style.css b/sign_style.css new file mode 100644 index 000000000..2fcafa8d7 --- /dev/null +++ b/sign_style.css @@ -0,0 +1,278 @@ +:root{ + --gray900: #111827; + --gray800: #1F2937; + --gray700: #374151; + --gray600: #4B5563; + --gray500: #6B7280; + --gray400: #9CA3AF; + --gray200: #E5E7EB; + --gray100: #F3F4F6; + --gray50: #F9FAFB; + --blue: #3692FF; + +} + +body{ + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; +} + +.logo_block{ + margin-top: 60px; + display:flex; + height: 132px; + width: 396px; + align-items: center; + gap: 20px; + justify-content: center; + margin-bottom: 40px; +} + +input:focus{ + border: 1px var(--blue) solid; + outline: none; +} + +.text_logo_bt{ + width: 266px; + height: 90px; + border:none; + background-image: url("text_logo_big.png"); + background-color: #FFFFFF; + background-repeat: no-repeat; + background-position: center; +} + +button:hover{ + cursor: pointer; +} + +.login_block{ + display: flex; + flex-direction: column; + width: 640px; + height: 664px; + justify-content: space-around; + gap: 24px; +} + +.email_input_block{ + display: flex; + flex-direction: column; + gap: 16px; +} + +.nickname_input_block{ + display: flex; + flex-direction: column; + gap: 16px; +} + + +.pw_input_block{ + position:relative; + display: flex; + flex-direction: column; + gap: 16px; +} + +.pw_check_input_block{ + position:relative; + display: flex; + flex-direction: column; + gap: 16px; +} + +.login_bt{ + border: none; +} + +.sign_up_bt{ + border: none; +} + +.easy_login_block{ + display: flex; + justify-content: space-between; + align-items: center; + background-color: #E6F2FF; + height: 74px; + padding: 0 23px; + border-radius: 8px; +} + +.buttons{ + display: flex; + gap: 16px; +} + +.new_visitor_chk{ + text-align: center; +} + +.email_txt{ + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 21.48px; + text-align: left; +} + +.nickname_txt{ + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 21.48px; + text-align: left; +} + +.pw_txt{ + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 21.48px; + text-align: left; +} + +.pw_check_txt{ + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 21.48px; + text-align: left; +} + +.email_input{ + border: none; + background-color: var(--gray100); + padding: 12px 24px; + border-radius: 12px; + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; +} + +.nickname_input{ + border: none; + background-color: var(--gray100); + padding: 12px 24px; + border-radius: 12px; + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; +} + +.pw_input{ + width: 592px; + border: none; + background-color:var(--gray100); + padding: 12px 24px; + border-radius: 12px; + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; +} + +.pw_check_input{ + width: 592px; + border: none; + background-color:var(--gray100); + padding: 12px 24px; + border-radius: 12px; + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; +} + +.pw_eye{ + position: absolute; + right: 24px; + top: 12px; +} + +.pw_input_box{ + position:relative; +} + +.pw_check_eye{ + position: absolute; + right: 24px; + top: 12px; +} + +.pw_check_input_box{ + position:relative; +} + +.login_bt{ + font-family: Pretendard; + font-size: 20px; + font-weight: 600; + line-height: 24px; + text-align: center; + color: #FFFFFF; + padding:16px; + background-color: var(--gray400); + border-radius: 40px; +} + +.sign_up_bt{ + font-family: Pretendard; + font-size: 20px; + font-weight: 600; + line-height: 24px; + text-align: center; + color: #FFFFFF; + padding:16px; + background-color: var(--gray400); + border-radius: 40px; +} + +.easy_login_txt{ + font-family: Pretendard; + font-size: 16px; + font-weight: 500; + line-height: 24px; + text-align: left; +} + +.google_bt{ + background-image: url("ic_google.png"); + height: 42px; + width: 42px; + background-position: center; + background-size: cover; + border-radius: 90px; + border: 1px var(--gray50) solid; +} + +.kakao_bt{ + background-image: url("ic_kakao.png"); + height: 42px; + width: 42px; + background-position: center; + background-size: cover; + border: none; +} + +.new_visitor_chk{ + font-family: Pretendard; + font-size: 15px; + font-weight: 500; + line-height: 17.9px; + text-align: center; +} + +button.enabled { + background-color: var(--blue); +} \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..eea50d3c1 --- /dev/null +++ b/signup.html @@ -0,0 +1,52 @@ + + + + + 판다마켓 + + + + + +
+ + +
+
+
+ + +
+
+ 닉네임 + +
+
+ 비밀번호 +
+ + +
+
+
+ 비밀번호 확인 +
+ + +
+
+ +
+ +
+ + +
+
+
+ 이미 회원이신가요? 로그인 +
+
+ + + \ No newline at end of file diff --git a/text_logo.png b/text_logo.png new file mode 100644 index 000000000..33ebb81e2 Binary files /dev/null and b/text_logo.png differ diff --git a/text_logo_big.png b/text_logo_big.png new file mode 100644 index 000000000..2c99442c6 Binary files /dev/null and b/text_logo_big.png differ