diff --git a/css/components/footer.css b/css/components/footer.css new file mode 100644 index 00000000..1be4f474 --- /dev/null +++ b/css/components/footer.css @@ -0,0 +1,52 @@ +.footer__wrap { + background: var(--Secondary-900); + padding: 32px 400px; +} + +.footer__content { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.footer__copyright { + color: var(--Secondary-400); + text-align: center; + + font-size: 16px; + font-weight: 400; + line-height: normal; +} + +.footer__info-wrap { + display: flex; + justify-content: space-between; +} + +.footer__info { + text-decoration: none; + color: var(--Secondary-200); + text-align: center; + + font-size: 16px; + font-weight: 400; + line-height: normal; +} + +.footer__info:first-child { + margin: 0 30px 0 0; +} + +.footer__shortcut-btns { + display: flex; + justify-content: center; + align-items: center; +} + +.footer__shortcut-btn { + display: flex; +} + +.footer__shortcut-btn:not(:last-child) { + margin: 0 12px 0 0; +} diff --git a/css/components/header.css b/css/components/header.css new file mode 100644 index 00000000..d52815c5 --- /dev/null +++ b/css/components/header.css @@ -0,0 +1,31 @@ +.header__wrap { + border-bottom: 1px solid #dfdfdf; +} + +.header__content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.header__logo { + display: flex; +} + +/* Q. height의 높이가 차이 나는 이유? +div, div > a !== div > a > img +height = 55 !== 51 +display: inline-block or flex로 해결 */ + +.header__login-btn { + text-decoration: none; + padding: 12px 23px; + border-radius: 8px; + color: var(--Secondary-100); + background-color: var(--Primary-100); + + /* pretendard/lg-16px-semibold */ + font-size: 16px; + font-weight: 600; + line-height: 26px; +} diff --git a/css/screens/landing-page.css b/css/screens/landing-page.css new file mode 100644 index 00000000..0744a32f --- /dev/null +++ b/css/screens/landing-page.css @@ -0,0 +1,126 @@ +.landing-vertical { + display: flex; + justify-content: center; + align-items: flex-end; + height: 540px; + background: #cfe5ff; +} + +.landing-vertical__wrap { + display: flex; + justify-content: space-between; + align-items: center; + margin: 200px 405px 0 405px; +} + +.landing-vertical__content { + display: flex; + flex-direction: column; + padding: 0 0 60px 0; + gap: 32px; +} + +.landing-vertical__title { + color: var(--Secondary-700); + font-size: 40px; + font-weight: 700; + line-height: 140%; /* 56px */ + margin: 0; +} + +.landing-vertical__btn-link { + text-decoration: none; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + height: 56px; + border-radius: 40px; + padding: 16px 124px; + color: var(--Secondary-50); + background-color: var(--Primary-100); +} + +.landing-vertical__btn-text { + /* pretendard/xl-20px-semibold */ + font-size: 20px; + font-weight: 600; + line-height: 32px; +} + +.landing-vertical__wrap--bottom { + gap: 69px; +} + +.landing-main { + background-color: #fcfcfc; + padding: 0 0 138px 0; +} + +.landing-main__wrap { + display: flex; + background-color: #ffffff; +} + +.landing-main__wrap:first-child { + padding: 138px 605px 138px 360px; +} + +.landing-main__wrap--right { + justify-content: flex-end; + padding: 138px 360px 138px 591px; +} + +.landing-main__wrap:last-child { + padding: 138px 573px 138px 360px; +} + +.landing-main__card { + display: flex; + align-items: center; + background: #fcfcfc; + gap: 64px; +} + +.landing-main__card--right { + justify-content: flex-end; +} + +.landing-main__content { + display: flex; + flex-direction: column; +} + +.landing-main__content--right { + text-align: right; +} + +.landing-main__keyword { + color: var(--Primary-100); + + /* pretendard/2lg-18px-bold */ + font-size: 18px; + font-weight: 700; + line-height: 26px; + margin: 0; +} + +.landing-main__title { + color: var(--Secondary-700); + margin: 12px 0 24px; + + font-size: 40px; + font-weight: 700; + line-height: 140%; + letter-spacing: 0.8px; +} + +.landing-main__desc { + color: var(--Secondary-700); + margin: 0; + + /* pretendard/2xl-24px-medium */ + font-size: 24px; + font-weight: 500; + line-height: 32px; +} diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 00000000..811df950 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,45 @@ +@import "variables.css"; + +/* components */ +@import "components/header.css"; +@import "components/footer.css"; + +/* screens */ +@import "screens/landing-page.css"; + +* { + box-sizing: border-box; +} + +html { + width: 100vw; + overflow-x: hidden; +} + +body { + margin: 0; + font-family: Pretendard; + font-style: normal; +} + +.landing-vertical__wrap, +.landing-main__wrap, +.footer__wrap { + text-wrap: nowrap; +} + +@media (min-width: 1920px) { + .header__wrap { + padding: 9px 400px; + } +} + +@media (max-width: 1919px) { + .header__wrap { + padding: 9px 200px; + } +} + +/* Q. header__wrap에 padding: 9px 200px을, +@media (min-width: 1920px)로 9px 400px을 할당했을 때 +미디어 쿼리가 작동하지 않는 이유? */ diff --git a/css/variables.css b/css/variables.css new file mode 100644 index 00000000..02123924 --- /dev/null +++ b/css/variables.css @@ -0,0 +1,17 @@ +:root { + /* Primary color */ + --Primary-100: #3692ff; + --Primary-200: #1967d6; + --Primary-300: #1251aa; + + /* Secondary color */ + --Secondary-900: #111827; + --Secondary-800: #1f2937; + --Secondary-700: #374151; + --Secondary-600: #4b5563; + --Secondary-500: #6b7280; + --Secondary-400: #9ca3af; + --Secondary-200: #e5e7eb; + --Secondary-100: #f3f4f6; + --Secondary-50: #f9fafb; +} diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..e69de29b diff --git a/images/footer/ic_facebook.png b/images/footer/ic_facebook.png new file mode 100644 index 00000000..a3e343c7 Binary files /dev/null and b/images/footer/ic_facebook.png differ diff --git a/images/footer/ic_instagram.png b/images/footer/ic_instagram.png new file mode 100644 index 00000000..c47e044d Binary files /dev/null and b/images/footer/ic_instagram.png differ diff --git a/images/footer/ic_twitter.png b/images/footer/ic_twitter.png new file mode 100644 index 00000000..3f74b730 Binary files /dev/null and b/images/footer/ic_twitter.png differ diff --git a/images/footer/ic_youtube.png b/images/footer/ic_youtube.png new file mode 100644 index 00000000..874150b0 Binary files /dev/null and b/images/footer/ic_youtube.png differ diff --git a/images/header/Property 1=sm.png b/images/header/Property 1=sm.png new file mode 100644 index 00000000..9d5f8ef3 Binary files /dev/null and b/images/header/Property 1=sm.png differ diff --git a/images/header/Property 1=sm@2x.png b/images/header/Property 1=sm@2x.png new file mode 100644 index 00000000..cc73369e Binary files /dev/null and b/images/header/Property 1=sm@2x.png differ diff --git a/images/header/Property 1=sm@3x.png b/images/header/Property 1=sm@3x.png new file mode 100644 index 00000000..0df78478 Binary files /dev/null and b/images/header/Property 1=sm@3x.png differ diff --git a/images/main/Img_home_01.png b/images/main/Img_home_01.png new file mode 100644 index 00000000..dab42ab2 Binary files /dev/null and b/images/main/Img_home_01.png differ diff --git a/images/main/Img_home_02.png b/images/main/Img_home_02.png new file mode 100644 index 00000000..84d8629f Binary files /dev/null and b/images/main/Img_home_02.png differ diff --git a/images/main/Img_home_03.png b/images/main/Img_home_03.png new file mode 100644 index 00000000..381a2999 Binary files /dev/null and b/images/main/Img_home_03.png differ diff --git a/images/main/Img_home_bottom.png b/images/main/Img_home_bottom.png new file mode 100644 index 00000000..55c7196a Binary files /dev/null and b/images/main/Img_home_bottom.png differ diff --git a/images/main/Img_home_top.png b/images/main/Img_home_top.png new file mode 100644 index 00000000..e0cb6c54 Binary files /dev/null and b/images/main/Img_home_top.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..b7723c90 --- /dev/null +++ b/index.html @@ -0,0 +1,185 @@ + + + + + + 판다마켓 + + + + +
+
+
+ + + +
+
+
+
+
+
+
+
+

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

+ 구경하러 가기 +
+ + 거래하러 가는 판다 +
+
+
+ +
+
+
+
+ 인기 상품 검색하는 판다 + +
+

Hot item

+

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

+

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

+
+
+
+ +
+
+
+

Search

+

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

+

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

+
+ + 구매할 상품을 찾는 중 +
+
+ +
+
+ 판매할 상품을 등록하는 중 + +
+

Register

+

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

+

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

+
+
+
+
+
+ +
+
+
+
+

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

+
+ + 거래하러 가는 판다 +
+
+
+
+ + + + diff --git a/items.html b/items.html new file mode 100644 index 00000000..e69de29b diff --git a/login.html b/login.html new file mode 100644 index 00000000..e69de29b diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..e69de29b