diff --git a/img/facebook.png b/img/facebook.png new file mode 100644 index 00000000..4e2b84d8 Binary files /dev/null and b/img/facebook.png differ diff --git a/img/function1.png b/img/function1.png new file mode 100644 index 00000000..d0d3da94 Binary files /dev/null and b/img/function1.png differ diff --git a/img/function2.png b/img/function2.png new file mode 100644 index 00000000..378b10a6 Binary files /dev/null and b/img/function2.png differ diff --git a/img/function3.png b/img/function3.png new file mode 100644 index 00000000..147302d7 Binary files /dev/null and b/img/function3.png differ diff --git a/img/instagram.png b/img/instagram.png new file mode 100644 index 00000000..f014549b Binary files /dev/null and b/img/instagram.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 00000000..b270ec8e Binary files /dev/null and b/img/logo.png differ diff --git a/img/panda1.png b/img/panda1.png new file mode 100644 index 00000000..3dfe8d84 Binary files /dev/null and b/img/panda1.png differ diff --git a/img/panda2.png b/img/panda2.png new file mode 100644 index 00000000..874a92aa Binary files /dev/null and b/img/panda2.png differ diff --git a/img/twitter.png b/img/twitter.png new file mode 100644 index 00000000..0a74ad7d Binary files /dev/null and b/img/twitter.png differ diff --git a/img/youtube.png b/img/youtube.png new file mode 100644 index 00000000..473bc32f Binary files /dev/null and b/img/youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..3f6ac452 --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + + + 판다마켓 + + +
+
+ + + + +
+
+
+
+
+
+
+ 일상의 모든 물건을
거래해 보세요 +
+ + 구경하러 가기 + +
+ 물건 거래 +
+
+
+
+
+
+ 인기상품 확인 +
+
+ Hot item +
+
+
+ 인기 상품을
확인해 보세요 +
+
+ 가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요 +
+
+
+
+
+
+
+
+
+ Search +
+
+
+ 구매를 원하는
상품을 검색하세요 +
+
+ 구매하고 싶은 물품은 검색해서
쉽게 찾아보세요 +
+
+
+ 원하는 상품 검색 +
+
+
+
+ 상품 등록 +
+
+ Register +
+
+
+ 판매를 원하는
상품을 등록하세요 +
+
+ 어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요 +
+
+
+
+
+
+
+
+
+
+ 믿을 수 있는
판다마켓 중고 거래 +
+ 판다마켓 중고거래 +
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..30e42aef --- /dev/null +++ b/style.css @@ -0,0 +1,292 @@ +* { + box-sizing: border-box; + } + + body { + font-family: Pretendard, sans-serif; + margin: 0; + } + + .container { + max-width: 1120px; + margin: 0 auto; + } + + header { + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 15px; + } + + footer { + background-color: #111827; + height: 160px; + } + + a { + cursor: pointer; + } + + .logo { + width: 153px; + } + + .login-button { + padding: 12px 37px; + background-color: #3692FF; + border-radius: 8px; + color: #ffffff; + text-decoration: none; + } + + .sky-bg { + background-color: #CFE5FF; + } + + .ad-section { + height: 540px; + display: flex; + align-items: end; + } + + .contents { + display: flex; + align-items: center; + } + + .function-section { + background-color: #ffffff; + height: 720px; + display: flex; + justify-content: center; + align-items: center; + } + + .panda { + width: 746px; + height: 340px; + } + + .title { + font-size: 40px; + font-weight: 700; + line-height: 56px; + color: #374151; + } + + .button { + text-decoration: none; + background-color: #3692FF; + padding: 16px 124px; + border-radius: 40px; + font-size: 20px; + font-weight: 600; + color: #F9FAFB; + margin-bottom: 60px; + } + + .ad-text { + gap: 32px; + display: flex; + flex-direction: column; + } + + .function-block { + width: 988px; + display: flex; + justify-content: space-around; + border-radius: 12px; + background-color: #FCFCFC; + } + + .function-block img { + width: 579px; + border-radius: 0px; + } + + .text { + display: flex; + flex-direction: column; + gap: 12px; + justify-content: center; + } + + .function-text { + display: flex; + flex-direction: column; + gap: 24px; + } + + .left { + padding-right: 24px + } + + .right { + text-align: right; + padding-left: 24px; + } + + .tag { + font-size: 18px; + font-weight: 700; + color: #3692FF; + } + + .description { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: #374151; + } + + .footer-contents { + display: flex; + justify-content: space-between; + align-items: center; + padding: 32px 0; + } + + .footer-codeit { + color: #9ca3af; + font-size: 16px; + font-weight: 400; + } + + .footer-link { + display: flex; + gap: 30px; + } + + .footer-link a { + text-decoration: none; + color: #e5e7eb; + font-size: 16px; + font-weight: 400; + } + + .sns { + display: flex; + gap: 12px; + } + + .sns a img { + width: 20px; + height: 20px; + } + + @media (max-width: 1120px) { + .ad-section { + height: 430px; + } + + .ad-text { + gap: 20px; + } + + .ad-section .title { + padding-left: 20px; + } + + .title { + font-size: 22px; + line-height: 30px; + } + + .button { + font-size: 15px; + width: 190px; + padding: 12px 28px; + text-align: center; + margin-left: 20px; + } + + .panda { + width: 70%; + height: 30%; + } + + .function-section { + height: 400px; + } + + .function-block { + width: 70%; + height: 55%; + } + + .function-block img { + width: 300px; + } + + .tag { + font-size: 16px; + } + + .description { + font-size: 15px; + line-height: 20px; + } + + .right { + padding-left: 20px; + } + + .function-text { + gap: 15px; + } + + footer { + padding: 0 20px; + } + + .footer-codeit, .footer-link a { + font-size: 14px; + } + } + + @media (max-width: 800px) { + .ad-section { + height: 330px; + } + + .title { + font-size: 18px; + line-height: 30px; + } + + .button { + font-size: 15px; + width: 150px; + } + + .panda { + width: 65%; + } + + .function-section { + height: 300px; + } + + .function-block img { + width: 45%; + } + + .tag { + font-size: 13px; + } + + .description { + font-size: 13px; + line-height: 20px; + } + + .function-text { + gap: 10px; + } + + footer { + height: 130px; + } + } \ No newline at end of file