diff --git a/faq.html b/faq.html index 24ad574e..d01f779f 100644 --- a/faq.html +++ b/faq.html @@ -1,9 +1,11 @@ - - - + + + Document - - - + + + + + \ No newline at end of file diff --git a/images/home_bottom.png b/images/home/bottom-banner-image.png similarity index 100% rename from images/home_bottom.png rename to images/home/bottom-banner-image.png diff --git a/images/home1.png b/images/home/feature1-image.png similarity index 100% rename from images/home1.png rename to images/home/feature1-image.png diff --git a/images/home2.png b/images/home/feature2-image.png similarity index 100% rename from images/home2.png rename to images/home/feature2-image.png diff --git a/images/home3.png b/images/home/feature3-image.png similarity index 100% rename from images/home3.png rename to images/home/feature3-image.png diff --git a/images/home.png b/images/home/top-image.png similarity index 100% rename from images/home.png rename to images/home/top-image.png diff --git a/images/icon/invisible.svg b/images/icon/invisible.svg new file mode 100644 index 00000000..92252b05 --- /dev/null +++ b/images/icon/invisible.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icon/visible.svg b/images/icon/visible.svg new file mode 100644 index 00000000..35a75305 --- /dev/null +++ b/images/icon/visible.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo/logo.svg b/images/logo/logo.svg new file mode 100644 index 00000000..d497acbf --- /dev/null +++ b/images/logo/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png deleted file mode 100644 index a1dc1c6a..00000000 Binary files a/images/logo/panda-market-logo.png and /dev/null differ diff --git a/images/logo/facebook-logo.svg b/images/social/facebook-logo.svg similarity index 100% rename from images/logo/facebook-logo.svg rename to images/social/facebook-logo.svg diff --git a/images/social/google-logo.svg b/images/social/google-logo.svg new file mode 100644 index 00000000..8eaf32e1 --- /dev/null +++ b/images/social/google-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/logo/instagram-logo.svg b/images/social/instagram-logo.svg similarity index 100% rename from images/logo/instagram-logo.svg rename to images/social/instagram-logo.svg diff --git a/images/social/kakao-logo.svg b/images/social/kakao-logo.svg new file mode 100644 index 00000000..15dc4d0f --- /dev/null +++ b/images/social/kakao-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/logo/twitter-logo.svg b/images/social/twitter-logo.svg similarity index 100% rename from images/logo/twitter-logo.svg rename to images/social/twitter-logo.svg diff --git a/images/logo/youtube-logo.svg b/images/social/youtube-logo.svg similarity index 100% rename from images/logo/youtube-logo.svg rename to images/social/youtube-logo.svg diff --git a/index.html b/index.html index c8bb69ee..600e9c56 100644 --- a/index.html +++ b/index.html @@ -1,98 +1,101 @@ - - - - 판다마켓 - - - - - - -
- - 로그인 -
-
- -
-
- -
-

Hot item

-

인기 상품을
확인해 보세요

-

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

-
-
-
-
-

Search

-

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

-

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

-
- + + + + + + + + + + 판다마켓 + + + + + + + +
+ + 로그인 +
+ +
+ + +
+
+ +
+

Hot item

+

인기 상품을
확인해 보세요

+

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

-
- -
-

Register

-

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

-

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

-
+
+ +
+ +
+

Search

+

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

+

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

-
- -
-
+ + +
+ + + + + diff --git a/items.html b/items.html index 24ad574e..d01f779f 100644 --- a/items.html +++ b/items.html @@ -1,9 +1,11 @@ - - - + + + Document - - - + + + + + \ No newline at end of file diff --git a/privacy.html b/privacy.html index 24ad574e..d01f779f 100644 --- a/privacy.html +++ b/privacy.html @@ -1,9 +1,11 @@ - - - + + + Document - - - + + + + + \ No newline at end of file diff --git a/signin.html b/signin.html new file mode 100644 index 00000000..c3c37330 --- /dev/null +++ b/signin.html @@ -0,0 +1,58 @@ + + + + + + 판다마켓 - 로그인 + + + + + + +
+ + + + +
+
+ + +
+
+ +
+ + +
+
+ +
+ +
+

간편 로그인하기

