diff --git a/SprintMission/images/btn_visibility_on.svg b/SprintMission/images/btn_visibility_on.svg new file mode 100644 index 00000000..07a2de8d --- /dev/null +++ b/SprintMission/images/btn_visibility_on.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/SprintMission/images/panda_mobile_logo.png b/SprintMission/images/panda_mobile_logo.png new file mode 100644 index 00000000..82c95005 Binary files /dev/null and b/SprintMission/images/panda_mobile_logo.png differ diff --git a/SprintMission/index.html b/SprintMission/index.html index 23d3197c..a8f683e2 100644 --- a/SprintMission/index.html +++ b/SprintMission/index.html @@ -25,7 +25,7 @@

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

구경하러 가기 @@ -33,51 +33,53 @@

-
-
-
-
- Hot item -
-

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

-

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

+
+
+
+
+
+ Hot item +
+

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

+

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

+
-
-
-
-
-
- Search -
-

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

-

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

-
+
+
+
+
+
+ Search +
+

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

+

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

+
+
-
-
- -
-
-
-
- Register -
-

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

-

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

+
+
+
+
+
+ Register +
+

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

+

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

+
- -
+ +
diff --git a/SprintMission/login.html b/SprintMission/login.html index d85af412..3bba4d9e 100644 --- a/SprintMission/login.html +++ b/SprintMission/login.html @@ -20,7 +20,10 @@
- +
+ + +
diff --git a/SprintMission/signup.html b/SprintMission/signup.html index 85389a73..b11e31d7 100644 --- a/SprintMission/signup.html +++ b/SprintMission/signup.html @@ -25,11 +25,17 @@
- +
+ + +
- +
+ + +
회원가입 diff --git a/SprintMission/style.css b/SprintMission/style.css index 7023117f..063cdee9 100644 --- a/SprintMission/style.css +++ b/SprintMission/style.css @@ -48,7 +48,7 @@ body { text-align: center; } -@media (min-width: 701px) and (max-width: 1920px) { +@media (min-width: 769px) and (max-width: 1920px) { .header-wrap { width: 100%; @@ -56,12 +56,8 @@ body { } } -@media (max-width: 700px) { - - .header-wrap { - width: 283px; - padding: 0; - } +main { + margin-top: 70px; } .head-section { @@ -79,11 +75,12 @@ body { .head-section .section-wrap { margin: 0 auto; - width: 1110px; + width: 100%; height: 340px; gap: 7px; display: flex; align-items: center; + justify-content: center; } .footer-section .section-wrap { @@ -114,8 +111,10 @@ body { width: 357px; height: 260px; padding-bottom: 60px; + text-align: center; display: flex; flex-direction: column; + align-items: center; gap: 32px; } @@ -208,6 +207,36 @@ body { flex-direction: column; } +.context1 h2 { + width: 222px; + height: 112px; +} + +.context1 p { + width: 274px; + height: 64px; +} + +.context2 h2 { + width: 293px; + height: 112px; +} + +.context2 p { + width: 288px; + height: 64px; +} + +.context3 h2 { + width: 293px; + height: 112px; +} + +.context3 p { + width: 335px; + height: 64px; +} + .area1 { width: 298px; height: 238px; @@ -255,6 +284,21 @@ body { color: #374151; } +.reverse-section { + display: flex; + flex-direction: row-reverse; +} + +.reverse-section .discribe { + padding-left: 24px; + padding-right: 0; + text-align: right; +} + +.discribe .context2 { + align-items: flex-end; +} + footer { height: 160px; padding-top: 32px; @@ -413,6 +457,25 @@ footer { /* signup.html css + login.html css */ +.password-wrap, .password-check-wrap { + position: relative; +} + +.password-visbility{ + width: 24px; + height: 24px; + background-image: url('images/btn_visibility_on.svg'); + background-size: cover; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 16px; +} + +.password-visbility:hover { + cursor: pointer; +} + .social-login-wrap { width: 100%; height: 74px; @@ -583,3 +646,345 @@ footer { display: flex; gap: 4px; } + +/* 타블렛 사이즈 */ +@media (max-width: 1199px) { + + /* index.html css */ + + .header-wrap { + width: 100%; + padding: 0 24px; + } + + .section-wrap { + flex-direction: column; + } + + .head-section{ + height: 771px; + padding-top: 84px; + position: relative; + z-index: -1; + } + + .head-section .section-wrap { + width: 744px; + height: auto; + } + + .head-section .intro { + width: auto; + height: auto; + } + + .head-section .img { + width: 744px; + height: 340px; + position: absolute; + bottom: 0; + } + + .footer-section { + margin-top: 0; + padding-top: 201px; + height: 927px; + position: relative; + z-index: -1; + } + + .footer-section .intro { + text-align: center; + } + + .footer-section .img { + width: 744px; + height: 397px; + position: absolute; + bottom: 0; + } + + .footer-section .section-wrap { + width: 744px; + height: auto; + } + + .info-section-wrap { + padding: 24px; + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + } + + .info-section, .info-section .section-wrap { + width: 696px; + height: 708px; + padding: 0; + } + + .info-section .section-wrap { + gap: 24px; + align-items: flex-start; + } + + .info-section .reverse-section { + align-items: flex-end; + } + + .info-section .img1, .info-section .img2, .info-section .img3 { + width: 696px; + height: 524px; + } + + .area1 { + width: 328px; + height: auto; + } + + .area2 { + width: 410px; + height: auto; + } + + .area3 { + width: 410px; + height: auto; + } + + .info-section .discribe { + padding: 0; + } + + .info-section h2 { + font-size: 32px; + line-height: 42px; + } + + .info-section p { + font-size: 18px; + line-height: 26px; + } + + .context1 h2 { + width: 100%; + height: 42px; + } + + .context1 p { + width: 206px; + height: 52px; + } + + .context2 h2 { + width: 100%; + height: 42px; + } + + .context2 p { + width: 216px; + height: 52px; + } + + .context3 h2 { + width: 100%; + height: 42px; + } + + .context3 p { + width: 251px; + height: 52px; + } + + .footer-wrap { + width: 536px; + } + + + /* login.html css */ + + .login-form-wrap { + margin-top: 190px; + } + + /* signup.html css */ + + .signUp-form-wrap { + margin-top: 48px; + } + +} + +/* 모바일일 사이즈 */ +@media (min-width: 375px) and (max-width: 767px) { + + /* index.html css */ + + .header-wrap { + width: 100%; + padding: 0 16px; + } + + .header .logo-icon { + width: 103px; + height: 51px; + background-image: url('images/panda_mobile_logo.png'); + } + + .head-section .section-wrap { + width: 375px; + } + + .head-section{ + height: 540px; + padding-top: 48px; + } + + .head-section .intro { + width: 240px; + height: 156px; + gap: 18px; + } + + .head-section .intro h2 { + font-size: 32px; + line-height: 44px; + } + + .head-section .intro a { + width: 240px; + height: 48px; + font-size: 18px; + line-height: 26px; + border-radius: 40px; + padding: 12px 71px; + } + + .head-section .img { + width: 448px; + height: 204px; + } + + .footer-section .section-wrap { + width: 375px; + } + + .footer-section { + height: 540px; + padding-top: 121px; + } + + .footer-section .img { + width: 375px; + height: 198px; + } + + .footer-section .intro h2 { + font-size: 32px; + line-height: 44px; + } + + .info-section-wrap { + padding: 83px 15px; + gap: 40px; + } + + .info-section, .info-section .section-wrap { + width: 344px; + height: auto; + } + + .info-section .img1, .info-section .img2, .info-section .img3 { + width: 344px; + height: 259px; + } + + .discribe div { + gap: 16px; + } + + .info-section h2 { + font-size: 24px; + line-height: 32px; + } + + .info-section p { + font-size: 16px; + line-height: 26px; + } + + .context1 h2 { + height: 32px; + } + + .context1 p { + width: 183px; + height: 52px; + } + + .context2 h2 { + height: 34px; + } + + .context2 p { + width: 238px; + height: 50px; + } + + .context3 h2 { + height: 34px; + } + + .context3 p { + width: 247px; + height: 38px; + } + + .footer-wrap { + width: 311px; + height: 96px; + flex-wrap: wrap; + position: relative; + } + + .footer-wrap span { + order: 1; + position: absolute; + bottom: 0; + } + + /* login.html css */ + + .login-form-wrap { + margin-top: 80px; + gap: 24px; + width: 400px; + } + + .login-form-wrap .logo { + width: 198px; + height: 66px; + } + + /* signup.html css */ + + .signUp-form-wrap { + margin-top: 24px; + gap: 24px; + width: 400px; + } + + .signUp-form-wrap .logo { + width: 198px; + height: 66px; + } + + @media (max-width: 416px) { + + .login-form-wrap, .signUp-form-wrap { + margin-left: 16px; + margin-right: 16px; + width: 100%; + } + } +} \ No newline at end of file