diff --git a/common.css b/common.css new file mode 100644 index 00000000..b2183701 --- /dev/null +++ b/common.css @@ -0,0 +1,4 @@ +* { + box-sizing: border-box; + white-space: nowrap; +} diff --git a/fonts/rokafsansmedium-normal.woff b/fonts/rokafsansmedium-normal.woff new file mode 100644 index 00000000..168369d6 Binary files /dev/null and b/fonts/rokafsansmedium-normal.woff differ diff --git a/images/Img_home_01.png b/images/Img_home_01.png new file mode 100644 index 00000000..f496ba4c Binary files /dev/null and b/images/Img_home_01.png differ diff --git a/images/Img_home_02.png b/images/Img_home_02.png new file mode 100644 index 00000000..1f3b1b83 Binary files /dev/null and b/images/Img_home_02.png differ diff --git a/images/Img_home_03.png b/images/Img_home_03.png new file mode 100644 index 00000000..eb0d6cd2 Binary files /dev/null and b/images/Img_home_03.png differ diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png new file mode 100644 index 00000000..d4ef2c69 Binary files /dev/null and b/images/Img_home_bottom.png differ diff --git a/images/Img_home_top.png b/images/Img_home_top.png new file mode 100644 index 00000000..f48df007 Binary files /dev/null and b/images/Img_home_top.png differ diff --git a/images/ic_facebook.png b/images/ic_facebook.png new file mode 100644 index 00000000..a3e343c7 Binary files /dev/null and b/images/ic_facebook.png differ diff --git a/images/ic_instagram.png b/images/ic_instagram.png new file mode 100644 index 00000000..c47e044d Binary files /dev/null and b/images/ic_instagram.png differ diff --git a/images/ic_twitter.png b/images/ic_twitter.png new file mode 100644 index 00000000..3f74b730 Binary files /dev/null and b/images/ic_twitter.png differ diff --git a/images/ic_youtube.png b/images/ic_youtube.png new file mode 100644 index 00000000..874150b0 Binary files /dev/null and b/images/ic_youtube.png differ diff --git "a/images/\355\214\220\353\213\244 \354\226\274\352\265\264.png" "b/images/\355\214\220\353\213\244 \354\226\274\352\265\264.png" new file mode 100644 index 00000000..e74e7d91 Binary files /dev/null and "b/images/\355\214\220\353\213\244 \354\226\274\352\265\264.png" differ diff --git a/index-style.css b/index-style.css new file mode 100644 index 00000000..bdeaab49 --- /dev/null +++ b/index-style.css @@ -0,0 +1,256 @@ +:root { + --font-logo: ROKAFSansMedium; + --font-basic: Pretendard-Regular; + + --font-size-logo: 25.63px; + --font-size-btn-login: 16px; + --font-size-btn-landing: 20px; + --font-size-title: 40px; + --font-size-subtitle: 24px; + --font-size-cardtitle: 18px; + --font-size-footer: 16px; + + --color-btn: #3692ff; + --color-btn-hover: #1967d6; + + --color-bg-body: #ffffff; + --color-bg-card: #fcfcfc; + --color-bg-ft: #111827; + --color-bg-landing: #cfe5ff; + + --color-txt-main: #374151; + --color-txt-ft-corp: #9ca3af; + --color-txt-ft-link: #e5e7eb; + + --border-radius-sm: 8px; + --border-radius-lg: 40px; +} + +@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-face { + font-family: 'ROKAFSansMedium'; + src: url('./fonts/rokafsansmedium-normal.woff') format('woff'); +} + +body { + margin: 0px; +} + +.page-header { + background-color: var(--color-bg-body); + height: 70px; +} + +.nav-container { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin: 0 auto; + padding: 0 200px; + max-width: 1520px; +} + +.nav-logo-link { + text-decoration: none; + display: flex; + flex-direction: row; + align-items: center; + gap: 4.75px; +} + +.nav-logo-image { + width: 40px; +} + +.nav-logo-text { + font-family: var(--font-logo); + color: var(--color-btn); + font-weight: 700; + font-size: var(--font-size-logo); +} + +.btn { + background-color: var(--color-btn); + text-decoration: none; + color: var(--color-bg-body); + font-family: var(--font-basic); + text-align: center; + width: 100%; +} + +.btn:hover { + background-color: var(--color-btn-hover); +} + +.nav-btn { + max-width: 128px; + border-radius: var(--border-radius-sm); + padding: 11px 0; +} + +.landing { + background-color: var(--color-bg-landing); + padding: 200px 0 0; +} + +.landing-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 7px; +} + +.landing-context { + display: flex; + flex-direction: column; + justify-content: center; + width: 357px; + gap: 32px; + margin-bottom: 60px; +} + +.landing-title { + font-family: var(--font-basic); + font-size: var(--font-size-title); + font-weight: 700; + color: var(--color-txt-main); + margin: 0; +} + +.landing-img { + max-width: 746px; + min-width: 500px; + width: 100%; +} + +.landing-btn { + padding: 12px 0; + border-radius: var(--border-radius-lg); + font-size: var(--font-size-btn-landing); + font-weight: 600; +} + +.page-main { + background-color: var(--color-bg-body); + padding: 138px 0; +} + +.card-container { + max-width: 988px; + height: 100%; + background-color: var(--color-bg-card); + margin: 0 auto; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 64px; +} + +.card-img { + max-width: 579px; + min-width: 400px; + width: 100%; +} + +.card-context-left, +.card-context-right { + font-family: var(--font-basic); + max-width: 359px; +} + +.card-context-left { + padding-left: 24px; +} +.card-context-right { + padding-right: 24px; +} + +.card-title { + color: var(--color-btn); + font-size: var(--font-size-cardtitle); + font-weight: 700; + margin: 0 0 12px; +} + +.card-subtitle { + color: var(--color-txt-main); + font-size: var(--font-size-title); + font-weight: 700; + line-height: 140%; + margin: 0 0 24px; +} + +.card-description { + color: var(--color-txt-main); + font-size: var(--font-size-subtitle); + font-weight: 500; + line-height: 32px; + margin: 0; +} + +.page-spacing { + background-color: var(--color-bg-card); + height: 138px; +} + +.page-footer { + background-color: var(--color-bg-ft); + height: 160px; + padding-top: 32px; +} + +.footer-container { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0 200px; + max-width: 1510px; + margin: 0 auto; +} + +.footer-corp { + color: var(--color-txt-ft-corp); +} + +.footer-links { + display: flex; + flex-direction: row; + gap: 30px; +} +.footer-links a { + text-decoration: none; + color: var(--color-txt-ft-link); + font-size: var(--font-size-footer); + font-weight: 400; +} + +.footer-icon { + width: 18px; +} + +@media (min-width: 0px) { + :root { + --font-size-title: 24px; + --font-size-subtitle: 14px; + } +} +@media (min-width: 992px) { + :root { + --font-size-title: 32px; + --font-size-subtitle: 19px; + } +} +@media (min-width: 1920px) { + :root { + --font-size-title: 40px; + --font-size-subtitle: 24px; + } +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..2640543b --- /dev/null +++ b/index.html @@ -0,0 +1,190 @@ + + + + + + + + + + + 판다 마켓 + + +
+ +
+
+
+
+
+

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

+ 구경하러 가기 + +
+ 홈페이지를 소개하고 있는 그림 +
+
+
+
+ 가장 HOT한 중고거래 물품을 판다마켓에서 확인해보세요 +
+

Hot item

+

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

+

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

+
+
+
+
+
+
+

Search

+

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

+

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

+
+ 구매하고 싶은 물품은 검색해서 쉽게 찾아보세요 +
+
+
+
+ 어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요 +
+

Register

+

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

+

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

+
+
+
+
+
+
+
+

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

+
+ 중고 거래를 진행중인 그림 +
+
+
+ + +