diff --git a/images/Img_feature_01.svg b/images/Img_feature_01.svg new file mode 100644 index 00000000..56aa0038 --- /dev/null +++ b/images/Img_feature_01.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Img_feature_02.svg b/images/Img_feature_02.svg new file mode 100644 index 00000000..4137dc0b --- /dev/null +++ b/images/Img_feature_02.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Img_feature_03.svg b/images/Img_feature_03.svg new file mode 100644 index 00000000..93e003c3 --- /dev/null +++ b/images/Img_feature_03.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Img_footer-banner.svg b/images/Img_footer-banner.svg new file mode 100644 index 00000000..8aac2a05 --- /dev/null +++ b/images/Img_footer-banner.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Img_hero.svg b/images/Img_hero.svg new file mode 100644 index 00000000..687771db --- /dev/null +++ b/images/Img_hero.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/Property-1=lg.svg b/images/Property-1=lg.svg new file mode 100644 index 00000000..9b20d2d7 --- /dev/null +++ b/images/Property-1=lg.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/Property-1=lg@2x.svg b/images/Property-1=lg@2x.svg new file mode 100644 index 00000000..9b20d2d7 --- /dev/null +++ b/images/Property-1=lg@2x.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/Property-1=lg@3x.svg b/images/Property-1=lg@3x.svg new file mode 100644 index 00000000..9b20d2d7 --- /dev/null +++ b/images/Property-1=lg@3x.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/ic_facebook.svg b/images/ic_facebook.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/images/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_instagram.svg b/images/ic_instagram.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/images/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_twitter.svg b/images/ic_twitter.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/images/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_youtube.svg b/images/ic_youtube.svg new file mode 100644 index 00000000..3c8ece8b --- /dev/null +++ b/images/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 00000000..b9df1fb8 --- /dev/null +++ b/index.html @@ -0,0 +1,115 @@ + + + + + + + 판다마켓 + + +
+
+

+ + 로고 + +

+ +
+
+
+
+
+
+

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

+ 구경하러 가기 +
+
+
+
+
+
+
+
+
+ 인기 상품 +
+
+
+ Hot item +

인기 상품을
확인해보세요

+

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

+
+
+
+
+
+
+
+
+ search +

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

+

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

+
+
+
+ 상품 검색 +
+
+
+
+
+
+ 판매 상품 등록 +
+
+
+ Register +

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

+

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

+
+
+
+
+
+
+
+
+

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

