diff --git a/README.md b/README.md new file mode 100644 index 00000000..e8d97453 --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# ๐Ÿผ ํŒ๋‹ค๋งˆ์ผ“ + +> ์ผ์ƒ์˜ ๋ชจ๋“  ๋ฌผ๊ฑด์„ ๋ฏฟ๊ณ  ๊ฑฐ๋ž˜ํ•  ์ˆ˜ ์žˆ๋Š” **์ค‘๊ณ  ๊ฑฐ๋ž˜ ํ”Œ๋žซํผ** + +- [ํŒ๋‹ค๋งˆ์ผ“ ๋ฐ”๋กœ๊ฐ€๊ธฐ](https://pandamarket-jsh-git.netlify.app/) +- ์ฝ”๋“œ์ž‡ ์Šคํ”„๋ฆฐํŠธ FE-10 ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ +- 2024.08.05.(์›”) ~ ๊ฐœ๋ฐœ ์ง„ํ–‰ ์ค‘ + +
+ +## ๊ธฐ์ˆ  ์Šคํƒ + +- **๊ฐœ๋ฐœ** + - HTML, CSS +- **IDE** + - Visual Studio Code +- **๋ฐฐํฌ** + - Netlify diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..9041b454 --- /dev/null +++ b/faq.html @@ -0,0 +1,21 @@ + + + + + + + + ํŒ๋‹ค๋งˆ์ผ“ + + + + + +

FAQ

