diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..6b4fba44 Binary files /dev/null and b/.DS_Store differ diff --git a/1.png b/1.png new file mode 100644 index 00000000..2295ecce Binary files /dev/null and b/1.png differ diff --git a/10-Sprint-Mission b/10-Sprint-Mission new file mode 160000 index 00000000..4dc5dd08 --- /dev/null +++ b/10-Sprint-Mission @@ -0,0 +1 @@ +Subproject commit 4dc5dd08f4106231a7aad060e895360af8d0ff1a diff --git a/2.png b/2.png new file mode 100644 index 00000000..17e4e273 Binary files /dev/null and b/2.png differ diff --git a/3.png b/3.png new file mode 100644 index 00000000..f9a9d375 Binary files /dev/null and b/3.png differ diff --git a/footimage.png b/footimage.png new file mode 100644 index 00000000..8b157755 Binary files /dev/null and b/footimage.png differ diff --git a/headimage.png b/headimage.png new file mode 100644 index 00000000..7e078386 Binary files /dev/null and b/headimage.png differ diff --git a/ic_facebook.png b/ic_facebook.png new file mode 100644 index 00000000..58333d45 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..98e24ea6 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..5df0852d 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..f51731d4 Binary files /dev/null and b/ic_youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..e7bb7751 --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + + + + 판다마켓 + + +
+
+
+ +

+ 판다마켓 +

+
+ +
+
+
+
+
+

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

+
+ 구경하러 가기 +
+
+ +
+
+
+ +
+
+
+ Hot item +
+

+ 인기 상품을
+ 확인해 보세요 +

+

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

+
+
+
+
+
+
+
+
+
+ Search +
+

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

+

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

+
+
+ +
+
+
+
+ +
+
+
+ Register +
+

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

+

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

+
+
+
+
+
+
+
+

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

+
+ +
+
+ + + + \ No newline at end of file diff --git a/panda.png b/panda.png new file mode 100644 index 00000000..17de1d96 Binary files /dev/null and b/panda.png differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..4b71cc24 --- /dev/null +++ b/style.css @@ -0,0 +1,222 @@ +* { + box-sizing: border-box; +} + +a { + text-decoration: none; + cursor: pointer; + color: inherit; +} + +body { + width: 1920px; + padding: 0px; + margin: 0px; +} + +header { + width: 1920px; + height: 70px; + position: relative; +} + +.header { + width: 1120px; + height: 51px; + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + margin: 9.5px 400px; +} + +h1 { + font-weight: 700; + font-size: 40px; + line-height: 56px; +} + +h2 { + font-weight: 500; + font-size: 24px; + color: #374151; +} + +h3 { + font-size: 16px; + font-weight: 400; + color: #e5e7e8; +} + +.name { + font-weight: 700; + font-size: 25.63px; + margin-left: 10px; + color: #3682ff; +} + +.title { + display: flex; + align-items: center; +} + +.login { + font-weight: 600; + font-size: 16px; + color: #f3f4f6; + width: 128px; + height: 48px; + padding: 12px 23px 12px 23px; + border: solid; + border-radius: 8px; + background-color: #3692ff; + text-align: center; +} + +.part1 { + background-color: #cfe5ff; + width: 100%; + height: 540px; + position: relative; + display: flex; + justify-content: center; + align-items: flex-end; +} + +.part2-1 { + width: 1920px; + height: 720px; + position: relative; +} + +.part2-2 { + width: 1920px; + height: 720px; + position: relative; +} + +.part3 { + background-color: #111827; + width: 1920px; + height: 160px; + position: relative; + display: flex; +} + +.empty_space { + width: 1920px; + height: 138px; + background-color: #fcfcfc; +} +.part3 .information > div { + width: 159px; + display: flex; + justify-content: space-between; +} +.headimage, .footimage { + width: 746px; + height: 340px; +} + +.mention{ + width: 357px; + height: 26opx; + padding: 0px 0px 60px 0px; + margin: 40px 0px; + color: #374151 +} + +.look { + width: 357px; + height: 56px; + font-size: 20px; + font-weight: 600; + border-radius: 40px; + background-color: #3682ff; + color: white; + padding: 16px 120px; /*124px로 하면 마지막 글자가 자꾸 내려가요 */ +} + +.box1 { + width: 955px; + height: 444px; + background-color: #fcfcfc; + position: absolute; + top: 138px; + left: 360px; + display: flex; +} + +.box2 { + width: 955px; + height: 444px; + background-color: #fcfcfc; + position: absolute; + top: 138px; + right: 360px; + display: flex; +} + +.img { + width: 588px; + height: 444px +} + +.explain { + width: 367px; + height: 238px; +} + +.explain_box1 { + margin-top:103px; + margin-bottom: 103px; + margin-left: 40px; +} + +.explain_box2 { + margin-top:103px; + margin-bottom: 103px; + margin-right: 40px; +} + +.part2-2 .explain_box2 { + text-align: right; +} + +.explain_title { + color:#3682ff; + font-weight: 700; + font-size: 18px; + line-height: 26px; +} + +.information { + width: 1120px; + height: 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + top: 20px; + left: 400px; +} + +.icon { + width: 20px; + height: 20px; +} + +.icons { + width: 116px; + height: 20px; + display: flex; + justify-content: space-between; +} + +@media (min-width: 1920px) { + .part1 { + width: 100%; + } +} + +/* 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요. */ \ No newline at end of file