diff --git a/sprint1/images/Img_home_01.png b/sprint1/images/Img_home_01.png new file mode 100644 index 00000000..5c01d637 Binary files /dev/null and b/sprint1/images/Img_home_01.png differ diff --git a/sprint1/images/Img_home_02.png b/sprint1/images/Img_home_02.png new file mode 100644 index 00000000..df1ed620 Binary files /dev/null and b/sprint1/images/Img_home_02.png differ diff --git a/sprint1/images/Img_home_03.png b/sprint1/images/Img_home_03.png new file mode 100644 index 00000000..3a2f16e3 Binary files /dev/null and b/sprint1/images/Img_home_03.png differ diff --git a/sprint1/images/Img_home_bottom.png b/sprint1/images/Img_home_bottom.png new file mode 100644 index 00000000..ca4ffb43 Binary files /dev/null and b/sprint1/images/Img_home_bottom.png differ diff --git a/sprint1/images/Img_home_top.png b/sprint1/images/Img_home_top.png new file mode 100644 index 00000000..11a34727 Binary files /dev/null and b/sprint1/images/Img_home_top.png differ diff --git a/sprint1/images/Img_inquiry_empty.png b/sprint1/images/Img_inquiry_empty.png new file mode 100644 index 00000000..3b9a7c6b Binary files /dev/null and b/sprint1/images/Img_inquiry_empty.png differ diff --git a/sprint1/images/Img_reply_empty.png b/sprint1/images/Img_reply_empty.png new file mode 100644 index 00000000..c845cc10 Binary files /dev/null and b/sprint1/images/Img_reply_empty.png differ diff --git a/sprint1/images/ic_facebook.png b/sprint1/images/ic_facebook.png new file mode 100644 index 00000000..8a99d0de Binary files /dev/null and b/sprint1/images/ic_facebook.png differ diff --git a/sprint1/images/ic_instagram.png b/sprint1/images/ic_instagram.png new file mode 100644 index 00000000..774ba83f Binary files /dev/null and b/sprint1/images/ic_instagram.png differ diff --git a/sprint1/images/ic_twitter.png b/sprint1/images/ic_twitter.png new file mode 100644 index 00000000..75f85548 Binary files /dev/null and b/sprint1/images/ic_twitter.png differ diff --git a/sprint1/images/ic_youtube.png b/sprint1/images/ic_youtube.png new file mode 100644 index 00000000..19e6e6ce Binary files /dev/null and b/sprint1/images/ic_youtube.png differ diff --git a/sprint1/images/img_default.png b/sprint1/images/img_default.png new file mode 100644 index 00000000..be9f57c1 Binary files /dev/null and b/sprint1/images/img_default.png differ diff --git a/sprint1/images/img_logo.png b/sprint1/images/img_logo.png new file mode 100644 index 00000000..64228065 Binary files /dev/null and b/sprint1/images/img_logo.png differ diff --git a/sprint1/images/img_logo_m.png b/sprint1/images/img_logo_m.png new file mode 100644 index 00000000..386b9c09 Binary files /dev/null and b/sprint1/images/img_logo_m.png differ diff --git a/sprint1/index.html b/sprint1/index.html new file mode 100644 index 00000000..08ec4fc8 --- /dev/null +++ b/sprint1/index.html @@ -0,0 +1,84 @@ + + + + + + 판다마켓 + + + +
+
+ + 로그인 +
+
+
+ +
+
+ Img_home_01 +
+ Hot item +

인기 상품을 확인해 보세요

+

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

+
+
+
+
+
+ Img_home_02 +
+ Search +

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

+

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

+
+
+
+
+
+ +
+ Register +

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

+

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

