diff --git a/images/bg/desktop_01.png b/images/bg/desktop_01.png new file mode 100644 index 0000000..ff9e502 Binary files /dev/null and b/images/bg/desktop_01.png differ diff --git a/images/bg/desktop_05.png b/images/bg/desktop_05.png new file mode 100644 index 0000000..4fc8f5e Binary files /dev/null and b/images/bg/desktop_05.png differ diff --git a/images/bg/img_home_01.png b/images/bg/img_home_01.png new file mode 100644 index 0000000..0c2bc5c Binary files /dev/null and b/images/bg/img_home_01.png differ diff --git a/images/bg/img_home_02.png b/images/bg/img_home_02.png new file mode 100644 index 0000000..8dd9dda Binary files /dev/null and b/images/bg/img_home_02.png differ diff --git a/images/bg/img_home_03.png b/images/bg/img_home_03.png new file mode 100644 index 0000000..cda3a2a Binary files /dev/null and b/images/bg/img_home_03.png differ diff --git a/images/icon/btn_visibility_off.png b/images/icon/btn_visibility_off.png new file mode 100644 index 0000000..c61b09f Binary files /dev/null and b/images/icon/btn_visibility_off.png differ diff --git a/images/icon/btn_visibility_on.png b/images/icon/btn_visibility_on.png new file mode 100644 index 0000000..5263589 Binary files /dev/null and b/images/icon/btn_visibility_on.png differ diff --git a/images/icon/ic_facebook.png b/images/icon/ic_facebook.png new file mode 100644 index 0000000..93506ba Binary files /dev/null and b/images/icon/ic_facebook.png differ diff --git a/images/icon/ic_google.png b/images/icon/ic_google.png new file mode 100644 index 0000000..e37643a Binary files /dev/null and b/images/icon/ic_google.png differ diff --git a/images/icon/ic_instagram.png b/images/icon/ic_instagram.png new file mode 100644 index 0000000..8a15c43 Binary files /dev/null and b/images/icon/ic_instagram.png differ diff --git a/images/icon/ic_kakao.png b/images/icon/ic_kakao.png new file mode 100644 index 0000000..99bd4ca Binary files /dev/null and b/images/icon/ic_kakao.png differ diff --git a/images/icon/ic_twitter.png b/images/icon/ic_twitter.png new file mode 100644 index 0000000..1d0aa67 Binary files /dev/null and b/images/icon/ic_twitter.png differ diff --git a/images/icon/ic_youtube.png b/images/icon/ic_youtube.png new file mode 100644 index 0000000..53df4e6 Binary files /dev/null and b/images/icon/ic_youtube.png differ diff --git a/images/logo/panda_logo.png b/images/logo/panda_logo.png new file mode 100644 index 0000000..c2ab12d Binary files /dev/null and b/images/logo/panda_logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4ca3b4b --- /dev/null +++ b/index.html @@ -0,0 +1,96 @@ + + + + + 판다마켓 + + + + +
+
+
+
+
+ 랜딩페이지 첫 화면 배경이미지 +
+

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

+
+
+ 구경하러 가기 +
+
+
+
+
+ Hot item 인기상품을 확인해 보세요. +
+

Hot item

+

인기 상품을
확인해 보세요

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

Search

+

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

+ 구매하고 싶은 물품은 검색해서
쉽게 찾아보세요 +
+ Search 구매를 원하는 상품을 검색하세요. +
+
+
+
+ Register 판매를 원하는 상품을 등록하세요. +
+

Register

+

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

