From 3d6feb90c8c23ca8ea2e3fc555f2077feac30008 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=EC=98=81?= Date: Mon, 26 Aug 2024 15:57:32 +0900 Subject: [PATCH] =?UTF-8?q?[=EA=B9=80=EC=88=98=EC=98=81]=20sprint3=20(#50)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 랜딩페이지 * fixed untracked files * style: 불필요한 font 스타일 코드 수정 * refactor: 클래스 네이밍 * feat:header고정 * feat: 로그인 * feat:회원가입 * fix:페이지 루트 수정 * refactor: 랜딩페이지 section ,footer * feat : tablet display * feat: landing page mobile display * feat: auth page mobile display * feat:줄바꿈 수정 * feat: meta tag * feat:meta tag --- index.html | 38 +++--- login.html | 1 + signup.html | 1 + style/auth_mobile.css | 16 +++ style/index.css | 69 ++++++----- style/index_mobile.css | 68 +++++++++++ style/index_tablet.css | 83 +++++++++++++ style/style.css | 271 ----------------------------------------- 8 files changed, 229 insertions(+), 318 deletions(-) create mode 100644 style/auth_mobile.css create mode 100644 style/index_mobile.css create mode 100644 style/index_tablet.css delete mode 100644 style/style.css diff --git a/index.html b/index.html index 6441d907..e55a5967 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,21 @@ + + + + 판다마켓 + > + +
@@ -24,6 +29,7 @@
+ -
-
- Hot Item +
+
+ Hot Item

Hot Item

인기 상품을
@@ -50,8 +56,8 @@

인기 상품을

-
-
+
+

Search

구매를 원하는
@@ -61,12 +67,12 @@

구매를 원하는
쉽게 찾아보세요

- Search + Search
-
-
- Register +
+
+ Register

Register

판매를 원하는
@@ -79,13 +85,13 @@

판매를 원하는

-
diff --git a/login.html b/login.html index bceb174e..0c6612ac 100644 --- a/login.html +++ b/login.html @@ -6,6 +6,7 @@ 로그인 +
diff --git a/signup.html b/signup.html index 020e0bdd..524b5e58 100644 --- a/signup.html +++ b/signup.html @@ -6,6 +6,7 @@ 회원가입 +
diff --git a/style/auth_mobile.css b/style/auth_mobile.css new file mode 100644 index 00000000..63bba412 --- /dev/null +++ b/style/auth_mobile.css @@ -0,0 +1,16 @@ +@media (max-width:767px){ + br{ + display:none !important; + } + .auth-container { + padding: 0 16px; + display:inline-flex; + } + .panda-logo { + width:198px; + } + .auth-wrap { + max-width: 400px; + margin:24px 0; + } +} \ No newline at end of file diff --git a/style/index.css b/style/index.css index 444b397d..688a9549 100644 --- a/style/index.css +++ b/style/index.css @@ -1,24 +1,21 @@ +/* desktop */ header { + width:100%; display: flex; position:sticky; top:0px; z-index:10; - width: 100%; height: 70px; - padding: 9px 400px; - flex-direction: column; justify-content: center; align-items: center; - gap: 10px; flex-shrink: 0; - border-bottom: 1px solid #DFDFDF; background: #FFF; } - -.header-wrap, .bottom-wrap { +.header-wrap { + width:100%; + max-width:1120px; height:100%; - max-width: 1920px; display: flex; justify-content: space-between; align-items: center; @@ -65,8 +62,7 @@ header { align-items:center; justify-content:center; } - -.banner-wrap { +.banner-wrap , .bottom-wrap{ position:absolute; bottom:0px; display: inline-flex; @@ -74,7 +70,9 @@ header { gap: 7px; } - +.img-home-top, .img-home-bottom { + width:746px; +} .banner-textbox, .bottom-textbox { height:100%; display: flex; @@ -85,7 +83,7 @@ header { gap: 32px; } -.banner-text, .section-text { +.banner-text, .section-text, .bottom-text { color: #374151; margin: 0; font-size: 40px; @@ -132,38 +130,47 @@ header { text-decoration-line: none; } -.section1 { +.section-left { width:100%; + height:720px; display: flex; - padding: 138px 605px 138px 360px; align-items: center; justify-content: center; } -.section2 { +.section-right { + width:100%; + height:720px; display: flex; - padding: 138px 360px 138px 591px; - justify-content: center; align-items: center; - background: #FFF; + justify-content: center; text-align: end; } -.section3 { +.section-left-wrap { + width: 100%; + max-width:1200px; + height:444px; display: flex; - padding: 138px 573px 138px 360px; + justify-content: flex-start; align-items: center; - justify-content: center; - background: #FFF; + gap: 64px; } -.section-wrap { - max-width:1920px; - display: flex; + +.section-right-wrap { width: 100%; - justify-content: center; + max-width:1200px; + height:444px; + display: flex; + justify-content: flex-end; align-items: center; gap: 64px; } + +.img-section { + max-width:558px; +} + .bottom { display:flex; width: 100%; @@ -171,7 +178,6 @@ header { flex-shrink: 0; background: #CFE5FF; position:relative; - top:138px; align-items:center; justify-content:center; } @@ -179,25 +185,25 @@ header { footer { display: flex; justify-content: center; + align-items: center; width: 100%; height: 160px; gap: 10px; flex-shrink: 0; background: #111827; position:relative; - top:138px; } .footer-wrap { - padding: 34px 400px; width:100%; - height:100%; + max-width:1120px; + height:96px; position: absolute; display: flex; justify-content: space-between; } -footer a { +footer a, span { color: #9CA3AF; text-align: center; font-size: 16px; @@ -209,6 +215,7 @@ footer a { } .footer-center { + color: #CFCFCF; display: flex; gap: 30px; justify-content:center; diff --git a/style/index_mobile.css b/style/index_mobile.css new file mode 100644 index 00000000..f2194afc --- /dev/null +++ b/style/index_mobile.css @@ -0,0 +1,68 @@ +@media (max-width:767px) { + .banner-text > br{ + display:inline ; + } + .banner { + height: 540px; + } + .banner-wrap { + max-width:100%; + justify-content: space-between; + } + .banner-textbox { + padding:48px 0; + gap:18px; + } + .banner-text { + max-width:240px; + font-size:32px; + text-align: center; + } + .items-button { + height:48px; + font-size:18px; + padding:12px 71px; + } + .section-left { + height:417px; + } + .section-right { + height:417px; + } + .section-left-wrap { + max-width:344px; + max-height:417px; + } + .section-right-wrap { + max-width:344px; + max-height:417px; + } + .tag { + font-size: 16px; + } + .section-text { + font-size:24px; + } + .section-text-detail { + font-size:16px; + } + .bottom { + margin-top:86px; + height:540px; + } + .bottom-textbox { + padding:0; + max-width:236px; + } + .bottom-text { + text-align: center; + font-size:32px; + } + .footer-wrap { + max-width: 311px; + } + .copyright { + position:absolute; + top:60px; + } +} \ No newline at end of file diff --git a/style/index_tablet.css b/style/index_tablet.css new file mode 100644 index 00000000..3de86cc5 --- /dev/null +++ b/style/index_tablet.css @@ -0,0 +1,83 @@ +/* tablet */ +@media (max-width:1199px) { + .section-text> br{ + display:none; + } + .banner-text > br { + display:none; + } + header { + height:70px; + padding : 0 24px; + } + + .img-home-top, .img-home-bottom { + width:100%; + } + .img-section { + max-width:100%; + } + .banner { + height:771px; + margin-bottom:24px; + } + .banner-wrap { + width:100%; + height:100%; + flex-direction: column; + } + .banner-textbox { + align-items: center; + text-align: center; + } + .section-left { + height:708px; + } + .section-left-wrap { + max-width:696px; + height:708px; + flex-direction: column; + gap:24px; + } + .tag { + font-size:18px; + margin:0px; + } + .section-textbox { + width:100%; + margin:0; + } + .section-text { + font-size:32px; + } + .section-text-detail { + font-size:19px; + line-height:26px; + } + .section-right { + height:708px; + margin: 56px 0; + } + .section-right-wrap { + max-width:696px; + height:100%; + flex-direction: column-reverse; + gap:24px; + } + .bottom { + height: 744px; + margin-top:56px; + } + .footer-wrap { + max-width:536px; + } + .bottom-wrap { + width:100%; + height:100%; + flex-direction: column; + } + .bottom-text { + margin-top: 60px; + text-align: center; + } +} \ No newline at end of file diff --git a/style/style.css b/style/style.css deleted file mode 100644 index 4c3443c3..00000000 --- a/style/style.css +++ /dev/null @@ -1,271 +0,0 @@ -* { - box-sizing: border-box; -} -/* -@media (min-width: 1920px) { - -} */ - -html { - /* word-break: keep-all; */ - font-family: Pretendard, sans-serif; - -} - -body { - width: 100%; - height: 100%; - /* max-width:1920px; */ - margin: 0; - background: #FCFCFC; - color: #fff; -} - -.wrap { - height:100%; - max-width: 1920px; - display: flex; - justify-content: space-between; - align-items: center; - align-self: stretch; - gap:auto; -} - - - -header { - display: flex; - width: 100%; - height: 70px; - padding: 9px 400px; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 10px; - flex-shrink: 0; - - border-bottom: 1px solid #DFDFDF; - background: #FFF; -} - - -.logo { - display: flex; - width: 116px; - align-items: flex-start; - gap: 12px; - cursor: pointer; -} - -.loginbutton { - display: flex; - width: 128px; - height: 48px; - padding: 12px 23px; - justify-content: center; - align-items: center; - gap: 10px; - - border-radius: 8px; - background: #3692FF; - color: #F3F4F6; - - cursor: pointer; - - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 600; - line-height: 162.5%; - text-decoration-line: none; -} - - - -.banner { - display:flex; - width: 100%; - height: 540px; - flex-shrink: 0; - background: #CFE5FF; - position:relative; - align-items:center; - justify-content:center; -} - -.banner-wrapper { - position:absolute; - bottom:0px; - display: inline-flex; - align-items: center; - gap: 7px; - -} - -.banner-textbox { - height:100%; - display: flex; - padding-bottom: 60px; - flex-direction: column; - justify-content: center; - align-items: flex-start; - gap: 32px; -} - -h1 { - color: #374151; - margin: 0; - font-family: Pretendard; - font-size: 40px; - font-style: normal; - font-weight: 700; - line-height: 140%; -} - -h3 { - color:#374151; - font-family: Pretendard; - font-size: 24px; - font-style: normal; - font-weight: 500; - line-height: 32px; /* 133.333% */ -} - -.section-textbox { - margin : 103px 0px; -} - -.tag { - color: #3692FF; - font-family: Pretendard; - font-size: 18px; - font-style: normal; - font-weight: 700; - line-height: 26px; /* 144.444% */ - - margin:12px 0px; -} - -.itemsbutton { - display: flex; - height: 56px; - padding: 16px 124px; - justify-content: center; - align-items: center; - gap: 10px; - - border-radius: 40px; - background: #3692FF; - - color: #F9FAFB; - text-align: center; - - font-family: Pretendard; - font-size: 20px; - font-style: normal; - font-weight: 600; - line-height: 32px; - text-decoration-line: none; -} - -.section1 { - width:100%; - /* max-width: 1920px; */ - display: flex; - padding: 138px 605px 138px 360px; - align-items: center; - justify-content: center; -} - -.section2 { - display: flex; - padding: 138px 360px 138px 591px; - justify-content: center; - align-items: center; - background: #FFF; - - text-align: end; -} - -.section3 { - display: flex; - padding: 138px 573px 138px 360px; - align-items: center; - justify-content: center; - background: #FFF; -} -.section-wrapper { - max-width:1920px; - display: flex; - width: 100%; - justify-content: center; - align-items: center; - gap: 64px; -} -.bottom { - display:flex; - width: 100%; - height: 540px; - flex-shrink: 0; - background: #CFE5FF; - position:relative; - top:138px; - align-items:center; - justify-content:center; -} - -footer { - display: flex; - justify-content: center; - width: 100%; - height: 160px; - /* padding: 32px 400px; */ - /* flex-direction: column; */ - gap: 10px; - flex-shrink: 0; - background: #111827; - position:relative; - top:138px; -} - -.footer-wrap { - padding: 34px 400px; - width:100%; - height:100%; - position: absolute; - display: flex; - justify-content: space-between; -} - -footer a { - color: #9CA3AF; - text-align: center; - font-family: Pretendard; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - text-decoration-line: none; - - cursor: pointer; -} - -.footer-center { - display: flex; - gap: 30px; - justify-content:center; -} - -.logo { - display:flex; - width:116px; - gap:12px; - justify-content: space-between; - cursor: pointer; -} - -.logo > a { - width:20px; - height:20px; -} -