Search
- 구매를 원하는
- 상품을 검색하세요
+ 구매를 원하는
+ 상품을 검색하세요
구매하고 싶은 물품은 검색해서
@@ -101,8 +113,8 @@
Register
- 판매를 원하는
- 상품을 등록하세요
+ 판매를 원하는
+ 상품을 등록하세요
어떤 물건이든 판매하고 싶은 상품을
diff --git a/pages/homePage/index.style.css b/pages/homePage/index.style.css
index 9e785c29..32b3ed44 100644
--- a/pages/homePage/index.style.css
+++ b/pages/homePage/index.style.css
@@ -40,7 +40,7 @@ nav {
}
.landing {
- background-color: #CFE5FF;
+ background-color: #cfe5ff;
width: 100%;
height: 540px;
}
@@ -55,7 +55,7 @@ nav {
display: flex;
}
-.landing-area-left{
+.landing-area-left {
flex: 4;
display: flex;
flex-direction: column;
@@ -63,7 +63,7 @@ nav {
gap: 32px;
}
-.landing-area-right{
+.landing-area-right {
flex: 8;
}
@@ -71,8 +71,11 @@ nav {
font-weight: 700;
font-size: 40px;
line-height: 140%;
+ gap: 5px;
margin: 0;
color: var(--gray700);
+ display: flex;
+ flex-direction: column;
}
.sub-description {
@@ -87,13 +90,16 @@ nav {
gap: 64px;
width: 988px;
padding: 138px 0;
+ box-sizing: border-box;
}
-.hot-item-left, .register-left {
+.hot-item-left,
+.register-left {
flex: 7;
}
-.hot-item-right, .register-right {
+.hot-item-right,
+.register-right {
flex: 5;
display: flex;
flex-direction: column;
@@ -138,7 +144,7 @@ footer {
align-items: center;
}
-.footer-left > p{
+.footer-left > p {
color: var(--gray400);
}
@@ -158,3 +164,85 @@ footer {
align-items: center;
gap: 12px;
}
+
+@media screen and (max-width: 1199px) {
+ header {
+ padding: 9px 24px;
+ }
+ .container {
+ width: 100%;
+ }
+ .main-wrap {
+ padding: 24px;
+ }
+
+ .landing {
+ height: 927px;
+ }
+
+ .landing-top {
+ padding-top: 74px;
+ }
+
+ .landing-top a {
+ text-align: center;
+ }
+ .landing-area {
+ flex-direction: column;
+ align-items: center;
+ height: 100%;
+ }
+
+ .landing-area-right {
+ flex: none;
+ }
+
+ .description {
+ flex-direction: row;
+ }
+
+ .main-wrap {
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .section-search {
+ flex-direction: column-reverse;
+ }
+
+ .footer-area {
+ width: 536px;
+ }
+}
+
+@media screen and (max-width: 767px) {
+ header {
+ padding: 9px 16px;
+ }
+
+ .description{
+ flex-direction: column;
+ }
+
+ .landing-top .description {
+ align-items: center;
+ }
+
+ .items-btn {
+ padding: 12px 71px;
+ width: 100%;
+ }
+
+ footer {
+ position: relative;
+ }
+
+ .footer-area {
+ width: 311px;
+ }
+
+ .footer-left {
+ position: absolute;
+ bottom: 20%;
+ }
+}
\ No newline at end of file
diff --git a/pages/login and signup/login & signup.style.css b/pages/loginAndSignupPage/loginAndSignup.style.css
similarity index 84%
rename from pages/login and signup/login & signup.style.css
rename to pages/loginAndSignupPage/loginAndSignup.style.css
index 32563ae6..a5fe5821 100644
--- a/pages/login and signup/login & signup.style.css
+++ b/pages/loginAndSignupPage/loginAndSignup.style.css
@@ -13,6 +13,12 @@
text-align: center;
}
+.form-logo {
+ width: 396px;
+ height: 132px;
+ margin-bottom: 24px;
+}
+
.login-signup-form {
display: flex;
flex-direction: column;
@@ -117,3 +123,21 @@
color: var(--blue);
line-height: 100%;
}
+
+.disabled {
+ background-color: var(--gray400);
+}
+
+@media screen and (max-width: 767px) {
+ .form-logo {
+ width: 198px;
+ height: 66px;
+ }
+ .wrap {
+ max-width: 400px;
+ margin: 0 auto;
+ }
+ .form-area {
+ padding: 231px 16px;
+ }
+}
diff --git a/pages/login and signup/loginPage/login.html b/pages/loginAndSignupPage/loginPage/login.html
similarity index 68%
rename from pages/login and signup/loginPage/login.html
rename to pages/loginAndSignupPage/loginPage/login.html
index 4ff6df26..72d9b33c 100644
--- a/pages/login and signup/loginPage/login.html
+++ b/pages/loginAndSignupPage/loginPage/login.html
@@ -3,36 +3,42 @@
+