diff --git a/imgs/Img_home_01.svg b/imgs/Img_home_01.svg new file mode 100644 index 0000000..cf221e0 --- /dev/null +++ b/imgs/Img_home_01.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imgs/Img_home_02.svg b/imgs/Img_home_02.svg new file mode 100644 index 0000000..63cc4ce --- /dev/null +++ b/imgs/Img_home_02.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imgs/Img_home_03.svg b/imgs/Img_home_03.svg new file mode 100644 index 0000000..39c18be --- /dev/null +++ b/imgs/Img_home_03.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imgs/Img_home_bottom.svg b/imgs/Img_home_bottom.svg new file mode 100644 index 0000000..8e10ce6 --- /dev/null +++ b/imgs/Img_home_bottom.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imgs/Img_home_top.svg b/imgs/Img_home_top.svg new file mode 100644 index 0000000..b5bea8a --- /dev/null +++ b/imgs/Img_home_top.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imgs/ic_facebook.svg b/imgs/ic_facebook.svg new file mode 100644 index 0000000..8491c2f --- /dev/null +++ b/imgs/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/imgs/ic_instagram.svg b/imgs/ic_instagram.svg new file mode 100644 index 0000000..c83306f --- /dev/null +++ b/imgs/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/imgs/ic_twitter.svg b/imgs/ic_twitter.svg new file mode 100644 index 0000000..14a6069 --- /dev/null +++ b/imgs/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/imgs/ic_youtube.svg b/imgs/ic_youtube.svg new file mode 100644 index 0000000..bf9be7a --- /dev/null +++ b/imgs/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/imgs/logo.svg b/imgs/logo.svg new file mode 100644 index 0000000..31c250d --- /dev/null +++ b/imgs/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..35a5cd6 --- /dev/null +++ b/index.html @@ -0,0 +1,144 @@ + + + + + + 판다마켓 + + + + + +
+ +
+
+
+
+
+

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

+ 구경하러 가기 +
+ 장바구니를 들고 있는 판다 +
+
+
+
+
+ 인기 상품 +
+ Hot item +

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

+

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

+
+
+
+
+
+ 인기 상품 +
+ Search +

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

+

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

+
+
+
+
+
+ 인기 상품 +
+ Register +

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

+

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

+
+
+
+
+
+
+
+

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

+
+ 장바구니를 들고 서로 인사하는 두 마리의 판다 +
+
+
+ + + diff --git a/items.html b/items.html new file mode 100644 index 0000000..4a73083 --- /dev/null +++ b/items.html @@ -0,0 +1,11 @@ + + + + + + Document + + +

중고 마켓 페이지입니다.

+ + diff --git a/login.html b/login.html new file mode 100644 index 0000000..03966d9 --- /dev/null +++ b/login.html @@ -0,0 +1,11 @@ + + + + + + Document + + +

로그인 페이지입니다.

+ + diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..263575a --- /dev/null +++ b/reset.css @@ -0,0 +1,100 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + font-family: 'Pretendard Variable', Pretendard, -apple-system, + BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', + 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; + -webkit-font-smoothing: antialiased; +} + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..5807e19 --- /dev/null +++ b/style.css @@ -0,0 +1,161 @@ +:root { + --primary-100: #3692ff; + --primary-200: #1967d6; + --primary-300: #1251aa; + + --error: #f74747; + --bg-blue: #cfe5ff; + --bg-gray: #fcfcfc; + --bg-white: #ffffff; + + --gray-50: #f9fafb; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-400: #9ca3af; + --gray-500: #6b7280; + --gray-600: #4b5563; + --gray-700: #374151; + --gray-800: #1f2937; + --gray-900: #111827; +} + +header { + position: sticky; + top: 0; + background-color: white; + display: flex; + align-items: center; + padding: 0 200px; + border-bottom: 1px solid #dfdfdf; + height: 70px; +} + +.nav-bar { + display: flex; + max-width: 1520px; + justify-content: space-between; + margin: 0 auto; + flex-grow: 1; +} +.login-btn { + display: flex; + justify-content: center; + align-items: center; + + width: 128px; + height: 48px; + font-weight: 600; + color: var(--gray-100); + background-color: #3692ff; + border-radius: 8px; +} +.top-wrapper, +.bottom-wrapper { + background-color: var(--bg-blue); +} + +.top, +.bottom { + display: flex; + width: 1110px; + padding-top: 200px; + margin: 0 auto; +} + +.top div { + flex-grow: 1; + padding-top: 40px; +} +.bottom div { + flex-grow: 1; + padding-top: 112.5px; +} +.top h2, +.bottom h2 { + margin-bottom: 32px; + font-weight: 700; + font-size: 40px; + list-style: 140%; +} +.market-btn { + display: flex; + justify-content: center; + align-items: center; + + width: 357px; + height: 56px; + + font-size: 20px; + font-weight: 600; + color: var(--gray-50); + background-color: var(--primary-100); + border-radius: 40px; +} +.features { + background-color: var(--gray-100); + padding-bottom: 138px; +} +.feature-container { + padding: 138px 0; + background-color: var(--bg-white); +} +.feature { + display: flex; + background-color: var(--bg-gray); + width: 988px; + margin: 0 auto; +} +.feature-content span { + color: var(--primary-100); + font-size: 10px; + font-weight: 700; + list-style: 26px; +} +.feature-content h2 { + font-weight: 700; + font-size: 40px; + line-height: 140%; + padding: 12px 0 24px 0; +} +.feature-content p { + font-weight: 500; + font-size: 24px; + line-height: 32px; +} +.hot-item { + padding: 103px 31px 103px 64px; +} +.search { + padding: 103px 64px 103px 38.5px; + text-align: right; +} +.register { + padding: 103px 0 103px 64px; +} +.row-reverse { + flex-direction: row-reverse; +} +footer { + height: 160px; + background-color: var(--gray-900); + padding: 0 200px; +} +.footer-box { + display: flex; + justify-content: space-between; + max-width: 1520px; + padding-top: 32px; + margin: 0 auto; +} +.footer-box span { + color: var(--gray-400); +} +.footer-links { + display: flex; + gap: 30px; + color: var(--gray-200); +} +.footer-icons { + display: flex; + gap: 12px; +}