diff --git a/README.md b/README.md new file mode 100644 index 000000000..37ffea113 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# Panda Market 만들기 +스프린트 1미션 diff --git a/base.css b/base.css new file mode 100644 index 000000000..f579488fd --- /dev/null +++ b/base.css @@ -0,0 +1,63 @@ +:root { + /* background-color */ + --color-background: #cfe5ff; + --color-skyblue-btn-background: #e6f2ff; + + /* color */ + /* --color-gray900: #1b1d1f; + --color-gray800: #26282b; + --color-gray600: #454c53; + --color-gray500: #72787f; + --color-gray400: #9ea4a8; + --color-gray200: #e5e7eb; + --color-gray100: #e8ebed; + --color-gray50: #f7f7f8; */ + + --color-cool-gray100: #f3f4f6; + --color-cool-gray200: #e5e7eb; + --color-cool-gray400: #9ca3af; + --color-cool-gray600: #4b5563; + --color-cool-gray700: #374151; + --color-cool-gray800: #1f2937; + --color-cool-gray900: #111827; + + --color-brand-blue: #3692ff; + --color-error-red: #f74747; + + --color-alink-blue: #3182f6; + + /* button color */ + --button-hover-color-blue1: #3792ff; + --button-hover-color-blue2: #1867d6; + --button-hover-color-blue3: #1151aa; + --button-hover-color-gray: #9da3af; + + --color-white: #ffffff; + --color-pink: #ff68cc; + + /* button size */ + --button-login-width: 128px; + --button-login-height: 48px; + + /* Desktop input */ + --desktop-input-width: 640px; + --desktop-input-height: 56px; + + --input-border-radius: 12px; + --input-background-color-gray100: var(--color-gray100); + --input-font-color-gray400: var(--color-cool-gray400); + --input-font-color-black: var(--color-gray800); + --input-font-size: 16px; +} + +body { + font-family: 'pretendard', sans-serif; +} + +button { + border: none; +} + +button:hover { + cursor: pointer; +} diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png new file mode 100644 index 000000000..7dbb290e6 Binary files /dev/null and b/img/Img_home_bottom.png differ diff --git a/img/Img_home_hot-item.png b/img/Img_home_hot-item.png new file mode 100644 index 000000000..0cd4e68f4 Binary files /dev/null and b/img/Img_home_hot-item.png differ diff --git a/img/Img_home_register.png b/img/Img_home_register.png new file mode 100644 index 000000000..3fc95b073 Binary files /dev/null and b/img/Img_home_register.png differ diff --git a/img/Img_home_search.png b/img/Img_home_search.png new file mode 100644 index 000000000..2e229671b Binary files /dev/null and b/img/Img_home_search.png differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png new file mode 100644 index 000000000..c1416ad92 Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/icon/ic_facebook.svg b/img/icon/ic_facebook.svg new file mode 100644 index 000000000..b9c9d4939 --- /dev/null +++ b/img/icon/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon/ic_instagram.svg b/img/icon/ic_instagram.svg new file mode 100644 index 000000000..0b9337b07 --- /dev/null +++ b/img/icon/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon/ic_twitter.svg b/img/icon/ic_twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/img/icon/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon/ic_youtube.svg b/img/icon/ic_youtube.svg new file mode 100644 index 000000000..a3a16c512 --- /dev/null +++ b/img/icon/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/logo/img_logo.png b/img/logo/img_logo.png new file mode 100644 index 000000000..b74387514 Binary files /dev/null and b/img/logo/img_logo.png differ diff --git a/img/logo/logo.png b/img/logo/logo.png new file mode 100644 index 000000000..8d7fa9ca4 Binary files /dev/null and b/img/logo/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..c7ce4cd46 --- /dev/null +++ b/index.html @@ -0,0 +1,123 @@ + + + + + + 판다마켓 + + + + + + + +
+
+ + +
+
+
+ +
+
+
+ 일상의 모든 물건을
거래해 보세요 + +
+
구경가는 판다
+
+
+ + +
+
+
+
hot-item
+
+
Hot item
+
인기 상품을
확인해 보세요
+
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
+
+
+ +
+
hot-item
+
+
Search
+
구매를 원하는
상품을 검색하세요
+
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
+
+
+ +
+
hot-item
+
+
Register
+
판매를 원하는
상품을 등록하세요
+
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
+
+
+
+
+ + +
+
+
+
믿을 수 있는
판다마켓 중고거래
+
+
+ 믿을 수 있는 판다마켓 +
+
+
+
+ + + + + diff --git a/main.css b/main.css new file mode 100644 index 000000000..b6bc35aab --- /dev/null +++ b/main.css @@ -0,0 +1,390 @@ +@import './reset.css'; +@import './base.css'; + +/* header */ +header { + width: 100%; +} + +.header_wrap { + margin: auto; + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px 200px; +} + +.logo { + width: 9.5625rem; + height: 3.1875rem; + background-image: url(./img/logo/img_logo.png); + background-size: cover; +} + +.header_wrap button { + width: 8rem; + height: 3rem; + background-color: var(--color-brand-blue); + border-radius: 8px; + color: white; + font-size: 1rem; +} + +/* Main_banner */ +.main_banner_bg { + background-color: var(--color-background); + display: flex; + justify-content: center; +} + +.main_banner { + width: 1200px; + height: 100%; + margin: auto; + display: flex; + justify-content: center; + align-items: center; +} + +.main_banner .wrap { + width: 22.1875rem; + display: flex; + flex-direction: column; + justify-content: center; + gap: 2rem; +} + +.main_banner span { + font-size: 2.5em; + font-weight: 700; + line-height: 3.5rem; + color: var(--color-cool-gray700); +} + +.main_banner button { + width: 20.9375rem; + height: 3.5rem; + border-radius: 2.5rem; + background-color: var(--color-brand-blue); + color: var(--color-white); + font-size: 1.25rem; + font-weight: 600; + line-height: 1.5rem; +} + +.main_banner_img { + width: 996px; + height: 447px; + display: flex; + align-items: flex-end; +} + +.main_banner img { + width: 100%; +} + +/* Main_info */ +.main_info_wrap { + background-color: white; +} + +.main_info_background { + margin: auto; + width: 75rem; +} + +.main_info { + height: 45rem; + display: grid; + grid-template: 1fr/1fr 1fr; + gap: 4rem; +} + +.main_info .img_wrap { + display: flex; + justify-content: center; + align-items: center; +} + +.main_info img, +.main_info_second img { + width: 100%; + height: 27.75rem; +} + +.main_info .text_wrap { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.75rem; +} + +.main_info .blue-title, +.main_info_second .blue-title { + font-size: 1.125rem; + font-weight: 700; + color: var(--color-brand-blue); + line-height: 1.575rem; +} + +.main_info .title, +.main_info_second .title { + font-size: 2.5rem; + font-weight: 700; + line-height: 3.5rem; + color: var(--color-cool-gray700); +} + +.main_info .description, +.main_info_second .description { + font-size: 1.5rem; + font-weight: 500; + line-height: 1.8rem; + color: var(--color-cool-gray700); +} + +.main_info_second { + display: grid; + grid-template: 1fr/1fr 1fr; + grid-template-areas: 'txt img'; + gap: 4rem; +} + +.main_info_second .text_wrap { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; + gap: 0.75rem; + text-align: end; +} + +.main_info_second .img_wrap { + grid-area: img; +} + +.main_info_second .text_wrap { + grid-area: txt; +} + +/* home_bottom */ +.bottom_banner { + background-color: var(--color-background); + height: 33.75rem; +} + +.bottom_banner_wrap { + margin: auto; + width: 75rem; + height: 33.75rem; + display: flex; + justify-content: center; +} + +.bottom_banner .img_wrap { + width: 996px; + height: 540px; +} + +.bottom_banner img { + width: 100%; + height: 100%; + position: relative; +} + +.bottom_banner .title_wrap { + display: flex; + align-items: center; +} + +.bottom_banner .title { + width: 17.875rem; + color: var(--color-cool-gray700); + font-size: 2.5rem; + font-weight: 700; + line-height: 56px; +} + +/* footer */ + +footer { + height: 10rem; + background-color: var(--color-cool-gray900); + color: var(--color-cool-gray400); + display: flex; + justify-content: center; +} + +.footer_wrap { + width: 95rem; + padding: 2rem 12.5rem; + display: flex; + justify-content: space-between; + line-height: 1.1931rem; +} + +footer a { + color: var(--color-cool-gray200); +} + +footer img { + color: var(--color-white); +} + +.privacy_footer { + width: 9.9375rem; + display: flex; + justify-content: space-between; +} + +/* tablet */ +@media (max-width: 767px) { + /* header */ + + .header_wrap { + margin: 10px 30px; + } + + .logo { + width: 7.5rem; + height: 2.5rem; + } + + .header_wrap button { + width: 6rem; + height: 2.5rem; + font-size: 0.9rem; + } + + /* main banner */ + + .main_banner_bg { + height: 300px; + } + .main_banner { + width: 650px; + } + + .main_banner .wrap { + width: 355px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; + } + + .main_banner span { + font-size: 1.8rem; + font-weight: 600; + line-height: 2.5rem; + text-align: center; + } + + .main_banner button { + width: 15rem; + height: 3rem; + border-radius: 2.5rem; + font-size: 1rem; + font-weight: 500; + line-height: 1rem; + } + + .main_banner_img { + width: 500px; + height: 100%; + } + + .main_banner img { + width: 110%; + height: 85%; + } + + /* Main info */ + + .main_info_background { + margin: auto; + width: 600px; + } + + .main_info { + height: 400px; + gap: 2rem; + } + + .main_info img, + .main_info_second img { + height: 280px; + } + + .main_info .text_wrap { + gap: 0.4rem; + } + + .main_info .blue-title, + .main_info_second .blue-title { + font-size: 0.9rem; + font-weight: 600; + line-height: 1rem; + } + + .main_info .title, + .main_info_second .title { + font-size: 1.8rem; + font-weight: 600; + line-height: 2.5rem; + } + + .main_info .description, + .main_info_second .description { + font-size: 1rem; + font-weight: 500; + line-height: 1.2rem; + } + + .main_info_second { + gap: 2rem; + } + + /* home_bottom */ + .bottom_banner { + background-color: var(--color-background); + height: 300px; + } + + .bottom_banner_wrap { + margin: auto; + width: 650px; + height: 100%; + } + + .bottom_banner .img_wrap { + width: 550px; + height: 300px; + } + + .bottom_banner .title_wrap { + height: 300px; + } + + .bottom_banner .title { + width: 220px; + font-size: 1.8rem; + font-weight: 600; + line-height: 2.5rem; + } + + /* footer */ + + .footer_wrap { + width: 95rem; + padding: 1.5rem 10rem; + line-height: 1rem; + flex-direction: column; + text-align: center; + } + .privacy_footer { + margin: auto; + flex-direction: column; + line-height: 2rem; + } +} diff --git a/reset.css b/reset.css new file mode 100644 index 000000000..082ccffc7 --- /dev/null +++ b/reset.css @@ -0,0 +1,132 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +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; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +a { + text-decoration: none; +}