diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 0a474d19..00000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..524ab92b --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +._.DS_Store +**/.DS_Store +**/._.DS_Store \ No newline at end of file diff --git a/styleLogin.css b/auth.css similarity index 51% rename from styleLogin.css rename to auth.css index fadb1cc0..ca45e701 100644 --- a/styleLogin.css +++ b/auth.css @@ -1,66 +1,91 @@ -* { - box-sizing: border-box; -} - -html { - font-family: Pretendard, sans-serif; - word-break: keep-all; -} - .content { - width: 640px; + max-width: 640px; margin: 100px auto; } .head-img { text-align: center; + padding: 20px; } .pandaMarketImg { - width: 396px; - height: 132px; + max-width: 396px; + width: 100%; + height: auto; +} + +.input-content { + display: flex; + flex-direction: column; + gap: 20px; +} + +.userName-label { + font-size: 16px; + font-weight: 700; } -#userName { +.userName { background-color: #f3f4f6; - width: 640px; + max-width: 640px; height: 56px; border-radius: 12px; border: none; font-size: 16px; - padding: 0 20px; font-weight: 400; + padding-left: 20px; } -#userPassword { +.userPassword-label { + font-size: 16px; + font-weight: 700; +} + +.userPassword { background-color: #f3f4f6; - width: 640px; + max-width: 640px; height: 56px; border-radius: 12px; border: none; font-size: 16px; - padding: 0 20px; font-weight: 400; + padding-left: 20px; } -.content-login { - border: none; +.checkPassword-label { + font-size: 16px; + font-weight: 700; +} + +.checkPassword { + background-color: #f3f4f6; + max-width: 640px; height: 56px; - width: 640px; - border-radius: 40px; - margin: 20px 0; + border-radius: 12px; + border: none; + font-size: 16px; + font-weight: 400; + padding-left: 20px; +} + +.content-login { + display: flex; + justify-content: center; padding: 12px 0; - background-color: #3692FF; - font-size: 20px; - font-weight: 600; - line-height: 32px; - text-align: center - } .login-button { text-decoration: none; - color: #F3F4F6; + color: #f3f4f6; + border: none; + border-radius: 40px; + background-color: #3692ff; + font-size: 20px; + font-weight: 600; + line-height: 32px; + width: 100%; + height: 56px; + cursor: pointer; } .blue-section { @@ -81,7 +106,7 @@ html { .social-links { display: flex; - gap: 12px; + gap: 12px; list-style: none; } @@ -96,7 +121,7 @@ html { justify-content: center; } -.insa { +.advice { font-size: 14px; font-weight: 500; } @@ -104,16 +129,35 @@ html { .membership { font-size: 14px; font-weight: 500; - color: #3692FF; + color: #3692ff; } -#nicname { +.nicname-label { + font-size: 16px; + font-weight: 700; +} + +.nicname { background-color: #f3f4f6; - width: 640px; + max-width: 640px; height: 56px; border-radius: 12px; border: none; font-size: 16px; - padding: 0 20px; font-weight: 400; -} \ No newline at end of file + padding-left: 20px; +} + +@media (max-width: 767px) and (min-width: 375px) { + .content { + max-width: 400px; + width: 100%; + padding: 0 16px; + margin: 100px auto; + } + .pandaMarketImg { + max-width: 197px; + height: auto; + width: 100%; + } +} diff --git a/global.css b/global.css new file mode 100644 index 00000000..ae5a72b6 --- /dev/null +++ b/global.css @@ -0,0 +1,8 @@ +* { + box-sizing: border-box; +} + +html { + font-family: Pretendard, sans-serif; + word-break: keep-all; +} diff --git a/index.html b/index.html index 2726c6c0..415f0d60 100644 --- a/index.html +++ b/index.html @@ -1,87 +1,88 @@ - + 판다마켓 - - + + +
- +
- +

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

- -
- fashionist_panda +
+
+ fashionist_panda
- panda_look_clothes + panda_look_clothes
- - Hot item - -

- 인기 상품을
- 확인해 보세요 -

-

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

+ Hot item +

인기 상품을 확인해 보세요

+

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

-
-
- - Search - -

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

-

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

+
+
+ Search +

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

+

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

- lens-pic -
+ lens-pic +
- sellWishProduct + sellWishProduct
- - Register - -

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

-

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

+ Register +

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

+

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

@@ -91,47 +92,58 @@

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

- +

- \ No newline at end of file + + diff --git a/login.html b/login.html index ec332cb0..49aa1ed4 100644 --- a/login.html +++ b/login.html @@ -1,47 +1,68 @@ - - 로그인 - - + + 판다마켓-로그인 + + +
-
-

이메일

- -

비밀번호

