diff --git a/images/ico_google.png b/images/ico_google.png new file mode 100644 index 00000000..f75dc761 Binary files /dev/null and b/images/ico_google.png differ diff --git a/images/ico_kakao.png b/images/ico_kakao.png new file mode 100644 index 00000000..bd767800 Binary files /dev/null and b/images/ico_kakao.png differ diff --git a/images/ico_visibility_off.png b/images/ico_visibility_off.png new file mode 100644 index 00000000..5dc09fbe Binary files /dev/null and b/images/ico_visibility_off.png differ diff --git a/images/ico_visibility_on.png b/images/ico_visibility_on.png new file mode 100644 index 00000000..32765f0b Binary files /dev/null and b/images/ico_visibility_on.png differ diff --git a/images/logo.png b/images/logo.png index 9b5b0af2..8248f602 100644 Binary files a/images/logo.png and b/images/logo.png differ diff --git a/images/logo_s.png b/images/logo_s.png new file mode 100644 index 00000000..9b5b0af2 Binary files /dev/null and b/images/logo_s.png differ diff --git a/index.html b/index.html index 9e2404d4..276fece0 100644 --- a/index.html +++ b/index.html @@ -1,87 +1,110 @@ - - - - - 판다마켓 - - - - - -
-
+ + + + + 판다마켓 + + + +
-
-
-
- + + +
+
+
- Hot item -

인기 상품을
확인해 보세요

-

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

+

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

+ 구경하러 가기
-
-
-
-
-
-
- Search -

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

-

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

+
+
+
+
+ +
+ Hot item +

인기 상품을
확인해 보세요

+

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

+
-
- -
-
-
-
- +
+
+
+
+
+ Search +

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

+

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

+
+ +
+
+
+
+
+
+ +
+ Register +

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

+

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

+
+
+
+
+
+
- Register -

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

-

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

+

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

- -
-
+
+
+ + + diff --git a/login.html b/login.html new file mode 100644 index 00000000..b7b47fef --- /dev/null +++ b/login.html @@ -0,0 +1,77 @@ + + + + + + + 판다마켓 + + + +
+
+

+ 판다마켓 +

