diff --git a/assets/icons/icon_google.svg b/assets/icons/icon_google.svg new file mode 100644 index 00000000..593a8357 --- /dev/null +++ b/assets/icons/icon_google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/icon_invisible_eye.svg b/assets/icons/icon_invisible_eye.svg new file mode 100644 index 00000000..ee1644b8 --- /dev/null +++ b/assets/icons/icon_invisible_eye.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/icon_kakaotalk.svg b/assets/icons/icon_kakaotalk.svg new file mode 100644 index 00000000..09fae80e --- /dev/null +++ b/assets/icons/icon_kakaotalk.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/Img_home_01.png b/assets/images/img_home_01.png similarity index 100% rename from assets/images/Img_home_01.png rename to assets/images/img_home_01.png diff --git a/assets/images/Img_home_02.png b/assets/images/img_home_02.png similarity index 100% rename from assets/images/Img_home_02.png rename to assets/images/img_home_02.png diff --git a/assets/images/Img_home_03.png b/assets/images/img_home_03.png similarity index 100% rename from assets/images/Img_home_03.png rename to assets/images/img_home_03.png diff --git a/assets/images/Img_home_bottom.png b/assets/images/img_home_bottom.png similarity index 100% rename from assets/images/Img_home_bottom.png rename to assets/images/img_home_bottom.png diff --git a/assets/images/Img_home_top.png b/assets/images/img_home_top.png similarity index 100% rename from assets/images/Img_home_top.png rename to assets/images/img_home_top.png diff --git a/assets/logos/logo_md.png b/assets/logos/logo_md.png deleted file mode 100644 index 497c2bd0..00000000 Binary files a/assets/logos/logo_md.png and /dev/null differ diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..f3ddb568 --- /dev/null +++ b/faq.html @@ -0,0 +1,10 @@ + + + + + + 판다마켓 - faq + + + + diff --git a/index.html b/index.html index 79953f5c..9b934db3 100644 --- a/index.html +++ b/index.html @@ -22,12 +22,6 @@ crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" /> - - - - - - @@ -38,7 +32,7 @@ 판다마켓 로고 - 로그인 + 로그인
@@ -49,16 +43,16 @@ 일상의 모든 물건을
거래해보세요

- + - +
- 인기 상품 + 인기 상품

Hot item

@@ -75,7 +69,7 @@

- 상품 검색 + 상품 검색

Search

@@ -92,7 +86,7 @@

- 상품 등록 + 상품 등록

Register

@@ -116,7 +110,7 @@ 판다마켓 중고 거래

- +
@@ -126,8 +120,8 @@

@codeit - 2025

diff --git a/items.html b/items.html new file mode 100644 index 00000000..bea85653 --- /dev/null +++ b/items.html @@ -0,0 +1,10 @@ + + + + + + 판다마켓 - items + + + + diff --git a/login.html b/login.html new file mode 100644 index 00000000..e31e3b00 --- /dev/null +++ b/login.html @@ -0,0 +1,63 @@ + + + + + + 판다마켓 - 로그인 + + + + + + + +
+ + +
+ + + + + +
+ + + + +
+ + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..1163a72e --- /dev/null +++ b/privacy.html @@ -0,0 +1,10 @@ + + + + + + 판다마켓 - privacy + + + + diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..7de2309f --- /dev/null +++ b/signup.html @@ -0,0 +1,80 @@ + + + + + + 판다마켓 - 회원가입 + + + + + + + +
+ + +
+
+ + +
+ +
+ + +
+ +
+ +
+ + 비밀번호 숨김 +
+
+ +
+ +
+ + 비밀번호 숨김 +
+
+ + +
+ + + +
+

이미 회원이신가요?

