From 9a7806646ef1007ebde4cb170916e95ff078278d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=ED=9A=A8=EC=84=B1?= Date: Fri, 31 May 2024 22:24:18 +0900 Subject: [PATCH] =?UTF-8?q?=EC=8A=A4=ED=94=84=EB=A6=B0=ED=8A=B8=20?= =?UTF-8?q?=EB=AF=B8=EC=85=982=20=EC=B5=9C=EC=B4=88=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- faq.html | 10 +++ index.html | 87 +++++++++++++++++++++++++ items.html | 10 +++ login.html | 44 +++++++++++++ privacy.html | 10 +++ sign.css | 152 +++++++++++++++++++++++++++++++++++++++++++ signup.html | 57 +++++++++++++++++ style.css | 178 +++++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 548 insertions(+) create mode 100644 faq.html create mode 100644 index.html create mode 100644 items.html create mode 100644 login.html create mode 100644 privacy.html create mode 100644 sign.css create mode 100644 signup.html create mode 100644 style.css 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