diff --git a/assets/css/common.css b/assets/css/common.css new file mode 100644 index 00000000..b0d48a8a --- /dev/null +++ b/assets/css/common.css @@ -0,0 +1,161 @@ +/* ====== common ====== */ +#wrap { + background: #fcfcfc; +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0 5px; + color: var(--white); + font-weight: 600; + background: var(--btn-default-bg); + transition: background 0.2s ease; +} +.btn:not(.white):hover { + background: var(--btn-hover-bg); +} +.btn:not(.white):active { + background: var(--btn-active-bg); +} +.btn:not(.white):disabled { + background: var(--btn-disabled-bg); + cursor: default; +} + +.btn.white { + border: 1px solid var(--btn-white-color); + color: var(--btn-white-color); + background: var(--btn-white-bg); +} + +/* small */ +.btn.sm { + min-width: 88px; + height: 48px; + font-size: 16px; + border-radius: 8px; +} + +/* medium */ +.btn.md { + min-width: 240px; + height: 48px; + font-size: 18px; + border-radius: 40px; +} + +/* large */ +.btn.lg { + min-width: 357px; + height: 56px; + font-size: 18px; + border-radius: 40px; +} + +.btn.h40 { + height: 40px; +} + +.inner { + max-width: 1120px; + width: calc(100% - 32px); + margin: 0 auto; +} + +/* header */ +#header { + display: flex; + align-items: center; + justify-content: center; + height: 70px; + background: var(--white); + padding: 0 200px; +} +#header .inner { + display: flex; + align-items: center; + justify-content: space-between; + width: auto; + flex: 1; +} +#header .logo a { + display: block; + width: 153px; +} + +/* footer */ +#footer { + padding: 32px 0 108px; + background: var(--footer-bg); +} +#footer .inner { + display: flex; + align-items: center; + justify-content: space-between; +} +#footer .copy { + color: #9ca3af; +} +#footer .foot_link ul { + display: flex; + align-items: center; +} +#footer .foot_link ul a { + display: block; + padding: 0 15px; + color: #e5e7eb; +} +#footer .sns_link ul { + display: flex; + align-items: center; +} +#footer .sns_link ul a { + display: block; + padding: 0 6px; +} + +@media screen and (max-width: 1200px) { + #header { + padding: 0 50px; + } +} + +@media screen and (max-width: 768px) { + #header { + padding: 0 16px; + } +} + +@media screen and (max-width: 480px) { + .btn.sm { + min-width: 128px; + font-size: 16px; + } + .btn.lg { + min-width: 240px; + height: 48px; + font-size: 18px; + } + #footer { + padding: 32px 0 65px; + } + #footer .inner { + position: relative; + align-items: flex-start; + flex-direction: column-reverse; + gap: 25px; + } + #footer .foot_link ul { + gap: 30px; + } + #footer .foot_link ul a { + padding: 0; + } + #footer .sns_link { + position: absolute; + top: 0; + right: 0; + } +} diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 00000000..83f57737 --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,31 @@ +/* ====== reset ====== */ +* { + margin: 0; + padding: 0; + font: inherit; + box-sizing: border-box; + word-break: keep-all; +} + +html, +body { + font-family: "Pretendard Variable", Pretendard, sans-serif; + color: #374151; + font-size: 16px; + line-height: 1.4; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + display: block; + max-width: 100%; +} + +ul, +ol { + list-style: none; +} diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 00000000..346491c2 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,193 @@ +@import "reset.css"; +@import "variables.css"; +@import "common.css"; + +/* ====== main ====== */ +#main .inner { + padding: 0 5px; +} +#main .main_title { + font-size: 40px; + font-weight: 700; +} + +/* main_visual_sec */ +#main .main_visual_sec { + background: var(--main-banner-bg); +} +#main .main_visual_sec .inner { + display: flex; + justify-content: space-between; + align-items: flex-end; + height: 540px; +} +#main .main_visual_sec .text_box { + padding-bottom: 100px; + flex: 0 0 auto; +} +#main .main_visual_sec .text_box .btn { + margin-top: 32px; +} + +/* service_sec */ +#main .service_sec { + background: var(--white); +} +#main .service_article { + padding: 138px 0; +} +#main .service_cont { + display: flex; + align-items: center; + gap: 64px; + max-width: 988px; + margin: 0 auto; + background: #fcfcfc; + border-radius: 12px; + overflow: hidden; +} +#main .service_cont .category { + display: block; + margin-bottom: 12px; + font-size: 18px; + font-weight: 700; + color: var(--service-cat-color); +} +#main .service_cont .desc { + margin-top: 24px; + font-size: 24px; + font-weight: 500; +} + +#main .service_article:nth-of-type(even) .service_cont { + flex-direction: row-reverse; +} +#main .service_article:nth-of-type(even) .text_box { + text-align: right; +} + +#main .service_article:nth-of-type(1) .service_cont { + padding-left: 24px; +} + +#main .service_article:nth-of-type(2) .service_cont { + padding-right: 14px; +} + +/* banner_sec */ +#main .banner_sec { + margin-top: 138px; + background: var(--main-banner-bg); +} +#main .banner_sec .inner { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 540px; +} +#main .banner_sec .main_title { + padding-bottom: 172px; + flex: 0 0 auto; +} + +@media screen and (max-width: 1200px) { + #main .main_title { + font-size: 36px; + } + #main .main_visual_sec .inner { + height: 400px; + } + #main .service_article { + padding: 80px 0; + } + #main .service_cont { + gap: 40px; + } + #main .service_cont .service_img, + #main .service_cont .text_box { + flex: 1; + } + #main .service_article:nth-of-type(1) .service_cont { + padding-left: 0; + } + #main .service_article:nth-of-type(2) .service_cont { + padding-right: 0; + } + #main .banner_sec { + margin-top: 100px; + } + #main .banner_sec .inner { + height: 400px; + } +} + +@media screen and (max-width: 768px) { + #main .main_title { + font-size: 32px; + } + #main .main_visual_sec .inner { + display: block; + height: auto; + } + #main .main_visual_sec .text_box { + padding: 84px 0 210px; + text-align: center; + } + #main .service_article { + padding: 50px 0; + } + #main .service_cont { + display: block; + border-radius: 0; + } + #main .service_cont .service_img img { + width: 100%; + border-radius: 14px; + } + #main .service_cont .text_box { + margin-top: 24px; + } + #main .service_cont .desc { + font-size: 18px; + } + #main .banner_sec .inner { + display: block; + height: auto; + } + #main .banner_sec .main_title { + padding: 200px 0 216px; + text-align: center; + } +} + +@media screen and (max-width: 480px) { + #main .main_visual_sec .text_box { + padding: 48px 0 132px; + } + #main .main_visual_sec .text_box .btn { + margin-top: 18px; + } + #main .service_article { + padding: 30px 0; + } + #main .service_cont .service_img img { + border-radius: 7px; + } + #main .service_cont .category { + margin-bottom: 8px; + font-size: 16px; + } + #main .service_cont .text_box .main_title { + font-size: 24px; + } + #main .service_cont .desc { + margin-top: 16px; + font-size: 16px; + } + #main .banner_sec { + margin-top: 30px; + } + #main .banner_sec .main_title { + padding: 120px 0 130px; + } +} diff --git a/assets/css/variables.css b/assets/css/variables.css new file mode 100644 index 00000000..9ace8063 --- /dev/null +++ b/assets/css/variables.css @@ -0,0 +1,23 @@ +/* ====== variable ====== */ +:root { + /* Colors */ + --primary-color: #3692ff; + --primary-bg: #cfe5ff; + --white: #fff; + --dark-bg: #111827; + + /* btn */ + --btn-default-bg: var(--primary-color); + --btn-hover-bg: #1967d6; + --btn-active-bg: #1251aa; + --btn-disabled-bg: #9ca3af; + --btn-white-color: var(--primary-color); + --btn-white-bg: #f9fafb; + + /* footer */ + --footer-bg: var(--dark-bg); + + /* main */ + --main-banner-bg: var(--primary-bg); + --service-cat-color: var(--primary-color); +} diff --git a/assets/images/common/ic_facebook.svg b/assets/images/common/ic_facebook.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/assets/images/common/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/common/ic_instagram.svg b/assets/images/common/ic_instagram.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/assets/images/common/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/common/ic_twitter.svg b/assets/images/common/ic_twitter.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/assets/images/common/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/common/ic_youtube.svg b/assets/images/common/ic_youtube.svg new file mode 100644 index 00000000..7a90f59a --- /dev/null +++ b/assets/images/common/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/common/logo.svg b/assets/images/common/logo.svg new file mode 100644 index 00000000..9b20d2d7 --- /dev/null +++ b/assets/images/common/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/images/main/main_banner_img.png b/assets/images/main/main_banner_img.png new file mode 100644 index 00000000..e4590d88 Binary files /dev/null and b/assets/images/main/main_banner_img.png differ diff --git a/assets/images/main/main_service_hotItem.png b/assets/images/main/main_service_hotItem.png new file mode 100644 index 00000000..d50c5a66 Binary files /dev/null and b/assets/images/main/main_service_hotItem.png differ diff --git a/assets/images/main/main_service_register.png b/assets/images/main/main_service_register.png new file mode 100644 index 00000000..c3f17783 Binary files /dev/null and b/assets/images/main/main_service_register.png differ diff --git a/assets/images/main/main_service_search.png b/assets/images/main/main_service_search.png new file mode 100644 index 00000000..f2ab4883 Binary files /dev/null and b/assets/images/main/main_service_search.png differ diff --git a/assets/images/main/main_visual_img.png b/assets/images/main/main_visual_img.png new file mode 100644 index 00000000..e4526824 Binary files /dev/null and b/assets/images/main/main_visual_img.png differ diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..85d7a495 --- /dev/null +++ b/faq.html @@ -0,0 +1,11 @@ + + + + + + 판다마켓 + + + faq페이지 + + diff --git a/index.html b/index.html new file mode 100644 index 00000000..6cdf1d6e --- /dev/null +++ b/index.html @@ -0,0 +1,201 @@ + + + + + + 판다마켓 + + + + +
+ + + +
+ +
+
+
+

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

+ 구경하러 가기 +
+
+ 메인 비쥬얼 캐릭터 이미지 +
+
+
+ + + +
+
+
+
+
+ Hot item 서비스 이미지 +
+
+ Hot item +

인기 상품을
확인해 보세요

+

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

+
+
+
+
+
+
+ search 서비스 이미지 +
+
+ Search +

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

+

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

+
+
+
+
+
+
+ register 서비스 이미지 +
+
+ Register +

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

+

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

+
+
+
+
+
+ + + + +
+ + + +
+ + diff --git a/items.html b/items.html new file mode 100644 index 00000000..04b33bef --- /dev/null +++ b/items.html @@ -0,0 +1,11 @@ + + + + + + 판다마켓 + + + 아이템페이지 + + diff --git a/login.html b/login.html new file mode 100644 index 00000000..7b6df92d --- /dev/null +++ b/login.html @@ -0,0 +1,11 @@ + + + + + + 판다마켓 + + + 로그인페이지 + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..cc1e2087 --- /dev/null +++ b/privacy.html @@ -0,0 +1,11 @@ + + + + + + 판다마켓 + + + 약관 페이지 + +