diff --git a/common.css b/common.css new file mode 100644 index 00000000..2c5adcb5 --- /dev/null +++ b/common.css @@ -0,0 +1,27 @@ +:root { + /* Colors */ + --color-primary: #3692FF; + --color-background-blue: #CFE5FF; + --color-text-white: #F3F4F6; + --color-text-grey: #374151; + + /* Font Sizes */ + --font-size-xs: 16px; + --font-size-sm: 18px; + --font-size-md: 20px; + --font-size-lg: 24px; + --font-size-xl: 40px; + + /* Border Radius */ + --border-radius-sm: 8px; + --border-radius-md: 12px; + --border-radius-lg: 40px; +} + +body { + font-family: "Pretendard Variable"; +} + +a { + cursor: pointer; +} \ No newline at end of file diff --git a/img/Img_home_01.png b/img/Img_home_01.png new file mode 100644 index 00000000..249652e3 Binary files /dev/null and b/img/Img_home_01.png differ diff --git a/img/Img_home_02.png b/img/Img_home_02.png new file mode 100644 index 00000000..84d8629f Binary files /dev/null and b/img/Img_home_02.png differ diff --git a/img/Img_home_03.png b/img/Img_home_03.png new file mode 100644 index 00000000..eb0d6cd2 Binary files /dev/null and b/img/Img_home_03.png differ diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png new file mode 100644 index 00000000..58b29043 Binary files /dev/null and b/img/Img_home_bottom.png differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png new file mode 100644 index 00000000..7ce56caa Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png new file mode 100644 index 00000000..a3e343c7 Binary files /dev/null and b/img/ic_facebook.png differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png new file mode 100644 index 00000000..c47e044d Binary files /dev/null and b/img/ic_instagram.png differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png new file mode 100644 index 00000000..3f74b730 Binary files /dev/null and b/img/ic_twitter.png differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png new file mode 100644 index 00000000..874150b0 Binary files /dev/null and b/img/ic_youtube.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 00000000..8248f602 Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..901a7f3d --- /dev/null +++ b/index.html @@ -0,0 +1,101 @@ + + + + + + 판다마켓 + + + + + + +
+
+ + 로그인 +
+
+ +
+ + + + +
+
+ +
+ Hot item + 인기 상품을
확인해 보세요 + 가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요 +
+
+
+ + +
+
+
+ Search + 구매를 원하는
상품을 검색하세요 + 구매하고 싶은 물품은 검색해서
쉽게 찾아보세요 +
+ +
+
+ + +
+
+ +
+ Register + 판매를 원하는
상품을 등록하세요 + 어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요 +
+
+
+ + +
+
+ 믿을 수 있는
판다마켓 중고 거래 + 판다마켓 하단 배너 +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..45f760e4 --- /dev/null +++ b/reset.css @@ -0,0 +1,5 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..c46e26b3 --- /dev/null +++ b/style.css @@ -0,0 +1,216 @@ +header { + padding: 9.5px 0; +} + +.btn { + background-color: var(--color-primary); + text-decoration: none; + color: var(--color-text-white); + padding: 12px 20px; + display: flex; + justify-content: center; + align-items: center; +} + +.btn-small { + border-radius: var(--border-radius-sm); + min-width: 128px; + height: 48px; +} + +.btn-large { + border-radius: var(--border-radius-lg); + max-width: 357px; + min-width: 150px; + height: 56px; +} + +.header__content { + padding: 0 200px; + max-width: 1520px; + margin: 0 auto; + color: #ffffff; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header__content__logo { + width: 153px; +} + +.banner { + background-color: var(--color-background-blue); +} + +.banner__content { + max-width: 1110px; + padding-top: 200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.banner__content__text { + display: flex; + flex-direction: column; + margin-bottom: 100px; +} + + +.banner__content__text__title { + font-size: var(--font-size-xl); + font-weight: 700; + margin-bottom: 32px; + color: var(--color-text-grey); +} + +.banner__content__img { + max-width: 746px; + width: 80%; +} + +.feature { + padding: 138px 0; +} + +.feature__content { + max-width: 988px; + margin: 0 auto; + background-color: #FCFCFC; + border-radius: var(--border-radius-md); + display: flex; + align-items: center; + gap: 64px; +} + +.feature__content__img { + max-width: 579px; + width: 60%; +} + +.feature__content__text { + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.feature__content__text__point { + font-size: var(--font-size-sm); + font-weight: 700; + color: var(--color-primary); +} + +.feature__content__text__title { + font-size: var(--font-size-xl); + font-weight: 700; + color: var(--color-text-grey); + margin-top: 12px; + margin-bottom: 24px; +} + +.feature__content__text__subtitle { + font-size: var(--font-size-lg); + font-weight: 500; + color: var(--color-text-grey); +} + +.text-right { + text-align: right; +} + +/* 하단 배너 */ +.bottom__banner { + background-color: var(--color-background-blue); +} + +.bottom__banner__content { + max-width: 1110px; + padding-top: 143px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.bottom__banner__content__img { + max-width: 746px; + width: 80%; +} + +.bottom__banner__content__title { + font-size: var(--font-size-xl); + font-weight: 700; + color: var(--color-text-grey); + padding-bottom: 172px; +} + + +/* 푸터 */ +footer { + background-color: #111827; + padding: 32px 0 108px; +} + +.footer__content { + max-width: 1120px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer__content__copyright { + font-size: var(--font-size-xs); + font-weight: 400; + color: #9CA3AF; +} + +.footer__content__link a { + text-decoration: none; + color: #E5E7EB; + font-size: var(--font-size-xs); + font-weight: 400; +} + +.footer__content__link { + display: flex; + gap: 30px; +} + +.footer__content__sns { + display: flex; + gap: 12px; +} + + +@media all and (max-width:1023px) { + .header__content { + padding: 0 20px; + } + + .banner__content { + flex-direction: column; + align-items: center; + } + + .feature { + padding: 70px 0; + } + + .feature__content { + align-items: center; + background: none; + flex-direction: column; + } + + .feature__content__reverse { + flex-direction: column-reverse; + } + + .bottom__banner__content { + flex-direction: column; + align-items: center; + } +} \ No newline at end of file