diff --git a/assets/images/btn_visibility_off_24px.svg b/assets/images/btn_visibility_off_24px.svg new file mode 100644 index 00000000..c2739d22 --- /dev/null +++ b/assets/images/btn_visibility_off_24px.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/btn_visibility_on_24px.svg b/assets/images/btn_visibility_on_24px.svg new file mode 100644 index 00000000..a15c7f31 --- /dev/null +++ b/assets/images/btn_visibility_on_24px.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/google-icon.svg b/assets/images/google-icon.svg new file mode 100644 index 00000000..6915836f --- /dev/null +++ b/assets/images/google-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/kakaotalk-icon.svg b/assets/images/kakaotalk-icon.svg new file mode 100644 index 00000000..a1414a92 --- /dev/null +++ b/assets/images/kakaotalk-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/index.css b/index.css index c2fa1541..51813614 100644 --- a/index.css +++ b/index.css @@ -1,29 +1,14 @@ -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 { +.header-nav { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; + padding: 9.5px 200px; max-width: 1920px; - width: calc(100% - clamp(100px, 20vw, 400px)); - padding: 9.5px clamp(50px, 10vw, 200px); + width: calc(100% - 400px); + position: fixed; + top: 0; + background-color: white; } .logo { @@ -33,23 +18,14 @@ header { .logo-icon { margin-right: 8.59px; - width: clamp(30px, 2vw, 40px); - height: clamp(30px, 2vw, 40px); + width: 40px; + height: 40px; } -.logo-text { - font-size: clamp(16px, 1.5vw, 26px); - font-weight: 700; - font-family: 'ROKAF Sans'; - line-height: 1.4; -} - -button { +.button { cursor: pointer; border: 0; outline: none; - color: #F3F4F6; - background-color: #3692FF; } button:hover { @@ -61,20 +37,22 @@ button:active { } .login-button { - padding: clamp(8px, 1.2vw, 12px) clamp(16px, 2vw, 23px); - width: clamp(100px, 7vw, 128px); - height: clamp(40px, 3vw, 48px); + padding: 11px 43px; border-radius: 8px; - font-size: clamp(14px, 1.2vw, 16px); + font-size: 16px; font-weight: 600; line-height: 1.6; } +.main-container { + padding-top: 70px; +} + .landing-section { display: flex; justify-content: center; align-items: end; - height: clamp(400px, 50vh, 540px); + height: 540px; background-color: #CFE5FF; } @@ -87,40 +65,37 @@ button:active { .landing-message-container { display: flex; flex-direction: column; - width: clamp(280px, 20vw, 357px); + width: 357px; height: auto; } .section-title { - margin-bottom: clamp(24px, 2vw, 32px); - font-size: clamp(28px, 3vw, 40px); + margin-bottom: 32px; + font-size: 40px; font-weight: 700; - line-height: clamp(36px, 4vw, 56px); - color: #374151; -} - -.explore-button-link { - margin-bottom: clamp(40px, 3vw, 60px); + line-height: 56px; } .explore-button { - padding: clamp(8px, 1.5vw, 12px) 0; + margin-bottom: 60px; + padding: 12px 0; width: 100%; border-radius: 40px; - font-size: clamp(16px, 2vw, 20px); + font-size: 20px; font-weight: 600; line-height: 1.6; + text-align: center; } .section-container { - margin: clamp(80px, 10vw, 138px) 0; + margin: 138px 0; } .section { display: flex; align-items: center; margin: 0 auto; - width: clamp(600px, 80vw, 988px); + width: 988px; border-radius: 12px; overflow: hidden; background-color: #FCFCFC; @@ -132,36 +107,36 @@ button:active { .register-section img, .hot-item-section img { - width: clamp(400px, 50vw, 588px); + width: 588px; } .hot-item-message-container, .register-section .message-container { - margin-left: clamp(32px, 5vw, 64px); + margin-left: 64px; } .search-section .message-container { - margin-right: clamp(32px, 5vw, 64px); + margin-right: 64px; text-align: right; } .label { display: inline-block; - margin-bottom: clamp(8px, 1vw, 12px); - font-size: clamp(14px, 1.2vw, 18px); + margin-bottom: 12px; + font-size: 18px; font-weight: 700; line-height: 1.4; - color: #3692FF; } .section-message { - font-size: clamp(18px, 2vw, 24px); + font-size: 24px; font-weight: 500; - line-height: clamp(24px, 2.5vw, 32px); + line-height: 32px; + white-space: nowrap; } .bottom-landing-section { - padding-top: clamp(80px, 8vw, 138px); + padding-top: 138px; background-color: #FCFCFC; } @@ -170,50 +145,46 @@ button:active { } .bottom-landing-section .section-title { - margin-bottom: clamp(40px, 3vw, 60px); + margin-bottom: 60px; } -footer { +.footer-nav { display: flex; justify-content: center; - padding-top: clamp(24px, 3vw, 32.5px); - height: clamp(120px, 15vh, 160px); - background-color: #111827; + height: 160px; } .footer-container { display: flex; justify-content: space-between; + margin: 0 auto; + padding: 32.5px 0; max-width: 1120px; width: 100%; height: fit-content; } -.copy-right { - color: #9CA3AF; -} - .term { display: flex; gap: 30px; - font-size: clamp(14px, 1vw, 16px); + font-size: 16px; font-weight: 400; line-height: 1.4; - color: #E5E7EB; } .term a { - font-size: clamp(14px, 1vw, 16px); + font-size: 16px; font-weight: 400; - color: #E5E7EB; } .SNS-container { display: flex; gap: 12px; + margin: 0; + list-style: none; } .SNS-container img { - width: clamp(16px, 1.5vw, 20px); - height: clamp(16px, 1.5vw, 20px); + width: 20px; + height: 20px; } \ No newline at end of file diff --git a/index.html b/index.html index 755c3949..310d14b8 100644 --- a/index.html +++ b/index.html @@ -3,30 +3,29 @@ + + + 판다마켓 -
- +
+ - - - +
-
+
-

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

- - - +

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

+ 구경하러 가기
판다마켓 랜딩 페이지 배너 이미지
@@ -36,9 +35,9 @@
hot-item 이미지
- Hot item -

인기 상품을
확인해 보세요

-

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

+ Hot item +

인기 상품을
확인해 보세요

+

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

@@ -47,9 +46,9 @@
search 이미지
- Search -

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

-

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

+ Search +

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

+

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

@@ -58,9 +57,9 @@
register 이미지
- Register -

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

-

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

+ Register +

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

+

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

@@ -69,7 +68,7 @@
-

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

+

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

판다마켓 랜딩 페이지 배너 이미지
@@ -77,33 +76,41 @@
-