- -
-
- -
+
+
+ + + + +
+ +

간편 로그인하기

-

판다마켓은 처음이신가요?

+

판다마켓은 처음이신가요?

회원가입
- \ No newline at end of file + + diff --git a/signup.html b/signup.html index 7f7f5904..1fad87a1 100644 --- a/signup.html +++ b/signup.html @@ -1,51 +1,86 @@ - - 회원가입 - - + + 판다마켓-회원가입 + + +
-
-

이메일

- -

닉네임

- -

비밀번호

- -

비밀번호 확인

- -
-
- -
+
+
+ + + + + + + + +
+ +

간편 로그인하기

-

이미 회원이신가요?

+

이미 회원이신가요?

로그인
- \ No newline at end of file + + diff --git a/style.css b/style.css index 15f39882..c1367e9d 100644 --- a/style.css +++ b/style.css @@ -1,28 +1,18 @@ - @import "reset.css"; -* { - box-sizing: border-box; -} - -html { - font-family: Pretendard, sans-serif; - word-break: keep-all; -} .blue-section { - background-color: #CFE5FF; + background-color: #cfe5ff; } .container { margin: 0 200px; - } .header-container { display: flex; justify-content: space-between; align-items: center; - margin: 15px 0; + padding: 15px 0; } .login { @@ -31,13 +21,13 @@ html { width: 88px; border-radius: 8px; padding: 12px 23px; - background-color: #3692FF; + background-color: #3692ff; font-size: 16px; font-weight: 600; } .login-link { - color: #F3F4F6; + color: #f3f4f6; text-decoration: none; } @@ -52,7 +42,7 @@ html { justify-content: center; max-width: 1110px; margin: auto; -} +} .hero-content { margin: 0; @@ -63,6 +53,14 @@ html { font-size: 40px; line-height: 56px; color: #374151; + text-align: center; +} + +.section-title { + font-weight: 700; + font-size: 40px; + line-height: 56px; + color: #374151; } .button-buy { @@ -70,35 +68,37 @@ html { width: 357px; height: 56px; border-radius: 40px; - background-color: #3692FF; + background-color: #3692ff; font-weight: 600; font-size: 20px; line-height: 32px; - color: #F9FAFB; + color: #f9fafb; + text-align: center; + padding-top: 10px; } .panda-pic { width: 100%; max-width: 746px; - height: 340px; + height: auto; } .feature-section { - width: 988px; - height: 444px; display: flex; margin: 138px auto; - gap: 64px; + gap: 64px; justify-content: space-between; } .feature-image { - width: 579px; - height: 444px; + max-width: 560px; + max-height: 444px; + width: 100%; + height: auto; } .section-heading { - color: #3692FF; + color: #3692ff; font-weight: 700; font-size: 18px; line-height: 26px; @@ -120,7 +120,7 @@ html { .banner-image { max-width: 746px; width: 100%; - height: 397px; + height: auto; } .foot-background { @@ -138,7 +138,7 @@ html { font-weight: 400; font-size: 16px; line-height: 19.09px; - color: #9CA3AF; + color: #9ca3af; text-align: center; } @@ -152,7 +152,7 @@ html { } .link-line { - color: #E5E7EB; + color: #e5e7eb; text-decoration: none; } @@ -164,4 +164,87 @@ html { .social-icon { width: 20px; height: 20px; -} \ No newline at end of file +} + +.feature-section-reverse { + display: flex; + margin: 138px auto; + gap: 64px; + justify-content: space-between; +} + +.contents-reverse { + display: flex; + flex-direction: column; + justify-content: center; +} + +@media (max-width: 1199px) { + .container { + margin: auto 24px; + } + .hero-section { + flex-direction: column; + align-items: center; + padding-top: 84px; + gap: 150px; + } + .feature-section { + flex-direction: column; + align-items: center; + margin: 65px 0; + } + .feature-section-reverse { + flex-direction: column-reverse; + align-items: center; + margin: 65px 0; + } + .contents { + text-align: left; + } + .contents-reverse { + text-align: right; + } + .section-heading { + font-size: 18px; + } + .section-title { + font-size: 32px; + } + .section-text { + font-size: 18px; + } + .footer-container { + padding: 32px 100px 80px; + } +} + +@media (max-width: 767px) and (min-width: 375px) { + .container { + margin: auto 16px; + } + .title { + font-size: 32px; + } + .hero-section { + gap: 100px; + } + .button-buy { + width: 240px; + height: 48px; + font-size: 18px; + line-height: 26px; + } + .section-heading { + font-size: 16px; + } + .section-title { + font-size: 24px; + } + .section-text { + font-size: 16px; + } + .footer-container { + padding: 32px 50px 80px; + } +}