diff --git a/README.md b/README.md new file mode 100644 index 00000000..0d982291 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ + +- [ Netlify link ] https://pandamall001.netlify.app/ \ No newline at end of file diff --git a/panda_mall/css/layout.css b/panda_mall/css/layout.css index d59c1815..073d0e71 100644 --- a/panda_mall/css/layout.css +++ b/panda_mall/css/layout.css @@ -6,7 +6,7 @@ font-weight: 400; font-style: normal; } -body { font-family: 'Pretendard-Regular'; font-size:15px; font-weight: 400; color:var(--Secondary); } +body { font-family: 'Pretendard-Regular'; font-size:16px; min-width:355px; font-weight: 400; color:var(--Secondary); } a { text-decoration: none; } .inner,.box_inner { margin:0 auto; min-width:325px; max-width:1120px; } @@ -20,8 +20,8 @@ input[type='submit'] { outline:0; } header { position:sticky; top:0; width:100%; background-color: #fff; z-index: 9999; } header .inner { display:flex; justify-content: space-between; align-items: center; padding:13px 0; } header .inner .logo_top { } -header .inner .logo_top img { height:40px; } -header .inner .logo_top img:last-child { height:35px; } +header .inner .logo_top img { height:40px; vertical-align: middle; } +header .inner .logo_top img:last-child { height:30px; margin-left:8px; } header .inner .login_btn { } @@ -48,7 +48,7 @@ header .inner .login_btn { } .section .box_inner .box { display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; background-color: #FCFCFC; gap: 40px; border-radius: 12px; @@ -57,7 +57,7 @@ header .inner .login_btn { } max-width: 100%; } .section .box_inner .box img { - width: 50%; + width: 57%; } .section .box_inner .box > div { padding:0 23px; @@ -130,43 +130,56 @@ footer .inner .right img { } - -@media (max-width: 1919px) { - .inner { padding-left:200px!important; padding-right:200px!important; } -} -@media (max-width: 1120px) { - body { font-size:13px; } - - .font_1 { font-size:2rem; } - .font_2 { font-size:1.5rem; } - .font_3 { font-size:1rem; } +/* tablet */ +@media (max-width: 1199px) { .inner { padding-left:24px!important; padding-right:24px!important; } .section { height:500px; } - .main_title .text_box, - .section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:10%; } - .section._4 .text_box { top:20%; } -} -@media (max-width: 780px) { - - .font_1 { font-size:1.8rem; } - .font_2 { font-size:1.2em; } - .font_3 { font-size:1.3rem; } - .section._4 .inner, .main_title .inner { background-size: contain; } + .main_title { height:771px; margin-bottom:24px; } + .main_title h1 br { display:none; } .section { height:auto; } - .section .box_inner { padding:100px 0 0; height:auto;} - .section .box_inner .box { flex-direction:column; width:100%; gap: 10px; align-items: stretch; } - .section .box_inner .box > div { padding: 0 0 24px; } - .section .box_inner .box > div h2 { margin-top: 12px; margin-bottom: 12px; } - .section .box_inner .box > div br { display:none; } + .section .box_inner { padding:0px 24px 0px; height:auto;} + .section .box_inner .box { flex-direction:column; width:100%; gap: 24px; background-color:#fff; align-items: stretch; padding: 0px; } + .section .box_inner .box > div { padding: 0 0 52px; } + .section .box_inner .box > div h2 { margin-top: 16px; margin-bottom: 16px; } + .section .box_inner .box > div h2 br { display:none; } .section .box_inner .box img { width:100%; } -} -@media (max-width: 375px){ - a.btn._roundedM { padding: 16px 44px; } + .main_title .text_box, + .section._4 .text_box { width:100%; padding:0 24px; text-align: center; top:84px; } + .main_title .inner, + .section._4 .inner { background-position: bottom center; } + .section._4 .text_box { top:20%; } + .section._4 { height:927px; } + .section._4 .inner { margin-top: 4px; } + + footer .inner .right { padding-right:80px; } + footer .inner .left { padding-left:80px; } + +} +/* Mobile */ +@media (max-width: 767px) { + header .inner .logo_top img:first-child { display:none; } - footer .inner .left { position: absolute; top:65px; } - .section .box_inner { padding:50px 0 0;} + + .inner { padding-left:16px!important; padding-right:16px!important; } + + .main_title { height:540px; } + .main_title h1 br { display:block; } + + .section .box_inner .box > div h2 { margin-top: 8px; margin-bottom: 8px; } + + .section .box_inner { padding:0px 16px 0;} + .section .box_inner .box > div { padding: 0 0 40px; } + .section._4 .inner, + .main_title .inner { background-size: contain; } + .section._4 { height:540px; } + .section._4 .inner { margin-top: 43px; } + + footer .inner .left { position: absolute; bottom:32px; } + footer .inner .right { padding-right:16px; } + footer .inner .center { padding-left:16px; } + footer .inner .left { padding-left:16px; } } diff --git a/panda_mall/css/page.css b/panda_mall/css/page.css index 9f46ebc5..80e3bfdb 100644 --- a/panda_mall/css/page.css +++ b/panda_mall/css/page.css @@ -4,7 +4,7 @@ /* 로그인 페이지 */ #login { min-height: 100vh; display: flex; align-items: center; } -.login_wrap { width:95%; max-width:640px; margin:0 auto; text-align: center; } +.login_wrap { width:100%; max-width:640px; margin:0 auto; text-align: center; } .login_wrap .logo { margin-bottom:55px; } .login_wrap .logo a { } .login_wrap .logo a img { vertical-align: middle; } @@ -52,4 +52,15 @@ .login_wrap .member_sub_box { } .login_wrap .member_sub_box span { font-size:14px; } -.login_wrap .member_sub_box span a { } \ No newline at end of file +.login_wrap .member_sub_box span a { } + + +/* Mobile */ +@media (max-width: 767px) { + #login { padding:0 16px; } + .login_wrap { width:100%; max-width:400px; } + + .login_wrap .logo a img:first-child { height:52px; margin-right:8px; } + .login_wrap .logo a img:last-child { height:40px; } + .login_wrap .login_box label { font-size:14px; } +} diff --git a/panda_mall/css/ui.css b/panda_mall/css/ui.css index d5e3bb8e..b12507fd 100644 --- a/panda_mall/css/ui.css +++ b/panda_mall/css/ui.css @@ -22,9 +22,29 @@ .btn:active { background-color: #1251AA; color:#fff; } .btn.n_act { background-color: #9CA3AF; color:#fff; } -.btn._roundedM { display:inline-block; padding:16px 124px; border-radius: 50px; } -.btn._roundedS { display:inline-block; padding:12px 20px; border-radius: 8px; } +.btn._roundedM { display:inline-block; font-size:20px; padding:16px 124px; border-radius: 50px; } +.btn._roundedS { display:inline-block; font-size:16px; padding:11px 43px; border-radius: 8px; } .font_1 { font-size:40px; } .font_2 { font-size:24px; } -.font_3 { font-size:18px; } \ No newline at end of file +.font_3 { font-size:18px; } +.font_4 { font-size:40px; } + + + +@media (max-width: 1120px) { + + .font_2 { font-size:18px; } + .font_4 { font-size:32px; } + a.btn._roundedM { padding: 12px 124px; } + +} + +/* Mobile */ +@media (max-width: 767px) { + .font_1 { font-size:32px; } + .font_3 { font-size:16px; } + .font_4 { font-size:24px; } + + a.btn._roundedM { font-size:18px; padding: 11px 71px; } +} diff --git a/panda_mall/faq.html b/panda_mall/faq.html index 0104f01f..540127c5 100644 --- a/panda_mall/faq.html +++ b/panda_mall/faq.html @@ -8,12 +8,15 @@ - - - - - - + + + + + + + + + 판다마켓 diff --git a/panda_mall/images/6176.png b/panda_mall/images/6176.png new file mode 100644 index 00000000..16a36b74 Binary files /dev/null and b/panda_mall/images/6176.png differ diff --git a/panda_mall/index.html b/panda_mall/index.html index ea1a487a..c042523d 100644 --- a/panda_mall/index.html +++ b/panda_mall/index.html @@ -8,11 +8,17 @@ - - - - - + + + + + + + + + + + 판다마켓 @@ -48,7 +54,7 @@

