diff --git a/SPRINT-MISSION-1/faq.html b/SPRINT-MISSION-1/faq.html new file mode 100644 index 00000000..e69de29b diff --git a/SPRINT-MISSION-1/images/home/Img_home_01.png b/SPRINT-MISSION-1/images/home/Img_home_01.png new file mode 100644 index 00000000..dc44b320 Binary files /dev/null and b/SPRINT-MISSION-1/images/home/Img_home_01.png differ diff --git a/SPRINT-MISSION-1/images/home/Img_home_02.png b/SPRINT-MISSION-1/images/home/Img_home_02.png new file mode 100644 index 00000000..bab9a533 Binary files /dev/null and b/SPRINT-MISSION-1/images/home/Img_home_02.png differ diff --git a/SPRINT-MISSION-1/images/home/Img_home_03.png b/SPRINT-MISSION-1/images/home/Img_home_03.png new file mode 100644 index 00000000..c97c6f90 Binary files /dev/null and b/SPRINT-MISSION-1/images/home/Img_home_03.png differ diff --git a/SPRINT-MISSION-1/images/home/Img_home_bottom.png b/SPRINT-MISSION-1/images/home/Img_home_bottom.png new file mode 100644 index 00000000..3cb85ab3 Binary files /dev/null and b/SPRINT-MISSION-1/images/home/Img_home_bottom.png differ diff --git a/SPRINT-MISSION-1/images/home/Img_home_top.png b/SPRINT-MISSION-1/images/home/Img_home_top.png new file mode 100644 index 00000000..a1773996 Binary files /dev/null and b/SPRINT-MISSION-1/images/home/Img_home_top.png differ diff --git a/SPRINT-MISSION-1/images/logo/favicon.ico b/SPRINT-MISSION-1/images/logo/favicon.ico new file mode 100644 index 00000000..b4c0f9ab Binary files /dev/null and b/SPRINT-MISSION-1/images/logo/favicon.ico differ diff --git a/SPRINT-MISSION-1/images/logo/panda-market-logo.png b/SPRINT-MISSION-1/images/logo/panda-market-logo.png new file mode 100644 index 00000000..4351d0b5 Binary files /dev/null and b/SPRINT-MISSION-1/images/logo/panda-market-logo.png differ diff --git a/SPRINT-MISSION-1/images/social/ic_facebook.png b/SPRINT-MISSION-1/images/social/ic_facebook.png new file mode 100644 index 00000000..4c329327 Binary files /dev/null and b/SPRINT-MISSION-1/images/social/ic_facebook.png differ diff --git a/SPRINT-MISSION-1/images/social/ic_instagram.png b/SPRINT-MISSION-1/images/social/ic_instagram.png new file mode 100644 index 00000000..44b98406 Binary files /dev/null and b/SPRINT-MISSION-1/images/social/ic_instagram.png differ diff --git a/SPRINT-MISSION-1/images/social/ic_twitter.png b/SPRINT-MISSION-1/images/social/ic_twitter.png new file mode 100644 index 00000000..8f28b321 Binary files /dev/null and b/SPRINT-MISSION-1/images/social/ic_twitter.png differ diff --git a/SPRINT-MISSION-1/images/social/ic_youtube.png b/SPRINT-MISSION-1/images/social/ic_youtube.png new file mode 100644 index 00000000..6d6a7582 Binary files /dev/null and b/SPRINT-MISSION-1/images/social/ic_youtube.png differ diff --git a/SPRINT-MISSION-1/index.html b/SPRINT-MISSION-1/index.html new file mode 100644 index 00000000..384feceb --- /dev/null +++ b/SPRINT-MISSION-1/index.html @@ -0,0 +1,142 @@ + + + + + + 판다마켓 + + + + + + +
+ 판다마켓 홈 + 로그인 +
+ +
+ + +
+
+
+ 인기 상품 +
+
+
+

Hot item

+

+ 인기 상품을
+ 확인해보세요 +

+
+

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

