diff --git a/Img_home_01.png b/Img_home_01.png deleted file mode 100644 index 7609ab19..00000000 Binary files a/Img_home_01.png and /dev/null differ diff --git a/Img_home_02.png b/Img_home_02.png deleted file mode 100644 index 71e4db7b..00000000 Binary files a/Img_home_02.png and /dev/null differ diff --git a/Img_home_03.png b/Img_home_03.png deleted file mode 100644 index ef5972b3..00000000 Binary files a/Img_home_03.png and /dev/null differ diff --git a/Img_home_bottom.png b/Img_home_bottom.png deleted file mode 100644 index 9b855d2d..00000000 Binary files a/Img_home_bottom.png and /dev/null differ diff --git a/Img_home_top.png b/Img_home_top.png deleted file mode 100644 index 0c34c912..00000000 Binary files a/Img_home_top.png and /dev/null differ diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..80033ab3 --- /dev/null +++ b/faq.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/home.html b/home.html deleted file mode 100644 index 967ca062..00000000 --- a/home.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - 판다마켓 - - - - -
- - 로그인 -
- -
-
-
-

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

- 구경하러 가기 -
- -
-
- -
-
-
- -
-

Hot item

-

인기 상품을
확인해보세요

-

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

-
-
-
-
-
-
-

Search

-

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

-

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

-
- -
-
-
-
- -
-

Register

-

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

-

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

-
-
-
-
- -
-
-
-

- 믿을 수 있는
- 판다마켓 중고 거래 -

-
- -
-
- - - - \ No newline at end of file diff --git a/ic_facebook.png b/ic_facebook.png deleted file mode 100644 index 58333d45..00000000 Binary files a/ic_facebook.png and /dev/null differ diff --git a/ic_instagram.png b/ic_instagram.png deleted file mode 100644 index 98e24ea6..00000000 Binary files a/ic_instagram.png and /dev/null differ diff --git a/ic_twitter.png b/ic_twitter.png deleted file mode 100644 index 5df0852d..00000000 Binary files a/ic_twitter.png and /dev/null differ diff --git a/ic_youtube.png b/ic_youtube.png deleted file mode 100644 index f51731d4..00000000 Binary files a/ic_youtube.png and /dev/null differ diff --git a/img/Img_home_01.png b/img/Img_home_01.png new file mode 100644 index 00000000..1c6d470b Binary files /dev/null and b/img/Img_home_01.png differ diff --git a/img/Img_home_02.png b/img/Img_home_02.png new file mode 100644 index 00000000..049f5785 Binary files /dev/null and b/img/Img_home_02.png differ diff --git a/img/Img_home_03.png b/img/Img_home_03.png new file mode 100644 index 00000000..0b5f4dfd Binary files /dev/null and b/img/Img_home_03.png differ diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png new file mode 100644 index 00000000..4e80f9a5 Binary files /dev/null and b/img/Img_home_bottom.png differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png new file mode 100644 index 00000000..6d89fda3 Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/google.png b/img/google.png new file mode 100644 index 00000000..17ad6e58 Binary files /dev/null and b/img/google.png differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png new file mode 100644 index 00000000..e92003b5 Binary files /dev/null and b/img/ic_facebook.png differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png new file mode 100644 index 00000000..8c1837df Binary files /dev/null and b/img/ic_instagram.png differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png new file mode 100644 index 00000000..216c58d2 Binary files /dev/null and b/img/ic_twitter.png differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png new file mode 100644 index 00000000..27d12233 Binary files /dev/null and b/img/ic_youtube.png differ diff --git a/img/kakaotalk.png b/img/kakaotalk.png new file mode 100644 index 00000000..cf52b04c Binary files /dev/null and b/img/kakaotalk.png differ diff --git a/img/logo_big.png b/img/logo_big.png new file mode 100644 index 00000000..89751ba8 Binary files /dev/null and b/img/logo_big.png differ diff --git a/img/logo_small.png b/img/logo_small.png new file mode 100644 index 00000000..3d8dba29 Binary files /dev/null and b/img/logo_small.png differ diff --git a/img/panda_favicon.png b/img/panda_favicon.png new file mode 100644 index 00000000..9b5d80aa Binary files /dev/null and b/img/panda_favicon.png differ diff --git a/img/visibility_off.png b/img/visibility_off.png new file mode 100644 index 00000000..1f9ed426 Binary files /dev/null and b/img/visibility_off.png differ diff --git a/img/visibility_on.png b/img/visibility_on.png new file mode 100644 index 00000000..f65b1ea7 Binary files /dev/null and b/img/visibility_on.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..e46e1b62 --- /dev/null +++ b/index.html @@ -0,0 +1,107 @@ + + + + + + 판다마켓 + + + + + + + +
+ +
+ +
+
+
+

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

