diff --git a/css/common.css b/css/common.css deleted file mode 100644 index 0344ea4f..00000000 --- a/css/common.css +++ /dev/null @@ -1,25 +0,0 @@ -@font-face { - font-family: "Pretendard-Regular"; - src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") - format("woff"); - font-weight: 400; - font-style: normal; -} - -:root { - --blue: #3692ff; - --gray900: #111827; - --gray800: #1f2937; - --gray700: #374151; - --gray600: #4b5563; - --gray500: #6b7280; - --gray400: #9ca3af; - --gray200: #e5e7eb; - --gray100: #f3f4f6; - --gray50: #f9fafb; -} - -body { - font-family: "Pretendard-Regular", sans-serif; - color: #374151; -} diff --git a/css/login.css b/css/login.css deleted file mode 100644 index bc238c92..00000000 --- a/css/login.css +++ /dev/null @@ -1,14 +0,0 @@ -.eye { - position: absolute; - cursor: pointer; - width: 24px; - height: 24px; - right: 24px; - top: 60%; -} - -#toggle-password { - width: 100%; - height: 100%; - object-fit: contain; -} diff --git a/css/reset.css b/css/reset.css deleted file mode 100644 index b6eb8216..00000000 --- a/css/reset.css +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - - html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} \ No newline at end of file diff --git a/css/signup.css b/css/signup.css deleted file mode 100644 index f6121402..00000000 --- a/css/signup.css +++ /dev/null @@ -1,97 +0,0 @@ -* { - box-sizing: border-box; - font-family: "Pretendard-Regular", sans-serif; - color: var(--gray800); -} - -a { - color: inherit; -} - -label { - font-size: 18px; - font-weight: 700; - display: block; -} - -input { - display: block; - width: 100%; - height: 56px; - border-radius: 12px; - border: none; - background-color: var(--gray100); - margin: 16px 0 24px; - padding: 16px 24px; -} - -.login-button { - display: block; - margin-bottom: 24px; -} - -.login-as { - height: 74px; - background-color: rgba(230, 242, 255, 1); - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px 23px; - margin: 24px 0; -} - -.join { - display: table; - margin: 24px auto; -} - -.join-us { - color: var(--blue); -} - -.border { - margin: 231px auto; - width: 640px; -} - -.main img { - display: block; - margin: 0 auto; -} - -.container { - margin-top: 40px; -} - -.social { - display: flex; - gap: 16px; -} - -.pass-wrapper { - position: relative; -} - -.eye1 { - position: absolute; - cursor: pointer; - width: 24px; - height: 24px; - right: 24px; - top: 25%; -} - -.eye2 { - position: absolute; - cursor: pointer; - width: 24px; - height: 24px; - right: 24px; - top: 82%; -} - -#toggle-password { - width: 100%; /* 부모 요소 .eye의 너비에 맞춤 */ - height: 100%; /* 부모 요소 .eye의 높이에 맞춤 */ - object-fit: contain; /* 아이콘이 부모 안에 꽉 차도록 */ -} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 1e6f96d2..00000000 --- a/css/style.css +++ /dev/null @@ -1,131 +0,0 @@ -* { - box-sizing: border-box; -} - -header.container { - background-color: white; - height: 70px; - display: flex; - justify-content: center; - align-items: center; - position: sticky; - top: 0; - z-index: 1; -} - -nav { - width: 1120px; - display: flex; - justify-content: space-between; -} - -.hero { - background-color: rgba(207, 229, 255, 1); - padding-top: 270px; -} - -.hero .script h1, -footer .script h1 { - color: rgba(55, 65, 81, 1); - font-size: 40px; - font-weight: 700; - line-height: 140%; - margin: 0; -} - -.hero .container { - display: flex; - justify-content: center; -} - -.hero .container .script h1 { - margin-bottom: 32px; -} - -.features { - max-width: 1920px; - margin: 0 auto; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; -} - -.feature-wrapper { - background-color: rgba(252, 252, 252, 1); - display: flex; - align-items: center; - justify-content: center; - height: 444px; - width: auto; - gap: 65px; -} - -.feature-content span { - color: #3692ff; - font-size: 18px; - line-height: 25px; - font-weight: 700; - margin-bottom: 12px; -} - -.feature-content p { - font-size: 24px; - font-weight: 500; - line-height: 120%; - letter-spacing: 0.08em; - margin-top: 24px; - white-space: nowrap; -} - -.padding { - padding: 138px 466px; -} - -.feature-content { - padding-right: 24px; -} - -#feature-content { - text-align: right; - padding-left: 24px; -} - -.footer-banner { - background-color: rgba(207, 229, 255, 1); - padding-top: 143px; -} - -.footer-container { - display: flex; - justify-content: center; -} - -footer .script-container { - padding-top: 112.5px; -} - -.footer-links { - background-color: rgba(17, 24, 39, 1); - color: rgba(156, 163, 175, 1); - font-size: 16px; - font-weight: 400; - line-height: 100%; - padding-top: 32px; - padding-bottom: 108px; -} - -.footer-content { - height: 20px; - display: flex; - justify-content: space-around; -} - -.policy-faq a { - text-decoration: none; - color: inherit; -} - -a:hover { - cursor: pointer; -} diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..e69de29b diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png new file mode 100644 index 00000000..4a5f85b2 Binary files /dev/null and b/images/home/bottom-banner-image.png differ diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png new file mode 100644 index 00000000..4684b9a7 Binary files /dev/null and b/images/home/feature1-image.png differ diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png new file mode 100644 index 00000000..31e20b97 Binary files /dev/null and b/images/home/feature2-image.png differ diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png new file mode 100644 index 00000000..5b8084a7 Binary files /dev/null and b/images/home/feature3-image.png differ diff --git a/images/home/hero-image.png b/images/home/hero-image.png new file mode 100644 index 00000000..d28fb652 Binary files /dev/null and b/images/home/hero-image.png differ diff --git a/images/icons/eye-invisible.svg b/images/icons/eye-invisible.svg new file mode 100644 index 00000000..92252b05 --- /dev/null +++ b/images/icons/eye-invisible.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons/eye-visible.svg b/images/icons/eye-visible.svg new file mode 100644 index 00000000..35a75305 --- /dev/null +++ b/images/icons/eye-visible.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico new file mode 100644 index 00000000..9fecc692 Binary files /dev/null and b/images/logo/favicon.ico differ diff --git a/images/logo/logo.svg b/images/logo/logo.svg new file mode 100644 index 00000000..55a63efc --- /dev/null +++ b/images/logo/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo/og-image.png b/images/logo/og-image.png new file mode 100644 index 00000000..e7d7b5bf Binary files /dev/null and b/images/logo/og-image.png differ diff --git "a/images/logo/\355\214\220\353\213\244\353\247\210\354\274\223.svg" "b/images/logo/\355\214\220\353\213\244\353\247\210\354\274\223.svg" new file mode 100644 index 00000000..9b20d2d7 --- /dev/null +++ "b/images/logo/\355\214\220\353\213\244\353\247\210\354\274\223.svg" @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/images/social/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/google-logo.png b/images/social/google-logo.png new file mode 100644 index 00000000..199f3d62 Binary files /dev/null and b/images/social/google-logo.png differ diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/images/social/instagram-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/kakao-logo.png b/images/social/kakao-logo.png new file mode 100644 index 00000000..bfadc1d3 Binary files /dev/null and b/images/social/kakao-logo.png differ diff --git a/images/social/twitter-logo.svg b/images/social/twitter-logo.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/images/social/twitter-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/youtube-logo.svg b/images/social/youtube-logo.svg new file mode 100644 index 00000000..5fcc0ff3 --- /dev/null +++ b/images/social/youtube-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/Hot item.png b/img/Hot item.png deleted file mode 100644 index 51d9c5a3..00000000 Binary files a/img/Hot item.png and /dev/null differ diff --git a/img/Img_home_01.jpg b/img/Img_home_01.jpg deleted file mode 100644 index a72d9e8c..00000000 Binary files a/img/Img_home_01.jpg and /dev/null differ diff --git a/img/Img_home_02.jpg b/img/Img_home_02.jpg deleted file mode 100644 index 01661502..00000000 Binary files a/img/Img_home_02.jpg and /dev/null differ diff --git a/img/Img_home_03.jpg b/img/Img_home_03.jpg deleted file mode 100644 index cdb92625..00000000 Binary files a/img/Img_home_03.jpg and /dev/null differ diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png deleted file mode 100644 index c3c26daa..00000000 Binary files a/img/Img_home_bottom.png and /dev/null differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png deleted file mode 100644 index 3c97e8a9..00000000 Binary files a/img/Img_home_top.png and /dev/null differ diff --git a/img/btn_goto.png b/img/btn_goto.png deleted file mode 100644 index 683fc586..00000000 Binary files a/img/btn_goto.png and /dev/null differ diff --git a/img/btn_large.png b/img/btn_large.png deleted file mode 100644 index 01161f7d..00000000 Binary files a/img/btn_large.png and /dev/null differ diff --git a/img/btn_large_join.jpg b/img/btn_large_join.jpg deleted file mode 100644 index 74ba9beb..00000000 Binary files a/img/btn_large_join.jpg and /dev/null differ diff --git a/img/closed.png b/img/closed.png deleted file mode 100644 index 69a949ba..00000000 Binary files a/img/closed.png and /dev/null differ diff --git a/img/favicon-16x16.png b/img/favicon-16x16.png deleted file mode 100644 index 75d4aa8c..00000000 Binary files a/img/favicon-16x16.png and /dev/null differ diff --git a/img/googlelogo.png b/img/googlelogo.png deleted file mode 100644 index f75dc761..00000000 Binary files a/img/googlelogo.png and /dev/null differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png deleted file mode 100644 index a3e343c7..00000000 Binary files a/img/ic_facebook.png and /dev/null differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png deleted file mode 100644 index c47e044d..00000000 Binary files a/img/ic_instagram.png and /dev/null differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png deleted file mode 100644 index 3f74b730..00000000 Binary files a/img/ic_twitter.png and /dev/null differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png deleted file mode 100644 index 874150b0..00000000 Binary files a/img/ic_youtube.png and /dev/null differ diff --git a/img/kakaologo.png b/img/kakaologo.png deleted file mode 100644 index bd767800..00000000 Binary files a/img/kakaologo.png and /dev/null differ diff --git a/img/login_button.png b/img/login_button.png deleted file mode 100644 index a3a145eb..00000000 Binary files a/img/login_button.png and /dev/null differ diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index 9b5b0af2..00000000 Binary files a/img/logo.png and /dev/null differ diff --git a/img/logobig.png b/img/logobig.png deleted file mode 100644 index 8248f602..00000000 Binary files a/img/logobig.png and /dev/null differ diff --git a/img/opened.png b/img/opened.png deleted file mode 100644 index e8a0fba8..00000000 Binary files a/img/opened.png and /dev/null differ diff --git a/index.html b/index.html index c4eef6b5..9c491796 100644 --- a/index.html +++ b/index.html @@ -3,153 +3,168 @@ - - - - 판다 마켓 + + + + + + + 판다마켓 + + + -
- +
+ + 로그인
+
-
-
-
+ + +
+
+ 인기 상품 +
+

Hot item

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

- 구경하러가기버튼 +

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

- 쇼핑하러 가는 판다의 모습
-
-
-
-
- 인기 상품을 구경하는 판다의 모습 -
- Hot item -

인기 상품을
확인해 보세요

-

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

-
+
+ 검색 기능 +
+

Search

+

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

+

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

-
-
-
- Search -

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

-

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

-
- 검색하는 판다 +
+ 판매 상품 등록 +
+

Register

+

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

+

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

-
-
- 판매할 상품을 등록하는 판다 -
- Register -

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

-

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

-
-
+
+ +
+ diff --git a/items.html b/items.html new file mode 100644 index 00000000..e69de29b diff --git a/login.html b/login.html deleted file mode 100644 index aecd7f39..00000000 --- a/login.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - - - - 판다마켓 - - -
-
- 판다마켓 로고 -
- - -
- - -
- 비밀번호 보기 -
-
-
- - -
-

판다마켓이 처음이신가요? 회원가입

-
-
-
- - - \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..e69de29b diff --git a/signin.html b/signin.html new file mode 100644 index 00000000..6d5c20ae --- /dev/null +++ b/signin.html @@ -0,0 +1,90 @@ + + + + + + 판다마켓 - 로그인 + + + + + + + +
+ 판다마켓 홈 + +
+
+ + +
+
+
+ +
+ + 비밀번호 숨김 +
+
+
+ + +
+ + + +
+ 판다마켓이 처음이신가요? 회원가입 +
+
+ + diff --git a/signup.html b/signup.html index 5ea33bbf..4d19af99 100644 --- a/signup.html +++ b/signup.html @@ -3,77 +3,119 @@ + 판다마켓 - 회원가입 + - - - - 판다마켓 + + + -
-
- 판다마켓 로고 -
- - - - -
- - -
- 비밀번호 감추기 -
- - -
- 비밀번호 보기 -
+
+ 판다마켓 홈 + +
+
+ + +
+
+
+ + +
+
+
+ +
+ + 비밀번호 숨김
-
+
+
+ +
+ + 비밀번호 숨김 +
+
+
+ + + + + + +
+ 이미 회원이신가요? + 로그인 +
diff --git a/styles/auth.css b/styles/auth.css new file mode 100644 index 00000000..3147fb8e --- /dev/null +++ b/styles/auth.css @@ -0,0 +1,127 @@ +.auth-container { + max-width: 400px; + margin: 0 auto; + padding: 0 16px; +} + +.logo-home-button { + margin: 0 auto; + display: block; + margin-top: 24px; + margin-bottom: 24px; + width: 198px; +} + +.logo-home-button img { + width: 100%; +} + +.input-item { + margin-bottom: 24px; + display: flex; + flex-direction: column; +} + +label { + display: block; + font-weight: 700; + font-size: 14px; + margin-bottom: 8px; +} + +input { + padding: 16px 24px; + background-color: #f3f4f6; + border: none; + border-radius: 12px; + font-size: 16px; + line-height: 24px; + width: 100%; +} + +.error { + color: red; +} + +.input-error { + border: 1px solid red; +} + +input::placeholder { + color: #9ca3af; + font-size: 16px; + line-height: 24px; +} + +input:focus { + outline-color: var(--blue); +} + +.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; +} + +.auth-switch { + font-weight: 500; + font-size: 15px; + text-align: center; +} + +.auth-switch a { + color: #3182f6; + text-decoration: underline; + text-underline-offset: 2px; +} + +@media (min-width: 768px) { + .auth-container { + max-width: 640px; + } + + .logo-home-button { + width: 396px; + margin-top: 48px; + margin-bottom: 40px; + } + + label { + font-size: 18px; + margin-bottom: 16px; + } +} + +@media (min-width: 1280px) { + .logo-home-button { + margin-top: 60px; + margin-bottom: 40px; + } +} diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 00000000..0e83962a --- /dev/null +++ b/styles/global.css @@ -0,0 +1,195 @@ +:root { + /* Gray scale */ + --gray-900: #1b1d1f; + --gray-800: #26282b; + --gray-600: #454c53; + --gray-500: #72787f; + --gray-400: #9ea4a8; + --gray-200: #e5e7eb; + --gray-100: #e8ebed; + --gray-50: #f7f7f8; + --blue: #3692ff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #374151; + word-break: keep-all; + font-family: "Pretendard", sans-serif; +} + +header { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; + background-color: #ffffff; + border-bottom: 1px solid #dfdfdf; +} + +.logo { + width: 103px; + height: 51px; + background-image: url(/images/logo/logo.svg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +main { + margin-top: 70px; +} + +footer { + background-color: #111827; + padding: 32px; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 60px; +} + +#copyright { + order: 3; + flex-basis: 100%; + color: #9ca3af; +} + +#footerMenu { + display: flex; + gap: 30px; + color: var(--gray-200); +} + +#socialMedia { + display: flex; + gap: 12px; +} + +a { + text-decoration: none; + color: inherit; +} + +img { + vertical-align: bottom; +} + +.wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; + padding: 0 16px; +} + +button { + background: none; + border: none; + outline: none; + box-shadow: none; + cursor: pointer; + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.button { + background-color: var(--blue); + 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; + pointer-events: none; +} + +.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 { + padding: 0 24px; + } + + .logo { + width: 153px; + height: 51px; + background-size: cover; + background-image: url(/images/logo/판다마켓.svg); + background-repeat: no-repeat; + background-position: center; + } + + .wrapper { + padding: 0 24px; + } + + .pill-button { + font-size: 20px; + font-weight: 700; + padding: 16px 126px; + } + + footer { + padding: 32px 104px 108px 104px; + } + + #copyright { + flex-basis: auto; + order: 0; + } +} + +@media (min-width: 1280px) { + header { + padding: 0 400px; + } + + .break-on-desktop { + display: inline; + } + + footer { + padding: 32px 200px 108px 200px; + } +} diff --git a/styles/home.css b/styles/home.css new file mode 100644 index 00000000..1bc338e6 --- /dev/null +++ b/styles/home.css @@ -0,0 +1,161 @@ +.banner { + background-color: #cfe5ff; + height: 540px; + text-align: center; + background-repeat: no-repeat; + background-position: bottom; + background-size: 130%; +} + +#hero { + background-image: url("../images/home/hero-image.png"); +} + +.banner h1 { + font-weight: 700; + font-size: 32px; + line-height: 140%; + padding: 48px 67px 18px 68px; +} + +#bottomBanner { + background-image: url("../images/home/bottom-banner-image.png"); +} + +#signinLinkButton { + font-size: 16px; + font-weight: 600; + border-radius: 8px; + padding: 11px 43px; +} + +#features { + padding-top: 52px; +} + +.feature { + margin-bottom: 64px; +} + +.feature img { + width: 100%; + margin-bottom: 20px; +} + +.feature:nth-child(2) { + text-align: right; +} + +.feature-content { + flex: 1; +} + +.feature-content h2 { + color: var(--blue); + font-size: 16px; + line-height: 22.4px; + font-weight: 700; + margin-bottom: 8px; +} + +.feature-content h1 { + font-weight: 700; + font-size: 24px; +} + +.feature-description { + font-weight: 500; + font-size: 16px; + line-height: 26px; + margin-top: 16px; +} + +@media (min-width: 768px) { + .banner { + height: 90vh; + background-size: 120%; + } + + .banner h1 { + font-size: 40px; + line-height: 56px; + padding-top: 84px; + padding-bottom: 24px; + } + + #hero h1 br { + display: none; + } + + #features { + padding-top: 24px; + padding-bottom: 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; + } + + #hero h1 br { + display: inline; + } + + #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; + } +}