+ +
+ +
+ 판다마켓이 처음이신가요? 회원가입 +
+
+ + diff --git a/signup.html b/signup.html index 3dacb8e9..7d5f149f 100644 --- a/signup.html +++ b/signup.html @@ -1,75 +1,67 @@ - - - - 판다마켓 - 회원가입 - - - - - - -
-
- + + + + 판다마켓 - 회원가입 + + + + + + +
+ + + + +
+
+ +
- - - - -
- + + +
+ 이미 회원이신가요? 로그인 +
+ + + diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 00000000..4d2ba711 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,154 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #374151; + word-break: keep-all; + font-family: "Pretendard", sans-serif; +} + +header, footer, .wrapper { + padding: 0 16px; +} + +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #ffffff; + border-bottom: 1px solid #dfdfdf; +} + +main { + margin-top: 70px; +} + +footer { + padding: 0 104px; + box-sizing: border-box; + background-color: #111827; + padding: 32px ; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 60px; + height: 160px; +} + +#copyright { + order: 3; + flex-basis: 100%; + color: #9ca3af; + text-align: center; +} + +#footerMenu, #socialMedia { + display: flex; + gap: 30px; +} + +#socialMedia { + gap: 12px; +} + +a { + text-decoration: none; + color: inherit; +} + +img { + vertical-align: bottom; +} + +.wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +button { + background: none; + border: none; + cursor: pointer; + font: inherit; + color: inherit; + appearance: none; +} + +.button { + background-color: #3692ff; + color: #ffffff; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.button:hover { + background-color: #1967d6; +} + +.button:focus { + background-color: #1251aa; +} + +.button:disabled { + background-color: #9ca3af; + cursor: default; +} + +.pill-button { + font-size: 16px; + font-weight: 600; + border-radius: 999px; + padding: 14.5px 33.5px; +} + +.full-width { + width: 100%; +} + +.break-on-desktop { /*속성 요소를 어떻게 표현할지*/ + display: none; +} + +@media (min-width: 768px) { + header, .wrapper { + padding: 0 24px; + } + + .pill-button { + font-size: 20px; + font-weight: 700; + padding: 16px 126px; + } + + footer { + padding: 32px 104px 108px; + } + + #copyright { + flex-basis: auto; + order: 0; + } +} + +@media (min-width: 1280px) { + header, footer { + padding: 0 200px; + } + + .break-on-desktop { + display: inline; + } +} + diff --git a/styles/home.css b/styles/home.css new file mode 100644 index 00000000..d0149b58 --- /dev/null +++ b/styles/home.css @@ -0,0 +1,153 @@ +.banner { + background-color: #cfe5ff; + height: 60vh; + text-align: center; + background-repeat: no-repeat; + background-position: bottom; + background-size: 130%; +} + +.banner h1 { + font-weight: 700; + font-size: 32px; + line-height: 44.8px; + padding-top: 48px; + padding-bottom: 18px; +} + +#top { + background-image: url("../images/home/top-image.png"); +} + +#bottomBanner { + background-image: url("../images/home/bottom-banner-image.png"); +} + +#signinLinkButton { + font-size: 16px; + font-weight: 600; + border-radius: 8px; + padding: 14.5px 43px; +} + +#features { + padding-top: 51px; +} + +.feature { + margin-bottom: 64px; +} + +.feature img { + width: 100%; + margin-bottom: 20px; +} + +.feature-content h2 { + color: #3692ff; + font-size: 16px; + line-height: 22.4px; + font-weight: 700; + margin-bottom: 8px; +} + +.feature-content h1 { + font-weight: 700; + font-size: 24px; + line-height: 33.6px; +} + +.feature-description { + font-weight: 500; + font-size: 16px; + line-height: 19.2px; + letter-spacing: 0.08em; + margin-top: 20px; +} + +.feature:nth-child(2) { /*부모 요소들 중 두번째*/ + text-align: right; +} + +@media (min-width: 768px) { + .banner { + height: 90vh; + background-size: 120%; + } + + .banner h1 { + font-size: 40px; + line-height: 56px; + padding-top: 84px; + padding-bottom: 24px; + } + + #features { + padding: 24px 0 16px; + } + + .feature-content h2 { + font-size: 18px; + line-height: 25.2px; + margin-bottom: 12px; + } + + .feature-content h1 { + font-size: 32px; + line-height: 44.8px; + } + + .feature-description { + font-size: 18px; + line-height: 21.6px; + } +} + +@media (min-width: 1280px) { + .banner { + text-align: left; + height: 540px; + display: flex; + align-items: center; + background-position: 80% bottom; + background-size: 55%; + } + + .banner h1 { + padding-top: 0; + padding-bottom: 32px; + } + + + #features { + padding: 138px 0; + } + + .feature { + margin-bottom: 138px; + display: flex; + align-items: center; + gap: 5%; + } + + .feature:nth-child(2) { + flex-direction: row-reverse; + } + + .feature img { + width: 50%; + margin-bottom: 0; + } + + .feature-content h1 { + font-size: 40px; + line-height: 56px; + } + + .feature-description { + font-size: 24px; + line-height: 28.8px; + margin-top: 24px; + } +} + diff --git a/styles/sign.css b/styles/sign.css new file mode 100644 index 00000000..162913fb --- /dev/null +++ b/styles/sign.css @@ -0,0 +1,112 @@ +.sign-container { + max-width: 400px; + margin: 0 auto; + padding: 0 16px; +} + +.logo-home-button { + margin: 24px auto; + display: block; + width: 198px; +} + +.logo-home-button img { + width: 100%; +} + +.input-item { + margin-bottom: 24px; + display: flex; + flex-direction: column; +} + +label { + font-weight: 700; + font-size: 14px; + margin-bottom: 8px; +} + +input { + padding: 16px 24px; + width: 100%; + background-color: #f3f4f6; + border: none; + border-radius: 12px; + font-size: 16px; + line-height: 24px; +} + +input::placeholder { + color: #9ca3af; +} + +input:focus { + outline-color: #3692ff; +} + +.input-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.toggle-password { + position: absolute; + right: 24px; + cursor: pointer; +} + +.social-login-container { + background-color: #e6f2ff; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 23px; + margin: 24px 0; +} + +.social-login-container h3 { + font-weight: 500; + font-size: 16px; + line-height: 24px; +} + +.social-login-buttons-container { + display: flex; + gap: 16px; +} + +.sign-switch { + font-weight: 500; + font-size: 15px; + text-align: center; +} + +.sign-switch a { + color: #3182f6; + text-decoration: underline; + text-underline-offset: 2px; +} + +@media (min-width: 768px) { + .sign-container { + max-width: 640px; + } + + .logo-home-button { + width: 396px; + margin: 48px auto 40px; + } + + label { + font-size: 18px; + margin-bottom: 16px; + } +} + +@media (min-width: 1280px) { + .logo-home-button { + margin-top: 60px; + } +}