+ 로그인 +
+
+ + diff --git a/styles/index.css b/styles/index.css index 6448ac38..0da462d0 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,3 +1,13 @@ +@import url(./reset.css); +@import url(./typography.css); +@import url(./header.css); +@import url(./banner.css); +@import url(./info.css); +@import url(./footer.css); + +@import url(./login.css); +@import url(./signup.css); + :root { /* Primary color */ --primary-100: #3692ff; @@ -19,7 +29,7 @@ --error-500: #f74747; /* Disable color */ - --disable-400: #9ca3af; + --disable-400: var(--secondary-400); /* Font style */ --font-primary: 'Pretendard Variable', sans-serif; @@ -97,19 +107,17 @@ body { height: 259px; } - .info__category { - font-size: 16px !important; + .info .info__category { + font-size: 16px; } - - .info__title { - font-size: 24px !important; - line-height: 32px !important; + .info .info__title { + font-size: 24px; + line-height: 32px; margin-bottom: 8px; } - - .info__description { - font-size: 16px !important; - line-height: 26px !important; + .info .info__description { + font-size: 16px; + line-height: 26px; } .info__content { @@ -235,9 +243,9 @@ body { gap: 18px; } - .banner__title { - font-size: 32px !important; - line-height: 44.8px !important; + .banner__content .banner__title { + font-size: 32px; + line-height: 44.8px; text-align: center; } @@ -245,12 +253,12 @@ body { display: inline; } - .banner__button { + .banner__content .banner__button { width: 240px; height: 48px; padding: 12px 71px; - font-size: 18px !important; - line-height: 26px !important; + font-size: 18px; + line-height: 26px; } .banner__image { @@ -259,8 +267,8 @@ body { } .bottom_banner .banner__title { - font-size: 32px !important; - line-height: 44.8px !important; + font-size: 32px; + line-height: 44.8px; } .bottom_banner .banner__container { diff --git a/styles/info.css b/styles/info.css index 3c82784c..746cb4ae 100644 --- a/styles/info.css +++ b/styles/info.css @@ -39,9 +39,9 @@ height: 444px; } -.info__category { +.info .info__content .info__category { color: var(--primary-100); - font-size: 18px !important; + font-size: 18px; } .info__title { diff --git a/styles/login.css b/styles/login.css new file mode 100644 index 00000000..cfd45169 --- /dev/null +++ b/styles/login.css @@ -0,0 +1,126 @@ +.login { + width: 100%; + max-width: 640px; + margin: 80px auto; + padding: 16px; + text-align: center; +} + +.login__logo { + margin-bottom: 40px; +} + +.login__logo img { + width: 396px; +} + +form { + display: flex; + flex-direction: column; + gap: 24px; +} + +.login__input { + display: flex; + flex-direction: column; + text-align: left; + gap: 16px; +} + +.login__input label { + font-weight: 700; + color: var(--secondary-800); + font-size: 18px; +} + +.input__wrapper { + position: relative; + width: 100%; +} + +.login__input input { + width: 100%; + height: 56px; + padding: 16px 24px; + border: none; + border-radius: 12px; + font-size: 14px; + background-color: var(--secondary-100); +} + +.login__input input:focus { + outline-color: var(--primary-100); +} + +.input__wrapper img { + position: absolute; + top: 50%; + right: 24px; + transform: translateY(-50%); + width: 24px; + cursor: pointer; +} + +.login__button { + width: 100%; + padding: 16px 124px; + background-color: var(--primary-100); + color: white; + font-size: 20px; + line-height: 32px; + font-weight: 600; + border-radius: 40px; + border: none; + cursor: pointer; +} + +.login__button:hover { + background-color: var(--primary-200); +} + +.login__social { + margin: 24px 0; + background-color: #e6f2ff; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 23px; +} + +.social__title { + font-size: 16px; + line-height: 26px; + font-weight: 500; + color: var(--secondary-800); +} + +.social__buttons { + display: flex; + justify-content: center; + text-align: center; + gap: 16px; +} + +.social__buttons li { + list-style: none; + width: 42px; + height: 42px; +} + +.login__signup p { + display: inline; + font-size: 14px; + line-height: 24px; + font-weight: 500; + color: var(--secondary-800); + text-align: center; +} + +.login__signup a { + color: var(--primary-100); + font-size: 14px; + line-height: 100%; + font-weight: 500; + text-decoration: underline; +} diff --git a/styles/signup.css b/styles/signup.css new file mode 100644 index 00000000..b3b39559 --- /dev/null +++ b/styles/signup.css @@ -0,0 +1,127 @@ +.register { + width: 100%; + max-width: 640px; + margin: 80px auto; + padding: 16px; + text-align: center; +} + +.register__logo { + margin-bottom: 40px; +} + +.register__logo img { + width: 396px; +} + +form { + display: flex; + flex-direction: column; + gap: 24px; +} + +.register__input { + display: flex; + flex-direction: column; + text-align: left; + gap: 16px; +} + +.register__input label { + font-weight: 700; + color: var(--secondary-800); + font-size: 18px; +} + +.input__wrapper { + position: relative; + width: 100%; +} + +.register__input input { + width: 100%; + height: 56px; + padding: 16px 24px; + border: none; + border-radius: 12px; + font-size: 14px; + background-color: var(--secondary-100); +} + +.register__input input:focus { + outline-color: var(--primary-100); +} + +.input__wrapper img { + position: absolute; + top: 50%; + right: 24px; + transform: translateY(-50%); + width: 24px; + cursor: pointer; +} + +.register-button { + width: 100%; + height: 56px; + padding: 16px 124px; + background-color: var(--primary-100); + color: var(--secondary-100); + font-size: 20px; + line-height: 32px; + font-weight: 600; + border-radius: 40px; + border: none; + cursor: pointer; +} + +.register-button:hover { + background-color: var(--primary-200); +} + +.register__social { + margin: 24px 0; + background-color: #e6f2ff; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 23px; +} + +.social__title { + font-size: 16px; + line-height: 26px; + font-weight: 500; + color: var(--secondary-800); +} + +.social__buttons { + display: flex; + justify-content: center; + text-align: center; + gap: 16px; +} + +.social__buttons li { + list-style: none; + width: 42px; + height: 42px; +} + +.already-registered p { + display: inline; + font-size: 14px; + line-height: 24px; + font-weight: 500; + color: var(--secondary-800); + text-align: center; +} + +.already-registered a { + color: var(--primary-100); + font-size: 14px; + line-height: 100%; + font-weight: 500; + text-decoration: underline; +}