+ + diff --git a/images/explain_1.png b/images/explain_1.png new file mode 100644 index 00000000..20343eb9 Binary files /dev/null and b/images/explain_1.png differ diff --git a/images/explain_2.png b/images/explain_2.png new file mode 100644 index 00000000..5693dc7a Binary files /dev/null and b/images/explain_2.png differ diff --git a/images/explain_3.png b/images/explain_3.png new file mode 100644 index 00000000..a3f91e53 Binary files /dev/null and b/images/explain_3.png differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 00000000..39fed4aa Binary files /dev/null and b/images/facebook.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 00000000..272c3841 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/logo_icon.png b/images/logo_icon.png new file mode 100644 index 00000000..d23fd2d5 Binary files /dev/null and b/images/logo_icon.png differ diff --git a/images/logo_lg.png b/images/logo_lg.png new file mode 100644 index 00000000..ec00f2d9 Binary files /dev/null and b/images/logo_lg.png differ diff --git a/images/logo_md.png b/images/logo_md.png new file mode 100644 index 00000000..5b80434b Binary files /dev/null and b/images/logo_md.png differ diff --git a/images/logo_sm.png b/images/logo_sm.png new file mode 100644 index 00000000..59a0a74e Binary files /dev/null and b/images/logo_sm.png differ diff --git a/images/panda_1.png b/images/panda_1.png new file mode 100644 index 00000000..972754b7 Binary files /dev/null and b/images/panda_1.png differ diff --git a/images/panda_2.png b/images/panda_2.png new file mode 100644 index 00000000..c7b94cd0 Binary files /dev/null and b/images/panda_2.png differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 00000000..45c46baa Binary files /dev/null and b/images/twitter.png differ diff --git a/images/youtube.png b/images/youtube.png new file mode 100644 index 00000000..0b4c07a8 Binary files /dev/null and b/images/youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..9d3ecf19 --- /dev/null +++ b/index.html @@ -0,0 +1,94 @@ + + + + + + + + ํŒ๋‹ค๋งˆ์ผ“ + + + + + +
+ ํŒ๋‹ค๋งˆ์ผ“ ๋ฐ”๋กœ๊ฐ€๊ธฐ + ๋กœ๊ทธ์ธ +
+
+ +
+
+ +
+ Hot Item + ์ธ๊ธฐ ์ƒํ’ˆ์„
ํ™•์ธํ•ด ๋ณด์„ธ์š” + + ๊ฐ€์žฅ HOTํ•œ ์ค‘๊ณ ๊ฑฐ๋ž˜ ๋ฌผํ’ˆ์„
ํŒ๋‹ค ๋งˆ์ผ“์—์„œ ํ™•์ธํ•ด ๋ณด์„ธ์š” + +
+
+
+
+ Serch + ๊ตฌ๋งค๋ฅผ ์›ํ•˜๋Š”
์ƒํ’ˆ์„ ๊ฒ€์ƒ‰ํ•˜์„ธ์š” + + ๊ตฌ๋งคํ•˜๊ณ  ์‹ถ์€ ๋ฌผํ’ˆ์€ ๊ฒ€์ƒ‰ํ•ด์„œ
์‰ฝ๊ฒŒ ์ฐพ์•„๋ณด์„ธ์š” + +
+ +
+
+ +
+ Register + ํŒ๋งค๋ฅผ ์›ํ•˜๋Š”
์ƒํ’ˆ์„ ๋“ฑ๋กํ•˜์„ธ์š” + + ์–ด๋–ค ๋ฌผ๊ฑด์ด๋“  ํŒ๋งคํ•˜๊ณ  ์‹ถ์€
์ƒํ’ˆ์„ ์‰ฝ๊ฒŒ ๋“ฑ๋กํ•˜์„ธ์š” + +
+
+
+ +
+ + + diff --git a/init.css b/init.css new file mode 100644 index 00000000..1e2b29fb --- /dev/null +++ b/init.css @@ -0,0 +1,61 @@ +:root { + /* Color - Primary */ + --blue-100: #3682ff; + --blue-200: #1967d6; + --blue-300: #1251aa; + + /* Color - Secondary */ + --gray-50: #f9fafb; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-400: #9ca3af; + --gray-500: #6b7280; + --gray-600: #4b5563; + --gray-700: #374151; + --gray-800: #1f2937; + --gray-900: #111827; + + /* Color - Error */ + --red: #f74747; +} + +:root { + /* Font - Size */ + --size-4xl: 40px; + --size-3xl: 32px; + --size-2xl: 24px; + --size-xl: 20px; + --size-2lg: 18px; + --size-lg: 16px; + --size-md: 14px; + --size-sm: 13px; + --size-xs: 12px; + + /* Font - Line Height */ + --line-4xl: 52px; + --line-3xl: 42px; + --line-2xl: 32px; + --line-xl: 32px; + --line-2lg: 26px; + --line-lg: 26px; + --line-md: 24px; + --line-sm: 22px; + --line-xs: 18px; +} + +body { + padding: 0; + margin: 0; + font-family: "Pretendard", sans-serif; +} + +:link, +:active, +:visited { + color: black; + text-decoration: none; +} + +:is(a, button):hover { + cursor: pointer; +} diff --git a/items.html b/items.html new file mode 100644 index 00000000..d9e52e3c --- /dev/null +++ b/items.html @@ -0,0 +1,21 @@ + + + + + + + + ํŒ๋‹ค๋งˆ์ผ“ + + + + + +

Items

+ + diff --git a/login.html b/login.html new file mode 100644 index 00000000..25d978d6 --- /dev/null +++ b/login.html @@ -0,0 +1,21 @@ + + + + + + + + ํŒ๋‹ค๋งˆ์ผ“ + + + + + +

Log In

+ + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..6bcc07d0 --- /dev/null +++ b/privacy.html @@ -0,0 +1,21 @@ + + + + + + + + ํŒ๋‹ค๋งˆ์ผ“ + + + + + +

Privacy

+ + diff --git a/style.css b/style.css new file mode 100644 index 00000000..3f716f76 --- /dev/null +++ b/style.css @@ -0,0 +1,143 @@ +header { + display: flex; + align-items: center; + justify-content: space-between; + /* ์š”๊ตฌ์‚ฌํ•ญ์€ 1920px ๊ธฐ์ค€ ์ขŒ์šฐ ์—ฌ๋ฐฑ 200px ์œ ์ง€์ง€๋งŒ, + ํผ์„ผํŠธ ํ™œ์šฉ๊ฐ’์ด ๋” ์ž์—ฐ์Šค๋Ÿฝ๋‹ค๊ณ  ํŒ๋‹จํ•˜์—ฌ max๋กœ ๊ฒฐ์ •์ผ€ ํ•จ */ + padding: 5px max(calc((100% - 1100px) / 2), 200px); +} + +header .head-login { + padding: 10px 30px; + background-color: var(--blue-100); + border: none; + color: white; + border-radius: 8px; +} + +.banner { + display: flex; + align-items: end; + justify-content: center; + height: 540px; + background-color: #cfe5ff; +} + +.banner-content { + width: 350px; + height: 290px; + display: flex; + flex-direction: column; +} + +.banner-content span { + font-weight: 600; + font-size: var(--size-4xl); + line-height: var(--line-4xl); +} + +.banner-content a { + width: 100%; + margin-top: 32px; + padding: 16px 0; + border-radius: 9999px; + background-color: var(--blue-100); + text-align: center; + font-size: var(--size-xl); + color: white; +} + +.cards { + padding: 140px 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 280px; +} + +.card { + display: flex; + border-radius: 15px; + background-color: var(--gray-50); +} + +.card:nth-child(2n + 1) { + margin-right: 180px; + text-align: left; +} + +.card:nth-child(2n) { + margin-left: 180px; + text-align: right; +} + +.card-content { + width: 300px; + padding: 0 48px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.card-content .keyword { + margin-bottom: 16px; + color: var(--blue-100); + font-weight: 700; + font-size: var(--size-2lg); +} + +.card-content .title { + margin-bottom: 32px; + font-weight: 600; + font-size: var(--size-4xl); + line-height: var(--line-4xl); +} + +.card-content .sub { + font-size: var(--size-2xl); + line-height: var(--line-2xl); +} + +footer { + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; + padding: 16px max(calc((100% - 1100px) / 2), 200px) 48px; + background-color: #111827; + font-size: var(--size-sm); +} + +:is(.foot-copy, .foot-link, .foot-sns) { + display: flex; + align-items: center; +} + +.foot-copy { + justify-content: left; +} + +.foot-copy span { + color: var(--gray-200); +} + +.foot-link { + justify-content: center; + gap: 30px; +} + +.foot-link a { + color: var(--gray-200); +} + +.foot-sns { + justify-content: right; + gap: 12px; +} + +.foot-sns a { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; +}