diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..3f20db21 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..ce3355e9 --- /dev/null +++ b/faq.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 + + + diff --git a/image/Img_home_01.png b/image/Img_home_01.png new file mode 100644 index 00000000..a34b83b1 Binary files /dev/null and b/image/Img_home_01.png differ diff --git a/image/Img_home_02.png b/image/Img_home_02.png new file mode 100644 index 00000000..ee734e18 Binary files /dev/null and b/image/Img_home_02.png differ diff --git a/image/Img_home_03.png b/image/Img_home_03.png new file mode 100644 index 00000000..d7313c7a Binary files /dev/null and b/image/Img_home_03.png differ diff --git a/image/Img_home_bottom.png b/image/Img_home_bottom.png new file mode 100644 index 00000000..0da6a7a1 Binary files /dev/null and b/image/Img_home_bottom.png differ diff --git a/image/Img_home_top.png b/image/Img_home_top.png new file mode 100644 index 00000000..e85b8e56 Binary files /dev/null and b/image/Img_home_top.png differ diff --git a/image/ic_facebook.png b/image/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/image/ic_facebook.png differ diff --git a/image/ic_instagram.png b/image/ic_instagram.png new file mode 100644 index 00000000..7a91d111 Binary files /dev/null and b/image/ic_instagram.png differ diff --git a/image/ic_twitter.png b/image/ic_twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/image/ic_twitter.png differ diff --git a/image/ic_youtube.png b/image/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/image/ic_youtube.png differ diff --git a/image/logo.png b/image/logo.png new file mode 100644 index 00000000..2695e335 Binary files /dev/null and b/image/logo.png differ diff --git a/image/main1.png b/image/main1.png new file mode 100644 index 00000000..b332ca9a Binary files /dev/null and b/image/main1.png differ diff --git a/image/main2.png b/image/main2.png new file mode 100644 index 00000000..d267b4e8 Binary files /dev/null and b/image/main2.png differ diff --git a/image/main3.png b/image/main3.png new file mode 100644 index 00000000..21b07d59 Binary files /dev/null and b/image/main3.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..1f603b8c --- /dev/null +++ b/index.html @@ -0,0 +1,107 @@ + + + + + + 판다마켓 + + + + + +
+
+ + +
+
+
+
+
+

+ 일상의 모든 물건을 + 거래해 보세요 +

+ 구경하러 가기 +
+ +
+ +
+
+ +
+

Hot item

+

인기 상품을
확인해 보세요

+

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

+
+
+
+ +
+
+ +
+

Search

+

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

+

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

+
+
+
+ +
+
+ +
+

Register

+

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

+

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

+
+
+
+ +
+

믿을 수 있는
판다마켓 중고 거래

