diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..b512c09d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/_login.css b/css/_login.css new file mode 100644 index 00000000..a7d3a069 --- /dev/null +++ b/css/_login.css @@ -0,0 +1,157 @@ +main { + width: 100%; + min-height: 100vh; + display: flex; + /* align-items: center; */ + justify-content: center; + padding: 50px 0 100px; +} + +main > .content { + width: 640px; + text-align: center; +} +.big_logo { + display: block; + max-width: 320px; + width: 100%; + margin: auto; + margin-bottom: 60px; +} +.big_logo img { + width: 100%; +} +#forms { +} +#forms label { + display: block; + width: 100%; + position: relative; + text-align: left; + font-size: 18px; + font-weight: 700; + margin-bottom: 10px; +} +#forms .inputbox { + width: 100%; + padding: 16px 24px; + border-radius: 12px; + height: 56px; + background: var(--gray100); + display: flex; + border: 1px solid transparent; + position: relative; +} +#forms .conBox { + position: relative; + margin-bottom: 36px; + /* height: 0; */ + /* transition: 1.5; */ +} + +#forms .inputbox.on { + border: 1px solid var(--primary100); +} +#forms .inputbox input { + border: 0; + width: 100%; + height: 100%; + background: transparent; + font-size: 16px; + outline: none; +} +#forms .inputbox .seePw { + position: relative; + width: 22px; + height:22px; + background:url(../img/look.svg) no-repeat center; +} +#forms .inputbox .seePw.on { + background:url(../img/look2.svg) no-repeat center; +} +#forms .inputbox.err { + border-color: var(--error); +} +#forms .inputbox .errMsg { + position: absolute; + left: 0; + top: 110%; + display: block; + text-align: left; + padding-left: 16px; + font-size: 15px; + font-weight: 600; + color: var(--error); + letter-spacing: -1px; +} +#forms button.btn { + width: 100%; + height: 56px; + background: var(--gray400); + color: var(--gray50); + font-size: 20px; + line-height: 32px; + font-weight: 600; + border: 0; + border-radius: 40px; + margin-bottom: 24px; + transition: 0.5s; +} +#forms button.btn.on { + cursor: pointer; + background-color: var(--primary100); +} + +#forms .simple { + display: flex; + justify-content: space-between; + background: #e6f2ff; + padding: 16px 23px; + height: 74px; + border-radius: 12px; + margin-bottom: 24px; +} +#forms .simple p { + font-size: 16px; + line-height: 26px; + font-weight: 500; + display: flex; + align-items: center; + color: var(--gray800); +} +#forms .simple .icon_box { + display: flex; + justify-content: space-between; + width: 100px; +} +#forms .simple a { + display: block; +} + +#forms .link { + text-align: center; + font-size: 14px; + line-height: 24px; + font-weight: 500; + color: var(--gray800); +} +#forms .link a { + color: var(--primary100); + font-size: 14px; + font-weight: 500; + text-decoration: underline; +} + +@media screen and (max-width: 1199px) { + .big_logo img { + width: 100%; + max-width: 390px; + } +} + +@media screen and (max-width: 743px) { + main > .content { + padding: 0 16px; + max-width: 400px; + } +} diff --git a/css/_modal.css b/css/_modal.css new file mode 100644 index 00000000..7c16ac6e --- /dev/null +++ b/css/_modal.css @@ -0,0 +1,73 @@ +.modalCover { + background-color: rgba(0, 0, 0, 0.6); + width: 100%; + height: 100vh; + position: fixed; + left: 0; + top: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; +} +.modal { + width: 500px; + height: 250px; + background-color: #fff; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + animation: modal 0.5s ease-in; +} +.modal p { + color: var(--error); + font-size: 18px; + font-weight: 600; +} +.modal button { + position: absolute; + background: var(--primary100); + color: #fff; + bottom: 20px; + right: 20px; + width: 120px; + height: 48px; + padding: 12px 23px 12px 23px; + border-radius: 8px; + border: 0; + font-size: 16px; + font-weight: 600; +} +@keyframes modal { + 0% { + transform: rotate(1deg); + } + 10% { + transform: rotate(-1deg); + } + 20% { + transform: rotate(1deg); + } + 30% { + transform: rotate(-1deg); + } + 40% { + transform: rotate(1deg); + } + 50% { + transform: rotate(-1deg); + } + 60% { + transform: rotate(1deg); + } + 70% { + transform: rotate(-1deg); + } +} +@media screen and (max-width: 656px) { + .modal { + width: 327px; + } +} diff --git a/css/_reset.css b/css/_reset.css new file mode 100644 index 00000000..ad54b63f --- /dev/null +++ b/css/_reset.css @@ -0,0 +1,49 @@ +@font-face { + font-family: "Pretendard"; + font-weight: 400; + font-display: swap; + src: local("Pretendard Regular"), + url(./font/Pretendard-Regular.woff2) format("woff2"), + url(./font/Pretendard-Regular.woff) format("woff"); +} +/* reset */ +* { + padding: 0; + margin: 0; + line-height: 150%; + box-sizing: border-box; + font-family: "Pretendard"; +} +a { + text-decoration: none; +} +li { + list-style: none; +} +html { + font-size: 10px; +} +p { + word-break: keep-all; +} + +/* color */ +:root { + --primary100: #3692ff; + --primary200: #1967d6; + --primary300: #1251aa; + --error: #f74747; + + /*secondary color*/ + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray50: #f9fafb; + + --bb: 1deg; +} diff --git a/css/_style.css b/css/_style.css new file mode 100644 index 00000000..2cd06e72 --- /dev/null +++ b/css/_style.css @@ -0,0 +1,384 @@ +/* ---------------- CSS ---------------- */ +body { + margin-top: 7rem; +} + +header { + width: 100%; + height: 70px; + position: fixed; + top: 0; + left: 50%; + transform: translateX(-50%); + border-bottom: 1px solid #dfdfdf; + z-index: 999; + background: #fff; +} +header .gnb { + display: flex; + height: 100%; + width: 100%; + max-width: 1920px; + justify-content: space-between; + padding: 9px 200px; + margin: auto; +} +header .loginBtn { + border: 0; + display: block; + text-align: center; + width: 128px; + height: 48px; + border-radius: 8px; + padding: 12px 24px; + background-color: var(--primary100); + font-size: 20px; + font-weight: 600; + line-height: 120%; + color: var(--gray50); +} +header .logo img { + width: 15.3rem; +} + +.visual { + height: 540px; + width: 100%; +} +.visual .content { + height: 100%; + width: 100%; + background-color: #cfe5ff; + display: flex; + align-items: flex-end; + justify-content: center; +} +.visual .content img { + width: 40vw; +} +.visual .txtBox { + height: 34rem; + margin-right: 10px; +} +.visual .txtBox h2 { + height: 11.2rem; + font-size: 4rem; + line-height: 5.6rem; + font-weight: 700; + color: #374151; + margin-bottom: 3rem; +} +.visual .txtBox a { + width: 100%; + display: block; + max-width: 35.7rem; + max-height: 5.6rem; + font-size: 2.3rem; + line-height: 120%; + font-weight: 600; + color: var(--gray50); + background-color: var(--primary100); + text-align: center; + padding: 1.6rem 0; + border-radius: 4rem; +} + +.section { + display: flex; + align-items: cneter; + justify-content: center; + width: 100%; + height: 72rem; + padding: 13.8rem 34.4rem; +} +.section .content { + width: 100rem; + background-color: #fcfcfc; + display: flex; + align-items: center; + justify-content: center; + padding: 0 1rem; +} +.section .content img { + max-width: 58.8rem; + /* width: 100%; */ +} +.section .content .left { + text-align: right; +} +.section .content .left.txtBox { + margin-right: 6.4rem; +} +.section .content .txtBox { + position: relative; + margin-left: 6.4rem; + width: 100%; +} +.section .content .txtBox .abs { + width: 32rem; +} +.section .content .txtBox h4 { + color: var(--primary100); + font-size: 1.8rem; + font-weight: 700; + line-height: 2.6rem; + margin-bottom: 1.5rem; +} +.section .content .txtBox h2 { + font-size: 4rem; + line-height: 5.6rem; + font-weight: 700; + letter-spacing: 2%; + color: #374151; + margin-bottom: 3.5rem; +} +.section .content .txtBox p { + font-size: 2.4rem; + line-height: 2.8rem; + font-weight: 500; + color: #374151; +} + +.bottomVisual { + margin-top: 13.8rem; +} +.bottomVisual img { + width: 64.9rem; +} +.bottomVisual .txtBox { + margin-right: 6.9rem; +} + +footer { + width: 100%; + height: 16rem; + padding: 3.2rem 20rem; + background: #111827; +} +footer .content { + max-width: 1920px; + margin: auto; + display: flex; + justify-content: space-between; + font-size: 1.6rem; +} +footer .content p { + color: #9ca3af; + line-height: 1.8rem; + font-weight: 400; +} +footer .content .link { + width: 15.9rem; + display: flex; + justify-content: space-between; +} +footer .content .link a { + color: #e5e7eb; +} +footer .content .icon { + width: 11.6rem; + display: flex; + justify-content: space-between; +} +footer .content .icon img { + width: 2rem; +} + +@media screen and (max-width: 1199px) { + header { + } + header .gnb { + max-width: 1199px; + padding: 9px 16px; + margin: auto; + } + header .loginBtn { + } + header .logo img { + width: 100%; + max-width: 153px; + } + + .visual { + margin-top: 70px; + height: 771px; + } + .visual .content { + height: 100%; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + } + .visual .content img { + width: 100%; + max-width: 740px; + } + .visual .txtBox { + width: 100%; + } + .visual .txtBox br { + display: none; + } + .visual .txtBox h2 { + height: auto; + width: 100%; + font-size: 40px; + font-weight: 700; + margin: auto; + margin-top: 30px; + margin-bottom: 40px; + text-align: center; + } + .visual .txtBox a { + margin: auto; + } + + .section { + display: flex; + align-items: cneter; + justify-content: center; + width: 100%; + height: 72rem; + padding: 24px; + } + .section .content { + flex-wrap: wrap; + width: 100%; + max-width: 588px; + display: flex; + align-items: center; + justify-content: center; + padding: 0 1rem; + } + .section .content img { + width: 100%; + } + .section .content .left { + } + .section .content .left.txtBox { + margin-right: 0; + order: 1; + } + .section .content .txtBox { + margin-left: 0; + width: 100%; + } + .section .content .txtBox .abs { + width: 100%; + } + .section .content .txtBox h4 { + color: var(--primary100); + font-size: 1.8rem; + font-weight: 700; + line-height: 2.6rem; + margin-bottom: 1.5rem; + } + .section .content .txtBox h2 { + font-size: 4rem; + line-height: 5.6rem; + font-weight: 700; + letter-spacing: 2%; + color: #374151; + margin-bottom: 3.5rem; + } + .section .content .txtBox p { + font-size: 2.4rem; + line-height: 2.8rem; + font-weight: 500; + color: #374151; + } + + .bottomVisual { + margin-top: 13.8rem; + } + .bottomVisual img { + width: 64.9rem; + } + .bottomVisual .txtBox { + margin-right: 0; + height: auto; + } + .bottomVisual .txtBox h2 br { + display: block; + } + + footer { + width: 100%; + height: 16rem; + padding: 3.2rem 20rem; + background: #111827; + } + footer .content { + max-width: 1920px; + margin: auto; + display: flex; + justify-content: space-between; + font-size: 1.6rem; + } + footer .content p { + color: #9ca3af; + line-height: 1.8rem; + font-weight: 400; + } + footer .content .link { + width: 15.9rem; + display: flex; + justify-content: space-between; + } + footer .content .link a { + color: #e5e7eb; + } + footer .content .icon { + width: 11.6rem; + display: flex; + justify-content: space-between; + } + footer .content .icon img { + width: 2rem; + } +} + +@media screen and (max-width: 743px) { + br { + display: none; + } + .visual { + height: 540px; + } + .visual .content { + height: auto; + padding: 0 16px; + } + .visual .content h2 br { + display: block; + } + .visual .content .txtBox h2 { + margin-bottom: 20px; + margin-top: 40px; + font-size: 32px; + line-height: 140%; + } + .visual .txtBox { + margin-right: 0; + } + .visual .txtBox a { + max-width: 240px; + width: 100%; + } + .section { + height: auto; + } + .section .content { + flex-wrap: wrap; + } + .section .content .txtBox { + padding: 16px 0; + } + .section .content .left { + order: 3; + } + .sectipn .content img { + width: 100%; + } +} diff --git a/css/font/Pretendard-Regular.woff b/css/font/Pretendard-Regular.woff new file mode 100644 index 00000000..e3b3a358 Binary files /dev/null and b/css/font/Pretendard-Regular.woff differ diff --git a/css/font/Pretendard-Regular.woff2 b/css/font/Pretendard-Regular.woff2 new file mode 100644 index 00000000..a9f62319 Binary files /dev/null and b/css/font/Pretendard-Regular.woff2 differ diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..f5732062 --- /dev/null +++ b/faq.html @@ -0,0 +1,11 @@ + + +
+ + +
+ 가장 HOT한 중고거래 물품을
+ 판다 마켓에서 확인해 보세요
+
+ 구매하고 싶은 물품은 검색해서
+ 쉽게 찾아보세요
+
어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요
++ 판다마켓이 처음이신가요? + 회원가입 +
+ `; + a += btn; + } else { + let btn = bottom({ className: "signup_btn", text: "회원가입" }); + btn += ` ++ 이미 회원이신가요? + 로그인 +
+ `; + + a += btn; + } + } else { + let pwIcon = ""; + let part = `${c}을`; + let type = "text"; + let idName = ""; + switch (c) { + case "이메일": + idName = "email"; + break; + case "비밀번호": + idName = "password"; + break; + } + if (c.indexOf("비밀번호") !== -1) { + pwIcon = ` + + `; + type = "password"; + if (c.indexOf("확인") !== -1) { + part = "비밀번호를 다시 한 번"; + idName = "password2"; + } else part = `${c}를`; + } + a += ` +{cutPrice(price)}원
++ + {favorite} +
+