-
+
-
Hot item
-
인기 상품을
확인해 보세요
+
Hot item
+
인기 상품을
확인해 보세요
- 가장 HOT한 중고거래 물품을
판다마켓에서 확인해 보세요
+ 가장 HOT한 중고거래 물품을
판다마켓에서 확인해 보세요
+
-
Search
-
구매를 원하는
상품을 검색하세요
+
Search
+
구매를 원하는
상품을 검색하세요
- 구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
+ 구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
-
+
-
+
-
Register
-
판매를 원하는
상품을 등록하세요
+
Register
+
판매를 원하는
상품을 등록하세요
- 어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
+ 어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
+
- 믿을 수 있는
+ 믿을 수 있는
판다마켓 중고거래
@@ -67,20 +76,20 @@
diff --git a/items.html b/items.html
index a76e6ec71..a65d2f769 100644
--- a/items.html
+++ b/items.html
@@ -1,5 +1,5 @@
-
+
구경하러 가기
diff --git a/login.html b/login.html
index a5ebf2a18..8d0c530cc 100644
--- a/login.html
+++ b/login.html
@@ -1,18 +1,18 @@
-
+
판다마켓_로그인
+
-
-
-
+
+
+
간편 로그인하기
diff --git a/media.css b/media.css
new file mode 100644
index 000000000..a9479c3e9
--- /dev/null
+++ b/media.css
@@ -0,0 +1,160 @@
+.break-on-desktop {
+ display: none;
+}
+
+@media (min-width: 768px) {
+ .logoSection {
+ max-width: 640px;
+ }
+
+ .topBigLogo {
+ width: 396px;
+ margin-top: 48px;
+ margin-bottom: 40px;
+ }
+
+ label {
+ font-size: 18px;
+ margin-bottom: 16px;
+ }
+}
+
+@media (min-width: 1280px) {
+ .topBigLogo {
+ margin-top: 60px;
+ margin-bottom: 40px;
+ }
+}
+
+@media (min-width: 768px) {
+ header {
+ padding: 0 24px;
+ }
+
+ .limited-width {
+ padding: 0 24px;
+ }
+
+ .inside {
+ font-size: 20px;
+ font-weight: 700;
+ padding: 16px 126px;
+ }
+
+ footer {
+ padding: 32px 104px 108px 104px;
+ }
+
+ .codeit2024 {
+ flex-basis: auto;
+ order: 0;
+ }
+}
+
+@media (min-width: 1280px) {
+ header {
+ padding: 0 200px;
+ }
+
+ .break-on-desktop {
+ display: inline;
+ }
+
+ footer {
+ padding: 32px 200px 108px 200px;
+ }
+}
+
+@media (min-width: 768px) {
+ .banner {
+ height: 90vh;
+ background-size: 120%;
+ }
+
+ .banner h1 {
+ font-size: 40px;
+ line-height: 56px;
+ padding-top: 84px;
+ padding-bottom: 24px;
+ }
+
+ #topBannerPanda h1 br {
+ display: none;
+ }
+
+ #contents {
+ padding-top: 24px;
+ padding-bottom: 16px;
+ }
+
+ .contentText h2 {
+ font-size: 18px;
+ line-height: 25px;
+ margin-bottom: 12px;
+ }
+
+ .content:nth-child(2) {
+ flex-direction: column-reverse;
+ }
+
+ .contentText h1 {
+ font-size: 32px;
+ line-height: 45px;
+ }
+
+ .contentExplain {
+ font-size: 18px;
+ line-height: 22px;
+ }
+}
+
+@media (min-width: 1280px) {
+ .banner {
+ text-align: left;
+ height: 540px;
+ display: flex;
+ align-items: center;
+ background-position: 80% bottom;
+ background-size: 55%;
+ }
+
+ .banner h1 {
+ padding-top: 0;
+ padding-bottom: 32px;
+ }
+
+ #topBannerPanda h1 br {
+ display: inline;
+ }
+
+ #contents {
+ padding: 138px 0;
+ }
+
+ .content {
+ margin-bottom: 138px;
+ display: flex;
+ align-items: center;
+ gap: 5%;
+ }
+
+ .content:nth-child(2) {
+ flex-direction: row-reverse;
+ }
+
+ .contentImg {
+ width: 50%;
+ margin-bottom: 0;
+ }
+
+ .contentText h1 {
+ font-size: 40px;
+ line-height: 56px;
+ }
+
+ .contentExplain {
+ font-size: 24px;
+ line-height: 29px;
+ margin-top: 24px;
+ }
+}
\ No newline at end of file
diff --git a/privacy.html b/privacy.html
index ee635fa35..5f89decff 100644
--- a/privacy.html
+++ b/privacy.html
@@ -1,5 +1,5 @@
-
+
Privacy_Policy
diff --git a/sign.css b/sign.css
index ed4349869..1f3e74e3c 100644
--- a/sign.css
+++ b/sign.css
@@ -33,19 +33,21 @@
pointer-events: none;
}
.logoSection {
- max-width: 640px;
+ max-width: 400px;
margin: 0 auto;
+ padding: 0 16px;
}
.topBigLogo {
+ margin: 0 auto;
display: block;
- text-align: center;
- margin-top: 60px;
- margin-bottom: 40px;
+ margin-top: 24px;
+ margin-bottom: 24px;
+ width: 198px
}
.topBigLogoImg {
- width: 396px;
+ width: 100%;
}
.inputSection {
@@ -56,8 +58,8 @@
label {
display: block;
- margin-bottom: 16px;
- font-size: 18px;
+ margin-bottom: 8px;
+ font-size: 14px;
font-weight: 700;
}
diff --git a/signup.html b/signup.html
index 1fc6091a1..d26418edc 100644
--- a/signup.html
+++ b/signup.html
@@ -1,18 +1,18 @@
-
+
판다마켓_회원가입
+
-
-
-
+
+
+
간편 로그인하기
diff --git a/style.css b/style.css
index bb0d5ea9e..81daed46b 100644
--- a/style.css
+++ b/style.css
@@ -44,16 +44,23 @@ body {
header {
position: fixed;
+ top: 0;
+ left: 0;
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
- padding: 0 200px;
+ padding: 0 16px;
background-color: var(--header-bg-color);
border-bottom: 1px solid var(--header-bd-color);
}
+main {
+ margin-top: 70px;
+}
+
+
.button {
background-color: var(--btn-bg-color);
color: var(--btn-txt-color);
@@ -71,29 +78,27 @@ header {
}
.banner {
- height: 540px;
- display: flex;
- justify-content: center;
- align-items: center;
+ height: 60vh;
+ text-align: center;
background-color: var(--banner-bg-color);
background-repeat: no-repeat;
- background-position: 80% bottom;
- background-size: 55%;
+ background-position: bottom;
+ background-size: 130%;
}
-h1 {
- font-size: 40px;
+.banner h1 {
font-weight: 700;
- line-height: 56px;
- letter-spacing: 0.02em;
+ font-size: 32px;
+ line-height: 45px;
+ padding-top: 48px;
+ padding-bottom: 18px;
}
.inside {
- font-size: 20px;
- font-weight: 700;
+ font-size: 16px;
+ font-weight: 600;
border-radius: 999px;
- padding: 16px 124px;
- margin-top: 32px;
+ padding: 15px 34px;
}
#topBannerPanda {
@@ -103,42 +108,47 @@ h1 {
.limited-width {
max-width: 1200px;
margin: 0 auto;
+ padding: 0 16px;
width: 100%;
}
#contents {
- padding-bottom: 128px;
+ padding-top: 51px;
}
.content {
- padding: 138px 0;
- display: flex;
- align-items: center;
- gap: 5%
+ margin-bottom: 64px;
}
.contentImg {
- width: 50%;
+ width: 100%;
+ margin-bottom: 20px;
}
.contentText {
flex: 1;
}
-.contentSmolText {
+.contentText h2 {
color: var(--content-s-txt-color);
- font-size: 18px;
- line-height: 50px;
+ font-size: 16px;
+ line-height: 22px;
font-weight: 700;
- margin-bottom: 12px;
+ margin-bottom: 8px;
}
-.contentExplain {
+.contentText h1 {
+ font-weight: 700;
font-size: 24px;
+ line-height: 34px;
+}
+
+.contentExplain {
+ font-size: 16px;
font-weight: 500;
- line-height: 120%;
+ line-height: 19px;
letter-spacing: 0.08em;
- margin-top: 24px;
+ margin-top: 20px;
}
#reverseContent {
@@ -155,8 +165,14 @@ footer {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 32px 200px 108px 200px;
+ padding: 32px;
font-size: 16px;
+ gap: 60px
+}
+
+.codeit2024 {
+ order: 3;
+ flex-basis: 100%;
}
#bottomThings {
@@ -168,6 +184,7 @@ footer {
color: var(--btm-txt-link-color);
}
+
#iconLink {
display: flex;
gap: 12px;