diff --git a/image/og_img.png b/image/og_img.png new file mode 100644 index 00000000..04e81ee5 Binary files /dev/null and b/image/og_img.png differ diff --git a/index.html b/index.html index c7becc15..fa6b500c 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,15 @@ 판다마켓 + + + + + - + + +
@@ -13,13 +20,13 @@ 로그인
-
-
+
+
일상의 모든 물건을
거래해 보세요
구경하러 가기
- 배너이미지 + 배너이미지
@@ -27,7 +34,7 @@ 첫 번째 본문 이미지
Hot Item
-
인기 상품을
확인해 보세요
+
인기 상품을
확인해 보세요
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
@@ -36,7 +43,7 @@
Search
구매를 원하는
상품을 검색하세요
-
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
+
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
@@ -44,17 +51,17 @@ 세 번째 본문 이미지
Register
-
판매를 원하는
상품을 등록하세요
+
판매를 원하는
상품을 등록하세요
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
-
-
+
+
믿을 수 있는
판다마켓 중고 거래
- 푸터 이미지 + 푸터 이미지
diff --git a/login.html b/login.html index 332fdfca..0fe0ce5c 100644 --- a/login.html +++ b/login.html @@ -3,10 +3,12 @@ - + + + 로그인 - +
diff --git a/responsive.css b/responsive.css new file mode 100644 index 00000000..3b920d43 --- /dev/null +++ b/responsive.css @@ -0,0 +1,84 @@ +/*style.css*/ +/* common */ +@media (min-width:375px)and (max-width:1199px){ + footer-div{ + flex-flow:wrap; + } + .main-left, .main-right { + width: 100%; + background-color: #ffffff; + flex-wrap: wrap; + } + .main-div, .main-div-right { + padding: 0 20px; + } + .main-img{ + width: 100%; + } + .top-section { + height: auto; + } + .top-div{ + flex-direction: column; + align-items: center; + } + .content { + height: 40vh; + text-align: center; + } + .img-home{ + width: 100%; + } + .footer-div { + flex-flow:wrap; + } + +} +/* Mobile */ +@media (min-width:375px) and (max-width:767px){ + .main-header-div { + margin: 0 16px; + } + .img-home{ + width: 100%; + } + +} +/* Tablet */ +@media (min-width:768px) and (max-width:1199px){ + .main-header-div { + margin: 0 24px; + } + .main-left, .main-right { + max-width: 900px; + } +} + +/* sign.css */ + +/* Mobile */ +@media (min-width:375px) and (max-width:767px) { + .sign-body { + width: 100%; + padding-left: 16px; + padding-right: 16px; + } + .sign-logo{ + width: 55%; + height: 20%; + } + + .sign-form * , .sign-logo { + max-width: 400px; + display: block; + margin-left: auto; + margin-right: auto; + } + + .simple-login-div{ + max-width: 400px; + margin-left: auto; + margin-right: auto; + } + +} diff --git a/root.css b/root.css new file mode 100644 index 00000000..8a9a3727 --- /dev/null +++ b/root.css @@ -0,0 +1,13 @@ +:root { + --gray900 : #111827; + --gray800 : #1f2937; + --gray700 : #374151; + --gray600 : #4b5563; + --gray500 : #6b7280; + --gray400 : #9ca3af; + --gray200 : #e5e7eb; + --gray100 : #f3f4f6; + --gray50 : #f9fafb; + --blue:#3692ff; + --white:#ffffff; + } \ No newline at end of file diff --git a/sign.css b/sign.css index 1b1de9fa..20d09137 100644 --- a/sign.css +++ b/sign.css @@ -2,26 +2,14 @@ box-sizing: border-box; } -:root { - --gray900 : #111827; - --gray800 : #1f2937; - --gray700 : #374151; - --gray600 : #4b5563; - --gray500 : #6b7280; - --gray400 : #9ca3af; - --gray200 : #e5e7eb; - --gray100 : #f3f4f6; - --gray50 : #f9fafb; - --blue:#3692ff; -} - -body { +.sign-body { font-family: "pretendard", sans-serif; margin: 0 auto; width: 640px; - margin-top: 231px; + padding-top: 231px; } + .sign-logo { display: block; width: 396px; @@ -117,6 +105,7 @@ body { .footer { display: flex; justify-content: center; + align-content: center; font-size: 14px; color: var(--gray800); gap: 4px; diff --git a/signup.html b/signup.html index 6a1f8ffb..d69610b0 100644 --- a/signup.html +++ b/signup.html @@ -3,10 +3,12 @@ - + + + 회원가입 - +
diff --git a/style.css b/style.css index 3bdc27c0..3795fc56 100644 --- a/style.css +++ b/style.css @@ -9,7 +9,7 @@ body { .main-header { height: 70px; - background-color: #ffffff; + background-color: var(--white); position: sticky; top: 0; } @@ -28,13 +28,13 @@ body { } .login { - background-color: #3692FF; + background-color: var(--blue); border-radius: 8px; width: 88px; height: 42px; padding: 12px 23px; text-decoration: none; - color: #ffffff; + color: var(--white); cursor:pointer; } @@ -42,90 +42,74 @@ body { background-color: #1251AA; } -section { +.top-section { background-color: #CFE5FF; height: 540px; width: 100%; -} - -.top-section { display: flex; align-items: flex-end; - margin: 0 auto; - width: 1000px; - height: 100%; + justify-content: center; +} +.top-div{ + height: 60%; + max-width: 1000px; + width: 100%; + display: flex; + gap: 7px; + flex-basis: content; +} +.content { + padding-top: 60px; } .top-btn { - background-color: #3692FF; + background-color: var(--blue); text-decoration: none; - color: #ffffff; + color: var(--white); border-radius: 40px; padding: 12px 71px; cursor:pointer; } - -.content { - width: 700px; - padding-bottom: 60px; - display: flex; - height: 60%; - flex-direction: column; - align-items: center; - justify-content: center; -} .top-content { font-size:30px; font-weight: 700; - margin-bottom: 50px; -} - -.img_home{ - width: 746px; - height: 340px; + margin-bottom: 40px; + width: 250px; } main { - background-color: #ffffff; - + background-color: var(--white); } .main-left, .main-right { width: 900px; margin: 90px auto; - display: grid; + display: flex; background-color: #F7F8FA; - -} - -.main-left { - grid-template-areas: "img script"; + gap:60px; } .main-right { - grid-template-areas: "script img"; + flex-direction: row-reverse; } -.main-div { - grid-area: script; - padding: 100px 0; +.main-div, .main-div-right { + margin: auto 0; + flex-grow: 1; } .main-div-right{ - grid-area: script; - padding: 100px 40px; text-align: right; } .main-img { width: 588px; height: 444px; - grid-area: img; } .title { - color: #3692FF; + color: var(--blue); font-size: 12px; font-weight: 600; margin-bottom: 10px; @@ -144,16 +128,17 @@ main { } footer { - background-color: #111827; - padding: 30px 150px; + background-color: var(--gray900); + margin: 0 auto; height: 200px; } .footer-div { display: flex; justify-content: space-evenly; - color: #ffffff; + color: var(--white); align-items: flex-start; + padding: 30px 32px; font-size:16px; } @@ -161,12 +146,17 @@ footer { height: 30px; padding:5px; } +.footer-link{ + display: flex; + gap: 10px; + justify-items: center; + padding-top: 3px; +} .footer-link a { - color: #ffffff; + color: var(--white); text-decoration: none; font-size: 16px; - padding-top: 4px; - padding-left: 10px; + text-align: center; }