diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/faq.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/fonts/ROKAF_Slab_Serif_Bold.woff b/fonts/ROKAF_Slab_Serif_Bold.woff new file mode 100644 index 00000000..6b8de366 Binary files /dev/null and b/fonts/ROKAF_Slab_Serif_Bold.woff differ diff --git a/images/Icon/ic_facebook.png b/images/Icon/ic_facebook.png new file mode 100644 index 00000000..a3e343c7 Binary files /dev/null and b/images/Icon/ic_facebook.png differ diff --git a/images/Icon/ic_instagram.png b/images/Icon/ic_instagram.png new file mode 100644 index 00000000..c47e044d Binary files /dev/null and b/images/Icon/ic_instagram.png differ diff --git a/images/Icon/ic_twitter.png b/images/Icon/ic_twitter.png new file mode 100644 index 00000000..3f74b730 Binary files /dev/null and b/images/Icon/ic_twitter.png differ diff --git a/images/Icon/ic_youtube.png b/images/Icon/ic_youtube.png new file mode 100644 index 00000000..874150b0 Binary files /dev/null and b/images/Icon/ic_youtube.png differ diff --git a/images/logo/logo.png b/images/logo/logo.png new file mode 100644 index 00000000..c00710bc Binary files /dev/null and b/images/logo/logo.png differ diff --git a/images/main/Img_home_01.png b/images/main/Img_home_01.png new file mode 100644 index 00000000..c5b511a9 Binary files /dev/null and b/images/main/Img_home_01.png differ diff --git a/images/main/Img_home_02.png b/images/main/Img_home_02.png new file mode 100644 index 00000000..74bef1b2 Binary files /dev/null and b/images/main/Img_home_02.png differ diff --git a/images/main/Img_home_03.png b/images/main/Img_home_03.png new file mode 100644 index 00000000..5ab0bab7 Binary files /dev/null and b/images/main/Img_home_03.png differ diff --git a/images/main/Img_home_bottom.png b/images/main/Img_home_bottom.png new file mode 100644 index 00000000..097bdc25 Binary files /dev/null and b/images/main/Img_home_bottom.png differ diff --git a/images/main/Img_home_top.png b/images/main/Img_home_top.png new file mode 100644 index 00000000..7ce56caa Binary files /dev/null and b/images/main/Img_home_top.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..755f2c54 --- /dev/null +++ b/index.html @@ -0,0 +1,92 @@ + + + + + + + + 판다마켓 + + +
+ +
+
+ +
+
+ +
+

Hot item

+

인기 상품을 확인해 보세요

+

가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요

+
+
+
+
+
+ +
+

Search

+

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

+

구매하고 싶은 물품은 검색해서
쉽게 찾아보세요

+
+
+
+
+
+ +
+

Register

+

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

+

어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요

