diff --git a/Frame 2608833.png b/Frame 2608833.png new file mode 100644 index 00000000..447d362a Binary files /dev/null and b/Frame 2608833.png differ diff --git a/Group 19.png b/Group 19.png new file mode 100644 index 00000000..9b5b0af2 Binary files /dev/null and b/Group 19.png differ diff --git a/Img_home_02.png b/Img_home_02.png new file mode 100644 index 00000000..33b3346c Binary files /dev/null and b/Img_home_02.png differ diff --git a/Img_home_03.png b/Img_home_03.png new file mode 100644 index 00000000..bdf88d25 Binary files /dev/null and b/Img_home_03.png differ diff --git a/Img_home_bottom.png b/Img_home_bottom.png new file mode 100644 index 00000000..313a5fe0 Binary files /dev/null and b/Img_home_bottom.png differ diff --git a/Img_home_top.png b/Img_home_top.png new file mode 100644 index 00000000..624efe91 Binary files /dev/null and b/Img_home_top.png differ diff --git a/Vector.png b/Vector.png new file mode 100644 index 00000000..8b63592d Binary files /dev/null and b/Vector.png differ diff --git a/common.css b/common.css new file mode 100644 index 00000000..6971584d --- /dev/null +++ b/common.css @@ -0,0 +1,3 @@ +*{ + box-sizing: border-box; +} \ No newline at end of file diff --git a/desktop_02.png b/desktop_02.png new file mode 100644 index 00000000..7cd4b74e Binary files /dev/null and b/desktop_02.png differ diff --git a/face.png b/face.png new file mode 100644 index 00000000..879bb9f1 Binary files /dev/null and b/face.png differ diff --git a/ic_twitter.png b/ic_twitter.png new file mode 100644 index 00000000..3f74b730 Binary files /dev/null and b/ic_twitter.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..7baefad3 --- /dev/null +++ b/index.html @@ -0,0 +1,102 @@ + + + + + + 판다마켓 + + + + + +
+ + + + 로그인 +
+ +
+
+
+
+
+

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

+ + + +
+ 판다마켓의 마스코트인 판다가 손을 흔들고 있는 이미지입니다. +
+
+
+
+ +
+
+ 두 마스코트 판다가 하나의 인기상품을 구경하는 이미지입니다. + +
+
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..dd3979ec --- /dev/null +++ b/style.css @@ -0,0 +1,183 @@ +body{ + font-family: 'Pretendard', sans-serif; + color: #374151; + width: 100%; + margin: 0; + background-color: #ffffff +} + +header{ + width: 100%; + max-width: 1920px; + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 1rem; + margin: 0 auto; +} + +img { + max-width: 100%; + height: auto; +} + +.top{ + margin-top: 57px; +} + +.highlightBox{ + background-color: #CFE5FF; + width: 100%; + height: 540px; + margin: 0 auto; +} + +.highlightBoxContent { + width: 1920px; + margin: 0 auto; + padding: 143px 405px 0; +} + +.imgPlusWord { + display: flex; + align-items: center; + gap: 7px; +} + +.words { + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; +} + +.center { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-end; + text-align: right; +} + +.title { + margin: 0 200px; +} + +.goToLogin { + font-size: clamp(14px, 1.2vw, 16px); + font-weight: 600; + line-height: 26px; + margin: 0; + border: 1px solid #3692FF; + background-color: #3692FF; + border-radius: 8px; + color: #F9FAFB; + padding: 0.7rem 1.2rem; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; +} + +button { + border: 1px solid #3692FF; + background-color: #3692FF; + border-radius: 40px; + color: #F9FAFB; + padding: 16px 124px; +} + +section { + background-color: #FCFCFC; + width: 988px; + height: 444px; + margin: 100px auto; +} + +.bodyImg { + width: 579px; + height: 444px; +} + +.feature { + font-size: 18px; + font-weight: 700; + line-height: 26px; + color: #3692FF; +} + +h1 { + font-size: 40px; + font-weight: 700; + line-height: 140%; +} + +p { + font-size: 24px; + font-weight: 500; + line-height: 32px; +} + + + +footer { + margin: 0 auto; + font-size: 16px; + font-weight: 400; + line-height: 100%; + height: 160px; + color: #9CA3AF; + background-color: #111827; + display: flex; + justify-content: center; + align-items: flex-start; + padding: 32px 0; +} + +.footerContainer { + display: flex; + justify-content: space-between; + align-items: center; + width: 1920px; + margin: 0 auto; +} + +a { + text-decoration: none; + color: #9CA3AF; +} + +.linkNearing { + width: 159px; + display: flex; + justify-content: space-between; + gap: 30px; +} + +.icons { + display: flex; + gap: 12px; +} + +@media (max-width: 768px) { + .imgPlusWord { + flex-direction: column; + text-align: center; + } + + .R { + align-items: center; + text-align: center; + } + + .ffooter { + flex-direction: column; + align-items: center; + } + + footer { + height: auto; + padding: 2rem; + } +} \ No newline at end of file diff --git a/youyube.png b/youyube.png new file mode 100644 index 00000000..13bdfd53 Binary files /dev/null and b/youyube.png differ