diff --git a/faq.html b/faq.html new file mode 100644 index 000000000..e69e4f040 --- /dev/null +++ b/faq.html @@ -0,0 +1,10 @@ + + + + + FAQ + + + FAQ + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..bd5af080f --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ + + + + + 판다마켓 + + + + + +
+ 판다마켓 + 로그인 +
+ +
+ +
+
+ 인기 상품 확인 +
+ Hot item +

인기 상품을
확인해 보세요

+

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

+
+
+
+
+ Search +

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

+

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

+
+ 구매 상품 검색 +
+
+ 판매 상품 검색 +
+ Register +

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

+

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

+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/items.html b/items.html new file mode 100644 index 000000000..a76e6ec71 --- /dev/null +++ b/items.html @@ -0,0 +1,10 @@ + + + + + 구경하러 가기 + + + 구경하러 가기 + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 000000000..a5ebf2a18 --- /dev/null +++ b/login.html @@ -0,0 +1,44 @@ + + + + + 판다마켓_로그인 + + + + + +
+ +
+
+ + +
+
+ +
+ + 비밀번호 온오프 +
+
+ +
+
+

간편 로그인하기

+
+ 구글 로그인 + 카톡 로그인 +
+
+
+ 판다마켓이 처음이신가요? 회원가입 +
+
+ + \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 000000000..ee635fa35 --- /dev/null +++ b/privacy.html @@ -0,0 +1,10 @@ + + + + + Privacy_Policy + + + Privacy Policy + + \ No newline at end of file diff --git a/sign.css b/sign.css new file mode 100644 index 000000000..ed4349869 --- /dev/null +++ b/sign.css @@ -0,0 +1,152 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; +} + +:root { + --btn-hover: #1967d6; + --btn-focus: #1251aa; + --btn-disabled: #9ca3af; + + --input-bg-color: #f3f4f6; + --placehd-txt-color: #9ca3af; + --input-fc-outline-color: #3692ff; + --btn-bg-color: #3692ff; + --btn-txt-color: #ffffff; + --s-login-bg-color: #e6f2ff; + --signup-link-color: #3182f6; +} + +.button:hover { + background-color: var(--btn-hover); +} + +.button:focus { + background-color: var(--btn-focus); +} + +.button:disabled { + background-color: var(--btn-disabled); + cursor: default; + pointer-events: none; +} +.logoSection { + max-width: 640px; + margin: 0 auto; +} + +.topBigLogo { + display: block; + text-align: center; + margin-top: 60px; + margin-bottom: 40px; +} + +.topBigLogoImg { + width: 396px; +} + +.inputSection { + display: flex; + flex-direction: column; + margin-bottom: 24px; +} + +label { + display: block; + margin-bottom: 16px; + font-size: 18px; + font-weight: 700; +} + +input { + padding: 16px 24px; + border: none; + border-radius: 12px; + font-size: 16px; + line-height: 24px; + width: 100%; + background-color: var(--input-bg-color); +} + +input::placeholder { + font-size: 16px; + line-height: 24px; + color: var(--placehd-txt-color); +} + +.inputPassword { + position: relative; +} + +.visibilityIcon { + position: absolute; + top: 15px; + right: 30px; + cursor: pointer; +} + +input:focus { + outline-color: var(--input-fc-outline-color); +} + +.button { + background-color: var(--btn-bg-color); + color: var(--btn-txt-color); + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.inside { + font-size: 20px; + font-weight: 700; + border-radius: 999px; + padding: 16px 126px; +} + +.widthFull { + width: 100%; +} + +.simpleLogin { + border-radius: 8px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 23px; + margin: 24px 0; + background-color: var(--s-login-bg-color); +} + +.simpleLogin h3 { + font-size: 16px; + font-weight: 500; + line-height: 24px; +} + +.simpLoginWays { + display: flex; + gap: 16px; +} + +.simpLoginWay { + width: 42px; +} + +.signupLink { + font-size: 15px; + font-weight: 500; + text-align: center; +} + +.signupLink a { + color: var(--signup-link-color); +} + +.signupBottom { + margin-bottom: 232px; +} \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..1fc6091a1 --- /dev/null +++ b/signup.html @@ -0,0 +1,57 @@ + + + + + 판다마켓_회원가입 + + + + + +
+ +
+
+ + +
+
+ + +
+
+ +
+ + 비밀번호 온오프 +
+
+
+ +
+ + 비밀번호 온오프 +
+
+ +
+
+

간편 로그인하기

+
+ 구글 로그인 + 카톡 로그인 +
+
+
+
+ 이미 회원이신가요? 로그인 +
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..bb0d5ea9e --- /dev/null +++ b/style.css @@ -0,0 +1,178 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + text-decoration: none; +} + +:root { + --btn-hover: #1967d6; + --btn-focus: #1251aa; + --btn-disabled: #9ca3af; + + --body-bs-txt-color: #374151; + --header-bg-color: #ffffff; + --header-bd-color: #dfdfdf; + --btn-bg-color: #3692ff; + --btn-txt-color: #ffffff; + --banner-bg-color: #cfe5ff; + --content-s-txt-color: #3692ff; + --footer-bg-color: #111827; + --footer-bs-txt-color: #9ca3af; + --btm-txt-link-color: #e5e7eb; +} + +.button:hover { + background-color: var(--btn-hover); +} + +.button:focus { + background-color: var(--btn-focus); +} + +.button:disabled { + background-color: var(--btn-disabled); + cursor: default; + pointer-events: none; +} + +body { + color: var(--body-bs-txt-color); + white-space: nowrap; + font-family: "pretendard"; +} + +header { + position: fixed; + width: 100%; + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 200px; + background-color: var(--header-bg-color); + border-bottom: 1px solid var(--header-bd-color); +} + +.button { + background-color: var(--btn-bg-color); + color: var(--btn-txt-color); + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +#loginButton { + font-size: 16px; + font-weight: 600; + border-radius: 8px; + padding: 11.5px 23px; +} + +.banner { + height: 540px; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--banner-bg-color); + background-repeat: no-repeat; + background-position: 80% bottom; + background-size: 55%; +} + +h1 { + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02em; +} + +.inside { + font-size: 20px; + font-weight: 700; + border-radius: 999px; + padding: 16px 124px; + margin-top: 32px; +} + +#topBannerPanda { + background-image: url("img/topPanda_img.png"); +} + +.limited-width { + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +#contents { + padding-bottom: 128px; +} + +.content { + padding: 138px 0; + display: flex; + align-items: center; + gap: 5% +} + +.contentImg { + width: 50%; +} + +.contentText { + flex: 1; +} + +.contentSmolText { + color: var(--content-s-txt-color); + font-size: 18px; + line-height: 50px; + font-weight: 700; + margin-bottom: 12px; +} + +.contentExplain { + font-size: 24px; + font-weight: 500; + line-height: 120%; + letter-spacing: 0.08em; + margin-top: 24px; +} + +#reverseContent { + text-align: right; +} + +#bottomBannerPanda { + background-image: url("img/bottomPanda_img.png"); +} + +footer { + background-color: var(--footer-bg-color); + color: var(--footer-bs-txt-color); + display: flex; + justify-content: space-between; + align-items: center; + padding: 32px 200px 108px 200px; + font-size: 16px; +} + +#bottomThings { + display: flex; + gap: 30px; +} + +.bottomTextLink { + color: var(--btm-txt-link-color); +} + +#iconLink { + display: flex; + gap: 12px; +} + +.footerIcon { + width: 20px; +} \ No newline at end of file