+
-
@@ -81,10 +84,10 @@ 판매를 원하는
- 
+
- 
+ 
인기 상품을
- 
+ 
+
Hot item
인기 상품을
@@ -48,11 +51,11 @@ 구매를 원하는
상품을 검색하세요
상품을 검색하세요
구매하고 싶은 물품은 검색해서 쉽게 찾아보세요
+
- 
+ 
판매를 원하는
- 
+ 
+
Register
판매를 원하는
@@ -68,7 +71,7 @@ 판매를 원하는
믿을 수 있는
판다마켓 중고거래
믿을 수 있는
판다마켓 중고거래
+
판매를 원하는
FAQ
- 
- 
- 
+ 
+ 
+ 
+ 
diff --git a/login.css b/login.css
index 845e54ae..2f221161 100644
--- a/login.css
+++ b/login.css
@@ -7,8 +7,16 @@ body{
box-sizing: border-box;
width: 100%;
margin: 0 auto;
+
}
+@media (max-width: 767px) and (min-width: 375px) {
+ body {
+ width: calc(100% - 32px);
+ padding: 0 16px;
+ }
+
+}
.loginpage {
width: 80%;
@@ -23,14 +31,13 @@ body{
flex-direction: column;
gap: 25px;
padding: 0;
-
-
}
.loginimg {
- width: 396px;
- height: 132px;
- margin: 0 auto 20px;
+ width: auto;
+ height: 100%;
+ margin: 0 auto 10px;
+ max-width: 100%;
}
.loginform {
@@ -57,11 +64,12 @@ body{
font-size: 16px;
width: 100%;
height: 48px;
+ box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 12px;
background-color: #f3f4f6;
outline: none;
- padding: 0 12px;
+ padding: 0 16px;
}
.pswdform {
@@ -101,4 +109,5 @@ body{
padding: 20px auto;
gap: 10px;
font-size: 16px;
+ box-sizing: border-box;
}
\ No newline at end of file
diff --git a/login.html b/login.html
index 23aff478..d37df4a5 100644
--- a/login.html
+++ b/login.html
@@ -9,7 +9,7 @@
- 
+ 
diff --git a/market.html b/market.html
new file mode 100644
index 00000000..5ae1e7c1
--- /dev/null
+++ b/market.html
@@ -0,0 +1,95 @@
+
+
+
+
+
+ 판다마켓
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/signup.css b/signup.css
index 70277227..7f150e7f 100644
--- a/signup.css
+++ b/signup.css
@@ -10,7 +10,12 @@ body{
}
-
+@media (max-width: 767px) and (min-width: 375px) {
+ body {
+ width: calc(100% - 32px);
+ padding: 0 16px;
+ }
+}
.signup-page {
width: 80%;
@@ -26,13 +31,15 @@ body{
gap: 10px;
padding: 24px 0;
font-size: 16px;
+ width: 100%;
}
.loginimg {
- width: 396px;
- height: 132px;
+ width: auto;
+ height: 100%;
margin: 0 auto 20px;
+ max-width: 100%;
}
.loginform {
@@ -78,6 +85,7 @@ body{
background-color: #f3f4f6;
outline: none;
gap: 10px;
+ max-width: 100%;
}
.pswdform {
diff --git a/signup.html b/signup.html
index 60d5a7ea..03b5b2f2 100644
--- a/signup.html
+++ b/signup.html
@@ -9,7 +9,7 @@
+
diff --git a/market.html b/market.html
new file mode 100644
index 00000000..5ae1e7c1
--- /dev/null
+++ b/market.html
@@ -0,0 +1,95 @@
+
+
+
+
+
+ 
+ 
+ 
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+인기 상품을
+
+ Hot item
+
인기 상품을
+ 확인해 보세요
+ 가장 HOT한 중고거래 물품을 판다 마켓에서 확인해보세요
+
+
+
+
+
+
+구매를 원하는
+
+ Search
+
구매를 원하는
+ 상품을 검색하세요
+ 구매하고 싶은 물품은 검색해서 쉽게 찾아보세요
+
+
+
+
+
+
+
+ 판매를 원하는
+
+ Register
+판매를 원하는
+ 상품을 등록하세요
+ 어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요
+
+
+
+
+ 믿을 수 있는
+ 판다마켓 중고거래 +
+ + 판다마켓 중고거래 +
+
-
+
diff --git a/style.css b/style.css
index 1ae3c631..2bad0e1f 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,41 @@
+body {
+ margin: 0;
+}
+
+/* PC ver*/
+@media (min-width: 1200px) {
+ .container {
+ width:50%;
+
+ }
+/* Tablet ver */
+@media (max-width: 1199px) and (min-width: 768px) {
+ body {
+ width: 70%;
+ }
+ .header {
+ padding: 0 24px;
+ }
+}
+/* Mobile ver */
+@media (max-width: 767px) and (max-width: 375px) {
+ body {
+ width:90%;
+ }
+ .header {
+ padding: 0 16px;
+ }
+}
+
+}
.header {
display: flex;
justify-content: space-between;
width: 100%;
- height: 70px;
+ height: 50px;
background-color: white;
border-bottom: 1px solid gray;
- position: fixed;
+ position: sticky;
align-items: center;
top: 0;
left: 0;
@@ -17,7 +47,7 @@
width: 153px;
height: 51px;
margin: 20px;
- padding: 20px;
+ padding: 0 20px;
cursor: pointer;
}
@@ -56,20 +86,30 @@
align-items: center;
gap: 32px;
max-width: fit-content;
-
-
}
-.banner-text{
+.banner_text{
font-weight: 500;
font-size: 2rem;
line-height: 56px;
}
-.morebtn {
- display: inline-block;
+.more_btn{
+ display:inline;
+}
+
+.showmorebtn {
+ background-color: #3692ff;
+ gap: 10px;
+ border-radius: 40px;
+ display: block;
padding: 10px;
- width: 70%;;
+ width: 110%;
+ height: 30px;
+ color: #f9fafb;
+ font-size: 20px;
+ line-height: 32px;
+ text-align: center;
}
.smtx{
@@ -137,15 +177,6 @@ margin: 0;
}
-
-@media (min-width: 1920px) {
- .nav-bar{
-
- }
-}
-
-
-
.first-p{
width: 1920px;
height: 720px;
+