diff --git a/index.html b/index.html index a8d2a702..f914292f 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,12 @@ + + + + + + 판다마켓 @@ -10,14 +16,14 @@
- + 로그인
-
일상의 모든 물건을
거래해 보세요
+
일상의 모든 물건을 거래해 보세요
구경하러 가기
 @@ -28,7 +34,7 @@
Hot item
-
인기 상품을
확인해 보세요
+
인기 상품을 확인해 보세요
가장 HOT 한 중고거래 물품을
판다 마켓에서 확인해 보세요
@@ -37,7 +43,7 @@
Search
-
구매를 원하는
상품을 검색하세요
+
구매를 원하는 상품을 검색하세요
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
 @@ -48,7 +54,7 @@
Register
-
판매를 원하는
상품을 등록하세요
+
판매를 원하는 상품을 등록하세요
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
diff --git a/login.html b/login.html index c779a0b5..a071fbc3 100644 --- a/login.html +++ b/login.html @@ -12,10 +12,10 @@
- +
- + blinder
diff --git a/loginstyle.css b/loginstyle.css index 3a6d35c2..ffcfcc57 100644 --- a/loginstyle.css +++ b/loginstyle.css @@ -37,8 +37,7 @@ main{ margin:60px auto; display:flex; flex-direction: column; - gap:16px; - + gap:16px; } .inputbox, .labels{ @@ -48,6 +47,7 @@ main{ width: 100%; height : 56px; padding-right: 50px; + padding-left: 24px; border-radius: 12px; border: 2px; border-color: #3182F6; @@ -72,7 +72,7 @@ button{ height : 56px; border-radius: 40px; color: var(--gray100); - background-color: var(--blue); + background-color: var(--gray400); width : 100%; font-size: 20px; font-weight: 600; @@ -113,5 +113,32 @@ button{ .blindIco{ position: absolute; right : 17px; - top : 17px; + top : 17px; +} +/*태블릿*/ +@media(min-width : 768px) and (max-width : 1199px){ + +} +/*모바일*/ +@media(max-width : 767px){ + header{ + margin-top: 24px; + } + #logo{ + font-size: 33px; + margin-bottom: 0; + } + .img{ + width: 52px; + } + main{ + width: 100%; + margin :32px auto; + padding-left: 16px; + padding-right: 16px; + max-width: 432px; + } + .labels{ + font-size: 14px; + } } \ No newline at end of file diff --git a/signup.html b/signup.html index 0d8f73b7..d3f06c67 100644 --- a/signup.html +++ b/signup.html @@ -10,17 +10,17 @@
- + - +
- + blinder
- + blinder
diff --git a/style.css b/style.css index 2075ca37..38d3a264 100644 --- a/style.css +++ b/style.css @@ -40,7 +40,7 @@ header{ color : #f3f4f6; background-color: #3691ff; border-radius: 8px; - padding: 12px 23px; + padding: 12px 24px; gap:10px; } .img{ @@ -72,6 +72,7 @@ header{ #tbt1{ margin: 0 62px 32px 0; flex-shrink: 1; + line-height: 140%; } #itembtn{ display:block; @@ -93,6 +94,7 @@ header{ font-weight: 700; line-height: 140%; flex-shrink: 1; + width: 357px; } .home{ @@ -110,6 +112,7 @@ header{ background-color: #fcfcfc; gap:64px; flex-shrink: 1; + width: 988px; } .sec{ text-align: right; @@ -129,6 +132,9 @@ header{ font-weight: 700; line-height: 140%; flex-shrink: 1; + white-space: wrap; + word-break: normal; + overflow-wrap: normal; } .txttxt{ font-size: 24px; @@ -169,4 +175,169 @@ footer{ .icons{ display:flex; gap:12px; +} +/*태블릿*/ +@media(min-width : 768px) and (max-width : 1199px){ + header{ + padding : 0 24px; + } + .htbox{ + height : 100%; + flex-direction: column; + align-items: center; + justify-content: space-between; + } + .hometop{ + padding-top: 84px; + height : 771px; + align-items: flex-start; + justify-content: center; + } + .textbox{ + width : 600px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap:24px; + text-align: center; + } + #tbt1{ + margin:0; + width: 100%; + } + #itembtn{ + width: 357px; + } + .homebottom{ + height : 927px; + padding-top: 200px; + align-items: flex-start; + justify-content: center; + } + .home{ + align-items: flex-start; + margin:52px 24px; + } + .hbox{ + width: 100%; + height: 708px; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + gap:24px; + } + .sec{ + flex-direction: column-reverse; + } + .htxt{ + width:100%; + } + .txtmsg{ + white-space: nowrap; + } + .txtmsg{ + font-size: 32px; + } + .txttxt{ + font-size:18px; + } + .img{ + width : 100%; + max-height: 524px; + overflow: hidden; + } +} +/*모바일*/ +@media(max-width : 767px){ + header{ + padding : 0 16px; + } + #loico{ + display: none; + } + .htbox{ + height : 100%; + flex-direction: column; + align-items: center; + justify-content: space-between; + } + .hometop{ + padding-top: 48px; + height : 540px; + align-items: flex-start; + justify-content: center; + } + .textbox{ + width : 240px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap:18px; + text-align: center; + } + #tbt1{ + margin:0; + width: 100%; + font-size: 32px; + } + #itembtn{ + width: 240px; + height: 48px; + font-size: 18px; + line-height: 17px; + } + .homebottom{ + height : 540px; + padding-top: 120px; + align-items: flex-start; + justify-content: center; + } + .home{ + align-items: flex-start; + margin:40px 16px; + } + .hbox{ + width: 100%; + height: 416px; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + gap:24px; + } + .sec{ + flex-direction: column-reverse; + } + .htxt{ + width:100%; + } + .txtindex{ + font-size: 16px; + } + .txtmsg{ + white-space: nowrap; + font-size: 24px; + } + .txttxt{ + font-size:18px; + } + .img{ + width : 100%; + max-height: 260px; + overflow: hidden; + } + footer{ + flex-wrap: wrap; + justify-content: space-between; + padding : 32px; + height:160px; + } + #links>*{ + margin-left: 0; + margin-right: 32px; + } + #bn{ + order:3; + } } \ No newline at end of file