diff --git a/index.html b/index.html index 78a6e884..f63697ad 100644 --- a/index.html +++ b/index.html @@ -3,16 +3,18 @@ + + + 판다마켓 - - +
diff --git a/page/login.html b/page/login.html index d89fd687..514fd321 100644 --- a/page/login.html +++ b/page/login.html @@ -4,7 +4,7 @@ 판다마켓 - 로그인 - +
@@ -21,7 +21,7 @@
- +
diff --git a/page/signup.html b/page/signup.html index d6a32130..d99d1082 100644 --- a/page/signup.html +++ b/page/signup.html @@ -4,7 +4,7 @@ 판다마켓 - 회원가입 - +
@@ -20,7 +20,7 @@
- +
diff --git a/resource/css/common.css b/resource/css/common.css index 63ac153b..7741208a 100644 --- a/resource/css/common.css +++ b/resource/css/common.css @@ -199,4 +199,49 @@ button.el-btn { position: absolute; bottom: 14px; right: 24px; +} + + + +/* 반응형 */ +.mobile { + display: none; +} +.tablet { + display: none; +} +.pc { + display: block; +} + +@media (width < 1200px) { + .pc { + display: none; + } + .tablet { + display: block; + } +} + +@media (width < 768px) { + .pc { + display: none; + } + .mobile { + display: block; + } + + /* button */ + .el-btn.btn-l { + font-size: var(--text-2lg); + line-height: 48px; + } + + /* input */ + .el-txt-input label { + font-size: var(--text-md); + } + .el-txt-input label + input { + margin-top: 8px; + } } \ No newline at end of file diff --git a/resource/css/main.css b/resource/css/main.css new file mode 100644 index 00000000..e656dd47 --- /dev/null +++ b/resource/css/main.css @@ -0,0 +1,256 @@ +@charset "utf-8"; +@import url('./root.css'); +@import url('./common.css'); + + +/* ############################################################## + main page +############################################################## */ + +/* header */ +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: #fff; + border-bottom: 1px solid #dfdfdf; +} +.header .inner { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1520px; + padding: 0 200px; + margin: 0 auto ; + height: 70px; +} +.header .el-btn.btn-sm { + padding: 0 43px; +} + +/* contents */ +.contents .color-sec { + padding-top: 200px; + background-color: #CFE5FF; +} +.contents .color-sec .banner { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1110px; + margin: 0 auto; +} +.contents .banner .img-wrap { + margin-bottom: -9px; +} +.contents .banner .text { + font-weight: bold; + font-size: 40px; + color: #374151; +} +.contents .banner .el-btn.btn-l { + margin-top: 32px; + min-width: 357px; +} +.contents .main-cont section { + padding: 138px 0; +} +.main-cont .cont-box { + display: flex; + align-items: center; + gap: 40px; + margin: 0 auto; + width: 988px; + height: 444px; + border-radius: 12px; + background: #FCFCFC; +} +.cont-box .box-img { + height: 100%; + padding: 0 23px; +} +.cont-box .box-img img { + width: 100%; + height: 100%; +} +.cont-box .box-text .keyword { + display: inline-block; + margin-bottom: 12px; + font-size: 18px; + font-weight: bold; + color: #3692FF; +} +.cont-box .box-text .text { + margin-bottom: 24px; + font-size: 40px; + font-weight: bold; + color: #374151; +} +.cont-box .box-text .info { + font-size: 24px; + font-weight: 500; + color: #374151; +} +.cont-box.ty-revers { + justify-content: flex-end; +} +.cont-box.ty-revers .box-text { + text-align: right; +} + + +/* footer */ +.footer { + padding-top: 32px; + background-color: #111827; + height: 160px; +} +.footer .foot-wrap { + display: flex; + justify-content: space-between; + margin: 0 auto; + max-width: 1120px; +} +.footer .copy { + font-size: 16px; + color: #9CA3AF; +} +.footer .page-link ul { + display: flex; + gap: 30px; + align-items: center; +} +.footer .page-link li a { + font-size: 16px; + color: #E5E7EB; +} +.footer .sns-link-wrap ul { + display: flex; + gap: 12px; + align-items: center; +} + + + +/* + 반응형 +*/ +/* tablet */ +@media (width < 1200px) { + .header .inner { + padding: 0 25px; + } + .contents .color-sec .banner { + flex-direction: column; + } + .contents .color-sec .banner .text { + text-align: center; + } + .contents .banner .img-wrap { + margin-top: 211px; + width: 100%; + } + .contents .banner .img-wrap img { + width: 100%; + } + .contents .banner .el-btn.btn-l { + max-width: 357px; + margin: 24px auto 0; + } + .contents .main-cont { + padding: 24px; + background: #fcfcfc; + } + .contents .main-cont section { + padding: 0 0 52px; + } + .main-cont .cont-box { + width: 100%; + height: auto; + flex-direction: column; + align-items: flex-start; + gap: 24px; + } + .cont-box .box-img { + width: 100%; + height: auto; + padding: 0; + order: 0; + } + .cont-box .box-img img { + border-radius: 15px; + } + .cont-box .box-text { + order: 1; + } + .cont-box .box-text .keyword { + margin-bottom: 16px; + } + .cont-box .box-text .text { + margin-bottom: 24px; + font-size: 32px; + } + .cont-box .box-text .info { + font-size: 18px; + } + .main-cont .cont-box.ty-revers { + justify-content: flex-start; + align-items: flex-end; + } + .footer { + padding: 32px 104px; + } +} + +/* mobile */ +@media (width < 768px) { + .header .inner { + padding: 0 16px; + } + .header .head-logo img { + width: 103px; + } + .contents .color-sec { + padding-top: 120px; + } + .contents .banner .text { + font-size: 32px; + } + .contents .banner .el-btn.btn-l { + max-width: 240px; + min-width: auto; + } + .contents .banner .img-wrap { + margin-top: 132px; + } + .contents .main-cont { + padding: 52px 15px 43px; + } + .contents .main-cont section { + padding-bottom: 40px; + } + .cont-box .box-img img { + border-radius: 7px; + } + .cont-box .box-text .keyword { + margin-bottom: 8px; + font-size: 16px; + } + .cont-box .box-text .text { + margin-bottom: 16px; + font-size: 24px; + } + .cont-box .box-text .info { + font-size: 16px; + } + .footer { + position: relative; + padding: 32px; + } + .footer .foot-wrap .copy { + position: absolute; + bottom: 32px; + left: 32px; + } +} \ No newline at end of file diff --git a/resource/css/style.css b/resource/css/style.css deleted file mode 100644 index 8cfc013a..00000000 --- a/resource/css/style.css +++ /dev/null @@ -1,188 +0,0 @@ -@charset "utf-8"; -@import url('./root.css'); -@import url('./common.css'); - - -/* ############################################################## - main page -############################################################## */ - -/* header */ -.header { - position: fixed; - top: 0; - left: 0; - width: 100%; - background: #fff; - border-bottom: 1px solid #dfdfdf; -} -.header .inner { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 1520px; - padding: 0 200px; - margin: 0 auto ; - height: 70px; -} -.header .el-btn.btn-sm { - padding: 0 43px; -} - -/* contents */ -.contents .color-sec { - padding-top: 200px; - background-color: #CFE5FF; -} -.contents .color-sec .banner { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 1110px; - margin: 0 auto; -} -.contents .banner .img-wrap { - margin-bottom: -9px; -} -.contents .banner .text { - font-weight: bold; - font-size: 40px; - color: #374151; -} -.contents .banner .el-btn.btn-l { - margin-top: 32px; - min-width: 357px; -} -.contents .main-cont section { - padding: 138px 0; -} -.main-cont .cont-box { - display: flex; - align-items: center; - gap: 40px; - margin: 0 auto; - width: 988px; - height: 444px; - border-radius: 12px; - background: #FCFCFC; -} -.cont-box .box-img { - height: 100%; - padding: 0 23px; -} -.cont-box .box-img img { - width: 100%; - height: 100%; -} -.cont-box .box-text .keyword { - margin-bottom: 12px; - font-size: 18px; - font-weight: bold; - color: #3692FF; -} -.cont-box .box-text .text { - margin-bottom: 24px; - font-size: 40px; - font-weight: bold; - color: #374151; -} -.cont-box .box-text .info { - font-size: 24px; - font-weight: 500; - color: #374151; -} -.cont-box.ty-revers { - justify-content: flex-end; -} -.cont-box.ty-revers .box-text { - text-align: right; -} - - -/* footer */ -.footer { - padding-top: 32px; - background-color: #111827; - height: 160px; -} -.footer .foot-wrap { - display: flex; - justify-content: space-between; - margin: 0 auto; - max-width: 1120px; -} -.footer .copy { - font-size: 16px; - color: #9CA3AF; -} -.footer .page-link ul { - display: flex; - gap: 30px; - align-items: center; -} -.footer .page-link li a { - font-size: 16px; - color: #E5E7EB; -} -.footer .sns-link-wrap ul { - display: flex; - gap: 12px; - align-items: center; -} - - - -/* ############################################################## - login/signup page -############################################################## */ -/* layout */ -.layout-sign { - padding-top: 100px; -} -.layout-sign .contents { - max-width: 640px; - margin: 0 auto; - text-align: center; -} - -/* contents */ -.layout-sign .sign-form { - margin-top: 40px; -} -.sign-form .input-box { - margin-bottom: 24px; -} -.sns-login { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 24px; - padding: 16px 23px; - background-color: #E6F2FF; - border-radius: 8px; -} -.sns-login .login-tit { - font-size: var(--text-lg); - font-weight: 500; - color: var(--color-gray800); -} -.sns-login .sns-login-link { - display: flex; - gap: 16px; - align-items: center; -} -.sns-login .sns-login-link li { - width: 42px; - height: 42px; -} -.layout-sign .sign-msg { - margin-top: 24px; - font-weight: 500; - font-size: var(--text-md); -} -.sign-msg .link-txt { - font-weight: 500; - font-size: var(--text-md); - color: var(--color-primary-100); - text-decoration: underline; -} \ No newline at end of file diff --git a/resource/css/sub/sign.css b/resource/css/sub/sign.css new file mode 100644 index 00000000..1f9916ff --- /dev/null +++ b/resource/css/sub/sign.css @@ -0,0 +1,93 @@ +@charset "utf-8"; +@import url('../root.css'); +@import url('../common.css'); + + + +/* ############################################################## + login/signup page +############################################################## */ +/* layout */ +.layout-sign { + padding-top: 100px; +} +.layout-sign .contents { + max-width: 640px; + margin: 0 auto; + text-align: center; +} + +/* contents */ +.layout-sign .sign-form { + margin-top: 40px; +} +.sign-form .input-box { + margin-bottom: 24px; +} +.sns-login { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 24px; + padding: 16px 23px; + background-color: #E6F2FF; + border-radius: 8px; +} +.sns-login .login-tit { + font-size: var(--text-lg); + font-weight: 500; + color: var(--color-gray800); +} +.sns-login .sns-login-link { + display: flex; + gap: 16px; + align-items: center; +} +.sns-login .sns-login-link li { + width: 42px; + height: 42px; +} +.layout-sign .sign-msg { + margin-top: 24px; + font-weight: 500; + font-size: var(--text-md); +} +.sign-msg .link-txt { + font-weight: 500; + font-size: var(--text-md); + color: var(--color-primary-100); + text-decoration: underline; +} + + +/* + 반응형 +*/ +/* tablet */ +@media (width < 1200px) { + .layout-sign { + padding-top: 48px; + } +} + +/* mobile */ +@media (width < 768px) { + .layout-sign { + padding: 24px 16px 0; + } + .layout-sign .contents { + max-width: 400px; + } + .layout-sign .contents .logo-area img { + width: 198px; + } + .layout-sign .sign-form { + margin-top: 24px; + } + .sign-form .input-box { + margin-bottom: 16px; + } + .sign-form .el.btn.btn-l { + line-height: 56px; + } +} \ No newline at end of file diff --git a/resource/img/head_logo_mo.png b/resource/img/head_logo_mo.png new file mode 100644 index 00000000..110c2f38 Binary files /dev/null and b/resource/img/head_logo_mo.png differ diff --git a/resource/img/preview.png b/resource/img/preview.png new file mode 100644 index 00000000..158e4f5f Binary files /dev/null and b/resource/img/preview.png differ