+ +
+ +
+
+
+ + diff --git a/palette.css b/palette.css new file mode 100644 index 00000000..c13efd2b --- /dev/null +++ b/palette.css @@ -0,0 +1,12 @@ +:root { + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray50: #f9fafb; + --blue: #3692ff; +} diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..6991b15b --- /dev/null +++ b/signup.html @@ -0,0 +1,100 @@ + + + + + + + 판다마켓 + + + + +
+
+

+ 판다마켓 +

+ +
+ +
+
+
+ + diff --git a/style.css b/style.css index 4d6851d7..128b4fda 100644 --- a/style.css +++ b/style.css @@ -1,129 +1,672 @@ @charset "UTF-8"; +@import 'palette.css'; + /* reset */ -html * {max-height: 999999px;} -html,body{ margin:0px;padding:0px; width:100%; font-family:"Pretendard" , sans-serif;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased; letter-spacing: -1px; } -header, footer, section, article, aside, nav, address { display: block; margin:0; } /* ie8 */ -ul,ol,li,dl,dd,dt,input,h1,h2,h3,h4,h5,h6,p,b,input,button,textarea,fieldset,legend,td,th{margin:0px; padding:0px; font-weight:normal; word-break:keep-all } -input,textarea,button,select,option {font-family:"Pretendard", sans-serif; } -li{ list-style:none } -fieldset,img,a{ border:0px } -img { max-width:100%; max-height:100%; vertical-align: top; } -a{ display:inline-block;text-decoration:none; cursor: pointer; } -legend,.blind{ position:absolute;top:0;left:-px;width:0;height:0;overflow:hidden;font-size:0;line-height:0 } -caption{ display:none } -input, textarea, button { background: none; border:none; } -button { background: none; border:none; cursor: pointer; } -button,label{ cursor:pointer } -table{ width:100%;border-collapse:collapse;border-spacing:0;text-align:left; table-layout:fixed } -table th, table td{ text-align:left; word-break:break-word;word-wrap:break-word; } -var, em { font-style:normal } +html * { + max-height: 999999px; +} +html, +body { + min-width: 270px; + margin: 0px; + padding: 0px; + width: 100%; + font-family: 'Pretendard', sans-serif; + -webkit-text-size-adjust: none; + -webkit-font-smoothing: antialiased; + letter-spacing: -1px; +} +header, +footer, +section, +article, +aside, +nav, +address { + display: block; + margin: 0; +} /* ie8 */ +ul, +ol, +li, +dl, +dd, +dt, +input, +h1, +h2, +h3, +h4, +h5, +h6, +p, +b, +input, +button, +textarea, +fieldset, +legend, +td, +th { + margin: 0px; + padding: 0px; + font-weight: normal; + word-break: keep-all; +} +input, +textarea, +button, +select, +option { + font-family: 'Pretendard', sans-serif; +} +li { + list-style: none; +} +fieldset, +img, +a { + border: 0px; +} +img { + max-width: 100%; + max-height: 100%; + vertical-align: top; +} +a { + display: inline-block; + text-decoration: none; + cursor: pointer; +} +legend, +.blind { + position: absolute; + top: 0; + left: -px; + width: 0; + height: 0; + overflow: hidden; + font-size: 0; + line-height: 0; +} +caption { + display: none; +} +input, +textarea, +button { + background: none; + border: none; +} +button { + background: none; + border: none; + cursor: pointer; +} +button, +label { + cursor: pointer; +} +table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + text-align: left; + table-layout: fixed; +} +table th, +table td { + text-align: left; + word-break: break-word; + word-wrap: break-word; +} +var, +em { + font-style: normal; +} /* input */ -input::-webkit-input-placeholder{ color:#999 } -input::-moz-placeholder{ color:#999 } -input:-moz-placeholder{ color:#999 } -input:-ms-input-placeholder{ color:#999 } -textarea::-webkit-input-placeholder{ color:#999 } -textarea::-moz-placeholder{ color:#999 } -textarea:-moz-placeholder{ color:#999 } -textarea:-ms-input-placeholder{ color:#999 } - -input:focus::-webkit-input-placeholder{ color:transparent!important } -input:focus::-moz-placeholder{ color:transparent!important } -input:focus:-moz-placeholder{ color:transparent!important } -input:focus:-ms-input-placeholder{ color:transparent!important } -textarea:focus::-webkit-input-placeholder{ color:transparent!important } -textarea:focus::-moz-placeholder{ color:transparent!important } -textarea:focus:-moz-placeholder{ color:transparent!important } -textarea:focus:-ms-input-placeholder{ color:transparent!important } - -input:focus, div:focus, select:focus, option:focus, textarea:focus, button:focus{ outline: none; } -input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0; } +input::-webkit-input-placeholder { + color: #999; +} +input::-moz-placeholder { + color: #999; +} +input:-moz-placeholder { + color: #999; +} +input:-ms-input-placeholder { + color: #999; +} +textarea::-webkit-input-placeholder { + color: #999; +} +textarea::-moz-placeholder { + color: #999; +} +textarea:-moz-placeholder { + color: #999; +} +textarea:-ms-input-placeholder { + color: #999; +} + +input:focus::-webkit-input-placeholder { + color: transparent !important; +} +input:focus::-moz-placeholder { + color: transparent !important; +} +input:focus:-moz-placeholder { + color: transparent !important; +} +input:focus:-ms-input-placeholder { + color: transparent !important; +} +textarea:focus::-webkit-input-placeholder { + color: transparent !important; +} +textarea:focus::-moz-placeholder { + color: transparent !important; +} +textarea:focus:-moz-placeholder { + color: transparent !important; +} +textarea:focus:-ms-input-placeholder { + color: transparent !important; +} + +input:focus, +div:focus, +select:focus, +option:focus, +textarea:focus, +button:focus { + outline: none; +} +input[type='number']::-webkit-outer-spin-button, +input[type='number']::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} /* 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; } +::-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 { min-width:88px; width:88px; height:48px; padding:14px 10px; background-color:#3692FF; text-align:center; border-radius:8px; line-height:20px; font-weight: 600; font-size:16px; color:#fff; box-sizing: border-box; } -.btn-blue.small48 { width:128px; height:48px; } -.btn-blue.medium { width:240px; height:48px; border-radius:24px; padding-top:11px; padding-bottom:11px; line-height:26px; font-size:18px } -.btn-blue.large { width:357px; height:56px; 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: #9CA3AF; } +.btn-blue { + min-width: 88px; + width: 100%; + padding: 14px 10px; + background-color: var(--blue); + text-align: center; + border-radius: 8px; + line-height: 20px; + font-weight: 600; + font-size: 16px; + color: #fff; + box-sizing: border-box; +} +.btn-blue.small48 { + max-width: 128px; +} +.btn-blue.medium { + max-width: 240px; + border-radius: 24px; + padding-top: 11px; + padding-bottom: 11px; + line-height: 26px; + font-size: 18px; +} +.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); +} /* layout */ -.main_inner { width:1110px; margin:0 auto; box-sizing: border-box; } +.main_inner { + width: 1110px; + margin: 0 auto; + box-sizing: border-box; +} /* header */ -.header { position:fixed; top:0; left:0; width:100%; height:70px; line-height: 70px; 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 { width:147px; height:50px } +.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: 147px; + height: 50px; +} /* contents */ -#contents { margin-top:70px; } -.tag_text { margin-bottom:12px; line-height:26px; font-weight: 700; font-size:18px; color:#3692FF; text-align: left; } -.main_text { margin-bottom:24px; line-height:56px; font-weight: 700; font-size:40px; color:#374151; text-align: left; } -.desc_text { line-height:32px; font-weight: 500; font-size:24px; color:#374151; text-align: left; } +.contents { + margin-top: 70px; +} +.section { + position: relative; +} +.section_top .text_box, +.section_bottom .text_box { + position: absolute; + top: 240px; + left: 0; + text-align: left; +} +.section2 .text_box { + padding-right: 47px; +} +.section3 .text_box { + padding-left: 38px; +} +.section4 .text_box { + padding-right: 17px; +} +.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); +} -.section2,.section3,.section4 { padding:138px 0; height:720px; box-sizing: border-box; } -.section_bottom { margin-top:138px; } -.center_box { display:flex; justify-content: center; align-items: center; gap:64px; width: 988px; margin:0 auto; background-color: #FCFCFC; } -.section_top, .section_bottom { height:540px; background-color: #CFE5FF } -.section_top .main_inner { padding:240px 0 100px; background:url(images/img_home_top.png) no-repeat right bottom/ 746px auto; } -.section_bottom .main_inner { padding:255px 0 173px; background:url(images/img_home_bottom.png) no-repeat right bottom/ 746px auto; } -.section_top .main_text + .btn-blue { margin-top:8px; } +.section2, +.section3, +.section4 { + padding: 138px 0; + height: 720px; + box-sizing: border-box; +} +.section_bottom { + margin-top: 138px; +} +.center_box { + display: flex; + justify-content: space-between; + align-items: center; + gap: 64px; + width: 988px; + margin: 0 auto; + background-color: #fcfcfc; +} +.section_top, +.section_bottom { + height: 540px; + background-color: #cfe5ff; +} +.section_top .main_inner { + position: relative; + height: 100%; + background: url(images/img_home_top.png) no-repeat right bottom/ 746px auto; +} +.section_bottom .main_inner { + position: relative; + height: 100%; + background: url(images/img_home_bottom.png) no-repeat right bottom/ 746px auto; +} +.section_top .main_text + .btn-blue { + margin-top: 8px; +} /* footer */ -.footer { padding:32px 0 108px; background-color: #111827;line-height:20px; font-size:16px; } -.footer .main_inner { width:1120px; display: flex; justify-content: space-between; align-items: center; } -.copyright { color: #9CA3AF } -.footer .menus a { font-weight:400; color:#fff } -.footer .menus a + a { margin-left:30px; } -.footer .sns a + a { margin-left:12px; } +.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; +} @media (max-width: 1920px) { - .header {padding:0 200px;} - .header .main_inner {width:auto; } + .header { + padding: 0 200px; + } + .header .main_inner { + width: 100%; + } +} + +/* login, signup */ +html { + height: 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; +} +.login_area_box { + display: flex; + gap: 24px; + flex-direction: column; + justify-content: space-between; +} + +.flex_center_box { + width: 640px; +} +.logo.large { + margin: 0 auto 40px; + max-width: 396px; + max-height: 132px; +} +.btn-blue.large.wide { + min-width: 100%; + width: 100%; + height: 54px; +} +.blue_box { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 24px; + border-radius: 8px; + background-color: #e6f2ff; +} +.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; +} +.social_group { + display: flex; + gap: 10px; +} + +.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; } /* 브라우저 사이즈에 따른 사이즈 조절 */ + @media (max-width: 1120px) { -.btn-blue { min-width:7.8571vw; width:7.8571vw; height:4.2857vw; padding:1.2500vw 0.8929vw; border-radius:0.7143vw; line-height:1.7857vw; font-size:1.4286vw; } -.btn-blue.small48 { width:11.4286vw; height:4.2857vw; } -.btn-blue.medium { width:21.4286vw; height:4.2857vw; border-radius:2.1429vw; padding-top:0.9821vw; padding-bottom:0.9821vw; line-height:2.3214vw; font-size:1.6071vw } -.btn-blue.large { width:31.8750vw; height:5.0000vw; border-radius:2.5000vw; padding-top:1.4286vw; padding-bottom:1.4286vw; line-height:2.1429vw; font-size:1.7857vw } + .btn-blue { + padding: 1.25vw 0.8929vw; + font-size: 14px; + } + .btn-blue.small48 { + max-width: 100px; + } + .btn-blue.medium { + padding-top: 0.9821vw; + padding-bottom: 0.9821vw; + } + .btn-blue.large { + max-width: 500px; + padding-top: 1.4286vw; + padding-bottom: 1.4286vw; + font-size: 16px; + } -/* layout */ -.main_inner, .footer .main_inner { width:100%; } + /* layout */ + .main_inner, + .footer .main_inner { + width: 100%; + } -/* header */ -.header { padding:0 17.8571vw; height:6.2500vw; line-height: 6.2500vw; } -.header .main_inner { margin-top:0.8929vw; } -.header .logo, .header .logo a, .header .logo img { width:13.1250vw; height:4.4643vw } + /* header */ + .header { + padding: 0 5%; + } -/* contents */ -#contents { margin-top:6.2500vw; } -.tag_text { margin-bottom:1.0714vw; line-height:2.3214vw; font-size:1.6071vw; } -.main_text { margin-bottom:2.1429vw; line-height:5.0000vw; font-size:3.5714vw; } -.desc_text { line-height:2.8571vw; font-weight: 500; font-size:2.1429vw;} + /* contents */ -.section2,.section3,.section4 { padding:12.3214vw 0; height:64.2857vw;} -.section_bottom { margin-top:12.3214vw; } -.center_box { gap:5.7143vw; width: 88.2143vw; } -.center_box img {width:51.7857vw} -.section_top, .section_bottom { height:48.2143vw; } -.section_top .main_inner { padding:21.4286vw 5vw 8.9286vw; background-size: 66.6071vw auto; } -.section_bottom .main_inner { padding:22.7679vw 5vw 15.4464vw; background-size: 66.6071vw auto; } -.section_top .main_text + .btn-blue { margin-top:0.7143vw; } + .section_top .text_box, + .section_bottom .text_box { + top: 20%; + left: 5%; + } + .section2 .text_box { + padding-right: 5%; + } + .section3 .text_box { + padding-left: 5%; + } + .section4 .text_box { + padding-right: 5%; + } + .tag_text { + font-size: 14px; + } + .main_text { + margin-bottom: 2.1429vw; + line-height: 36px; + font-size: 30px; + } + .desc_text { + line-height: 24px; + font-size: 18px; + } + .section2, + .section3, + .section4 { + padding: 12.3214vw 0; + height: 64.2857vw; + } + .section_bottom { + margin-top: 12.3214vw; + } + .center_box { + gap: 5.7143vw; + width: 95%; + } + .center_box img { + width: 54%; + } -/* footer */ -.footer { padding:2.8571vw 5vw 9.6429vw; line-height:1.7857vw; font-size:1.4286vw; } -.footer .menus a + a { margin-left:2.6786vw; } -.footer .sns a + a { margin-left:1.0714vw; } -} \ No newline at end of file + /* footer */ + .footer { + padding: 2.8571vw 5vw 9.6429vw; + } +} +@media (max-width: 768px) { + .section_top, + .section_bottom { + height: 400px; + } + .section_top .main_inner { + background-size: 70% auto; + } + .section_bottom .main_inner { + padding: 22.7679vw 5vw 15.4464vw; + background-size: 70% auto; + } + .section_top .main_text + .btn-blue { + margin-top: 0.7143vw; + } + .main_text { + line-height: 30px; + font-size: 24px; + } + .desc_text { + line-height: 20px; + font-size: 14px; + } +} +@media (max-width: 640px) { + .flex_center_box { + margin: 0 auto; + width: 90%; + } +} +@media (max-width: 480px) { + .header .logo, + .header .logo a, + .header .logo img { + max-width: 120px; + height: 40px; + } + .section_top, + .section_bottom { + height: 200px; + } + .main_text { + line-height: 24px; + font-size: 18px; + } + .desc_text { + line-height: 18px; + font-size: 12px; + } + .sns { + display: none; + } + .login_page .logo.large { + width: 70%; + } +} +@media (max-width: 320px) { + .section_top, + .section_bottom { + height: 150px; + } + .section_top .main_inner { + background-size: 50% auto; + } + .section_bottom .main_inner { + background-size: 50% auto; + } + .main_text { + line-height: 20px; + font-size: 16px; + } + .desc_text { + line-height: 16px; + font-size: 12px; + } + .footer { + font-size: 12px; + } +}