diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..40b878db --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/assets/styles/global.css b/assets/styles/global.css new file mode 100644 index 00000000..8b65a32d --- /dev/null +++ b/assets/styles/global.css @@ -0,0 +1,13 @@ +html { + font-family: Pretendard, sans-serif; +} + +body { + width: 100%; + background-color: #ffffff; +} + +:root { + --primary-color: #3692ff; + --secondary-color: #F3F4F6; +} \ No newline at end of file diff --git a/assets/styles/login_signup.css b/assets/styles/login_signup.css new file mode 100644 index 00000000..489fc5c9 --- /dev/null +++ b/assets/styles/login_signup.css @@ -0,0 +1,90 @@ +.login-form, +.signup-form { + display: flex; + flex-direction: column; + justify-self: center; + align-items: center; + width: 640px; + height: 100%; + margin-top: 231px; +} + +.title-img { + width: 396px; + height: 132px; +} + +.auth-form { + display: flex; + flex-direction: column; +} + +label { + font-size: 18px; + color: #1F2937; +} + +.auth-input { + width: 640px; + height: 56px; + margin-top: 16px; + margin-bottom: 24px; + padding: 24px; + background-color: var(--secondary-color); + border: none; + border-radius: 12px; +} + +.password-wrapper, +.password-check-wrapper { + position: relative; +} + +.fa-solid { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 16px; + color: #4B5563; + cursor: pointer; +} + +button { + height: 56px; + margin-bottom: 24px; + font-size: 20px; + color: var(--secondary-color); + background-color: var(--primary-color); + border: none; + border-radius: 40px; +} + +.simple-login-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24px 23px; + background-color: #E6F2FF; + height: 74px; + color: #1F2937; + font-size: 16px; + border-radius: 8px; +} + +.signup-container { + display: flex; + justify-content: center; + align-items: center; + gap: 24px; +} + +.signup-desc { + color: #1F2937; + font-size: 14px; +} + +.signup-button, +.login-button { + color: var(--primary-color); + font-size: 14px; +} \ No newline at end of file diff --git a/assets/styles/reset.css b/assets/styles/reset.css new file mode 100644 index 00000000..1236d8ed --- /dev/null +++ b/assets/styles/reset.css @@ -0,0 +1,3 @@ +* { + box-sizing: border-box; +} diff --git a/style.css b/assets/styles/style.css similarity index 83% rename from style.css rename to assets/styles/style.css index 8a380cef..cb6c3bae 100644 --- a/style.css +++ b/assets/styles/style.css @@ -1,15 +1,9 @@ -* { - box-sizing: border-box; -} - -html { - width: 100%; - font-family: Pretendard, sans-serif; - } - -body { - width: 100%; - background-color: #ffffff; +.nav { + position: fixed; + top: 0; + width: 100%; + background-color: #ffffff; + z-index: 1000; } .nav-container { @@ -18,7 +12,8 @@ body { align-items: center; max-width: 1920px; height: 70px; - padding: 0 200px; + margin: 0 auto; + padding: 9.5px 200px; } .logo { @@ -34,33 +29,38 @@ body { width: 128px; height: 48px; padding: 12px 23px; - background-color: #3692FF; + background-color: var(--primary-color); border-radius: 8px; - color: #F3F4F6; + color: var(--secondary-color); font-size: 16px; text-decoration: none; } .trade { + position: relative; width: 100%; height: 540px; - padding: 200px 405px 0; + padding-top: 200px; background-color: #CFE5FF; } .trade-container { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); display: flex; justify-content: center; - align-items: center; - width: auto; + align-items: flex-end; + width: 100%; height: 340px; - margin: 0 auto; } .trade-desc { display: flex; flex-direction: column; -} + margin-bottom: 100px; + } .trade-title { color: #374151; @@ -68,13 +68,16 @@ body { } .trade-button { + display: flex; + justify-content: center; + align-items: center; width: 357px; height: 56px; - padding: 16px 124px; - background-color: #3692FF; + background-color: var(--primary-color); border-radius: 40px; color: #F9FAFB; font-size: 20px; + text-decoration: none; } .trade-img { @@ -129,7 +132,7 @@ body { .badge { margin-bottom: 12px; - color: #3692FF; + color: var(--primary-color); font-size: 18px; } @@ -218,7 +221,7 @@ body { } } - @media (max-width: 1919px) { + @media (max-width: 1920px) { .trade-container, .slogan-container { padding: 80px 5vw; diff --git a/index.html b/index.html index 01301157..9e60bc0f 100644 --- a/index.html +++ b/index.html @@ -2,33 +2,35 @@ - "판다마켓" - + 판다마켓 + + +
- - - - + + + +

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

- 구경하러 가기 + 구경하러 가기
- 쇼핑 이미지 + 쇼핑 이미지
- 인기 상품 확인 이미지 + 인기 상품 확인 이미지

Hot item

인기 상품을
확인해 보세요

@@ -43,12 +45,12 @@

Search

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

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

- 상품 검색 이미지 + 상품 검색 이미지
- 상품 등록 이미지 + 상품 등록 이미지

Register

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

@@ -60,7 +62,7 @@

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

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

- 하단 이미지 + 하단 이미지