+
+
+
+ +
+ + + \ No newline at end of file diff --git a/items.html b/items.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/items.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/login.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/privacy.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..f8659e30 --- /dev/null +++ b/style.css @@ -0,0 +1,333 @@ +* { + box-sizing: border-box; + margin: 0; +} + +html { + font-family: 'Pretendard', sans-serif; +} + +body { + margin: 0; +} + +@font-face { + font-family: 'ROKAF Sans'; + src: url("fonts/ROKAF_Slab_Serif_Bold.woff") format('woff'); +} + +a { + cursor: pointer; + text-decoration: none; +} + +.text-wrap{ + display: block; +} + + +/*herader section*/ +header { + border-bottom: 1px solid #DFDFDF; +} + +.herader-nav { + display: flex; + justify-content: space-between; + align-items: center; + margin-inline: 200px; + padding-block: 9px; +} + +.header__logo-box { + display: flex; + align-items: center; + gap: 10px; +} +.header__logo{ + width: 40px; + height: 40px; +} + +.header__title { + font-size: 25px; + font-weight: 700; + color: #3692FF; + font-family: 'ROKAF Sans', sans-serif; + margin-bottom: 5px; +} + +.header__button { + border-radius: 8px; + width: 128px; + height: 48px; + padding: 14px 23px; + color: #F3F4F6; +} + + +/*banner section*/ +.banner-section { + background-color: #CFE5FF; +} + +.banner { + display: flex; + justify-content: center; + align-items: flex-end; + height: 540px; + gap: 7px; +} + +.banner__title { + display: flex; + align-items: flex-start; + flex-direction: column; + gap: 32px; +} + +.banner__text { + font-weight: 700; + font-size: 40px; + color: #374151; + line-height: 56px; +} + + +.banner__button { + border-radius: 40px; + padding: 16px 124px; + width: 357px; + height: 56px; + color: #F9FAFB; + font-size: 20px; + margin-bottom: 110px; +} + +.bottom-banner { + margin-top: 138px; +} + + +.banner__img { + width: 60vw; + max-width: 746px; + height: auto; +} + +.button { + display: inline-block; + background-color: #3692FF; + font-weight: 600; + text-align: center; +} + +.button:hover { + background-color: #1967D6; +} + + +/*card section*/ +.card-section { + display: flex; + justify-content: center; + align-items: center; + padding-block: 138px; +} + +.card { + display: flex; + align-items: center; + width: 988px; + height: 437px; + background-color: #FCFCFC; + border-radius: 12px; + gap : 64px; +} + +.card__img { + max-width: 579px; + width: 100%; + height: 100%; +} + +.card__text { + display: flex; + flex-direction: column; + justify-content: center; + gap: 12px; + width: auto; + height: 238px; + white-space: nowrap; +} + +.card__category { + font-size: 18px; + color: #3692FF; + font-weight: 700; +} + +.card__title { + font-size: 40px; + font-weight: 700; + color: #374151; + line-height: 56px; +} + +.card__description { + font-size: 24px; + font-weight: 500; + color: #374151; + line-height: 32px; +} + +.card--reverse { + flex-direction: row-reverse; + text-align: right; +} + +.banner__title--center { + align-self: center; + padding-top: 30px; +} + +/*footer section*/ +.footer{ + display: flex; + justify-content: space-around; + background-color: #111827; + padding-top: 32px; + height: 160px; + font-size: 16px; + font-weight: 400; +} + +.footer__name{ + color: #9CA3AF; +} + +.footer-links{ + display: flex; + gap: 30px; +} + +.footer__link{ + color: #E5E7EB; +} + +.footer-icons{ + display: flex; + gap: 12px; +} + +/*Laptop Version*/ +@media (max-width: 1024px) { + + .herader-nav { + margin-inline: 10%; + } + + .banner { + height: 450px; + } + + .banner__button { + width: 100%; + white-space: nowrap; + text-align: center; + padding: 16px 96px; + } + + .card { + max-width: 760px; + height: 437px; + gap: 48px; + } + + .card__img { + width: 60%; + } + + .card__title { + font-size: 32px; + } + + .card__description { + font-size: 18px; + } + +} + + +/*Tablet Version*/ +@media (max-width: 768px) { + + .herader-nav { + margin-inline: 10%; + } + + .banner { + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 771px; + gap: 0; + } + + .banner__button { + width: auto; + padding: 16px 124px; + } + + .banner__title { + align-items: center; + text-align: center; + margin-top: 10%; + } + + .text-wrap{ + display: inline; + } + + .banner__img { + max-width: 744px; + width: 100%; + } + + .card { + max-width: 696px; + height: 708px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + } + + .card__text { + text-align: left; + height: 160px; + gap: 24px; + } + + .card__title { + font-size: 32px; + line-height: 26px; + } + + .card__description { + font-size: 18px; + } + + .card__img { + max-width: 696px; + width: auto; + height: auto; + } + + .card--reverse { + align-items: flex-end; + } + + .card__text--reverse { + text-align: right; + } +} \ No newline at end of file