+
+
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..2b7f4274 --- /dev/null +++ b/style.css @@ -0,0 +1,310 @@ +@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-weight: 400; + font-style: normal; +} + +/* reset */ +*{ + margin: 0; + padding: 0; + list-style-type: none; + text-decoration: none; + box-sizing: border-box; + color: inherit; + font-family: 'Pretendard-Regular'; +} + +html{ + font-size: 62.5%; +} +/* Font size + line-height */ +.Text-4xl { font-size: 4rem; line-height: 5.2rem; } +.Text-2xl { font-size: 2.4rem; line-height: 3.2rem; } +.Text-xl { font-size: 2rem; line-height: 3.2rem; } +.Text-2lg { font-size: 1.8rem; line-height: 2.6rem; } +.Text-lg { font-size: 1.6rem; line-height: 2.6rem; } + +/* Font weight */ +.font-bold { font-weight: 700; } +.font-semibold { font-weight: 600; } +.font-medium { font-weight: 500; } +.font-regular { font-weight: 400; } + +/* color */ +:root{ + + --primary-color-100:#3692FF; + --secondary-color-gray900: #111827; + --secondary-color-gray700: #1F2937; + --secondary-color-gray400: #9CA3AF; + --secondary-color-gray200: #E5E7EB; + --secondary-color-gray100: #F3F4F6; + --secondary-color-gray50: #F9FAFB; + --background-color: #CFE5FF; + --border-color: #DFDFDF; +} + +a{ + cursor: pointer; +} + +h2 ,p{ + color: var(--secondary-color-gray700); +} + +.badge{ + color: var(--primary-color-100); +} + +footer p{ + color: var(--secondary-color-gray400); +} +footer a{ + color: var(--secondary-color-gray200); +} + +img{ + max-width: 100%; + display: block; + height: auto; +} + +.login-btn{ + width: 128px; + height: 48px; + border-radius: 8px; + display: inline-block; + text-align: center; + line-height: 48px; + background-color: var(--primary-color-100); + color: var(--secondary-color-gray100); +} + +.more-btn{ + width: 357px; + height: 56px; + margin-top: 3.2rem; + border-radius: 40px; + display: inline-block; + text-align: center; + line-height: 56px; + background-color: var(--primary-color-100); + color: var(--secondary-color-gray50); +} +/* header */ +/* header */ +header{ + height: 1920px; + height: 70px; + padding: 9px 400px 9px 400px; + border-bottom: 1px solid var(--border-color); +} +.header-inner{ + max-width: 1120px; + width: 100%; + height: 100%; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo{ + height: 51px; +} + +.logo a{ + display: inline-block; + height: 100%; +} + +.logo img{ + height: 100%; +} + +/* main */ +/* main */ + +/* hero */ +.hero{ + height: 540px; + display: flex; + justify-content: center; + align-items: flex-end; + background-color: var(--background-color); +} + +.hero-inner{ + max-width: 1110px; + width: 100%; + height: 340px; + display: flex; + justify-content: space-between; + align-items: center; + background-image: url(images/Img_hero.svg); + background-repeat: no-repeat; + background-position: bottom right; + background-size: contain; +} + + + + +/* features */ +.features{ + padding-bottom: 138px; + background-color: var(--secondary-color-gray50); +} + +.feature{ + height:720px; + display: flex; + justify-content: center; + align-items: center; + background-color: #ffffff; +} + +.feature-inner{ + max-width: 988px; + width: 100%; + height:444px; + display: flex; + gap: 6.4rem; + border-radius: 12px; + overflow: hidden; + background-color: var(--secondary-color-gray50); +} + +.features .img-box{ + max-width: 579px; + height: auto; + display: flex; + align-items: center; + +} + +/* .features img{ + height: 100%; +} */ + +.features .text-box{ + flex: 1; + height: 100%; + display: flex; + align-items: center; + white-space: nowrap; +} + +.feature:nth-child(2) .text-box { + justify-content: flex-end; + text-align: right; +} + +.features .wrap{ + display: flex; + flex-direction: column; + gap: 1.2rem; +} + +.feature h2{ + margin-bottom: 1.2rem; +} + +/* footer-banner */ +.footer-banner{ + height: 540px; + display: flex; + justify-content: center; + align-items: flex-end; + background-color: var(--background-color); +} + +.footer-banner-inner{ + max-width: 1110px; + width: 100%; + height: 397px; + display: flex; + justify-content: space-between; + align-items: center; + background-image: url(images/Img_footer-banner.svg); + background-repeat: no-repeat; + background-position: bottom right ; + background-size: contain; +} + +.footer-banner-heading{ + flex: 1; +} + + +footer{ + height: 160px; + display: flex; + justify-content: center; + background-color: var(--secondary-color-gray900); +} + +.footer-inner{ + max-width: 1120px; + width: 100%; + margin-top: 3.2rem; + display: flex; + justify-content: space-between; +} + +footer ul{ + display: flex; +} + +.footer-links{ + gap: 3rem; +} + +.sns-links{ + gap: 1.2rem; +} + +.sns-link{ + width: 20px; + height: 20px; + display: block; +} + + + +/* 1280px ~ 1919px */ +@media (max-width: 1920px) { + html { + font-size: 56.25%; /* 1rem = 9px */ + } + header{ + padding: 9px 200px; + } +} + +/* 768px ~ 1279px */ +@media (max-width: 1279px) { + html { + font-size: 50%; /* 1rem = 8px */ + } + header{ + padding: 9px 24px; + } + .hero-inner, .feature,.footer-banner-inner,footer{ + padding:0 24px; + } + .feature-inner{ + padding: 16px; + } +} + +/* <768px */ +@media (max-width: 767px) { + .feature{ + height: auto; + padding: 64px; + } +} +