+
+
+
+ +
+ + + \ No newline at end of file diff --git a/sprint1/style.css b/sprint1/style.css new file mode 100644 index 00000000..e6846e1c --- /dev/null +++ b/sprint1/style.css @@ -0,0 +1,283 @@ +/* + 2025.04.01 + 스프린트 미션 1 + 박연희 +*/ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + text-decoration: none; +} +a { + color: inherit; +} + +/* 폰트 */ +@font-face { + font-family: 'Pretendard-Regular'; + src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} + +/* 버튼 btn */ +.btn { + cursor: pointer; + display: inline-block; + text-align: center; + white-space: nowrap; +} +.btn_large { + padding: 12px 124px; + border-radius: 40px; + font-size: 20px; +} +.btn_medium { + padding: 11px 71px; + border-radius: 40px; + font-size: 18px; +} +.btn_small { + padding: 8px 23px; + border-radius: 8px; + font-size: 16px; +} +.btn-color1 { + color: #ffffff; + background-color: #3692FF; +} + +/* 기본넓이 */ +.default-width { + max-width: 1920px; + margin: 0 auto; + transition: 0.5s; +} + +/* body */ +body { + font-family: 'Pretendard-Regular'; + background-color: #ffffff; + color: #374151; + font-weight: 400; +} + +/* header */ +.header-inner { + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; +} +.logo-mobile { + display: none; +} + +/* section */ +section { + display: flex; + justify-content: center; + align-items: center; + padding: 0 25px; +} +section h1 { + font-size: 40px; + line-height: 1.5; + max-width: 320px; + word-break: keep-all; +} +section img { + min-width: 100px; + max-width: 588px; + width: 100%; +} + +/* main > banner-section */ +.banner-section { + background-color: #CFE5FF; +} +.banner-section .item { + margin-top: 100px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.banner-section .btn { + margin-top: 32px; +} +.banner-section img { + margin-top: 200px; +} + +/* main > content-section */ +.content-section { + height: 720px; +} +.content-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 13px; + background-color: #FCFCFC; + gap: 25px; +} +.content-box.reverse { + flex-direction: row-reverse; + text-align: right; +} +.content-box h1 { + margin-bottom: 24px; +} +.content-box p { + color: #374151; + font-size: 24px; + line-height: 1.3; + max-width: 320px; + word-break: keep-all; +} +.content-badge { + display: inline-block; + margin-bottom: 12px; + color: #3692FF; + font-size: 18px; + font-weight: bold; +} + +/* footer */ +footer { + height: 160px; + background-color: #111827; + color: #ffffff; + font-size: 16px; +} +footer .default-width { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 20px; + padding-top: 32px; +} +footer .copyRight { + color: #9CA3AF; + font-weight: 400; +} +footer .support-btn, +footer .sns-btn { + display: flex; +} +footer .support-btn { + color: #E5E7EB; + gap: 15px; +} +footer .sns-btn { + text-align: right; + gap: 12px; +} + +/* 반응형 */ +@media (max-width: 1950px) { + .default-width { + padding: 0 200px; + } +} +@media (max-width: 1350px) { + .default-width { + padding: 0 25px; + } +} +/* 타블렛 */ +@media (max-width: 768px) { + /* section */ + section { + background-color: #FCFCFC; + } + section h1 { + max-width: none; + } + /* section > banner-section */ + section.banner-section, + .content-box.reverse { + flex-direction: column; + } + section.banner-section h1{ + text-align: center; + } + /* section > content-box */ + .content-box { + flex-direction: column; + align-items: normal; + } + .content-box h1 { + font-size: 32px; + } + .content-box p { + font-size: 18px; + } + .content-box.reverse p { + float: right; + } +} + +@media (max-width: 460px) { + /* footer */ + footer p { + order: 3; + } + footer .support-btn { + order: 1; + } + footer .sns-btn { + order: 2; + } +} + +@media (max-width: 375px) { + .default-width, + section { + padding: 0 18px; + } + /* header */ + .logo-img { + display: none; + } + .logo-mobile { + display: block; + } + /* section > banner-section */ + section.banner-section h1 { + font-size: 32px; + max-width: 240px; + } + .banner-section .btn { + margin-top: 18px; + } + .banner-section img { + margin-top: 120px; + } + /* section > content-section */ + .content-section { + height: 450px; + } + .btn_large { + padding: 11px 71px; + border-radius: 40px; + font-size: 18px; + } + .content-box h1 { + font-size: 24px; + margin-bottom: 16px; + } + .content-badge, + .content-box p { + font-size: 16px; + } + .content-badge { + margin-bottom: 8px; + } + .content-box p { + max-width: 200px; + } +} \ No newline at end of file