+
+
+
+
+
+

Search

+

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

+
+

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

+
+
+ +
+
+
+
+ 판매 상품 등록 +
+
+
+

Register

+

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

+
+

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

+
+
+
+ + +
+ + + + diff --git a/SPRINT-MISSION-1/items.html b/SPRINT-MISSION-1/items.html new file mode 100644 index 00000000..e69de29b diff --git a/SPRINT-MISSION-1/login.html b/SPRINT-MISSION-1/login.html new file mode 100644 index 00000000..e69de29b diff --git a/SPRINT-MISSION-1/privacy.html b/SPRINT-MISSION-1/privacy.html new file mode 100644 index 00000000..e69de29b diff --git a/SPRINT-MISSION-1/styles/color.css b/SPRINT-MISSION-1/styles/color.css new file mode 100644 index 00000000..ef042a43 --- /dev/null +++ b/SPRINT-MISSION-1/styles/color.css @@ -0,0 +1,21 @@ +:root { + /* Primary Colors */ + --primary-100: #3692FF; + --primary-200: #1967D6; + --primary-300: #1251AA; + + /* Secondary Colors */ + --gray-900: #111827; + --gray-800: #1F2937; + --gray-700: #374151; + --gray-600: #4B5563; + --gray-500: #6B7280; + --gray-400: #9CA3AF; + --gray-300: #E5E7EB; + --gray-200: #F3F4F6; + --gray-100: #F9FAFB; + --gray-50: #F9FAFB; + + /*Error Color */ + --error-red: #F74747; +} \ No newline at end of file diff --git a/SPRINT-MISSION-1/styles/components/button.css b/SPRINT-MISSION-1/styles/components/button.css new file mode 100644 index 00000000..ee79a4b9 --- /dev/null +++ b/SPRINT-MISSION-1/styles/components/button.css @@ -0,0 +1,62 @@ +@import url(../color.css); +@import url(../typography.css); + +/* Button Base Style*/ +.btn { + display: inline-block; + font-family: inherit; + font-weight: 600; + padding: 8px 0; + text-align: center; +} + +.btn:disabled { + cursor: default; + pointer-events: none; +} + +/* Size Variants */ +.btn-large { + border-radius: 40px; + padding: 12px 124px; + font-size: var(--text-xl); + line-height: var(--text-xl); +} + +.btn-medium { + border-radius: 40px; + padding: 11px 71px; + font-size: var(--text-2lg); + line-height: var(--text-2lg); +} + +.btn-small { + border-radius: 8px; + padding: 8px 0; + font-size: var(--text-lg); + line-height: var(--text-lg); +} + +/* Color Variants */ +.btn-primary { + background-color: var(--primary-100); + color: var(--gray-100); +} + +.btn-primary:hover { + background-color: var(--primary-200); +} + +.btn-primary:active { + background-color: var(--primary-300); +} + +.btn-primary:disabled { + background-color: var(--gray-400); +} + +.btn-outline { + background-color: var(--gray-50); + color: var(--primary-100); + border: 10x solid var(--primary-100); +} diff --git a/SPRINT-MISSION-1/styles/global.css b/SPRINT-MISSION-1/styles/global.css new file mode 100644 index 00000000..1e9300bf --- /dev/null +++ b/SPRINT-MISSION-1/styles/global.css @@ -0,0 +1,63 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { + text-decoration: none; + color: inherit; +} + +button { + cursor: pointer; + background: none; + border: none; +} + +h1 { + font-weight: 700; + font-size: 40px; + line-height: 56px; +} + +img { + vertical-align: bottom; +} + +body { + width: 100%; +} + +header { + width: 100%; + height: 70px; + border-bottom: 1px solid #dfdfdf; + padding: 0 200px; + display: flex; + justify-content: space-between; + align-items: center; +} + +footer { + background-color: #111827; + display: flex; + justify-content: space-between; + align-items: center; + padding: 32px 200px 108px 200px; + font-weight: 400; + font-size: 16px; + line-height: 19.09px; + text-align: center; +} + +#footerMenu { + display: flex; + gap: 30px; + color: #f3f4f6; +} + +#socialMedia { + display: flex; + gap: 12px; +} diff --git a/SPRINT-MISSION-1/styles/styles.css b/SPRINT-MISSION-1/styles/styles.css new file mode 100644 index 00000000..605385e8 --- /dev/null +++ b/SPRINT-MISSION-1/styles/styles.css @@ -0,0 +1,93 @@ +/* tokens */ +@import url(./color.css); +@import url(./typography.css); + +/* components */ +@import url(./components/button.css); + +.loginLinkButton { + padding: 11px 43px; +} + +.banner { + height: 540px; + background-color: #cfe5ff; + display: flex; + justify-content: center; + align-items: flex-end; +} + +#banner-top { + margin-bottom: 32px; +} + +.banner-font { + font-weight: 700; + font-size: 40px; + line-height: 56px; + color: var(--gray-700); +} + +.wrapper { + width: 100%; + max-width: 1200px; + margin: 0 auto; +} + +.wrapper#banner { + display: flex; + justify-content: center; + flex: 1; +} + +.section-wrapper { + padding-bottom: 138px; +} + +.section-item { + margin: 138px 0; + display: flex; + align-items: center; + gap: 5%; + background-color: #fcfcfc; +} + +.section-img-wrapper { + height: 444px; +} + +.section-img-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.section-content { + flex: 1; +} + +.section-tag { + font-size: var(--text-21g); + font-weight: 700; + line-height: var(--line-height-2lg); + color: var(--primary-100); + margin-bottom: 12px; +} + +.section-title h1 { + letter-spacing: 2%; +} + +.section-des { + font-weight: 500; + color: var(--gray-700); + margin-top: 24px; +} + +.section-item:nth-child(2) { + text-align: right; +} + +footer > div { + color: #9ca3af; +} diff --git a/SPRINT-MISSION-1/styles/typography.css b/SPRINT-MISSION-1/styles/typography.css new file mode 100644 index 00000000..13ed570e --- /dev/null +++ b/SPRINT-MISSION-1/styles/typography.css @@ -0,0 +1,81 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); + +html, +body, +* { + color: #374151; + word-break: keep-all; + font-family: "Pretendard Variable", Pretendard, -apple-system, + BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", + "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; +} + +input, +textarea, +select, +button { + font-family: inherit; +} + +:root { + /* Font sizes */ + --text-xs: 12px; + --text-sm: 13px; + --text-md: 14px; + --text-lg: 16px; + --text-2lg: 18px; + --text-xl: 20px; + --text-2xl: 24px; + --text-3xl: 32px; + + /* Line heights */ + --line-height-xs: 1.5; /* 18px / 12px */ + --line-height-sm: 1.69; /* 22px / 13px */ + --line-height-md: 1.71; /* 24px / 14px */ + --line-height-lg: 1.625; /* 26px / 16px */ + --line-height-2lg: 1.556; /* 28px / 18px */ + --line-height-xl: 1.6; /* 32px / 20px */ + --line-height-2xl: 1.333; /* 32px / 24px */ + --line-height-3xl: 1.313; /* 42px / 32px */ + + .text-3xl { + font-size: var(--text-3xl); + line-height: var(--line-height-3xl); + } + + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--line-height-2xl); + } + + .text-xl { + font-size: var(--text-xl); + line-height: var(--line-height-xl); + } + + .text-2lg { + font-size: var(--text-2lg); + line-height: var(--line-height-2lg); + } + + .text-lg { + font-size: var(--text-lg); + line-height: var(--line-height-lg); + } + + .text-md { + font-size: var(--text-md); + line-height: var(--line-height-md); + } + + .text-sm { + font-size: var(--text-sm); + line-height: var(--line-height-sm); + } + + .text-xs { + font-size: var(--text-xs); + line-height: var(--line-height-xs); + } +}