diff --git a/auth.css b/auth.css new file mode 100644 index 00000000..09f392f9 --- /dev/null +++ b/auth.css @@ -0,0 +1,116 @@ +.auth-contents { + width: 640px; + height: 100vh; + margin: auto; + gap: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + + +.auth-logo { + width: 396px; + height: 132px; + display: flex; + justify-content: center; + align-items: center; + gap: 20px; +} + +.auth-logo img { + width: auto; + height: auto; +} + +.auth-logo a { + color: var(--primary-color); + font-size: 66.34px; + font-weight: 700; + text-decoration: none; +} + +.login-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; +} + + +.password-container { + position: relative; + display: flex; + align-items: center; +} + +.password-container input { + padding-right: 50px; +} + + +.password-container img { + position: absolute; + right: 16px; + width: 24px; + height: 24px; + cursor: pointer; +} + +.auth-button { + color: #F3F4F6; + border: 2px solid; + width: 640px; + height: 56px; + padding: 16px 124px; + border-radius: 40px; + font-size: 20px; + font-weight: 600; +} + +.other-login { + background-color: #E6F2FF; + width: 640px; + height: 74px; + border-radius: 8px; + padding: 16px 23px; + gap: 10px; +} + +.login-easy { + width: 594px; + height: 42px; + display: flex; + justify-content: space-between; + align-items: center; + color: #1F2937; + font-size: 16px; + font-weight: 500; +} + + +.social-login { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + text-decoration: none; +} + +.link_to_signup { + width: 197px; + height: 24px; + color: #1F2937; + font-size: 14px; + font-weight: 500; + line-height: 24px; + display: flex; + align-items: center; + gap: 4px; +} + +.link_to_signup a { + color: #3692FF; + text-decoration: underline; +} \ No newline at end of file diff --git a/home.css b/home.css new file mode 100644 index 00000000..89f89d9e --- /dev/null +++ b/home.css @@ -0,0 +1,89 @@ +.header-contents { + width: 1120px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-contents img { + width: 40px; +} + +.logo { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +.logo a { + color: var(--primary-color); + font-size: 25.63px; + font-weight: 700; + line-height: 100%; + cursor: pointer; +} + +.banner { + background-color: var(--background-light); + height: 540px; + display: flex; + align-items: center; + background-repeat: no-repeat; + background-position: 80% bottom; + background-size: 55%; +} + +#hero { + background-image: url("images/hero-banner.png"); +} + +#features { + padding-bottom: 138px; +} + +#bottomBanner { + background-image: url("images/bottom-banner.png"); +} + +#loginLinkButton { + padding: 12px 23px; + border-radius: 8px; + font-size: 16px; + font-weight: 600; +} + +.banner .pill-button { + margin-top: 32px; +} + +.feature-box { + padding: 138px 0; + gap: 64px; + display: flex; + align-items: center; +} + +.feature:nth-child(2) { + text-align: right; +} + +.feature-content { + flex: 1; +} + +.feature-tag { + color: var(--primary-color); + font-size: 18px; + font-weight: 700; + line-height: 25px; + margin-bottom: 12px; +} + +.description { + color: var(--text-dark); + font-size: 24px; + font-weight: 500; + line-height: 120%; + margin-top: 24px; +} diff --git a/images/.DS_Store b/images/.DS_Store index b295c7bb..ff0944e1 100644 Binary files a/images/.DS_Store and b/images/.DS_Store differ diff --git a/images/bottom-banner.png b/images/bottom-banner.png new file mode 100644 index 00000000..4a5f85b2 Binary files /dev/null and b/images/bottom-banner.png differ diff --git a/images/btn_unvisibility.png b/images/btn_unvisibility.png new file mode 100644 index 00000000..2a13ff43 Binary files /dev/null and b/images/btn_unvisibility.png differ diff --git a/images/btn_visibility.png b/images/btn_visibility.png new file mode 100644 index 00000000..467cf49a Binary files /dev/null and b/images/btn_visibility.png differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 00000000..9fecc692 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/google.png b/images/google.png new file mode 100644 index 00000000..d9702434 Binary files /dev/null and b/images/google.png differ diff --git a/images/hero-banner.png b/images/hero-banner.png new file mode 100644 index 00000000..d28fb652 Binary files /dev/null and b/images/hero-banner.png differ diff --git a/images/home_bottom.png b/images/home_bottom.png deleted file mode 100644 index d92035f6..00000000 Binary files a/images/home_bottom.png and /dev/null differ diff --git a/images/home_top.png b/images/home_top.png deleted file mode 100644 index 5d18781c..00000000 Binary files a/images/home_top.png and /dev/null differ diff --git a/images/kakaotalk.png b/images/kakaotalk.png new file mode 100644 index 00000000..916acc29 Binary files /dev/null and b/images/kakaotalk.png differ diff --git a/images/panda_logo.png b/images/panda_logo.png index 6fe205b2..f663a9a8 100644 Binary files a/images/panda_logo.png and b/images/panda_logo.png differ diff --git a/index.html b/index.html index 04da35e1..07eb4916 100644 --- a/index.html +++ b/index.html @@ -3,126 +3,118 @@ 판다마켓 + + + + - -
-
-
-
-
-
+ +
+
+

Search

- 일상의 모든 물건을
- 거래해 보세요 + 구매를 원하는
+ 상품을 검색하세요

- 구경하러 가기 +

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

- 인사하고 있는 판다
+ 돋보기 이미지
-
-
- 판다가 옷을 보고 있는 이미지 -
-

Hot item

-
-

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

-

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

-
-
-
-
- -
-
-
-

Search

-
-

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

-

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

-
-
- 돋보기 이미지 -
-
- -
-
- 상품들과 폴더 -
-

Register

-
-

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

-

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

-
-
-
-
- -
-
+
+ 상품들과 폴더 +
+

Register

- 믿을 수 있는
- 판다마켓 중고거래 + 판매를 원하는
+ 상품을 등록하세요

+

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

- 헤어지고 있는 판다
+ -
- - + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 00000000..ab35aef2 --- /dev/null +++ b/login.html @@ -0,0 +1,57 @@ + + + + + login + + + + + + +
+ + +
+
+
+ + +
+
+ +
+ + +
+
+ +
+ + + + +
+
+ + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..05c743bd --- /dev/null +++ b/signup.html @@ -0,0 +1,67 @@ + + + + + signup + + + + + +
+ + +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+ +
+ + +
+
+ +
+ + + + +
+
+ + diff --git a/style.css b/style.css index 8c749f34..d6fd4ce0 100644 --- a/style.css +++ b/style.css @@ -1,216 +1,142 @@ +:root { + --primary-color: #3692FF; + --background-light: #CFE5FF; + --text-dark: #374151; + --white: #ffffff; +} + * { box-sizing: border-box; + margin: 0; + padding: 0; } -html { - font-family: Pretendard, sans-serif; +a { + text-decoration: none; + color: inherit; } -body { - margin: 0; - padding: 0; +button { + background: none; + border: none; + outline: none; + box-shadow: none; + cursor: pointer; +} +img { + vertical-align: bottom; } -container { - width: 100%; - min-width: 1920px; - display: flex; - flex-direction: column; - justify-content: center; +body { + color: var(--text-dark); + font-family: Pretendard, sans-serif; } + header { - background-color: #ffffff; + background-color: var(--white); border: 1px solid #DFDFDF; width: 100%; height: 70px; + padding: 0 200px; + position: sticky; + top: 0; + z-index: 1; display: flex; justify-content: center; align-items: center; } -.header-contents { - width: 100%; - max-width: 1120px; +footer { + background-color: #111827; + color: #9ca3af; + padding: 32px 200px 108px 200px; display: flex; justify-content: space-between; align-items: center; + font-size: 16px; } -.logo { +form { + gap: 24px; + width: 640px; + height: auto; display: flex; - justify-content: center; - align-items: center; - gap: 10px; + flex-direction: column; } -.logo a { - color: #3692FF; - font-family: 'ROKAF Sans'; - font-size: 25.63px; +label { + color: #1F2937; + display: block; + font-size: 18px; font-weight: 700; - line-height: 100%; - text-decoration: none; - cursor: pointer; + line-height: 26px; + margin-bottom: 16px; } -.login { - background-color: #3692FF; - color: #ffffff; - width: 128px; - height: 48px; - padding: 12px 23px; - gap: 10px; - border-radius: 8px; +input { + background-color: #F3F4F6; + color: #1F2937; + display: block; + border-radius: 16px; + border: 2px solid #F3F4F6; + width: 640px; + height: 56px; font-size: 16px; - font-weight: 600; + font-weight: 400; line-height: 26px; - display: flex; - justify-content: center; - text-decoration: none; - cursor: pointer; -} - -main section { - background-color: #ffffff; - width: 100%; - height: auto; - padding: 80px 10%; - gap: 10px; - display: flex; - justify-content: center; - align-items: center; -} - -.branding { - background-color: #CFE5FF; - width: 100%; - height: 540px; - top: 70px; - display: flex; - justify-content: center; - align-items: flex-end; } -.branding-contents { +#footer-page { display: flex; - justify-content: center; - gap: 7px; -} - -.branding-contents.bottom { - align-items: center; - gap: 69px; -} - - -.description--branding-contents { - padding-bottom: 60px; - gap: 32px; -} - -.looking { - background-color: #3692FF; - color: #F9FAFB; - height: 56px; - border-radius: 40px; - padding: 14px 124px; - gap: 10px; - font-size: 20px; - font-weight: 600; - line-height: 32px; - text-align: center; - text-decoration: none; - cursor: pointer; + gap: 30px; + color: #e5e7eb; } -section .feature-contents { - background-color: #FCFCFC; - position: relative; - width: 988px; - height: auto; - max-height: 444px; - border-radius: 12px; - gap: 64px; +#footer-social { display: flex; - justify-content: center; - align-items: center; -} - -.feature-contents > img { - height: 100%; -} - -.feature-contents .content { - position: relative; - padding-right: 24px; gap: 12px; } -.content .title { - color: #3692FF; - font-size: 18px; - font-weight: 700; - line-height: 26px; -} - -.content .description { - color: #374151; - gap: 24px; -} - -.content.reverse { - text-align: right; - padding-left: 24px; - padding-right: 0; +.wrapper { + max-width: 1200px;; + margin: 0 auto; + width: 100%; } -.description h1 { +h1 { font-size: 40px; font-weight: 700; - line-height: 140%; -} - -.description p { - font-size: 24px; - font-weight: 500; - line-height: 32px; + line-height: 56px; } -footer { - background-color: #111827; - width: 100%; - height: 160px; - padding: 32px 400px; - gap: 10px; - display: flex; +.button { + background-color: var(--primary-color); + color: var(--white); + display: inline-flex; + align-items: center; justify-content: center; } -.footer-info { - color: #ffffff; - width: 100%; - max-width: 1120px; - display: flex; - justify-content: space-between; - font-size: 16px; - font-weight: 400; - line-height: 100%; +.button:hover { + background-color: #1967d6; } -.footer-page { - display: flex; - gap: 30px; +.button:focus { + background-color: #1251aa; } -.footer-info a { - color: #ffffff; - text-decoration: none; +.button:disabled { + background-color: #9ca3af; + cursor: default; + pointer-events: none; } -.social { - display: flex; - gap: 12px; +.pill-button { + font-size: 20px; + font-weight: 700; + border-radius: 999px; + padding: 16px 124px; } \ No newline at end of file