+ 구경하러 가기 +
+
+ +
+
+
+ +
+
+
+ +
+

Hot item

+

인기 상품을
확인해보세요

+

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

+
+
+
+
+
+
+

Search

+

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

+

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

+
+ +
+
+
+
+ +
+

Register

+

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

+

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

+
+
+
+
+ +
+
+
+

+ 믿을 수 있는
+ 판다마켓 중고 거래 +

+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/items.html b/items.html new file mode 100644 index 00000000..80033ab3 --- /dev/null +++ b/items.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 00000000..b866cb62 --- /dev/null +++ b/login.html @@ -0,0 +1,47 @@ + + + + + + 판다마켓 - 로그인 + + + + + + + +
+
+ +
+ +
+ + +
+
+ + + +
+ + +
+ 간편 로그인하기 + +
+
+ 판다마켓이 처음이신가요? + +
+
+ + \ No newline at end of file diff --git a/logo.png b/logo.png deleted file mode 100644 index ef87eab4..00000000 Binary files a/logo.png and /dev/null differ diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..80033ab3 --- /dev/null +++ b/privacy.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/sign-up.html b/sign-up.html new file mode 100644 index 00000000..6c8bc079 --- /dev/null +++ b/sign-up.html @@ -0,0 +1,56 @@ + + + + + + 판다마켓 - 회원가입 + + + + + + + +
+
+ +
+ +
+ + +
+
+ + +
+
+ + + +
+
+ + + +
+ + +
+ 간편 로그인하기 + +
+
+ 이미 회원이신가요? + +
+
+ + \ No newline at end of file diff --git a/style/global.css b/style/global.css new file mode 100644 index 00000000..280cf75f --- /dev/null +++ b/style/global.css @@ -0,0 +1,17 @@ +:root { + --gray900: #111827; + --gray800: #1F2937; + --gray700: #374151; + --gray600: #4B5563; + --gray500: #6B7280; + --gray400: #9CA3AF; + --gray200: #E5E7EB; + --gray100: #F3F4F6; + --gray50: #F9FAFB; + + --blue: #3692FF; + --bluehover:#1967D6; + --blueactive: #1251AA; + + --red: #F74747; +} \ No newline at end of file diff --git a/home.css b/style/home.css similarity index 68% rename from home.css rename to style/home.css index 01411ab3..22024a01 100644 --- a/home.css +++ b/style/home.css @@ -1,9 +1,6 @@ -* { - box-sizing: border-box; -} - html { font-size: 16px; + font-weight: 500; font-family: 'Pretendard', sans-serif; } @@ -13,6 +10,12 @@ body { } header { + position: sticky; + top: 0; + background-color: #FFFFFF; +} + +nav { max-width: 1520px; min-width: 1120px; width: 100%; @@ -23,16 +26,19 @@ header { align-items: center; } -.login_button { +.logo { + height: 51px; +} + +.login-button { width: 128px; height: 48px; padding: 12px 23px; border-radius: 8px; - background-color: #3692FF; + background-color: var(--blue); font-weight: 600; text-align: center; - text-decoration: none; - color: #F3F4F6; + color: var(--gray100); line-height: 26px; } @@ -42,7 +48,8 @@ header { } .top { - padding-top: 200px; + display: flex; + align-items: flex-end; } .container { @@ -52,6 +59,11 @@ header { margin: 0 auto; } +.top-img { + height: 340px; + vertical-align: bottom; +} + main section { padding: 138px 0; } @@ -89,7 +101,7 @@ main .container { margin: 0; font-size: 40px; font-weight: 700; - color: #374151; + color: var(--gray700); line-height: 56px; } @@ -98,28 +110,33 @@ main .container { height: 56px; padding: 16px 124px; border-radius: 40px; - background-color: #3692FF; + background-color: var(--blue); font-size: 20px; font-weight: 600; - text-decoration: none; - color: #F9FAFB; + color: var(--gray50); } .description { font-size: 24px; font-weight: 500; - color: #374151; + color: var(--gray700); line-height: 32px; } .bottom { - padding-top: 143px; + display: flex; + align-items: flex-end; +} + +.bottom-img { + height: 397px; + vertical-align: bottom; } footer { height: 160px; padding: 32px 0; - background-color: #111827; + background-color: var(--gray900); } footer .container{ @@ -132,7 +149,7 @@ footer .container{ } footer .codeit { - color: #9CA3AF; + color: var(--gray400); } footer .link { @@ -142,10 +159,25 @@ footer .link { footer .link a { text-decoration: none; - color: #E5E7EB; + color: var(--gray200); } footer .sns { + margin: 0; display: flex; gap: 12px; +} + +footer .sns img { + height: 20px; +} + +.login-button:hover, +.shopping-button:hover { + background-color: var(--bluehover); +} + +.login-button:active, +.shopping-button:active { + background-color: var(--blueactive); } \ No newline at end of file diff --git a/style/login.css b/style/login.css new file mode 100644 index 00000000..8687ca99 --- /dev/null +++ b/style/login.css @@ -0,0 +1,102 @@ +html { + font-size: 16px; + font-weight: 500; + font-family: 'Pretendard', sans-serif; + } + +body { + margin: 0 auto; + width: 100%; +} + +form { + width: 640px; + margin: 230px auto; +} + +header { + display: flex; + justify-content: center; + margin-bottom: 24px; +} + +label { + display: inline-block; + width: 640px; + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +input { + display: inline-block; + padding: 16px 20px; + margin: 16px auto 24px; + width: 640px; + border-radius: 12px; + background-color: var(--gray100); + font-weight: 400; + color: var(--gray800); +} + +.password { + position: relative; +} + +.show-password { + width: 24px; + position: absolute; + right: 20px; + top: 53px; +} + +.login-button { + display: inline-block; + padding: 16px; + width: 640px; + border-radius: 40px; + background-color: var(--gray400); + font-weight: 600; + color: var(--gray100); +} + +.logo { + width: 396px; +} + +.quick-login { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 23px; + margin: 24px auto; + border-radius: 8px; + background-color: #E6F2FF; +} + +.sns { + display: flex; + align-items: center; + gap: 12px; +} + +.sns img { + width: 42px; +} + +.new-member { + display: flex; + justify-content: center; + gap: 4px; + text-align: center; + font-size: 14px; +} + +.sign-up { + text-decoration: underline; + color: var(--blue); +} + +.login-button:hover { + background-color: var(--blue); +} \ No newline at end of file diff --git a/style/reset.css b/style/reset.css new file mode 100644 index 00000000..c5555a99 --- /dev/null +++ b/style/reset.css @@ -0,0 +1,73 @@ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, h1, h2, h3, h4, p, +figure, blockquote, dl, dd { + margin-block-end: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul, +ol { + list-style: none; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, h2, h3, h4, +button, input, label { + line-height: 1.1; + border: none; +} + +/* Balance text wrapping on headings */ +h1, h2, +h3, h4 { + text-wrap: balance; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; + color: currentColor; +} + +a { + text-decoration: none; +} + +/* Inherit fonts for inputs and buttons */ +input, button, +textarea, select { + font-family: inherit; + font-size: inherit; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} + diff --git a/style/sign-up.css b/style/sign-up.css new file mode 100644 index 00000000..80a12dd8 --- /dev/null +++ b/style/sign-up.css @@ -0,0 +1,102 @@ +html { + font-size: 16px; + font-weight: 500; + font-family: 'Pretendard', sans-serif; + } + +body { + margin: 0 auto; + width: 100%; +} + +form { + width: 640px; + margin: 60px auto; +} + +header { + display: flex; + justify-content: center; + margin-bottom: 24px; +} + +label { + display: inline-block; + width: 640px; + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +input { + display: inline-block; + padding: 16px 20px; + margin: 16px auto 24px; + width: 640px; + border-radius: 12px; + background-color: var(--gray100); + font-weight: 400; + color: var(--gray800); +} + +.password, .check-password { + position: relative; +} + +.show-password { + width: 24px; + position: absolute; + right: 20px; + top: 53px; +} + +.sign-up-button { + display: inline-block; + padding: 16px; + width: 640px; + border-radius: 40px; + background-color: var(--gray400); + font-weight: 600; + color: var(--gray100); +} + +.logo { + width: 396px; +} + +.quick-login { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 23px; + margin: 24px auto; + border-radius: 8px; + background-color: #E6F2FF; +} + +.sns { + display: flex; + align-items: center; + gap: 12px; +} + +.sns img { + width: 42px; +} + +.already-member { + display: flex; + justify-content: center; + gap: 4px; + text-align: center; + font-size: 14px; +} + +.login { + text-decoration: underline; + color: var(--blue); +} + +.sign-up-button:hover { + background-color: var(--blue); +} \ No newline at end of file