diff --git a/auth.css b/auth.css new file mode 100644 index 00000000..8c38833e --- /dev/null +++ b/auth.css @@ -0,0 +1,77 @@ +@charset "UTF-8"; +@import 'reset.css'; +@import 'common.css'; +@import 'palette.css'; + +/* login, signup */ +.flex_center_box { + max-width: 640px; + width: 100%; +} +.login_page { + width: 100%; + height: 100%; +} +.login_page .contents { + margin-top: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.logo.large { + margin: 0 auto 40px; + max-width: 396px; + max-height: 132px; +} +.login_area_box { + display: flex; + gap: 24px; + flex-direction: column; + justify-content: space-between; +} +.guide_signup_text { + font-size: 14px; + line-height: 24px; + text-align: center; +} +.guide_signup_text a { + margin-left: 4px; + font-size: 15px; + font-weight: 500; + line-height: 18px; + text-decoration-line: underline; + color: #3182f6; +} +.blue_box { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + border-radius: 8px; + background-color: #e6f2ff; +} + +.social_group { + display: flex; + gap: 10px; +} +/* Mobile */ +@media screen and (max-width: 767px) { + .flex_center_box { + max-width: 400px; + padding: 0 16px; + } + .logo.large { + margin: 0 auto 24px; + max-width: 198px; + max-height: 66px; + } + .login_area_box { + gap: 16px; + } + .login_area_box .blue_box { + margin: 24px 0; + } +} diff --git a/common.css b/common.css new file mode 100644 index 00000000..a411db33 --- /dev/null +++ b/common.css @@ -0,0 +1,270 @@ +html { + height: 100%; +} + +/* scrollbar */ +::-webkit-scrollbar { + width: 8px; +} +::-webkit-scrollbar-thumb { + height: 30%; + background: #aaa; + border-radius: 10px; +} +::-webkit-scrollbar-track { + background: #eee; +} +.main::-webkit-scrollbar { + display: none; +} + +/* button */ +.btn-blue { + max-width: 128px; + width: 100%; + padding: 11px 10px; + background-color: var(--blue); + text-align: center; + font-weight: 600; + line-height: 26px; + font-size: 18px; + color: #fff; + box-sizing: border-box; + border-radius: 8px; +} +.btn-blue.large { + max-width: 357px; + border-radius: 28px; + padding-top: 16px; + padding-bottom: 16px; + line-height: 24px; + font-size: 20px; +} +.btn-blue:hover { + background-color: #1967d6; +} +.btn-blue:active, +.btn-blue:focus { + background-color: #1251aa; +} +.btn-blue:disabled, +.btn-blue.disabled { + background-color: var(--gray400); +} +.btn-blue.large.wide { + min-width: 100%; + width: 100%; + height: 54px; +} + +/* layout */ +.main_inner { + width: 1110px; + margin: 0 auto; + box-sizing: border-box; +} +.contents { + margin-top: 70px; +} + +/* header */ +.header { + position: fixed; + top: 0; + left: 0; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + height: 70px; + line-height: 100%; + background-color: #fff; + z-index: 100; + box-sizing: border-box; +} +.header .main_inner { + width: 1120px; + margin-top: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} +.header .logo, +.header .logo a, +.header .logo img { + max-width: 153px; + height: 51px; +} + +@media (max-width: 1920px) { + .header { + padding: 0 200px; + } + .header .main_inner { + width: 100%; + } +} +/* footer */ +.footer { + padding: 32px 0 108px; + background-color: var(--gray900); + line-height: 20px; + font-size: 16px; +} +.footer .main_inner { + width: 1120px; + display: flex; + justify-content: space-between; + align-items: center; +} +.copyright { + color: var(--gray400); +} +.footer .menus a { + font-weight: 400; + color: #fff; +} +.footer .menus a + a { + margin-left: 30px; +} +.footer .sns a + a { + margin-left: 12px; +} + +/* input */ +.input { + position: relative; +} +.input_box .label { + display: block; + margin-bottom: 16px; + width: 100%; + font-size: 18px; + font-weight: 700; + line-height: 26px; + text-align: left; + color: var(--gray800); +} +.input_box input { + width: 100%; + height: 56px; + padding: 16px 56px 16px 24px; + border-radius: 12px; + background-color: var(--gray100); + box-sizing: border-box; + line-height: 26px; + font-size: 16px; + color: var(--gray800); +} +.input_box .btn { + position: absolute; + width: 24px; + height: 24px; + right: 24px; + top: 50%; + transform: translateY(-50%); + text-indent: -9999px; +} +.input_box .btn_pw { + background: url(images/ico_visibility_off.png) no-repeat; +} +.input_box .btn_pw.show { + background: url(images/ico_visibility_on.png) no-repeat; +} +.pc_only { + display: block; +} +.mobile_only { + display: none; +} + +.tag_text { + margin-bottom: 12px; + line-height: 26px; + font-weight: 700; + font-size: 18px; + color: var(--blue); +} +.main_text { + margin-bottom: 24px; + line-height: 56px; + font-weight: 700; + font-size: 40px; + color: var(--gray700); +} +.desc_text { + line-height: 32px; + font-weight: 500; + font-size: 24px; + color: var(--gray700); +} +@media screen and (max-width: 1199px) { + .pc_only { + display: none; + } + .mobile_only { + display: none; + } + .main_inner { + width: 100%; + } + .header { + padding: 0 24px; + } + .footer { + font-size: 14px; + } + .footer .main_inner { + width: 100%; + justify-content: center; + gap: 63px; + } + .main_text { + font-size: 32px; + line-height: 42px; + } + .desc_text { + font-size: 18px; + line-height: 26px; + } +} +@media screen and (max-width: 767px) { + .mobile_only { + display: block; + } + .btn-blue.large { + padding-top: 11px; + padding-bottom: 11px; + max-width: 240px; + line-height: 26px; + font-size: 18px; + } + .input_box .label { + font-size: 14px; + line-height: 24px; + } + .input_box .label { + margin-bottom: 8px; + } + .footer { + position: relative; + padding-left: 8%; + padding-right: 8%; + } + .footer .main_inner { + justify-content: space-between; + gap: 3%; + } + .footer .copyright { + position: absolute; + bottom: 30px; + left: 8%; + } +} + +@media screen and (max-width: 320px) { + .footer .main_inner { + flex-direction: column; + gap: 10px; + } +} diff --git a/images/img_preview.png b/images/img_preview.png new file mode 100644 index 00000000..dfac0b12 Binary files /dev/null and b/images/img_preview.png differ diff --git a/index.html b/index.html index 276fece0..02c0fef3 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,37 @@ 판다마켓 + + + + + + + + + + + + + + + @@ -18,7 +44,7 @@

판다마켓

- 로그인 + 로그인 @@ -26,7 +52,9 @@

-

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

+

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

구경하러 가기
@@ -37,9 +65,11 @@

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

Hot item -

인기 상품을
확인해 보세요

+

+ 인기 상품을
확인해 보세요 +

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

@@ -50,7 +80,9 @@

인기 상품을
확인해 보세요

Search -

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

+

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

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

@@ -65,7 +97,9 @@

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

Register -

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

+

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

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

@@ -89,18 +123,28 @@

믿을 수 있는
판다마켓 중고 거래

FAQ
- 페이스북 - 트위터 유튜브 - 인스타그램
diff --git a/login.html b/login.html index b7b47fef..e3d6f4c4 100644 --- a/login.html +++ b/login.html @@ -5,12 +5,37 @@ 판다마켓 - + + + + + + + + + + + + + + +
@@ -47,11 +72,12 @@

로그인
-

간편 로그인하기

+ 간편 로그인하기