diff --git a/sprint1/dist/css/style.min.css b/sprint1/dist/css/style.min.css new file mode 100644 index 000000000..bcb89ac64 --- /dev/null +++ b/sprint1/dist/css/style.min.css @@ -0,0 +1,236 @@ +/* reset */ +body, h1, h2, h3, h4, h5, h6, p { + margin: 0; +} + +a { + text-decoration: none; +} + +ul, dl { + margin: 0; + padding: 0; + list-style: none; +} + +/* common */ +:root { + --brand-blue:#3692FF; + --grey700: #374151; +} + +.blind { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + clip: rect(0, 0, 0, 0); + overflow: hidden; +} + +/* component */ +.btn-large:visited, +.btn-small:visited { + color: #fff; +} +.btn-large:hover, +.btn-small:hover { + background: #1967D6; + color: #fff; +} +.btn-large:active, +.btn-small:active { + background: #1251AA; + color: #fff; +} +.btn-large:disabled, +.btn-small:disabled { + background: #9CA3AF; + color: #fff; +} +.btn-large:link, +.btn-small:link { + color: #fff; +} + +.btn-large { + display: inline-block; + width: 355px; + height: 24px; + padding: 16px 0; + background: var(--brand-blue); + border: 0; + border-radius: 40px; + font-family: Pretendard, sans-serif; + font-size: 20px; + font-weight: 600; + color: #fff; + text-align: center; + line-height: 24px; +} + +.btn-small { + display: inline-block; + width: 128px; + height: 20px; + padding: 14px 0; + background: var(--brand-blue); + border: 0; + border-radius: 8px; + text-align: center; + font-family: Pretendard, sans-serif; + font-size: 16px; + font-weight: 600; + color: #fff; + line-height: 20px; +} + +/* layout */ +.wrap { + display: grid; + grid-template-rows: 70px 1fr 160px; +} + +.header { + display: flex; + box-sizing: border-box; + width: 100vw; + align-items: center; + justify-content: space-between; + padding: 0 10.42vw; + background: #fff; +} +.header .img-logo { + display: flex; +} + +.section-wrap { + position: relative; + max-width: 1200px; + margin: 0 auto; +} +@media screen and (max-width: 1200px) { + .section-wrap { + max-width: 100vw; + } +} + +.footer { + display: flex; + box-sizing: border-box; + width: 100vw; + justify-content: space-between; + padding: 32px 10.42vw 0; + background: #111827; + color: #fff; +} +.footer .footer-tit { + font-family: Pretendard, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 19px; +} +.footer .footer-nav { + display: flex; + gap: 3.07vw; +} +.footer .footer-sns { + display: flex; + gap: 0.625vw; +} +.footer .link:visited { + color: #fff; +} +.footer .link:link { + color: #fff; +} + +/* index */ +.section-banner.top { + background: url("../img/Img_home_top.png") no-repeat #CFE5FF; + background-position: left calc(50% + 238px) bottom 0; +} +.section-banner.bottom { + background: url("../img/Img_home_bottom.png") no-repeat #CFE5FF; + background-position: left calc(50% + 238px) bottom 0; +} +.section-banner .section-wrap { + display: flex; + height: 540px; + flex-direction: column; + justify-content: center; + gap: 32px; +} +.section-banner .banner-img { + position: relative; + right: 0; + transform: translateX(133px); + font-size: 0; + text-align: right; +} +.section-banner .banner-tit { + max-width: 355px; + font-family: Pretendard, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 56px; + word-break: keep-all; + color: var(--grey700); +} + +.section-desc { + padding: 138px 0; +} +.section-desc.right .section-img { + order: 2; +} +.section-desc.right .section-wrap { + justify-content: flex-end; +} +.section-desc.right .section-content { + align-items: flex-end; + text-align: right; +} +.section-desc .section-wrap { + display: flex; + gap: 5.3vw; +} +.section-desc .section-img { + flex: 0 0; +} +@media screen and (max-width: 1200px) { + .section-desc .section-img img { + max-width: 49vw; + } +} +.section-desc .section-content { + display: flex; + flex: 1 1; + flex-direction: column; + justify-content: center; + word-break: keep-all; + color: var(--grey700); +} +.section-desc .topic { + font-family: Pretendard, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 25px; + color: var(--brand-blue); +} +.section-desc .tit { + margin: 12px 0 24px; + font-family: Pretendard, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02em; + max-width: 300px; +} +.section-desc .content { + font-family: Pretendard, sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 29px; + letter-spacing: 0.08em; +} \ No newline at end of file diff --git a/sprint1/dist/img/Img_home_01.png b/sprint1/dist/img/Img_home_01.png new file mode 100644 index 000000000..45f1b79ac Binary files /dev/null and b/sprint1/dist/img/Img_home_01.png differ diff --git a/sprint1/dist/img/Img_home_02.png b/sprint1/dist/img/Img_home_02.png new file mode 100644 index 000000000..d8d6ef1de Binary files /dev/null and b/sprint1/dist/img/Img_home_02.png differ diff --git a/sprint1/dist/img/Img_home_03.png b/sprint1/dist/img/Img_home_03.png new file mode 100644 index 000000000..f9a3271e1 Binary files /dev/null and b/sprint1/dist/img/Img_home_03.png differ diff --git a/sprint1/dist/img/Img_home_bottom.png b/sprint1/dist/img/Img_home_bottom.png new file mode 100644 index 000000000..f140fd8b1 Binary files /dev/null and b/sprint1/dist/img/Img_home_bottom.png differ diff --git a/sprint1/dist/img/Img_home_top.png b/sprint1/dist/img/Img_home_top.png new file mode 100644 index 000000000..ff54e0fd4 Binary files /dev/null and b/sprint1/dist/img/Img_home_top.png differ diff --git a/sprint1/dist/img/ic_facebook.svg b/sprint1/dist/img/ic_facebook.svg new file mode 100644 index 000000000..8491c2f83 --- /dev/null +++ b/sprint1/dist/img/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/sprint1/dist/img/ic_instagram.svg b/sprint1/dist/img/ic_instagram.svg new file mode 100644 index 000000000..c83306f84 --- /dev/null +++ b/sprint1/dist/img/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/sprint1/dist/img/ic_twitter.svg b/sprint1/dist/img/ic_twitter.svg new file mode 100644 index 000000000..14a6069a1 --- /dev/null +++ b/sprint1/dist/img/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/sprint1/dist/img/ic_youtube.svg b/sprint1/dist/img/ic_youtube.svg new file mode 100644 index 000000000..251f0adae --- /dev/null +++ b/sprint1/dist/img/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/sprint1/dist/img/logo.png b/sprint1/dist/img/logo.png new file mode 100644 index 000000000..4f6bc7bf9 Binary files /dev/null and b/sprint1/dist/img/logo.png differ diff --git a/sprint1/dist/scss/_common.scss b/sprint1/dist/scss/_common.scss new file mode 100644 index 000000000..3de9bacc2 --- /dev/null +++ b/sprint1/dist/scss/_common.scss @@ -0,0 +1,14 @@ +/* common */ +:root { + --brand-blue:#3692FF; + --grey700: #374151; +} + +.blind { + position:absolute; + width:1px; + height:1px; + margin:-1px; + clip:rect(0,0,0,0); + overflow:hidden; +} \ No newline at end of file diff --git a/sprint1/dist/scss/_component.scss b/sprint1/dist/scss/_component.scss new file mode 100644 index 000000000..7f1026d37 --- /dev/null +++ b/sprint1/dist/scss/_component.scss @@ -0,0 +1,53 @@ +/* component */ +.btn-large, +.btn-small { + &:visited { + color:#fff; + } + &:hover { + background:#1967D6; + color:#fff; + } + &:active { + background:#1251AA; + color:#fff; + } + &:disabled { + background:#9CA3AF; + color:#fff; + } + &:link { + color:#fff; + } +} +.btn-large { + display:inline-block; + width:355px; + height:24px; + padding:16px 0; + background:var(--brand-blue); + border:0; + border-radius:40px; + font-family: Pretendard, sans-serif; + font-size: 20px; + font-weight: 600; + color:#fff; + text-align:center; + line-height:24px; +} + +.btn-small { + display:inline-block; + width: 128px; + height:20px; + padding:14px 0; + background:var(--brand-blue); + border:0; + border-radius: 8px; + text-align:center; + font-family: Pretendard, sans-serif; + font-size: 16px; + font-weight: 600; + color:#fff; + line-height:20px; +} \ No newline at end of file diff --git a/sprint1/dist/scss/_index.scss b/sprint1/dist/scss/_index.scss new file mode 100644 index 000000000..b85b8246f --- /dev/null +++ b/sprint1/dist/scss/_index.scss @@ -0,0 +1,92 @@ +/* index */ +.section-banner { + &.top { + background:url("../img/Img_home_top.png") no-repeat #CFE5FF; + background-position:left calc(50% + 238px) bottom 0; + } + &.bottom { + background:url("../img/Img_home_bottom.png") no-repeat #CFE5FF; + background-position:left calc(50% + 238px) bottom 0; + } + .section-wrap { + display:flex; + height:540px; + flex-direction:column; + justify-content:center; + gap:32px; + } + .banner-img { + position:relative; + right:0; + transform:translateX(133px); + font-size:0; + text-align:right; + } + .banner-tit { + max-width:355px; + font-family: Pretendard, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 56px; + word-break: keep-all; + color:var(--grey700); + } +} +.section-desc { + padding:138px 0; + &.right { + .section-img { + order:2; + } + .section-wrap { + justify-content:flex-end; + } + .section-content { + align-items:flex-end; + text-align:right; + } + } + .section-wrap { + display:flex; + gap:5.3vw; + } + .section-img { + flex:0 0; + } + .section-img img { + @media screen and (max-width : 1200px){ + max-width:49vw; + } + } + .section-content { + display:flex; + flex:1 1; + flex-direction:column; + justify-content:center; + word-break:keep-all; + color:var(--grey700); + } + .topic { + font-family: Pretendard, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 25px; + color:var(--brand-blue); + } + .tit { + margin:12px 0 24px; + font-family: Pretendard, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02em; + max-width:300px; + } + .content { + font-family: Pretendard, sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 29px; + letter-spacing: 0.08em; + } +} \ No newline at end of file diff --git a/sprint1/dist/scss/_layout.scss b/sprint1/dist/scss/_layout.scss new file mode 100644 index 000000000..a11196202 --- /dev/null +++ b/sprint1/dist/scss/_layout.scss @@ -0,0 +1,59 @@ +/* layout */ +.wrap { + display:grid; + grid-template-rows:70px 1fr 160px; +} +.header { + display:flex; + box-sizing:border-box; + width:100vw; + align-items:center; + justify-content:space-between;; + padding:0 10.42vw; + background:#fff; + + .img-logo { + display:flex; + } +} + +.section-wrap { + position:relative; + max-width:1200px; + margin:0 auto; + @media screen and (max-width : 1200px){ + max-width:100vw; + } +} + +.footer { + display:flex; + box-sizing:border-box; + width:100vw; + justify-content:space-between; + padding:32px 10.42vw 0; + background:#111827; + color:#fff; + .footer-tit { + font-family: Pretendard, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 19px; + } + .footer-nav { + display:flex; + gap:3.07vw; + } + .footer-sns { + display:flex; + gap:0.625vw; + } + .link { + &:visited { + color:#fff; + } + &:link { + color:#fff; + } + } +} \ No newline at end of file diff --git a/sprint1/dist/scss/_reset.scss b/sprint1/dist/scss/_reset.scss new file mode 100644 index 000000000..f92a4885a --- /dev/null +++ b/sprint1/dist/scss/_reset.scss @@ -0,0 +1,14 @@ +/* reset */ +body, h1, h2, h3, h4, h5, h6, p { + margin:0; +} + +a { + text-decoration:none; +} + +ul, dl { + margin:0; + padding:0; + list-style:none; +} \ No newline at end of file diff --git a/sprint1/dist/scss/style.scss b/sprint1/dist/scss/style.scss new file mode 100644 index 000000000..7be7e8b6c --- /dev/null +++ b/sprint1/dist/scss/style.scss @@ -0,0 +1,5 @@ +@import "_reset.scss"; +@import "_common.scss"; +@import "_component.scss"; +@import "_layout.scss"; +@import "_index.scss"; \ No newline at end of file diff --git a/sprint1/index.html b/sprint1/index.html new file mode 100644 index 000000000..96f4ff12c --- /dev/null +++ b/sprint1/index.html @@ -0,0 +1,100 @@ + + + + + + 판다마켓 + + + + +
+
+

+ + + 판다마켓 + +

+
+ 로그인 +
+
+
+
+
+ + +
+
+
+
+
+
+ 인기 상품 이미지 +
+
+ Hot item +

인기 상품을 확인해 보세요

+
+

가장 HOT한 중고거래 물품을

+

판다 마켓에서 확인해 보세요

+
+
+
+
+
+
+
+ 상품 검색 이미지 +
+
+ Search +

구매를 원하는 상품을 검색하세요

+
+

구매하고 싶은 물품은

+

검색해서 쉽게 찾아보세요

+
+
+
+
+
+
+
+ 상품 등록 이미지 +
+
+ Register +

판매를 원하는 상품을 등록하세요

+
+

어떤 물건이든 판매하고 싶은 상품을

+

쉽게 등록하세요

+
+
+
+
+
+
+
+ +
+
+
+ +
+ + \ No newline at end of file