diff --git a/index.html b/index.html index 7545c3ee..78a6e884 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,13 @@
- -
@@ -22,7 +24,7 @@

판다마켓 로 <div class=

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

- 구경하러 가기 + 구경하러 가기
@@ -36,7 +38,7 @@

판다마켓 로 <img src=

-

Hot item

+ Hot item

인기 상품을
확인해 보세요

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

@@ -45,7 +47,7 @@

판다마켓 로 <section> <div class=
-

Search

+ Search

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

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

@@ -60,7 +62,7 @@

판다마켓 로 <img src=

-

Register

+ Register

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

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

diff --git a/page/login.html b/page/login.html index 80033ab3..d89fd687 100644 --- a/page/login.html +++ b/page/login.html @@ -3,9 +3,38 @@ - Document + 판다마켓 - 로그인 + - +
+
+
+ 판다마켓 로고 +
+
+
+
+ + +
+
+ + + +
+ +
+
+ +

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

+
+
\ No newline at end of file diff --git a/page/signup.html b/page/signup.html new file mode 100644 index 00000000..d6a32130 --- /dev/null +++ b/page/signup.html @@ -0,0 +1,49 @@ + + + + + + 판다마켓 - 회원가입 + + + +
+
+
+ 판다마켓 로고 +
+
+
+
+ + +
+
+ + +
+
+ + + +
+
+ + + +
+ +
+
+ +

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

