diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..9170c21e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.prettierrc \ No newline at end of file diff --git a/css/common.css b/css/common.css new file mode 100644 index 00000000..db7dd1a5 --- /dev/null +++ b/css/common.css @@ -0,0 +1,11 @@ +@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; +} + +/* Font size + line-height */ +html { + font-size: 62.5%; +} diff --git a/css/login-signup.css b/css/login-signup.css new file mode 100644 index 00000000..321f5d35 --- /dev/null +++ b/css/login-signup.css @@ -0,0 +1,153 @@ +/* font style */ +/* form label (이메일 / 비밀번호) */ +form label { + display: block; + font-size: var(--text-lg); + font-weight: var(--font-bold); + margin-bottom: var(--space-xs); +} + +/* form input 텍스트 */ +.content input { + font-size: var(--text-base); + font-weight: var(--font-normal); + color: var(--secondary-color-gray700); +} + +/* visibility 버튼 아이콘 */ +.visibility-btn img { + width: 24px; + height: 24px; +} + +/* 제출 버튼 */ +.btn-submit { + font-size: var(--text-xl); + font-weight: var(--font-semibold); + width: 100%; + height: 56px; + border-radius: 40px; + background-color: var(--primary-color-100); + color: #fff; +} + +/* 간편 로그인 타이틀 */ +.sns-login p { + font-size: var(--text-base); + font-weight: var(--font-medium); + color: var(--secondary-color-gray700); +} + +/* SNS 아이콘 링크 */ +.sns-login-link a img { + width: 42px; + height: 42px; +} + +/* 회원가입 텍스트 */ +.sign-up { + font-size: var(--text-base); + font-weight: var(--font-normal); + color: var(--secondary-color-gray700); +} +.sign-up a { + font-weight: var(--font-semibold); + color: var(--primary-color-100); + text-decoration: underline; +} + + + +input:focus { + outline-color: var(--primary-color-100); +} + +.content { + max-width: 640px; + width: 100%; + margin: 120px auto; + padding: 0 20px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 24px; +} + +form { + width: 100%; + margin-top: 26px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.content input { + width: 100%; + height: 56px; + padding: 0 20px; + border-radius: 12px; + background-color: var(--secondary-color-gray100); +} + +.password-input-box { + position: relative; +} + +#password { + padding: 0 40px 0 20px; +} + +.btn-submit { + width: 100%; + height: 56px; + border-radius: 40px; + background-color: var(--primary-color-100); + color: #fff; +} + +.sns-login { + width: 100%; + height: 74px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + border-radius: 8px; + background-color: #e6f2ff; +} + +.sns-login-link { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; +} + +.visibility-btn { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); +} + +.visibility-btn-on { + display: none; +} + +.sign-up, +.login { + font-size: 1.4rem; +} + +.sign-up a, +.login a { + text-decoration: underline; + color: var(--primary-color-100); +} + +@media (min-width: 768px) { + .content { + padding: 0; + } +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..f5d918b2 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,32 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + list-style-type: none; + text-decoration: none; +} + +html, +body { + font-family: 'Pretendard-Regular', sans-serif; +} + +button { + border: none; + cursor: pointer; +} + +input { + border: none; +} + +img { + display: block; + max-width: 100%; + height: auto; +} + +a { + cursor: pointer; + color: inherit; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..30f9f830 --- /dev/null +++ b/css/style.css @@ -0,0 +1,239 @@ +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} + +/* btn */ +.btn { + display: inline-block; + text-align: center; + background-color: var(--primary-color-100); +} + +.login-btn { + width: 128px; + height: 48px; + border-radius: 8px; + color: var(--secondary-color-gray100); + font-size: var(--text-base); + line-height: 4.8rem; + font-weight: var(--font-semibold); +} + +.more-btn { + width: 100%; + height: 56px; + margin: 32px 0 0; + border-radius: 40px; + color: var(--secondary-color-gray50); + font-size: var(--text-lg); + line-height: 5.6rem; + font-weight: var(--font-semibold); +} + +/* badge */ +.badge { + font-size: var(--text-base); + line-height: var(--leading-base); + font-weight: var(--font-bold); + color: var(--primary-color-100); +} + +/* font size */ +body { + font-size: var(--text-base); + line-height: var(--leading-base); + font-weight: var(--font-normal); + color: var(--secondary-color-gray700); +} + +/* Hero, footer-banner 메인 타이틀 */ +.hero-heading h1, +.footer-banner-heading h2 { + font-size: var(--text-3xl); + line-height: var(--leading-3xl); + font-weight: var(--font-bold); + margin: 0; +} + +/* 섹션 타이틀 */ +.features h2 { + font-size: var(--text-2xl); + line-height: var(--leading-2xl); + font-weight: var(--font-bold); + margin: 0; +} + +/* 기타 텍스트 (링크, 부가 정보 등) */ +footer p, +footer a { + font-size: var(--text-base); + line-height: var(--leading-base); + font-weight: var(--font-normal); +} + +/* header */ +header { + width: 100%; + padding: 9px 16px; + position: fixed; + top: 0; + left: 0; + background-color: #fff; + border-bottom: 1px solid var(--border-color); +} + +.header-inner { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +/* main */ +main { + margin-top: 70px; +} + +/* hero */ +.hero { + height: 540px; + display: flex; + justify-content: center; + align-items: flex-end; + padding: 48px 0 0; + background-color: var(--background-color); +} + +.hero-inner { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.hero-heading { + max-width: 240px; + text-align: center; +} + +.hero .img-box { + width: 100%; +} + +/* features */ +.features { + display: flex; + flex-direction: column; + gap: 40px; + padding: 48px 16px; + background-color: #fff; +} + +.feature { + width: 100%; + display: flex; + flex-direction: column; + gap: 24px; +} + +.features .img-box { + width: 100%; + border-radius: 12px; +} + +.features .text-box { + width: 100%; + display: flex; + flex-direction: column; + gap: 1.2rem; +} + +.feature:nth-child(2) .text-box { + align-items: flex-end; + text-align: right; +} + +/* footer-banner */ +.footer-banner { + height: 540px; + padding-top: 120px; + display: flex; + justify-content: center; + align-items: flex-end; + background-color: var(--background-color); +} + +.footer-banner-inner { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.footer-banner-heading { + text-align: center; +} + +.footer-banner .img-box { + max-width: 746px; + width: 100%; +} + +/* footer */ +footer { + height: 160px; + padding: 16px 24px; + 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; + position: relative; +} + +footer ul { + display: flex; +} + +.copyright { + position: absolute; + left: 0; + top: 48px; +} + +.footer-links { + gap: 3rem; +} + +.sns-links { + gap: 1.2rem; +} + +.sns-link { + display: inline-block; +} + +footer p { + color: var(--secondary-color-gray400); +} +footer a { + color: var(--secondary-color-gray200); +} + +/* 반응형 조절 */ +.pc, +.tb { + display: none; +} diff --git a/css/variables.css b/css/variables.css new file mode 100644 index 00000000..3a94776e --- /dev/null +++ b/css/variables.css @@ -0,0 +1,33 @@ +:root { + /* color */ + --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; + + /* Font size */ + --text-base: 1.6rem; /* 16px */ + --text-lg: 1.8rem; /* 18px */ + --text-xl: 2rem; /* 20px */ + --text-2xl: 2.4rem; /* 24px */ + --text-3xl: 3.2rem; /* 32px */ + --text-4xl: 4rem; /* 40px */ + + /* Line-height */ + --leading-base: 2.6rem; + --leading-xl: 3.2rem; + --leading-2xl: 3.2rem; + --leading-3xl: 4rem; + --leading-4xl: 5.2rem; + + /* Font weight (tailwind-style names) */ + --font-normal: 400; /* font-normal */ + --font-medium: 500; /* font-medium */ + --font-semibold: 600; /* font-semibold */ + --font-bold: 700; /* font-bold */ +} diff --git a/images/Property 1=Typo.svg b/images/Property 1=Typo.svg new file mode 100644 index 00000000..55a63efc --- /dev/null +++ b/images/Property 1=Typo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 00000000..66594d88 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/ic_login_google.png b/images/ic_login_google.png new file mode 100644 index 00000000..97d45425 Binary files /dev/null and b/images/ic_login_google.png differ diff --git a/images/ic_login_google.svg b/images/ic_login_google.svg new file mode 100644 index 00000000..593a8357 --- /dev/null +++ b/images/ic_login_google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/ic_login_kakao.png b/images/ic_login_kakao.png new file mode 100644 index 00000000..571f1e7c Binary files /dev/null and b/images/ic_login_kakao.png differ diff --git a/images/ic_login_kakao.svg b/images/ic_login_kakao.svg new file mode 100644 index 00000000..09fae80e --- /dev/null +++ b/images/ic_login_kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/og-panda.svg b/images/og-panda.svg new file mode 100644 index 00000000..56db7770 --- /dev/null +++ b/images/og-panda.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/images/visibility_off.svg b/images/visibility_off.svg new file mode 100644 index 00000000..60646590 --- /dev/null +++ b/images/visibility_off.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/visibility_on.svg b/images/visibility_on.svg new file mode 100644 index 00000000..f14e206e --- /dev/null +++ b/images/visibility_on.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index b9df1fb8..c5af9cfb 100644 --- a/index.html +++ b/index.html @@ -1,115 +1,159 @@ - - - - - 판다마켓 - - -
-
-

- - 로고 - -

- -
-
-
-
-
-
-

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

- 구경하러 가기 -
-
-
+ + + + 판다마켓 + + + + + + + + + + + + + + +
+
+

+ + 로고 + 로고 + +

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

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

+ 구경하러 가기
-
-
- Hot item -

인기 상품을
확인해보세요

-

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

-
+
+ 판다마켓 메인 배너 이미지 +
+
+
+
+
+
+ 인기 상품
-
-
-
-
-
- search -

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

-

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

+ Hot item +

인기 상품을 확인해보세요

+

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

-
-
- 상품 검색 +
+
+
+ 상품 검색
-
-
-
-
-
- 판매 상품 등록 +
+ search +

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

+

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

+
+
+
+
+ 판매 상품 등록
-
- Register -

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

-

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

-
+ Register +

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

+

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

+
+
+
+
+
+
+

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

+
+
+ 판다마켓 푸터 배너 이미지
-
- -
-
-
-
-

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

+
+
+ + + diff --git a/pages/login.html b/pages/login.html new file mode 100644 index 00000000..38a40e2b --- /dev/null +++ b/pages/login.html @@ -0,0 +1,73 @@ + + + + + + 판다마켓 + + + + + + + + + + + + + + +
+

+ + 로고 이미지 + +

+
+ + + +
+ + +
+ +
+
+

간편 로그인하기

+ +
+

+ 판다마켓이 처음이신가요? + 회원가입 +

+
+ + diff --git a/pages/signup.html b/pages/signup.html new file mode 100644 index 00000000..64a6d062 --- /dev/null +++ b/pages/signup.html @@ -0,0 +1,93 @@ + + + + + + 판다마켓 + + + + + + + + + + + + + + +
+

+ + 로고 이미지 + +

+
+ + + + + +
+ + +
+ +
+ + +
+ +
+
+

간편 로그인하기

+ +
+

+ 이미 회원이신가요? + 로그인 +

+
+ + diff --git a/style.css b/style.css deleted file mode 100644 index 2b7f4274..00000000 --- a/style.css +++ /dev/null @@ -1,310 +0,0 @@ -@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; - } -} -