Hot item

Hot item

-

인기 상품을
확인해 보세요

+

인기 상품을
확인해 보세요

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

@@ -60,7 +66,7 @@

인기 상품을
확인해 보세요

Search

Search

-

구매를 원하는
+

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

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

@@ -72,7 +78,7 @@

구매를 원하는
Register

Register

-

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

+

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

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

diff --git a/panda_mall/items.html b/panda_mall/items.html index 0104f01f..b00ec5d5 100644 --- a/panda_mall/items.html +++ b/panda_mall/items.html @@ -8,12 +8,16 @@ - - - - - - + + + + + + + + + + 판다마켓 diff --git a/panda_mall/login.html b/panda_mall/login.html index c0b30e0a..9ad5a5d7 100644 --- a/panda_mall/login.html +++ b/panda_mall/login.html @@ -8,11 +8,15 @@ - - - - - + + + + + + + + + 판다마켓 diff --git a/panda_mall/privacy.html b/panda_mall/privacy.html index 0104f01f..540127c5 100644 --- a/panda_mall/privacy.html +++ b/panda_mall/privacy.html @@ -8,12 +8,15 @@ - - - - - - + + + + + + + + + 판다마켓 diff --git a/panda_mall/signup.html b/panda_mall/signup.html index ede3d0d6..4d1350e8 100644 --- a/panda_mall/signup.html +++ b/panda_mall/signup.html @@ -8,11 +8,15 @@ - - - - - + + + + + + + + + 판다마켓 diff --git a/panda_mall/ui_test.html b/panda_mall/ui_test.html index cb36e5eb..ec9640bc 100644 --- a/panda_mall/ui_test.html +++ b/panda_mall/ui_test.html @@ -8,12 +8,15 @@ - - - - - - + + + + + + + + + 판다마켓