diff --git a/Group 19.png b/Group 19.png new file mode 100644 index 00000000..796bef2a Binary files /dev/null and b/Group 19.png differ diff --git a/Img_home_01.png b/Img_home_01.png new file mode 100644 index 00000000..301c25d8 Binary files /dev/null and b/Img_home_01.png differ diff --git a/Img_home_02-1.png b/Img_home_02-1.png new file mode 100644 index 00000000..e4f14684 Binary files /dev/null and b/Img_home_02-1.png differ diff --git a/Img_home_03.png b/Img_home_03.png new file mode 100644 index 00000000..0bdedd0c 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..3fe94d5a 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..38a8e666 Binary files /dev/null and b/Img_home_top.png differ diff --git a/ic_facebook.png b/ic_facebook.png new file mode 100644 index 00000000..4c329327 Binary files /dev/null and b/ic_facebook.png differ diff --git a/ic_instagram.png b/ic_instagram.png new file mode 100644 index 00000000..44b98406 Binary files /dev/null and b/ic_instagram.png differ diff --git a/ic_twitter.png b/ic_twitter.png new file mode 100644 index 00000000..8f28b321 Binary files /dev/null and b/ic_twitter.png differ diff --git a/ic_youtube.png b/ic_youtube.png new file mode 100644 index 00000000..6d6a7582 Binary files /dev/null and b/ic_youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..f6f1e430 --- /dev/null +++ b/index.html @@ -0,0 +1,82 @@ + + + + + + 판다마켓 + + +
+ + + +
+ +
+
+
+
+
+

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

+
+ 구경하러 가기 +
+
+ +
+
+
+
+
+ +
+
Hot item
+
인기상품을
확인해보세요
+
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해보세요
+
+
+ +
+ +
+
Search
+
구매를 원하는
상품을 검색하세요
+
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
+
+
+ +
+ +
+
Register
+
판매를 원하는
상품을 등록하세요
+
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
+
+
+
+
+
+
+

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

+ +
+
+ + + \ No newline at end of file diff --git a/mission_1.css b/mission_1.css new file mode 100644 index 00000000..f9e3c399 --- /dev/null +++ b/mission_1.css @@ -0,0 +1,262 @@ +*{ + box-sizing: border-box; + margin:0; + padding:0; +} +header{ + width: 1920px; + height: 70px; + padding: 10px 200px 9px 200px; + gap: 0px; + border: 0px 0px 1px 0px; + opacity: 0px; + background: #FFFFFF; + border-bottom: 1px solid #DFDFDF; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.logo{ + margin: auto; + cursor: pointer; +} +.login{ + width: Fixed (128px)px; + height: Fixed (48px)px; + top: 127px; + left: 538px; + padding: 12px 20px 12px 20px; + gap: 10px; + border-radius: 8px; + opacity: 0px; + background: #3692FF; + + margin:auto; + cursor: pointer; +} +.login_click{ + color: #FFFFFF; +} +main{ + + background: #CFE5FF; +} +.main_section{ + width: 1920px; + height: 540px; + gap: 0px; + opacity: 0px; + background: #CFE5FF; + display:flex; + flex-direction: row; + justify-content: center; + align-items: center; + position: relative; +} +.left{ + display: flex; + flex-direction: column; + top: 170px; + left: 360px; + gap: 32px; + position: absolute; +} +h2{ + color: #374151; + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + text-align: left; +} +.gotosee{ + width: Hug (357px)px; + height: Hug (56px)px; + top: 127px; + left: 103px; + padding: 16px 124px 16px 124px; + gap: 10px; + border-radius: 40px; + opacity: 0px; + background: #3692FF; + + cursor: pointer; +} +.gotosee_click{ + color:#ffffff; +} +.panda{ + left: 701px; + bottom:0px; + padding-left: 30px; + position: absolute; +} +.container_box{ + width: 1920px; + height:2160px; + text-align: center; +} +.container{ + width: 1200px; + height: 2160px; + top: 610px; + left: 360px; + gap: 0px; + border: 1px; + display:grid; + grid-template-rows: repeat(3,1fr); + margin:auto; +} +.section{ + display: flex; + align-items: center; + gap:64px; +} +.description{ + display:flex; + flex-direction: column; + align-items: flex-start; + gap:12px; +} +.section_image{ + width: 588px; + height: 444px; +} +.article1{ + color: #3692FF; + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 25.2px; + text-align: left; +} +.article2{ + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02em; + text-align: left; + color: #374151; +} +.article3{ + font-family: Pretendard; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + letter-spacing: 0.08em; + text-align: left; + color: #374151; + margin-top:24px; +} +.section_reverse{ + display: flex; + flex-direction: row-reverse; + align-items: center; + gap:64px; +} +.second_description{ + display:flex; + flex-direction: column; + align-items: flex-end; + gap:12px; +} +.article2_reverse{ + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02em; + text-align: right; + color: #374151; +} +.article3_reverse{ + font-family: Pretendard; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + letter-spacing: 0.08em; + text-align: right; + color: #374151; + margin-top:24px; +} +.section_last{ + + background: #CFE5FF; +} +.section_last_rectangle{ + width: 1920px; + height: 540px; + top: 2908px; + gap: 0px; + opacity: 0px; + background: #CFE5FF; + display:flex; + justify-content: center; + align-items: center; +} +footer{ + width: 1920px; + height: 160px; + top: 3448px; + padding: 32px 200px 32px 200px; + gap: 10px; + opacity: 0px; + background: #111827; +} +.footer_section{ + width:1520px; + height:20px; + display:flex; + justify-content: space-between; +} +.codeit{ + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 19.09px; + text-align: center; + color: #9CA3AF; +} +.PF{ + + display:flex; + gap:30px; +} +#Privacy, #FAQ{ + font-family: Pretendard; + font-size: 16px; + font-weight: 400; + line-height: 19.09px; + text-align: center; + color: #E5E7EB; + cursor: pointer; +} +.icon{ + display:flex; + width: 116px; + height: 20px; + padding: 1.85px 2px 1.15px 1px; + gap: 12px; + opacity: 0px; + cursor: pointer; +} +@media(min-width:1920px){ + main{ + margin:auto; + } + .section_last{ + margin:auto; + } +} +@media(max-width:1920px){ + .logo{ + margin-left:200px; + } + .login{ + margin-right:200px; + } + header{ + flex : 1 0 auto; + } +}