diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 00000000..b295c7bb Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/home_01.png b/images/home_01.png new file mode 100644 index 00000000..6965b1f6 Binary files /dev/null and b/images/home_01.png differ diff --git a/images/home_02.png b/images/home_02.png new file mode 100644 index 00000000..d3101fd5 Binary files /dev/null and b/images/home_02.png differ diff --git a/images/home_03.png b/images/home_03.png new file mode 100644 index 00000000..ef5972b3 Binary files /dev/null and b/images/home_03.png differ diff --git a/images/home_bottom.png b/images/home_bottom.png new file mode 100644 index 00000000..d92035f6 Binary files /dev/null and b/images/home_bottom.png differ diff --git a/images/home_top.png b/images/home_top.png new file mode 100644 index 00000000..5d18781c Binary files /dev/null and b/images/home_top.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 00000000..98e24ea6 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/panda_logo.png b/images/panda_logo.png new file mode 100644 index 00000000..6fe205b2 Binary files /dev/null and b/images/panda_logo.png differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/images/twitter.png differ diff --git a/images/youtube.png b/images/youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/images/youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..04da35e1 --- /dev/null +++ b/index.html @@ -0,0 +1,128 @@ + + + + + 판다마켓 + + + + +
+
+ + +
+
+
+
+
+
+

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

+ 구경하러 가기 +
+ 인사하고 있는 판다 +
+
+ +
+
+ 판다가 옷을 보고 있는 이미지 +
+

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..8c749f34 --- /dev/null +++ b/style.css @@ -0,0 +1,216 @@ +* { + box-sizing: border-box; +} + +html { + font-family: Pretendard, sans-serif; +} + +body { + margin: 0; + padding: 0; + +} + +container { + width: 100%; + min-width: 1920px; + display: flex; + flex-direction: column; + justify-content: center; +} + +header { + background-color: #ffffff; + border: 1px solid #DFDFDF; + width: 100%; + height: 70px; + display: flex; + justify-content: center; + align-items: center; +} + +.header-contents { + width: 100%; + max-width: 1120px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} + +.logo a { + color: #3692FF; + font-family: 'ROKAF Sans'; + font-size: 25.63px; + font-weight: 700; + line-height: 100%; + text-decoration: none; + cursor: pointer; +} + +.login { + background-color: #3692FF; + color: #ffffff; + width: 128px; + height: 48px; + padding: 12px 23px; + gap: 10px; + border-radius: 8px; + font-size: 16px; + font-weight: 600; + line-height: 26px; + display: flex; + justify-content: center; + text-decoration: none; + cursor: pointer; +} + +main section { + background-color: #ffffff; + width: 100%; + height: auto; + padding: 80px 10%; + gap: 10px; + display: flex; + justify-content: center; + align-items: center; +} + +.branding { + background-color: #CFE5FF; + width: 100%; + height: 540px; + top: 70px; + display: flex; + justify-content: center; + align-items: flex-end; +} + +.branding-contents { + display: flex; + justify-content: center; + gap: 7px; +} + +.branding-contents.bottom { + align-items: center; + gap: 69px; +} + + +.description--branding-contents { + padding-bottom: 60px; + gap: 32px; +} + +.looking { + background-color: #3692FF; + color: #F9FAFB; + height: 56px; + border-radius: 40px; + padding: 14px 124px; + gap: 10px; + font-size: 20px; + font-weight: 600; + line-height: 32px; + text-align: center; + text-decoration: none; + cursor: pointer; +} + + +section .feature-contents { + background-color: #FCFCFC; + position: relative; + width: 988px; + height: auto; + max-height: 444px; + border-radius: 12px; + gap: 64px; + display: flex; + justify-content: center; + align-items: center; +} + +.feature-contents > img { + height: 100%; +} + +.feature-contents .content { + position: relative; + padding-right: 24px; + gap: 12px; +} + +.content .title { + color: #3692FF; + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +.content .description { + color: #374151; + gap: 24px; +} + +.content.reverse { + text-align: right; + padding-left: 24px; + padding-right: 0; +} + +.description h1 { + font-size: 40px; + font-weight: 700; + line-height: 140%; +} + +.description p { + font-size: 24px; + font-weight: 500; + line-height: 32px; +} + +footer { + background-color: #111827; + width: 100%; + height: 160px; + padding: 32px 400px; + gap: 10px; + display: flex; + justify-content: center; +} + +.footer-info { + color: #ffffff; + width: 100%; + max-width: 1120px; + display: flex; + justify-content: space-between; + font-size: 16px; + font-weight: 400; + line-height: 100%; +} + +.footer-page { + display: flex; + gap: 30px; +} + +.footer-info a { + color: #ffffff; + text-decoration: none; +} + +.social { + display: flex; + gap: 12px; +} \ No newline at end of file