+ +
+
+ + + diff --git a/items.html b/items.html new file mode 100644 index 00000000..ce3355e9 --- /dev/null +++ b/items.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 + + + diff --git a/login.html b/login.html new file mode 100644 index 00000000..ce3355e9 --- /dev/null +++ b/login.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 + + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..ce3355e9 --- /dev/null +++ b/privacy.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 + + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..803f14d3 --- /dev/null +++ b/style.css @@ -0,0 +1,446 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Pretendard; +} + +a { + text-decoration: none; + cursor: pointer; +} + +/* Header */ +header { + display: flex; + align-items: center; + background-color: #ffffff; + height: 70px; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1; + border-bottom: 1px solid #dfdfdf; +} + +.header_wrap { + width: 1120px; + height: 51px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; +} + +.logo { + width: 153px; + height: 51px; +} + +.login { + display: inline-flex; + justify-content: center; + align-items: center; + width: 128px; + height: 48px; + padding: 12px 23px; + background-color: #3692ff; + color: #f3f4f6; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + transition: all 300ms ease; +} + +.login:hover { + background-color: #1967d6; +} +/* Header */ + +main { + margin-top: 70px; +} +/* Main - Heading */ +.heading { + background-color: #cfe5ff; + display: flex; + justify-content: center; + align-items: flex-end; + height: 540px; +} + +.text_box { + position: relative; + bottom: 100px; +} + +.heading_title { + margin-top: 0; + margin-bottom: 32px; + font-size: 40px; +} + +.heading_title span { + display: block; +} + +.view_button { + display: inline-flex; + justify-content: center; + align-items: center; + background-color: #3692ff; + color: #f9fafb; + font-size: 20px; + font-weight: 600; + width: 357px; + height: 56px; + border-radius: 40px; + transition: all 300ms ease; +} + +.view_button:hover { + background-color: #1967d6; +} + +/* Main - Heading */ + +/* Main - Content */ +.content_wrap { + height: 720px; + display: flex; + justify-content: center; + align-items: center; +} +.category_box { + display: flex; + justify-content: center; + align-items: center; + background-color: #fcfcfc; +} +.content_wrap:nth-child(odd) .category_box { + flex-direction: row-reverse; +} + +.category_description { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.category_title { + color: #3692ff; + font-size: 18px; + font-weight: 700; +} + +.content_wrap:nth-child(even) .category_description { + margin-left: 64px; +} + +.content_wrap:nth-child(odd) .category_description { + margin-right: 64px; +} + +.title { + font-size: 40px; + font-weight: 700; + color: #374151; +} + +.description { + font-size: 24px; + font-weight: 500; + color: #374151; +} +/* Main - Content */ + +/* Main - ad */ +.ad { + background-color: #cfe5ff; + display: flex; + justify-content: center; + align-items: flex-end; + height: 540px; +} + +.ad > .title { + margin-right: 69px; + position: relative; + bottom: 113px; +} +/* Main - ad */ + +/* Footer */ +footer { + background-color: #111827; + color: #9ca3af; + height: 160px; + display: flex; + justify-content: space-between; + align-items: flex-start; + position: relative; +} + +.ft_content_wrap { + margin: 32px auto 0; + width: 1120px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 16px; + font-weight: 400; + color: #9ca3af; +} + +.ft_content_wrap a { + color: #9ca3af; +} + +.privacy_faq { + display: flex; + align-items: center; +} +.policy { + margin-right: 30px; +} + +.icons { + display: flex; + gap: 12px; + cursor: pointer; +} +/* Footer */ + +/* Media Query */ + +@media (max-width: 1919px) { + .header_wrap { + width: 100%; + margin: 0 200px; + } +} + +@media (max-width: 1200px) { + .heading { + flex-direction: column; + justify-content: flex-end; + align-items: center; + height: 771px; + } + + .text_box { + display: flex; + flex-direction: column; + align-items: center; + } + + .heading_title span { + display: inline-block; + } + + .content_wrap { + height: 708px; + margin-top: 160px; + } + + .content_wrap .category_box { + flex-direction: column; + align-items: flex-start; + } + + .content_wrap:nth-child(odd) .category_box { + flex-direction: column; + align-items: flex-end; + } + + .description { + margin-top: 0; + } + + .content_wrap:nth-child(even) .category_description { + margin-left: 0; + } + + .content_wrap:nth-child(odd) .category_description { + margin-right: 0; + align-items: flex-end; + text-align: right; + } + + .category_title { + margin-bottom: 0; + } + + .title { + margin-top: 16px; + margin-bottom: 32px; + } + + .ad { + height: 927px; + flex-direction: column; + justify-content: flex-end; + align-items: center; + margin-top: 160px; + } + + .ad > .title { + text-align: center; + margin-right: 0; + margin-bottom: 140px; + } + + .ft_content_wrap { + width: 100%; + margin-left: 30px; + margin-right: 30px; + } +} + +@media (max-width: 744px) { + .header_wrap { + margin-left: 30px; + margin-right: 30px; + } + + .logo { + width: 123px; + height: 41px; + } + + .login { + width: 100px; + } + + .heading { + height: 572px; + } + + .heading_title { + font-size: 35px; + } + + .view_button { + width: 290px; + } + + .heading img { + width: 448px; + height: 204px; + } + + .content_wrap { + margin-top: 130px; + height: 20%; + } + + .content_wrap img { + width: 93.548vw; + height: 70.43vw; + } + + .category_title { + font-size: 15px; + } + + .title { + font-size: 35px; + } + + .description { + font-size: 20px; + } + + .ad { + height: 572px; + } + + .ad > .title { + margin-bottom: 50px; + } + + .ad img { + width: 375px; + height: 198px; + } +} + +@media (max-width: 455px) { + .heading { + overflow: hidden; + } + + .heading_title span { + font-size: 28px; + } + + .ft_content_wrap { + font-size: 12px; + } + .codeit { + position: absolute; + top: 65px; + } +} + +@media (max-width: 375px) { + .header_wrap { + margin-left: 20px; + margin-right: 20px; + } + + .heading { + height: 540px; + } + + .heading_title span { + font-size: 25px; + } + + .view_button { + font-size: 18px; + width: 258px; + } + + .heading img { + width: 375px; + height: 198px; + } + + .content_wrap { + height: 20%; + margin-top: 85px; + } + + .category_box img { + width: 343px; + height: 259px; + } + + .category_title { + font-size: 16px; + } + + .title { + font-size: 24px; + } + + .description { + font-size: 16px; + } + + .ad { + height: 540px; + overflow: hidden; + } + + .ad > .title { + font-size: 32px; + } +} + +/* Media Query */