diff --git a/css/base.css b/css/base.css new file mode 100644 index 00000000..6b694441 --- /dev/null +++ b/css/base.css @@ -0,0 +1,29 @@ +:root { + /* Primary color */ + --blue100: #3692FF; + --blue200: #1967D6; + --blue300: #1251AA; + + /* Secondary color */ + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #6b7280; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray50: #f9fafb; + + /* Error */ + --red: #F74747; + + /* inactive */ + --inactive: #9ca3af; + + /* normal */ + --gray: #fcfcfc; + --white: #ffffff; + --nav: #dfdfdf; + --banner: #cfe5ff; +} \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..398bf93f --- /dev/null +++ b/css/reset.css @@ -0,0 +1,36 @@ +/* 전체 초기화 */ +* { + top: 0; + bottom: 0; + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; + font-family: "Pretendard Variable", sans-serif; + font-size: 16px; /* Base font size */ +} + +/* 기본 스타일 초기화 */ +a { + text-decoration: none; +} + +.main-btn, +button { + cursor: pointer; +} + +.main-btn:hover, +button:hover { + background: var(--blue200); +} + +.main-btn:active, +button:active { + background: var(--blue300); +} + +.main-btn:disabled, +button:disabled { + background: var(--inactive); +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..a8a9256c --- /dev/null +++ b/css/style.css @@ -0,0 +1,340 @@ +/* 상단바 */ +.nav { + background: var(--white); + width: 100%; + height: 4.375rem; + margin: 0 auto; + padding: 0.56rem 10%; + gap: 0.625rem; + border-bottom: 1px solid var(--nav); +} + +.nav-content { + display: flex; + width: 100%; + height: 3.18rem; + margin: 0 auto; + justify-content: space-between; +} + +.logo { + width: 9.56rem; + height: 3.18rem; +} + +.login { + color: var(--white); + background: var(--blue100); + font-size: 1rem; + font-weight: 600; + width: 8rem; + height: 3rem; + padding: 0.75rem 1.4375rem; + gap: 0.625rem; + border: none; + border-radius: 0.5rem; +} + +/* main banner */ +article { + background: var(--banner); + margin: 0 auto; + width: 100%; + height: 33.75rem; +} + +.banner { + width: 100%; + height: 33.75rem; + background: var(--banner); +} + +.container { + display: flex; + justify-content: center; + align-items: center; + position: relative; + width: 80%; + height: 21.25rem; + top: 12.5rem; + left: 10%; + gap: 0.44rem; +} + +.container-box { + display: flex; + flex-direction: column; + width: 30%; + height: 16.25rem; + gap: 2rem; + padding-bottom: 3.75rem; +} + +.text p { + font-weight: 700; + color: var(--gray700); + font-size: 2.5rem; + line-height: 3.5rem; +} + +.main-btn { + display: flex; + background: var(--blue100); + width: 22.3rem; + height: 3.5rem; + gap: 0.625rem; + padding: 1rem 7.75rem; + border: none; + border-radius: 2.5rem; +} + +.font { + color: var(--gray50); + font-weight: 600; + font-size: 1.25rem; + text-decoration: none; +} + +/* main section */ +section { + background: var(--white); + margin: 0 auto; + width: 100%; + height: 45rem; + top: 4.375rem; +} + +.section { + padding: 8.625rem 10%; +} + +.content { + background: var(--gray); + display: flex; + width: 80%; + height: 27.75rem; + margin: 0 auto; + border-radius: 0.75rem; + gap: 4rem; + align-items: center; + justify-content: center; +} + +.content-box { + display: flex; + flex-direction: column; + width: 30%; + height: 14.875rem; + padding-right: 1.5rem; + gap: 0.75rem; +} + +h3 { + color: var(--blue100); + font-size: 1.125rem; + font-weight: 700; + line-height: 1.625rem; +} + +.text-box { + display: flex; + flex-direction: column; + width: 100%; + height: 12.5rem; + gap: 1.5rem; +} + +.text-box p { + width: 100%; + height: 7rem; + color: var(--gray700); + font-weight: 700; + font-size: 2.5rem; + line-height: 3.5rem; + letter-spacing: 2%; +} + +.text-box .info { + color: var(--gray700); + width: 100%; + height: 4rem; + font-weight: 500; + font-size: 1.5rem; + line-height: 2rem; +} + +.reverse { + text-align: right; +} + +.reverse .text-box { + width: 100%; + height: 12.5rem; +} + +.reverse p { + width: 100%; + height: 7rem; +} + +.reverse .info { + width: 100%; +} + +.img { + height: auto; + border-radius: 0.75rem; +} + +.register .content-box { + width: 30%; + height: 14.875rem; +} + +.register p { + width: 100%; + height: 7rem; +} + +.register .info { + width: 100%; + height: 4rem; +} + +.block { + height: 12rem; + background: var(--gray); +} + +/* section banner */ +.content-box { + display: flex; + flex-direction: column; + width: 30%; + height: 14.875rem; + padding-right: 1.5rem; + gap: 0.75rem; +} + +.bottom .container { + top: 8.93rem; + left: 10%; + width: 80%; + height: 24.8rem; +} + +.bottom .container-box { + display: flex; + top: 0; + width: 30%; + height: 10.75rem; + padding-bottom: 3.75rem; + gap: 0.625rem; +} + +.bottom p { + height: 7rem; +} + +/* footer */ +footer { + display: flex; + margin: 0 auto; + width: 100%; + height: 10rem; + color: var(--gray200); + background-color: var(--gray900); +} + +.nav-bottom { + width: 80%; + height: 1.2rem; + margin: 0 auto; + padding-top: 2.5rem; + display: flex; + justify-content: space-between; +} + +.left { + color: var(--gray400); + font-weight: 400; + font-size: 1rem; + text-align: center; +} + +.center { + display: flex; + width: 9.9rem; + height: 1.2rem; + gap: 1.875rem; + text-align: center; +} + +.policy { + width: 6.25rem; + height: 1.2rem; +} + +.faq { + width: 1.8rem; + height: 1.2rem; +} + +.icon { + display: flex; + width: 7.25rem; + height: 1.25rem; + gap: .75rem; +} + +a { + color: var(--gray200); +} + +/* Responsive adjustments */ +@media (max-width: 1200px) { + .container, .bottom .container { + width: 90%; + left: 5%; + } + .section, .nav-bottom { + width: 90%; + padding: 8.625rem 5%; + } +} + +@media (max-width: 768px) { + .container, .bottom .container { + flex-direction: column; + align-items: center; + } + .container-box, .bottom .container-box { + width: 80%; + } + .text p, .text-box p { + font-size: 2rem; + } + .main-btn, .font { + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .text p, .text-box p { + font-size: 1.5rem; + } + .main-btn, .font { + font-size: 0.875rem; + } + .container-box, .bottom .container-box { + width: 100%; + } + .text-box p { + font-size: 1.5rem; + line-height: 2rem; + } + .text-box .info { + font-size: 1rem; + line-height: 1.5rem; + } +} \ No newline at end of file diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..115e91c1 --- /dev/null +++ b/faq.html @@ -0,0 +1,9 @@ + + + + + + FAQ + + + diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 00000000..2a2878a8 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 00000000..e91409b5 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 00000000..ef3b6359 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/main1.png b/images/main1.png new file mode 100644 index 00000000..9e6fe6eb Binary files /dev/null and b/images/main1.png differ diff --git a/images/main2.png b/images/main2.png new file mode 100644 index 00000000..09a09337 Binary files /dev/null and b/images/main2.png differ diff --git a/images/main3.png b/images/main3.png new file mode 100644 index 00000000..78ffa0c4 Binary files /dev/null and b/images/main3.png differ diff --git a/images/panda1.png b/images/panda1.png new file mode 100644 index 00000000..5eb83209 Binary files /dev/null and b/images/panda1.png differ diff --git a/images/panda2.png b/images/panda2.png new file mode 100644 index 00000000..716a6a12 Binary files /dev/null and b/images/panda2.png differ diff --git a/images/pandamarket.png b/images/pandamarket.png new file mode 100644 index 00000000..ac5b678e Binary files /dev/null and b/images/pandamarket.png differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 00000000..2b516cf4 Binary files /dev/null and b/images/twitter.png differ diff --git a/images/youtube.png b/images/youtube.png new file mode 100644 index 00000000..845dad34 Binary files /dev/null and b/images/youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..21c5c6ab --- /dev/null +++ b/index.html @@ -0,0 +1,160 @@ + + + + + + + + + + + 판다마켓 + + +
+ +
+
+
+ +
+
+
+
+ +
+

Hot item

+
+

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

+

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

+
+
+
+
+
+
+
+
+
+

Search

+
+

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

+

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

+
+
+ +
+
+
+
+
+
+ +
+

Register

+
+

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

+

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

+
+
+
+
+
+
+
+ +
+ +
+ + diff --git a/items.html b/items.html new file mode 100644 index 00000000..37c576a7 --- /dev/null +++ b/items.html @@ -0,0 +1,9 @@ + + + + + + items + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 00000000..060a2d13 --- /dev/null +++ b/login.html @@ -0,0 +1,9 @@ + + + + + + login + + + \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..093ffcd7 --- /dev/null +++ b/privacy.html @@ -0,0 +1,9 @@ + + + + + + privacy + + + \ No newline at end of file