+
+
+ + \ No newline at end of file diff --git a/resource/css/common.css b/resource/css/common.css new file mode 100644 index 00000000..63ac153b --- /dev/null +++ b/resource/css/common.css @@ -0,0 +1,202 @@ +@charset "utf-8"; + +/* ############################################################## + font #폰트 +############################################################## */ +@font-face { + font-family: 'Pretendard'; + src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Pretendard'; + src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff'); + font-weight: 800; + font-style: normal; +} +@font-face { + font-family: 'Pretendard'; + src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'Pretendard'; + 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 #리셋 +############################################################## */ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + + + +/* ############################################################## + Reset override #리셋 오버라이드 +############################################################## */ +body { font-family: 'Pretendard', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 24px; word-break: keep-all; line-height: 1.4; } +button, input, textarea, select, a { font-family: 'Pretendard', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 24px; } +a, a:link, a:visited, a:hover { text-decoration: none; color: inherit; cursor: pointer;} +button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px solid #303030; } +*:-moz-focusring { outline: 1px solid #303030; } +* {box-sizing: border-box;} + + + +/* ############################################################## + Component #컴포넌트 +############################################################## */ +/* + button +*/ +a.el-btn, +button.el-btn { + display: block; + padding: 0; + width: 100%; + font-weight: 800; + text-align: center; + background-color: var(--color-primary-100); + color: var(--color-gray100); + border: none; + cursor: pointer; +} +.el-btn:hover { + background-color: var(--color-primary-200); +} +.el-btn:active { + background-color: var(--color-primary-300); +} +.el-btn:disabled { + background-color: var(--color-gray400); +} + +/* btn size */ +.el-btn.btn-l { + border-radius: 40px; + font-size: var(--text-xl); + line-height: 56px; +} +.el-btn.btn-m { + border-radius: 40px; + font-size: var(--text-2lg); + line-height: 48px; +} +.el-btn.btn-sm { + padding: 0 30px; + line-height: 48px; + border-radius: 8px; + font-size: var(--text-lg); +} +.el-btn.btn-s { + padding: 0 23px; + line-height: 42px; + border-radius: 8px; + font-size: var(--text-lg); +} + +/* icon-btn */ +.el-btn.btn-password { + width: 24px; + height: 24px; + background: transparent url('../img/btn_vis.png') no-repeat center/24px; +} +.el-btn.btn-password.on { + background-image: url('../img/btn_vis_on.png'); +} + + + +/* + input +*/ +/* text */ +.el-txt-input { + position: relative; +} +.el-txt-input label { + display: block; + font-size: var(--text-2lg); + font-weight: bold; + text-align: left; + color: var(--color-gray800); +} +.el-txt-input input { + padding: 15px 50px 15px 24px; + width: 100%; + font-size: var(--text-lg); + border: 2px solid transparent; + border-radius: 12px; + background-color: var(--color-gray100); + color: var(--color-gray800); +} +.el-txt-input input::placeholder { + font-size: var(--text-lg); + color: var(--color-gray400); +} +.el-txt-input input:focus { + border: 2px solid #3692ff; +} +.el-txt-input input:focus-visible { + outline: none; +} +.el-txt-input label + input { + margin-top: 16px; +} +.el-txt-input .el-btn { + position: absolute; + bottom: 14px; + right: 24px; +} \ No newline at end of file diff --git a/resource/css/font.css b/resource/css/font.css deleted file mode 100644 index e69de29b..00000000 diff --git a/resource/css/root.css b/resource/css/root.css new file mode 100644 index 00000000..c40e88b8 --- /dev/null +++ b/resource/css/root.css @@ -0,0 +1,40 @@ +@charset "utf-8"; + +:root { + /* color */ + --color-primary-100: #3692FF; + --color-primary-200 : #1967D6; + --color-primary-300 : #1251AA; + --color-error : #F74747; + + --color-gray50 : #F9FAFB; + --color-gray100 : #F3F4F6; + --color-gray200 : #E5E7EB; + --color-gray400 : #9CA3AF; + --color-gray500 : #6B7280; + --color-gray600 : #4B5563; + --color-gray700 : #374151; + --color-gray800 : #1F2937; + --color-gray900 : #111827; + + + /* font-size */ + --text-xs: 12px; + --text-sm: 13px; + --text-md: 14px; + --text-lg: 16px; + --text-2lg: 18px; + --text-xl: 20px; + --text-2xl: 24px; + --text-3xl: 32px; + + /* line-heiht */ + --line-height-xs : 1.5; + --line-height-sm : 1.69; + --line-height-md : 1.71; + --line-height-lg : 1.625; + --line-height-2lg : 1.556; + --line-height-xl : 1.6; + --line-height-2xl : 1.333; + --line-height-3xl : 1.313; +} \ No newline at end of file diff --git a/resource/css/style.css b/resource/css/style.css index 2f544d22..8cfc013a 100644 --- a/resource/css/style.css +++ b/resource/css/style.css @@ -1,136 +1,32 @@ @charset "utf-8"; - -/* ############################################################## - font #폰트 -############################################################## */ -@font-face { - font-family: 'Pretendard'; - src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; -} -@font-face { - font-family: 'Pretendard'; - src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff'); - font-weight: 800; - font-style: normal; -} -@font-face { - font-family: 'Pretendard'; - src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff'); - font-weight: 500; - font-style: normal; -} -@font-face { - font-family: 'Pretendard'; - 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 #리셋 -############################################################## */ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} - - - -/* ############################################################## - Reset override #리셋 오버라이드 -############################################################## */ -body { font-family: 'Pretendard', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 24px; word-break: keep-all; line-height: 1.4; } -button, input, textarea, select, a { font-family: 'Pretendard', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 24px; } -a, a:link, a:visited, a:hover { text-decoration: none; color: inherit; cursor: pointer;} -button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px solid #303030; } -*:-moz-focusring { outline: 1px solid #303030; } -* {box-sizing: border-box;} - +@import url('./root.css'); +@import url('./common.css'); /* ############################################################## main page ############################################################## */ -.layout { min-width: 1200px; } /* 깨짐 방지 임시 코드 */ /* 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; - padding: 0 200px; max-width: 1520px; - height: 70px; + padding: 0 200px; margin: 0 auto ; + height: 70px; } -.header .login-link { - display: block; +.header .el-btn.btn-sm { padding: 0 43px; - line-height: 48px; - background: #3692FF; - border-radius: 8px; - font-size: 16px; - font-weight: 800; - color: #F3F4F6; -} -.login-link:hover, -.contents .banner .link-btn:hover { - background-color: #1967D6; -} -.login-link:active, -.contents .banner .link-btn:active { - background-color: #1251AA; -} -.login-link[disabled], -.contents .banner .link-btn[disabled] { - background-color: #9CA3AF; } /* contents */ @@ -153,25 +49,17 @@ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring font-size: 40px; color: #374151; } -.contents .banner .link-btn { - display: block; +.contents .banner .el-btn.btn-l { margin-top: 32px; - border-radius: 40px; - font-size: 20px; - font-weight: 800; - line-height: 56px; - color: #F9FAFB; - background-color: #3691ff; - text-align: center; + min-width: 357px; } .contents .main-cont section { padding: 138px 0; } .main-cont .cont-box { display: flex; - justify-content: center; align-items: center; - gap: 64px; + gap: 40px; margin: 0 auto; width: 988px; height: 444px; @@ -180,6 +68,7 @@ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring } .cont-box .box-img { height: 100%; + padding: 0 23px; } .cont-box .box-img img { width: 100%; @@ -202,6 +91,9 @@ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring font-weight: 500; color: #374151; } +.cont-box.ty-revers { + justify-content: flex-end; +} .cont-box.ty-revers .box-text { text-align: right; } @@ -236,4 +128,61 @@ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring 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/img/btn_vis.png b/resource/img/btn_vis.png new file mode 100644 index 00000000..5dc09fbe Binary files /dev/null and b/resource/img/btn_vis.png differ diff --git a/resource/img/btn_vis_on.png b/resource/img/btn_vis_on.png new file mode 100644 index 00000000..32765f0b Binary files /dev/null and b/resource/img/btn_vis_on.png differ diff --git a/resource/img/ic_google.png b/resource/img/ic_google.png new file mode 100644 index 00000000..f75dc761 Binary files /dev/null and b/resource/img/ic_google.png differ diff --git a/resource/img/ic_kakao.png b/resource/img/ic_kakao.png new file mode 100644 index 00000000..bd767800 Binary files /dev/null and b/resource/img/ic_kakao.png differ diff --git a/resource/img/login_logo.png b/resource/img/login_logo.png new file mode 100644 index 00000000..8248f602 Binary files /dev/null and b/resource/img/login_logo.png differ