diff --git a/global.css b/global.css index 0534a22e..4e8ddea2 100644 --- a/global.css +++ b/global.css @@ -10,10 +10,6 @@ html, body { width: 100%; height: 100%; font-family: 'Noto Sans KR', sans-serif; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; } a { @@ -21,9 +17,22 @@ a { color: #3692FF; } -form { +/* form { display: flex; flex-direction: column; justify-content: space-around; gap: 16px; + width: 100%; +} */ + +/* PC: 1200px 이상 */ +@media (min-width: 1200px) { +} + +/* Tablet: 768px 이상 ~ 1199px 이하 */ +@media (min-width: 768px) and (max-width: 1199px) { + } + + /* Mobile: 375px 이상 ~ 767px 이하 */ +@media (min-width: 375px) and (max-width: 767px) { } \ No newline at end of file diff --git a/image/Img_home_bottom.png b/image/home/bottomPanda_home.png similarity index 100% rename from image/Img_home_bottom.png rename to image/home/bottomPanda_home.png diff --git a/image/Img_home_01.png b/image/home/itemBox_home.png similarity index 100% rename from image/Img_home_01.png rename to image/home/itemBox_home.png diff --git a/image/Img_home_03.png b/image/home/registerBox_home.png similarity index 100% rename from image/Img_home_03.png rename to image/home/registerBox_home.png diff --git a/image/Img_home_02.png b/image/home/searchBox_home.png similarity index 100% rename from image/Img_home_02.png rename to image/home/searchBox_home.png diff --git a/image/Img_home_top.png b/image/home/topPanda_home.png similarity index 100% rename from image/Img_home_top.png rename to image/home/topPanda_home.png diff --git a/login/login-image/eyeclosed.png b/image/icon/eyeclosed_icon.png similarity index 100% rename from login/login-image/eyeclosed.png rename to image/icon/eyeclosed_icon.png diff --git a/signup/signup-image/eyeopen.png b/image/icon/eyeopen_icon.png similarity index 100% rename from signup/signup-image/eyeopen.png rename to image/icon/eyeopen_icon.png diff --git a/image/ic_facebook.png b/image/icon/facebook_icon.png similarity index 100% rename from image/ic_facebook.png rename to image/icon/facebook_icon.png diff --git a/login/login-image/google.png b/image/icon/google_icon.png similarity index 100% rename from login/login-image/google.png rename to image/icon/google_icon.png diff --git a/image/ic_instagram.png b/image/icon/insta_icon.png similarity index 100% rename from image/ic_instagram.png rename to image/icon/insta_icon.png diff --git a/login/login-image/kakaotalk.png b/image/icon/kakaotalk_icon.png similarity index 100% rename from login/login-image/kakaotalk.png rename to image/icon/kakaotalk_icon.png diff --git a/image/ic_x.png b/image/icon/x_icon.png similarity index 100% rename from image/ic_x.png rename to image/icon/x_icon.png diff --git a/image/ic_youtube.png b/image/icon/youtube_icon.png similarity index 100% rename from image/ic_youtube.png rename to image/icon/youtube_icon.png diff --git a/image/login-top.png b/image/login-top.png deleted file mode 100644 index 2d1c7389..00000000 Binary files a/image/login-top.png and /dev/null differ diff --git a/image/Panda=lg.png b/image/logo/pandaHome_logo.png similarity index 100% rename from image/Panda=lg.png rename to image/logo/pandaHome_logo.png diff --git a/login/login-image/pandalogo.png b/image/logo/pandaLogin_logo.png similarity index 100% rename from login/login-image/pandalogo.png rename to image/logo/pandaLogin_logo.png diff --git a/image/meta/meta_FuBao.jpg b/image/meta/meta_FuBao.jpg new file mode 100644 index 00000000..8f89896c Binary files /dev/null and b/image/meta/meta_FuBao.jpg differ diff --git a/image/show.png b/image/show.png deleted file mode 100644 index 25acc347..00000000 Binary files a/image/show.png and /dev/null differ diff --git a/index.html b/index.html index 3342ca19..31c16303 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,30 @@ + + 판다마켓 + + + + + + + + + + + +
- 판다마켓로고 + 판다마켓로고 로그인
@@ -20,14 +34,16 @@

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

구경하러 가기 - 상단배경 +
+ 상단배경 +
-
+
- 상품확인 + 상품확인
Hot item @@ -35,19 +51,19 @@

인기 상품을
확인해 보세요

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

-
+
Search

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

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

- 상품검색 + 상품검색
-
+
- 상품등록 + 상품등록
Resister @@ -61,7 +77,9 @@

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

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

- 하단배경 +
+ 하단배경 +
@@ -75,18 +93,19 @@

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

+ \ No newline at end of file diff --git a/login/login.css b/login/login.css index 9b10f332..495d3c6b 100644 --- a/login/login.css +++ b/login/login.css @@ -1,3 +1,37 @@ +body { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 700px; + height: auto; + margin-top: 150px; + margin-bottom: 150px; +} + +form { + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 16px; + width: 100%; +} + +@media (max-width: 767px) { + .container { + padding: 0 16px; + width: 100%; + max-width: 700px; + } +} + .pandalogo { width: 266px; height: 90px; @@ -9,6 +43,7 @@ display: flex; flex-direction: column; gap: 10px; + width: 100%; } label { @@ -17,7 +52,8 @@ label { } input { - width: 640px; + width: 100%; + /* width: 640px; */ height: 56px; background-color: #F3F4F6; border: 1px solid #F3F4F6; @@ -42,7 +78,8 @@ input { display: flex; justify-content: center; align-items: center; - width: 640px; + width: 100%; + /* width: 640px; */ height: 56px; background-color: #3692FF; margin-top: 24px; @@ -55,7 +92,8 @@ input { .simple-login { display: flex; flex-direction: column; - width: 640px; + width: 100%;; + /* width: 640px; */ height: 74px; background-color: #E6F2FF; margin: 24px; diff --git a/login/login.html b/login/login.html index 6bc80ef3..f4a1b726 100644 --- a/login/login.html +++ b/login/login.html @@ -10,8 +10,9 @@ 로그인 +
- +
@@ -31,15 +32,16 @@

간편 로그인하기

+
\ No newline at end of file diff --git a/signup/signup-image/eyeclosed.png b/signup/signup-image/eyeclosed.png deleted file mode 100644 index e83c4077..00000000 Binary files a/signup/signup-image/eyeclosed.png and /dev/null differ diff --git a/signup/signup-image/google.png b/signup/signup-image/google.png deleted file mode 100644 index b7756f76..00000000 Binary files a/signup/signup-image/google.png and /dev/null differ diff --git a/signup/signup-image/kakaotalk.png b/signup/signup-image/kakaotalk.png deleted file mode 100644 index ba7c6100..00000000 Binary files a/signup/signup-image/kakaotalk.png and /dev/null differ diff --git a/signup/signup-image/pandalogo.png b/signup/signup-image/pandalogo.png deleted file mode 100644 index e9fd4d98..00000000 Binary files a/signup/signup-image/pandalogo.png and /dev/null differ diff --git a/signup/signup.css b/signup/signup.css index ab3d1d76..695cba81 100644 --- a/signup/signup.css +++ b/signup/signup.css @@ -1,9 +1,32 @@ +body { + display: flex; + justify-content: center; + align-items: center; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 700px; + margin-top: 120px; +} + .pandalogo { width: 266px; height: 90px; margin-bottom: 40px; } +@media (max-width: 767px) { + .container { + padding: 0 16px; + width: 100%; + max-width: 700px; + } +} + .email-container, .nickname-container, .password-container, @@ -13,13 +36,22 @@ gap: 10px; } +form { + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 16px; + width: 100%; +} + label { font-weight: 500; font-size: 16px; } input { - width: 640px; + width: 100%; + /* width: 640px; */ height: 56px; background-color: #F3F4F6; border: 1px solid #F3F4F6; @@ -53,7 +85,8 @@ input { display: flex; justify-content: center; align-items: center; - width: 640px; + width: 100%; + /* width: 640px; */ height: 56px; background-color: #3692FF; margin-top: 24px; @@ -66,7 +99,8 @@ input { .simple-login { display: flex; flex-direction: column; - width: 640px; + width: 100%; + /* width: 640px; */ height: 74px; background-color: #E6F2FF; margin: 24px; diff --git a/signup/signup.html b/signup/signup.html index 74df28ae..d5123d63 100644 --- a/signup/signup.html +++ b/signup/signup.html @@ -10,8 +10,9 @@ 회원가입 +
- +
- 비밀번호 확인하기 + 비밀번호 확인하기
@@ -42,15 +43,16 @@

간편 로그인하기

- +
+ \ No newline at end of file diff --git a/style.css b/style.css index fd559dcb..36be0245 100644 --- a/style.css +++ b/style.css @@ -26,6 +26,7 @@ header { position: fixed; width: 100%; height: 55px; + z-index: 10; } .logo-container { @@ -54,13 +55,26 @@ header { .hometop { background-color: #dbeafe; - height: 400px; + height: 500px; display: flex; justify-content: center; align-items: flex-end; padding: 0 80px; } +.ppanda { + max-width: 600px; + height: auto; + display: flex; + align-items: flex-end; + justify-content: center; +} + +.hi { + width: 100%; + height: auto; +} + .hometop-left { display: flex; flex-direction: column; @@ -68,6 +82,7 @@ header { gap: 20px; position: relative; bottom: 80px; + padding-top: 80px; } .top_text { @@ -75,6 +90,47 @@ header { font-size: 24px; } +@media (min-width: 768px) and (max-width: 1199px) { + + .hometop { + flex-direction: column; + align-items: center; + padding-left: 24px; + padding-right: 24px; + padding-top: 100px; + height: auto; + } + + .ppanda img { + width: 400px; + } + + .top_text { + font-size: 20px; + text-align: center; + } +} + +@media (min-width: 375px) and (max-width: 767px) { + .hometop { + flex-direction: column; + align-items: center; + padding-left: 16px; + padding-right: 16px; + padding-top: 100px; + height: auto; + } + + .ppanda img { + width: 300px; + } + + .top_text { + font-size: 16px; + text-align: center; + } +} + .looking-button { display: flex; justify-content: center; @@ -91,10 +147,6 @@ header { cursor: pointer; } -.hi { - width: 500px; - height: 250px; -} .middle { margin-top: 85px; @@ -139,7 +191,7 @@ header { color: #4F4F4F; } -.box1 { +.itembox { display: flex; flex-direction: row; justify-content: center; @@ -151,7 +203,7 @@ header { border-radius: 12px; } -.box2 { +.searchbox { display: flex; flex-direction: row; justify-content: center; @@ -163,7 +215,7 @@ header { border-radius: 12px; } -.box3 { +.registerbox { display: flex; flex-direction: row; justify-content: center; @@ -195,6 +247,20 @@ header { padding: 0 80px; } +.twoppanda { + max-width: 600px; + height: auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + } + +.bye { + width: 100%; + height: auto; + } + .bottom-center { display: flex; flex-direction: row; @@ -206,6 +272,9 @@ header { color: #4F4F4F; font-size: 24px; display: flex; + flex-direction: column; + justify-content: center; + align-items: center; position: relative; bottom: 40px; } @@ -215,6 +284,54 @@ header { height: 255px; } +@media (min-width: 768px) and (max-width: 1199px) { + + .bottom { + flex-direction: column; + align-items: center; + padding-left: 24px; + padding-right: 24px; + padding-top: 100px; + height: auto; + } + + .bottom_text { + font-size: 20px; + text-align: center; + } + + .twoppanda img { + max-width: 400px; + } +} + +@media (min-width: 375px) and (max-width: 767px) { + .bottom { + flex-direction: column; + align-items: center; + padding-left: 16px; + padding-right: 16px; + padding-top: 100px; + height: auto; + } + + .bottom-center { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .bottom_text { + font-size: 20px; + text-align: center; + } + + .twoppanda img { + max-width: 300px; + } +} + footer { background-color: #111827; height: 160px;