diff --git a/assets/images/home_01_img.svg b/assets/images/home_01_img.svg new file mode 100644 index 00000000..669214b8 --- /dev/null +++ b/assets/images/home_01_img.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/home_02_img.svg b/assets/images/home_02_img.svg new file mode 100644 index 00000000..cdb4497a --- /dev/null +++ b/assets/images/home_02_img.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/home_03_img.svg b/assets/images/home_03_img.svg new file mode 100644 index 00000000..c8de217b --- /dev/null +++ b/assets/images/home_03_img.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/home_bottom_img.svg b/assets/images/home_bottom_img.svg new file mode 100644 index 00000000..1aa68b32 --- /dev/null +++ b/assets/images/home_bottom_img.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/ic_facebook.svg b/assets/images/ic_facebook.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/assets/images/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_instagram.svg b/assets/images/ic_instagram.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/assets/images/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_twitter.svg b/assets/images/ic_twitter.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/assets/images/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/ic_youtube.svg b/assets/images/ic_youtube.svg new file mode 100644 index 00000000..8270b35a --- /dev/null +++ b/assets/images/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/lading-page-img.svg b/assets/images/lading-page-img.svg new file mode 100644 index 00000000..9b399c2e --- /dev/null +++ b/assets/images/lading-page-img.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/logo.svg b/assets/images/logo.svg new file mode 100644 index 00000000..f27f318a --- /dev/null +++ b/assets/images/logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/typo.svg b/assets/images/typo.svg new file mode 100644 index 00000000..55a63efc --- /dev/null +++ b/assets/images/typo.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.css b/index.css new file mode 100644 index 00000000..c2fa1541 --- /dev/null +++ b/index.css @@ -0,0 +1,219 @@ +html { + font-size: clamp(14px, 1.2vw, 18px); +} + +body { + margin: 0 auto; + width: 100%; +} + +a { + display: inline-block; + text-decoration: none; +} + +p { + margin: 0; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + max-width: 1920px; + width: calc(100% - clamp(100px, 20vw, 400px)); + padding: 9.5px clamp(50px, 10vw, 200px); +} + +.logo { + display: flex; + align-items: center; +} + +.logo-icon { + margin-right: 8.59px; + width: clamp(30px, 2vw, 40px); + height: clamp(30px, 2vw, 40px); +} + +.logo-text { + font-size: clamp(16px, 1.5vw, 26px); + font-weight: 700; + font-family: 'ROKAF Sans'; + line-height: 1.4; +} + +button { + cursor: pointer; + border: 0; + outline: none; + color: #F3F4F6; + background-color: #3692FF; +} + +button:hover { + background-color: #1967D6; +} + +button:active { + background-color: #1251AA; +} + +.login-button { + padding: clamp(8px, 1.2vw, 12px) clamp(16px, 2vw, 23px); + width: clamp(100px, 7vw, 128px); + height: clamp(40px, 3vw, 48px); + border-radius: 8px; + font-size: clamp(14px, 1.2vw, 16px); + font-weight: 600; + line-height: 1.6; +} + +.landing-section { + display: flex; + justify-content: center; + align-items: end; + height: clamp(400px, 50vh, 540px); + background-color: #CFE5FF; +} + +.landing-content { + display: flex; + justify-content: center; + align-items: center; +} + +.landing-message-container { + display: flex; + flex-direction: column; + width: clamp(280px, 20vw, 357px); + height: auto; +} + +.section-title { + margin-bottom: clamp(24px, 2vw, 32px); + font-size: clamp(28px, 3vw, 40px); + font-weight: 700; + line-height: clamp(36px, 4vw, 56px); + color: #374151; +} + +.explore-button-link { + margin-bottom: clamp(40px, 3vw, 60px); +} + +.explore-button { + padding: clamp(8px, 1.5vw, 12px) 0; + width: 100%; + border-radius: 40px; + font-size: clamp(16px, 2vw, 20px); + font-weight: 600; + line-height: 1.6; +} + +.section-container { + margin: clamp(80px, 10vw, 138px) 0; +} + +.section { + display: flex; + align-items: center; + margin: 0 auto; + width: clamp(600px, 80vw, 988px); + border-radius: 12px; + overflow: hidden; + background-color: #FCFCFC; +} + +.search-section { + flex-direction: row-reverse; +} + +.register-section img, +.hot-item-section img { + width: clamp(400px, 50vw, 588px); +} + +.hot-item-message-container, +.register-section .message-container { + margin-left: clamp(32px, 5vw, 64px); +} + +.search-section .message-container { + margin-right: clamp(32px, 5vw, 64px); + text-align: right; +} + +.label { + display: inline-block; + margin-bottom: clamp(8px, 1vw, 12px); + font-size: clamp(14px, 1.2vw, 18px); + font-weight: 700; + line-height: 1.4; + color: #3692FF; +} + +.section-message { + font-size: clamp(18px, 2vw, 24px); + font-weight: 500; + line-height: clamp(24px, 2.5vw, 32px); +} + +.bottom-landing-section { + padding-top: clamp(80px, 8vw, 138px); + background-color: #FCFCFC; +} + +.bottom-landing-section .landing-message-container { + height: auto; +} + +.bottom-landing-section .section-title { + margin-bottom: clamp(40px, 3vw, 60px); +} + +footer { + display: flex; + justify-content: center; + padding-top: clamp(24px, 3vw, 32.5px); + height: clamp(120px, 15vh, 160px); + background-color: #111827; +} + +.footer-container { + display: flex; + justify-content: space-between; + max-width: 1120px; + width: 100%; + height: fit-content; +} + +.copy-right { + color: #9CA3AF; +} + +.term { + display: flex; + gap: 30px; + font-size: clamp(14px, 1vw, 16px); + font-weight: 400; + line-height: 1.4; + color: #E5E7EB; +} + +.term a { + font-size: clamp(14px, 1vw, 16px); + font-weight: 400; + color: #E5E7EB; +} + +.SNS-container { + display: flex; + gap: 12px; +} + +.SNS-container img { + width: clamp(16px, 1.5vw, 20px); + height: clamp(16px, 1.5vw, 20px); +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..755c3949 --- /dev/null +++ b/index.html @@ -0,0 +1,110 @@ + + + + + + + 판다마켓 + + +
+ + + + + + + +
+
+
+
+
+

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

+ + + +
+ 판다마켓 랜딩 페이지 배너 이미지 +
+
+ +
+
+ hot-item 이미지 +
+ Hot item +

인기 상품을
확인해 보세요

+

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

+
+
+
+ +
+
+ search 이미지 +
+ Search +

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

+

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

+
+
+
+ +
+
+ register 이미지 +
+ Register +

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

+

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

+
+
+
+ +
+
+
+
+

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

+
+ 판다마켓 랜딩 페이지 배너 이미지 +
+
+
+ +
+ + + \ No newline at end of file