diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..352f8a90 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md new file mode 100644 index 00000000..e69de29b diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 00000000..6ffa80a7 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/Img_home_01.png b/img/Img_home_01.png new file mode 100644 index 00000000..2afef3f3 Binary files /dev/null and b/img/Img_home_01.png differ diff --git a/img/Img_home_02.png b/img/Img_home_02.png new file mode 100644 index 00000000..a3520522 Binary files /dev/null and b/img/Img_home_02.png differ diff --git a/img/Img_home_03.png b/img/Img_home_03.png new file mode 100644 index 00000000..ef5972b3 Binary files /dev/null and b/img/Img_home_03.png differ diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png new file mode 100644 index 00000000..3c3e8d5a Binary files /dev/null and b/img/Img_home_bottom.png differ diff --git a/img/Img_home_top.png b/img/Img_home_top.png new file mode 100644 index 00000000..5e05cc55 Binary files /dev/null and b/img/Img_home_top.png differ diff --git a/img/Property 1=md.png b/img/Property 1=md.png new file mode 100644 index 00000000..a236f46a Binary files /dev/null and b/img/Property 1=md.png differ diff --git a/img/Property 1=md@2x.png b/img/Property 1=md@2x.png new file mode 100644 index 00000000..2cfe6533 Binary files /dev/null and b/img/Property 1=md@2x.png differ diff --git a/img/Property 1=md@3x.png b/img/Property 1=md@3x.png new file mode 100644 index 00000000..fd25a1af Binary files /dev/null and b/img/Property 1=md@3x.png differ diff --git a/img/ic_facebook.png b/img/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/img/ic_facebook.png differ diff --git a/img/ic_instagram.png b/img/ic_instagram.png new file mode 100644 index 00000000..98e24ea6 Binary files /dev/null and b/img/ic_instagram.png differ diff --git a/img/ic_twitter.png b/img/ic_twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/img/ic_twitter.png differ diff --git a/img/ic_youtube.png b/img/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/img/ic_youtube.png differ diff --git a/index.css b/index.css new file mode 100644 index 00000000..1cd3a75e --- /dev/null +++ b/index.css @@ -0,0 +1,175 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + background-color: #ffffff; + color: #374151; + font-family: 'Noto Sans KR', sans-serif; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + width: 1120px; + margin: 0 auto; +} + +.main-container { + padding: 138px 0; + display: grid; + grid-template-areas: + "hotItem" + "search" + "register"; + gap: 276px; + width: 100%; +} + +.button { + background-color: #3692ff; + padding: 16px 124px; + border-radius: 9999px; + color: #f9fafb; + margin-bottom:100px; + text-decoration: none; + font-size: 16px; +} + +.button:hover { + background-color: #1251aa +} + +.login { + padding: 16px 34px; + border-radius: 10px; + color: #f3f4f6; + margin: 0; +} + +.title-helper { + display: flex; + justify-content: space-between; + align-items: flex-end; + margin: 0 auto; + width: 1110px; +} + +.title { + padding: 200px 0 0; + background-color: #cfe5ff; + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +.title-p { + display: flex; + flex-direction: column; + flex-shrink: 0; +} + +.subtitle { + font-size: 40px; + font-weight: 700; + margin-bottom: 40px; +} + + +.home { + flex-shrink: 0; +} + + +section { + margin: 0 auto; +} + +.badge { + font-size: 18px; + font-weight: 700; + color: #3692ff; + line-height: 26px; +} + +.section-title { + font-size: 40px; + font-weight: 700; + line-height: 140%; +} + +p { + font-size: 24px; + font-weight: 500; + line-height: 32px; +} + +.hotItem { + grid-area: hotItem; +} + +.register { + grid-area: register; +} + +.hotItem, +.search, +.register { + display: flex; + justify-content: center; + border-radius: 12px; + align-items: center; + gap: 64px; + background-color: #fcfcfc; + width: 1110px; +} + +.search { + grid-area: search; + flex-direction: row-reverse; +} + +.search +.section-content { + text-align: right; +} + +.bottom { + background-color: #fcfcfc; + padding-top: 138px; +} + +.bottom +.subtitle { + margin-bottom: 160px; +} + +footer { + background-color: #111827; + height: 160px; + +} + +.footer { + display: flex; + justify-content: space-around; + align-items: center; + padding-top: 40px; + margin: 0 auto; + width: 1110px; +} + +.link { + text-decoration: none; + color: #e5e7eb; +} + +footer a { + padding: 0 10px; +} + +a { + cursor: pointer; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..01cca906 --- /dev/null +++ b/index.html @@ -0,0 +1,127 @@ + + + + + + 판다마켓 + + + + + + + + + +
+
+
+
+
+ 일상의 모든 물건을
+ 거래해 보세요 +
+ + 구경하러 가기 + +
+ 동산 위, 가운데 장바구니를 들고있는 판다마켓 캐릭터를 중심으로 왼 편에는 주거 건물을 표현한 그림이 있고 오른 편에는 나무 두 그루가 있다. +
+
+
+ +
+
+
+ 두 판다 캐릭터의 뒷 모습과 그들 앞에 여러 품목 중 하트가 많은 상품을 고르는 듯 한 모습 +
+ +

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

+

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

+
+
+ +
+ 나열된 여러 아이템 중에 물음표가 그려져 있는 아이텐에 돋보기를 가져다 대는 그림 +
+ +

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

+

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

+
+
+ +
+ 나열된 폴더 들 중 한 폴더 위에 각각 연필꽂이, 책, 하트모양 안경이 그려진 아이콘이 있고 요술봉으로 뭔가 하는 그림 +
+ +

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

+

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

+
+
+
+
+ +
+
+
+
+
+ 믿을 수 있는
+ 판다마켓 중고 거래 +
+
+ 동산 위에 장바구니를 들고있는 두 팬더 캐릭터들이 만족스럽게 거래를 마친 듯 리뷰와 댓글을 다는 듯한 모습을 말풍선으로 표현하였고 기분좋게 서로 인사하며 각자 갈 길을 걷고있다. +
+
+
+ + + + \ No newline at end of file