+ 어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요 +
+
+
+
+
+ 믿을 수 있는 판다마켓 중고 거래. +
+
+
+ + + + diff --git a/primary/faq.html b/primary/faq.html new file mode 100644 index 0000000..d18cf3a --- /dev/null +++ b/primary/faq.html @@ -0,0 +1,16 @@ + + + + + 판다마켓-FAQ + + + + + +
+ FAQ +
+ + + diff --git a/primary/login.html b/primary/login.html new file mode 100644 index 0000000..0aef730 --- /dev/null +++ b/primary/login.html @@ -0,0 +1,57 @@ + + + + + 판다마켓-로그인 + + + + + + + diff --git a/primary/privacy.html b/primary/privacy.html new file mode 100644 index 0000000..26a9052 --- /dev/null +++ b/primary/privacy.html @@ -0,0 +1,16 @@ + + + + + 판다마켓-프라이버시 + + + + + +
+ 프라이버시 +
+ + + diff --git a/primary/signup.html b/primary/signup.html new file mode 100644 index 0000000..99cc0b6 --- /dev/null +++ b/primary/signup.html @@ -0,0 +1,68 @@ + + + + + 판다마켓-회원가입 + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..49b766f --- /dev/null +++ b/style.css @@ -0,0 +1,320 @@ +/* 공통 */ +html { + font-family: Pretendard, sans-serif; + word-break: keep-all; +} +body { + background-color: #fff; + margin: 0; +} +.wrap { + max-width: 988px; + width: 100%; + margin: 0 auto; + background-color: #FCFCFC; +} +header { + padding: 16px; + font-weight: 700; + display: flex; + position: fixed; + top: 0; + width: 100%; + z-index: 99; + background-color: #fff; + border-bottom: 1px solid #dfdfdf; +} +footer { + padding: 64px 180px 80px; + background-color: #111827; +} +footer > .wrap { + background-color: #111827; +} +.footer-content { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 50px 0; + font-size: 16px; + font-weight: 400; + align-items: center; + justify-content: space-between; +} +.footer-content a, +.footer-content span { + color: #E5E7EB; + text-decoration: none; +} +.info { + display: flex; + justify-content: center; + gap: 30px; +} +.info a:first-of-type { + margin-right: 8%; +} +.icons { + text-align: right; +} + + +/* 메인페이지 */ +.logo-box { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + padding: 0 400px; +} +.logo-box img { + width: 153px; +} +.btn { + background-color: #3692FF; +} +.btn-login { + font-size: 16px; + font-weight: 600; + color: #F3F4F6; + text-decoration: none; + padding: 12px 23px; + border-radius: 8px; +} +.btn-login:hover { + background-color: #1967D6; +} +.container { + width: 100%; +} +.section01 { + margin-top: 87px; +} +.overlap-box { + position: relative; +} +.over-txt { + position: absolute; + top: 29%; + left: 20%; + width: 40%; + text-align: left; +} +.over-txt p { + font-weight: 700; + font-size: 2.3vw; +} +.over-btn { + position: absolute; + bottom: 22%; + left: 20%; + width: 18%; +} +.btn-more { + display: inline-block; + width: 100%; + padding: 16px 0; + text-decoration: none; + color: #F9FAFB; + border-radius: 40px; + font-size: 1.1vw; + font-weight: 600; +} +.btn-more:hover { + background-color: #1967D6; +} +.landing:not(:first-of-type):not(:last-of-type) { + text-align: center; + margin: 7% 0; + display: flex; + align-items: center; +} +.landing.section01, +.landing.section05 { + background-color: #CFE5FF; + width: 100%; + text-align: center; +} +.landing.section01 img, +.landing.section05 img { + max-width: 100%; +} +.section02 .wrap, +.section04 .wrap { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 20px; +} +.landing-text-right { + display: flex; + flex-direction: column; + align-items: flex-start; + text-align: left; + padding-left: 6%; +} +.landing-text-right p:first-of-type { + color: #3692FF; + font-weight: 800; + font-size: 18px; + line-height: 140%; +} +.landing-text-right p:last-of-type { + color: #374151; + font-weight: 700; + font-size: 2.3vw; + margin: 10px 0 30px 0; +} +.landing-text-right span { + color: #374151; + font-weight: 500; + font-size: 24px; +} +.section03 .wrap { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 20px; + justify-content: space-between; +} +.landing-text-left { + display: flex; + flex-direction: column; + align-items: flex-end; + text-align: right; + padding-left: 6%; +} +.landing-text-left p:first-of-type { + color: #3692FF; + font-weight: 800; + font-size: 18px; + line-height: 140%; +} +.landing-text-left p:last-of-type { + color: #374151; + font-weight: 700; + font-size: 2.3vw; + margin: 10px 0 30px 0; +} +.landing-text-left span { + color: #374151; + font-weight: 500; + font-size: 24px; +} + + +/* 로그인,회원가입 페이지 */ +.login-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + margin-top: 6%; +} +.login-container.mt-1 { + margin-top: 1%; +} +.login-box { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + width: 640px; + height: 618px; +} +.login-logo { + width: 396px; +} +.login-input { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + width: 100%; + margin-top: 40px; +} +.toggle-icon { + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + width: 22px; + height: 22px; + cursor: pointer; + top: 56%; +} +.login-input > div { + width: 100%; + display: block; + position: relative; +} +.login-input label { + position: relative; + display: block; + font-weight: 700; + font-size: 18px; + line-height: 26px; + margin-bottom: 16px; +} +.login-input input { + position: relative; + width: 100%; + box-sizing: border-box; + background-color: #F3F4F6; + border-radius: 12px; + color: #1F2937; + font-size: 16px; + font-weight: 400; + border: none; + padding: 19px; + margin-bottom: 24px; +} +.login-input input:focus-visible { + outline: none; +} +.login-button { + width: 100%; +} +.btn-big-login { + display: inline-block; + width: 100%; + font-size: 20px; + font-weight: 600; + color: #F3F4F6; + text-decoration: none; + border-radius: 40px; + text-align: center; + padding: 18px 0; +} +.btn-big-login:hover { + background-color: #1967D6; +} +.easy-login { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + margin-top: 24px; + background-color: #E6F2FF; + padding: 16px 23px; + border-radius: 8px; +} +.easy-login span { + font-weight: 500; + font-size: 16px; +} +.easy-login div img { + width: 42px; + margin-left: 16px; +} +.sign-link p { + font-size: 14px; + font-weight: 500; + color: #1F2937; +} +.sign-link p > a { + color: #3692FF; +} \ No newline at end of file diff --git a/sub/items.html b/sub/items.html new file mode 100644 index 0000000..03394d1 --- /dev/null +++ b/sub/items.html @@ -0,0 +1,16 @@ + + + + + 판다마켓-아이템보기 + + + + + +
+ 아이템보기 +
+ + + \ No newline at end of file