diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..0967ef424 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} diff --git a/_redirects b/_redirects deleted file mode 100644 index f8243379a..000000000 --- a/_redirects +++ /dev/null @@ -1 +0,0 @@ -/* /index.html 200 \ No newline at end of file diff --git a/images/google.png b/images/google.png deleted file mode 100644 index 64db8acb0..000000000 Binary files a/images/google.png and /dev/null differ diff --git a/images/google.svg b/images/google.svg new file mode 100644 index 000000000..39de6337b --- /dev/null +++ b/images/google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/ic_facebook.png b/images/ic_facebook.png deleted file mode 100644 index 58333d45f..000000000 Binary files a/images/ic_facebook.png and /dev/null differ diff --git a/images/ic_facebook.svg b/images/ic_facebook.svg new file mode 100644 index 000000000..8491c2f83 --- /dev/null +++ b/images/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_instagram.png b/images/ic_instagram.png deleted file mode 100644 index 7a91d111a..000000000 Binary files a/images/ic_instagram.png and /dev/null differ diff --git a/images/ic_instagram.svg b/images/ic_instagram.svg new file mode 100644 index 000000000..c83306f84 --- /dev/null +++ b/images/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_twitter.png b/images/ic_twitter.png deleted file mode 100644 index 5df0852de..000000000 Binary files a/images/ic_twitter.png and /dev/null differ diff --git a/images/ic_twitter.svg b/images/ic_twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/images/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_youtube.png b/images/ic_youtube.png deleted file mode 100644 index f51731d40..000000000 Binary files a/images/ic_youtube.png and /dev/null differ diff --git a/images/ic_youtube.svg b/images/ic_youtube.svg new file mode 100644 index 000000000..6042dbf55 --- /dev/null +++ b/images/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/kakao.png b/images/kakao.png deleted file mode 100644 index d38e36cc0..000000000 Binary files a/images/kakao.png and /dev/null differ diff --git a/images/kakao.svg b/images/kakao.svg new file mode 100644 index 000000000..15dc4d0ff --- /dev/null +++ b/images/kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/medium-logo.svg b/images/medium-logo.svg new file mode 100644 index 000000000..e6529d0dc --- /dev/null +++ b/images/medium-logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 908906c97..4831bdebf 100644 --- a/index.html +++ b/index.html @@ -1,114 +1,130 @@ + + 판다마켓 + + + + + + + + + + + + + + + - - 판다마켓 - - - - - - - - - - - - - - - - - -
-
- -
- - + -
-
-
-

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

- +
+
+
+

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

+ + 구경하러 가기 + +
+
-
-
-
-
- -
- Hot item -
-

인기 상품을
확인해 보세요

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

인기 상품을
확인해 보세요

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

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

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

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

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

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

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

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

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

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

+ +
+
+
+

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

+
+
-
-
- - - - \ No newline at end of file + + + diff --git a/site.html/login.html b/site.html/login.html index bf2f2fef5..35a52233e 100644 --- a/site.html/login.html +++ b/site.html/login.html @@ -1,58 +1,89 @@ - - + 로그인 - - - - - - - - - - - - + + + + + + + + + + + + - +
+
- 판다마켓 로고 -

판다마켓

+ 로고 +

판다마켓

-
-
-
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+ +
-
-
판다마켓이 처음이신가요?
- 회원가입 + +
+
+
+ +
+
+
판다마켓이 처음이신가요?
+ 회원가입 +
+
+
- \ No newline at end of file + + diff --git a/site.html/signup.html b/site.html/signup.html index 19668b22c..577ec52ad 100644 --- a/site.html/signup.html +++ b/site.html/signup.html @@ -1,68 +1,109 @@ - - + 회원가입 - - - - - - - - - - - + + + + + + + + + + + - +
+
- 판다마켓 로고 -

판다마켓

+ 로고 +

판다마켓

-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
+
+
+
+ +
+ +
+
+ +
+
+ +
-
-
이미 회원이신가요?
- 로그인 + +
+
+
+ + +
- \ No newline at end of file + + diff --git a/style.css/common.css b/style.css/common.css index ea9d2b19f..5502edfad 100644 --- a/style.css/common.css +++ b/style.css/common.css @@ -5,10 +5,10 @@ * { --primary: #3692ff; - --primary-home: #cfe5ff; + --cyan-blue: #cfe5ff; --white: #ffffff; --gray-400: #9ca3af; - --gray-border: #dfdfdf; + --light-gray: #dfdfdf; --gray-200: #e5e7eb; --gray-100: #f3f4f6; --gray-50: #f9fafb; @@ -38,7 +38,7 @@ align-items: center; } -button { +.button { border: none; cursor: pointer; display: flex; @@ -47,6 +47,7 @@ button { gap: 10px; font-family: "pretendard Variable", "Noto Sans Korean"; font-weight: 600; + text-decoration: none; } .large-button { @@ -55,3 +56,125 @@ button { font-size: 20px; line-height: 32px; } + +@media (max-width: 1199px) { + * { + box-sizing: border-box; + margin: 0; + } + + * { + --primary: #3692ff; + --cyan-blue: #cfe5ff; + --white: #ffffff; + --gray-400: #9ca3af; + --light-gray: #dfdfdf; + --gray-200: #e5e7eb; + --gray-100: #f3f4f6; + --gray-50: #f9fafb; + --gray-10: #fcfcfc; + --black-900: #111827; + --black-700: #374151; + } + + @font-face { + font-family: "ROKAF Sans"; + src: url("fonts/ROKAF_Sans_Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; + } + + .title { + font-family: "ROKAF Sans", sans-serif; + color: var(--primary); + font-weight: 700; + text-align: center; + text-decoration: none; + } + + .head { + display: flex; + justify-content: space-between; + align-items: center; + } + + .button { + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + font-family: "pretendard Variable", "Noto Sans Korean"; + font-weight: 600; + text-decoration: none; + } + + .large-button { + border-radius: 40px; + padding: 16px 124px; + font-size: 20px; + line-height: 32px; + } +} + +@media (min-width: 1200px) { + * { + box-sizing: border-box; + margin: 0; + } + + * { + --primary: #3692ff; + --cyan-blue: #cfe5ff; + --white: #ffffff; + --gray-400: #9ca3af; + --light-gray: #dfdfdf; + --gray-200: #e5e7eb; + --gray-100: #f3f4f6; + --gray-50: #f9fafb; + --gray-10: #fcfcfc; + --black-900: #111827; + --black-700: #374151; + } + + @font-face { + font-family: "ROKAF Sans"; + src: url("fonts/ROKAF_Sans_Bold.ttf") format("truetype"); + font-weight: bold; + font-style: normal; + } + + .title { + font-family: "ROKAF Sans", sans-serif; + color: var(--primary); + font-weight: 700; + text-align: center; + text-decoration: none; + } + + .head { + display: flex; + justify-content: space-between; + align-items: center; + } + + .button { + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + font-family: "pretendard Variable", "Noto Sans Korean"; + font-weight: 600; + text-decoration: none; + } + + .large-button { + border-radius: 40px; + padding: 16px 124px; + font-size: 20px; + line-height: 32px; + } +} diff --git a/style.css/form-style.css b/style.css/form-style.css new file mode 100644 index 000000000..ec3792542 --- /dev/null +++ b/style.css/form-style.css @@ -0,0 +1,483 @@ +* { + --gray-800: #1f2937; + --Alice-Blue: #e6f2ff; +} + +.join-page { + margin-top: 190px; +} + +body, +.join-page, +.join-content, +.join-main, +.join, +.email-form__input, +.password-form__input { + display: flex; + flex-direction: column; +} + +body, +.to-us, +.join-page { + justify-content: center; + align-items: center; +} + +.title { + font-size: 66px; + line-height: 89px; +} + +.join-page { + width: 640px; + margin: 231px 640px; + gap: 40px; +} + +.join-content, +.join-main, +.join, +form, +.auth-content, +.to-us { + display: flex; + font-family: "pretendard Variable", "Noto Sans Korean"; +} + +.join-content, +.join-main, +.join, +form { + width: 100%; + gap: 24px; +} + +form, +.email-form__input, +.password-form__input, +.auth-sns { + gap: 16px; +} + +.email-form__input, +.password-form__input { + font-weight: 700; + font-size: 18px; + color: var(--gray-800); + line-height: 26px; +} + +input, +button, +.simple-auth { + width: 640px; + gap: 10px; + display: flex; +} + +input, +button { + height: 56px; +} + +input { + border: none; + border-radius: 12px; + padding: 16px 24px; + color: var(--gray-400); + background-color: var(--gray-100); +} + +input:focus { + border: 2px solid var(--primary); + outline: none; +} + +.large-button { + background-color: var(--gray-400); + color: var(--gray-100); + text-align: center; +} + +.auth-sns, +.auth-sns__icon, +.simple-auth, +.auth-content { + display: flex; + align-items: center; +} + +.simple-auth { + height: 74px; + border-radius: 8px; + padding: 16px 23px; + background-color: var(--Alice-Blue); +} + +.auth-content, +.to-us { + font-weight: 500; +} + +.auth-content { + width: 594px; + justify-content: space-between; + font-size: 16px; + line-height: 26px; + color: var(--gray-800); +} + +.to-us { + text-align: center; + gap: 4px; + font-size: 14px; +} + +.us-message { + line-height: 24px; + color: var(--gray-800); +} + +.us-link { + line-height: 17px; + color: var(--primary); +} + +@media (max-width: 767px) { + body { + max-width: 400px; + } + + .join-page { + margin: 80px 16px; + } + + .head > img { + width: 51px; + height: 51px; + } + + .title { + font-size: 33px; + line-height: 44px; + } + + form { + gap: 8px; + } + + .email-form__input, + .password-form__input { + font-size: 14px; + line-height: 24px; + } + + input, + .large-button { + width: 343px; + } + + .auth-content { + width: 296px; + } +} + +@media (max-width: 1199px) { + * { + --gray-800: #1f2937; + --Alice-Blue: #e6f2ff; + } + + .join-page { + margin-top: 190px; + } + + body, + .join-page, + .join-content, + .join-main, + .join, + .email-form__input, + .password-form__input { + display: flex; + flex-direction: column; + } + + body, + .to-us, + .join-page { + justify-content: center; + align-items: center; + } + + .title { + font-size: 66px; + line-height: 89px; + } + + .join-page { + width: 640px; + margin: 231px 640px; + gap: 40px; + } + + .join-content, + .join-main, + .join, + form, + .auth-content, + .to-us { + display: flex; + font-family: "pretendard Variable", "Noto Sans Korean"; + } + + .join-content, + .join-main, + .join, + form { + width: 100%; + gap: 24px; + } + + form, + .email-form__input, + .password-form__input, + .auth-sns { + gap: 16px; + } + + .email-form__input, + .password-form__input { + font-weight: 700; + font-size: 18px; + color: var(--gray-800); + line-height: 26px; + } + + input, + button, + .simple-auth { + width: 640px; + gap: 10px; + display: flex; + } + + input, + button { + height: 56px; + } + + input { + border: none; + border-radius: 12px; + padding: 16px 24px; + color: var(--gray-400); + background-color: var(--gray-100); + } + + input:focus { + border: 2px solid var(--primary); + outline: none; + } + + .large-button { + background-color: var(--gray-400); + color: var(--gray-100); + text-align: center; + } + + .auth-sns, + .auth-sns__icon, + .simple-auth, + .auth-content { + display: flex; + align-items: center; + } + + .simple-auth { + height: 74px; + border-radius: 8px; + padding: 16px 23px; + background-color: var(--Alice-Blue); + } + + .auth-content, + .to-us { + font-weight: 500; + } + + .auth-content { + width: 594px; + justify-content: space-between; + font-size: 16px; + line-height: 26px; + color: var(--gray-800); + } + + .to-us { + text-align: center; + gap: 4px; + font-size: 14px; + } + + .us-message { + line-height: 24px; + color: var(--gray-800); + } + + .us-link { + line-height: 17px; + color: var(--primary); + } +} + +@media (min-width: 1200px) { + * { + --gray-800: #1f2937; + --Alice-Blue: #e6f2ff; + } + + .join-page { + margin-top: 190px; + } + + body, + .join-page, + .join-content, + .join-main, + .join, + .email-form__input, + .password-form__input { + display: flex; + flex-direction: column; + } + + body, + .to-us, + .join-page { + justify-content: center; + align-items: center; + } + + .title { + font-size: 66px; + line-height: 89px; + } + + .join-page { + width: 640px; + margin: 231px 640px; + gap: 40px; + } + + .join-content, + .join-main, + .join, + form, + .auth-content, + .to-us { + display: flex; + font-family: "pretendard Variable", "Noto Sans Korean"; + } + + .join-content, + .join-main, + .join, + form { + width: 100%; + gap: 24px; + } + + form, + .email-form__input, + .password-form__input, + .auth-sns { + gap: 16px; + } + + .email-form__input, + .password-form__input { + font-weight: 700; + font-size: 18px; + color: var(--gray-800); + line-height: 26px; + } + + input, + button, + .simple-auth { + width: 640px; + gap: 10px; + display: flex; + } + + input, + button { + height: 56px; + } + + input { + border: none; + border-radius: 12px; + padding: 16px 24px; + color: var(--gray-400); + background-color: var(--gray-100); + } + + input:focus { + border: 2px solid var(--primary); + outline: none; + } + + .large-button { + background-color: var(--gray-400); + color: var(--gray-100); + text-align: center; + } + + .auth-sns, + .auth-sns__icon, + .simple-auth, + .auth-content { + display: flex; + align-items: center; + } + + .simple-auth { + height: 74px; + border-radius: 8px; + padding: 16px 23px; + background-color: var(--Alice-Blue); + } + + .auth-content, + .to-us { + font-weight: 500; + } + + .auth-content { + width: 594px; + justify-content: space-between; + font-size: 16px; + line-height: 26px; + color: var(--gray-800); + } + + .to-us { + text-align: center; + gap: 4px; + font-size: 14px; + } + + .us-message { + line-height: 24px; + color: var(--gray-800); + } + + .us-link { + line-height: 17px; + color: var(--primary); + } +} diff --git a/style.css/login,signup-common.css b/style.css/login,signup-common.css deleted file mode 100644 index 6bb2b0091..000000000 --- a/style.css/login,signup-common.css +++ /dev/null @@ -1,147 +0,0 @@ -* { - --gray-800: #1f2937; - --sky: #e6f2ff; -} - -body { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.head { - width: 396px; - height: 132px; -} - -.title { - font-size: 66px; - line-height: 89px; -} - -.join-page { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 640px; - margin: 231px 640px; - gap: 40px; -} - -.join-content, -.join-main, -.join, -form { - width: 100%; - display: flex; - font-family: "pretendard Variable", "Noto Sans Korean"; -} - -.join-content, -.join-main, -.join { - flex-direction: column; - gap: 24px; -} - -form { - gap: 16px; -} - -.email, -.password { - display: flex; - gap: 16px; - flex-direction: column; - font-weight: 700; - font-size: 18px; - color: var(--gray-800); - line-height: 26px; -} - -input, -button, -.sky-login { - width: 640px; - gap: 10px; - display: flex; -} - -input, -button { - height: 56px; -} - -input { - border: none; - border-radius: 12px; - padding: 16px 24px; - color: var(--gray-400); - background-color: var(--gray-100); -} - -input:focus { - border: 2px solid var(--primary); - outline: none; -} - -.large-button { - background-color: var(--gray-400); - color: var(--gray-100); - text-align: center; -} - -.sky-login { - height: 74px; - border-radius: 8px; - padding: 16px 23px; - background-color: var(--sky); - align-items: center; -} - -.simple-login, -.to-user { - font-family: "pretendard Variable", "Noto Sans Korean"; - font-weight: 500; -} - -.simple-login { - width: 594px; - display: flex; - justify-content: space-between; - align-items: center; - font-size: 16px; - line-height: 26px; - color: var(--gray-800); -} - -.sns { - display: flex; - align-items: center; - gap: 16px; -} - -.sns-icon { - display: flex; -} - -.to-user { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - gap: 4px; - font-size: 14px; -} - -.user-message { - line-height: 24px; - color: var(--gray-800); -} - -.user-link { - line-height: 17px; - color: var(--primary); -} diff --git a/style.css/login.css b/style.css/login.css index e69de29bb..8b1378917 100644 --- a/style.css/login.css +++ b/style.css/login.css @@ -0,0 +1 @@ + diff --git a/style.css/panda_market.css b/style.css/panda_market.css index 93c715a03..74a299ad8 100644 --- a/style.css/panda_market.css +++ b/style.css/panda_market.css @@ -7,23 +7,40 @@ header { z-index: 1; top: 0; margin: 0 auto; - width: 100%; background-color: white; - background-size: cover; height: 70px; - border-bottom: 1px solid var(--gray-border); + border-bottom: 1px solid var(--light-gray); padding: 9px 400px; } -.head { - height: 100%; +header, +.home, +section, +.footer-auth { width: auto; + background-size: auto; } -.logo { +.logo, +.home, +section, +.section { display: flex; justify-content: center; +} + +.logo, +.top, +.bottom, +section, +.section { align-items: center; +} + +.logo, +section, +.bottom-content, +footer { gap: 10px; } @@ -32,21 +49,25 @@ header { line-height: 35px; } -button:hover { +.button:hover { background-color: #2877d4; } -button { +.button { background-color: var(--primary); } +.small-button, +.auth__copyright, +.auth__info { + font-size: 16px; +} + .small-button { border-radius: 8px; width: 128px; height: 48px; padding: 12px 23px; - font-size: 16px; - line-height: 26px; color: var(--gray-100); } @@ -57,52 +78,70 @@ button { } .home { - background-color: var(--primary-home); + background-color: var(--cyan-blue); height: 540px; - width: 100%; - background-size: cover; - display: flex; - justify-content: center; align-items: flex-end; } .top, -.bottom { +.bottom, +.footer-auth { display: flex; justify-content: space-between; - align-items: center; } .top { gap: 7px; } -.top-text { - padding-bottom: 60px; - gap: 32px; +.top-content, +.section-image, +.section-text { display: flex; - flex-direction: column; align-items: flex-start; } -h2 { +.top-content, +.section-image, +.section-text { + flex-direction: column; +} + +.top-content { + padding-bottom: 60px; + gap: 32px; +} + +h2, +span, +h3, +.section-image > div, +.auth__copyright, +.auth__info { font-family: "Pretendard Variable", "Noto Sans Korean"; +} + +h2, +span, +h3 { font-weight: 700; font-size: 40px; line-height: 56px; +} + +.small-button, +span { + line-height: 26px; +} + +h2 { color: var(--black-700); margin-bottom: 32px; } section { padding: 138px 0; - gap: 10px; - width: 100%; background-color: white; - background-size: cover; - display: flex; - justify-content: center; - align-items: center; } .section { @@ -110,111 +149,560 @@ section { border-radius: 12px; gap: 64px; background-color: var(--gray-10); - display: flex; - justify-content: center; - align-items: center; } -.image-left, -.image-right { - display: flex; - flex-direction: column; - align-items: flex-start; +.section-image { padding-right: 24px; gap: 12px; } -.image-right { - align-items: flex-end; - padding-left: 24px; -} - span { - font-family: "Pretendard Variable", "Noto Sans Korean"; font-size: 18px; - font-weight: 700; - line-height: 26px; color: var(--primary); } -.text-right, -.text-left { +.section-text { gap: 24px; - display: flex; - flex-direction: column; - align-items: flex-start; } -.text-left > h3, -.text-left > div { +.section.reverse { + justify-content: flex-end; +} + +.section-image.reverse, +.section-text.reverse { text-align: right; + align-items: flex-end; } -h3 { - font-family: "Pretendard Variable", "Noto Sans Korean"; - font-size: 40px; - font-weight: 700; - line-height: 56px; +h3, +.section-image > div { color: var(--black-700); white-space: nowrap; } -.text-right > div, -.text-left > div { - font-family: "Pretendard Variable", "Noto Sans Korean"; +.section-image > div { font-size: 24px; font-weight: 500; line-height: 32px; - color: var(--black-700); - white-space: nowrap; } .bottom { gap: 69px; } -.bottom-text { - gap: 10px; -} - footer { display: flex; - gap: 10px; padding: 32px 400px; background-color: var(--black-900); } -.footer { +.footer-auth { width: 100%; - display: flex; - justify-content: space-between; } - -.copyright, -.info { - font-family: "Pretendard Variable", "Noto Sans Korean"; - font-size: 16px; +.auth__copyright, +.auth__info { font-weight: 400; - line-height: 19.09px; + line-height: 19px; text-align: center; } -.copyright { +.auth__copyright { color: var(--gray-400); } -.info { +.auth__info { display: flex; gap: 30px; } -.privacy, -.faq { +.auth__privacy, +.auth__faq { text-decoration: none; color: var(--gray-200); } -.sns { +.auth__sns { + display: flex; width: 116px; gap: 12px; } + +@media (min-width: 365px) and (max-width: 767px) { + /*mobile*/ + header { + padding: 0; + display: flex; + position: sticky; + z-index: 10; + justify-content: space-around; + } + + .head { + margin: 10px 16px; + gap: 126px; + align-items: center; + } + + .logo > img { + display: none; + } + + h1, + h2, + h3 { + white-space: pre; + } + + h2, + h3, + .auth__sns { + display: flex; + } + + .home { + align-items: center; + height: auto; + } + + .top, + .bottom, + h2, + .section { + flex-direction: column; + } + + .top, + .bottom { + margin: auto; + } + + .top { + padding-top: 48px; + } + + .top-content { + align-items: center; + gap: 18px; + width: 240px; + text-align: center; + } + + h2 { + display: flex; + font-size: 32px; + line-height: 44px; + } + + .large-button { + height: 48px; + padding: 12px 71px; + font-size: 18px; + line-height: 26px; + } + + section { + width: 344px; + gap: 40px; + padding: 26px 8px; + } + + span { + font-size: 16px; + } + + .section { + align-items: stretch; + gap: 24px; + } + + .section-context { + font-size: 24px; + } + + .section.reverse { + flex-direction: column-reverse; + gap: 24px; + align-items: end; + } + + .section-image { + width: 240px; + align-items: flex-start; + gap: 16px; + } + + .section-image.reverse { + padding-right: 0; + } + + .section-image > div { + font-size: 16px; + gap: 8px; + } + + .bottom { + padding-top: 121px; + } + + .bottom-content { + display: flex; + text-align: center; + } + + footer { + width: 375px; + padding: 32px 32px 64px 32px; + } + + .footer { + height: 160px; + } + + .auth__info { + margin-bottom: 60px; + } + + .footer-auth { + position: relative; + } + + .auth__copyright { + position: absolute; + top: 60px; + } +} + +@media (min-width: 768px) and (max-width: 1199px) { + /*tablet*/ + header { + padding: 0; + display: flex; + position: sticky; + z-index: 5; + justify-content: space-around; + } + + .head { + width: 696px; + margin: 10px 24px; + align-items: center; + } + + .home { + align-items: center; + height: auto; + } + + .top, + .bottom, + .section { + flex-direction: column; + } + + .top, + .bottom { + margin: auto; + } + + .top { + padding-top: 84px; + } + + .top-content { + align-items: center; + gap: 24px; + width: 512px; + text-align: center; + } + + h2, + h3 { + display: flex; + white-space: pre; + } + + section { + padding: 26px 0; + gap: 52px; + } + + .section { + width: 696px; + align-items: stretch; + gap: 24px; + } + + .section.reverse, + .footer-info { + flex-direction: column-reverse; + } + + .section.reverse { + gap: 24px; + } + + .section-image { + align-items: flex-start; + } + + .section-image.reverse { + padding-right: 0; + } + + .section-image > div { + gap: 16px; + } + + .bottom { + padding-top: 201px; + } + + .bottom-content { + display: flex; + text-align: center; + } + + footer { + height: 160px; + padding: 32px 104px 64px 104px; + } + + .footer-info { + display: flex; + } +} + +@media (min-width: 1200px) { + /*pc*/ + body { + background-color: var(--gray-10); + } + + header { + justify-content: space-around; + position: sticky; + z-index: 1; + top: 0; + margin: 0 auto; + background-color: white; + height: 70px; + border-bottom: 1px solid var(--light-gray); + padding: 9px 400px; + } + + header, + .home, + section, + .footer-auth { + width: auto; + background-size: auto; + } + + .logo, + .home, + section, + .section { + display: flex; + justify-content: center; + } + + .logo, + .top, + .bottom, + section, + .section { + align-items: center; + } + + .logo, + section, + .bottom-content, + footer { + gap: 10px; + } + + .title { + font-size: 26px; + line-height: 35px; + } + + .button:hover { + background-color: #2877d4; + } + + .button { + background-color: var(--primary); + } + + .small-button, + .auth__copyright, + .auth__info { + font-size: 16px; + } + + .small-button { + border-radius: 8px; + width: 128px; + height: 48px; + padding: 12px 23px; + color: var(--gray-100); + } + + .large-button { + height: 56px; + color: var(--gray-50); + cursor: pointer; + } + + .home { + background-color: var(--cyan-blue); + height: 540px; + align-items: flex-end; + } + + .top, + .bottom, + .footer-auth { + display: flex; + justify-content: space-between; + } + + .top { + gap: 7px; + } + + .top-content, + .section-image, + .section-text { + display: flex; + align-items: flex-start; + } + + .top-content, + .section-image, + .section-text { + flex-direction: column; + } + + .top-content { + padding-bottom: 60px; + gap: 32px; + } + + h2, + span, + h3, + .section-image > div, + .auth__copyright, + .auth__info { + font-family: "Pretendard Variable", "Noto Sans Korean"; + } + + h2, + span, + h3 { + font-weight: 700; + font-size: 40px; + line-height: 56px; + } + + .small-button, + span { + line-height: 26px; + } + + h2 { + color: var(--black-700); + margin-bottom: 32px; + } + + section { + padding: 138px 0; + background-color: white; + } + + .section { + width: 988px; + border-radius: 12px; + gap: 64px; + background-color: var(--gray-10); + } + + .section-image { + padding-right: 24px; + gap: 12px; + } + + span { + font-size: 18px; + color: var(--primary); + } + + .section-text { + gap: 24px; + } + + .section.reverse { + justify-content: flex-end; + } + + .section-image.reverse, + .section-text.reverse { + text-align: right; + align-items: flex-end; + } + + h3, + .section-image > div { + color: var(--black-700); + white-space: nowrap; + } + + .section-image > div { + font-size: 24px; + font-weight: 500; + line-height: 32px; + } + + .bottom { + gap: 69px; + } + + footer { + display: flex; + padding: 32px 400px; + background-color: var(--black-900); + } + + .footer-auth { + width: 100%; + } + + .auth__copyright, + .auth__info { + font-weight: 400; + line-height: 19px; + text-align: center; + } + + .auth__copyright { + color: var(--gray-400); + } + + .auth__info { + display: flex; + gap: 30px; + } + + .auth__privacy, + .auth__faq { + text-decoration: none; + color: var(--gray-200); + } + + .auth__sns { + width: 116px; + gap: 12px; + } +} diff --git a/style.css/signup.css b/style.css/signup.css index 2e5ad5247..d2a0828af 100644 --- a/style.css/signup.css +++ b/style.css/signup.css @@ -1,4 +1,4 @@ -.nickname { +.nickname-form__input { display: flex; gap: 16px; flex-direction: column; @@ -7,3 +7,47 @@ color: var(--gray-800); line-height: 21px; } + +@media (max-width: 1199px) { + .nickname-form__input { + display: flex; + gap: 16px; + flex-direction: column; + font-weight: 700; + font-size: 18px; + color: var(--gray-800); + line-height: 21px; + } +} + +@media (min-width: 1200px) { + .nickname-form__input { + display: flex; + gap: 16px; + flex-direction: column; + font-weight: 700; + font-size: 18px; + color: var(--gray-800); + line-height: 21px; + } +} + +@media (max-width: 767px) { + .join-page { + margin-top: 24px; + gap: 24px; + } + + .title { + font-size: 12px; + line-height: 62px; + } + + .email-form__input, + .password-form__input, + .nickname-form__input, + .password-form__input { + font-size: 14px; + line-height: 16px; + } +}