diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..e43b0f98 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/images/Img_home_01.png b/images/Img_home_01.png new file mode 100644 index 00000000..629cbdf7 Binary files /dev/null and b/images/Img_home_01.png differ diff --git a/images/Img_home_02.png b/images/Img_home_02.png new file mode 100644 index 00000000..2bd00bc6 Binary files /dev/null and b/images/Img_home_02.png differ diff --git a/images/Img_home_03.png b/images/Img_home_03.png new file mode 100644 index 00000000..e35fa4b9 Binary files /dev/null and b/images/Img_home_03.png differ diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png new file mode 100644 index 00000000..0464c29d Binary files /dev/null and b/images/Img_home_bottom.png differ diff --git a/images/Img_home_top.png b/images/Img_home_top.png new file mode 100644 index 00000000..c634226f Binary files /dev/null and b/images/Img_home_top.png differ diff --git a/images/btn_large.png b/images/btn_large.png new file mode 100644 index 00000000..f81eb738 Binary files /dev/null and b/images/btn_large.png differ diff --git a/images/btn_small.png b/images/btn_small.png new file mode 100644 index 00000000..a3be76a5 Binary files /dev/null and b/images/btn_small.png differ diff --git a/images/ic_facebook.png b/images/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/images/ic_facebook.png differ diff --git a/images/ic_instagram.png b/images/ic_instagram.png new file mode 100644 index 00000000..98e24ea6 Binary files /dev/null and b/images/ic_instagram.png differ diff --git a/images/ic_twitter.png b/images/ic_twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/images/ic_twitter.png differ diff --git a/images/ic_youtube.png b/images/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/images/ic_youtube.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 00000000..1fa247ed Binary files /dev/null and b/images/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..f1f9b637 --- /dev/null +++ b/index.html @@ -0,0 +1,85 @@ + + + + + + 판다마켓 + + + + +
+ +
+ 로그인 +
+ +
+ +
+
+
+

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

+
+ 구경하러 가기 +
+
+
+ +
+
+
+ +
+ + +
+

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..49091fc7 --- /dev/null +++ b/style.css @@ -0,0 +1,164 @@ +* { + box-sizing: border-box; + margin: 0; +} + +.click { + cursor: pointer; +} + +.logo { + width: 153px; + height: 51px; +} + +.login { + background-color: #3692FF; + border-radius: 8px; + width: 128px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; +} + +.login .click { + color: #FFFFFF; + text-decoration: none; + font-size: 16px; + font-weight: 600; +} + +.more { + background-color: #3692FF; + width: 357px; + height: 56px; + border-radius: 40px; + display: flex; + justify-content: center; + align-items: center; +} + +.more .click { + color: #FFFFFF; + text-decoration: none; + font-size: 20px; + font-weight: 600; +} + +header, +footer { + margin: 0 auto; + display: flex; + justify-content: space-between; +} + +header { + height: 70px; + padding: 0 200px; + align-items: center; +} + +.home-top, +.home-bottom { + background-color: #CFE5FF; + width: 100%; + height: 540px; + margin: 0; + display: flex; + justify-content: center; + position: relative; +} + +.container-1920 { + max-width: 1920px; + min-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; +} + +.home-top .img, +.home-bottom .img{ + max-width: 996px; + height: auto; + position: absolute; + bottom: 0; +} + +.home-main { + max-width: 1200px; + margin: 138px auto 276px; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 276px 0; +} + +.home-main .img { + width: 588px; + height: 444px; + margin: 0 auto; +} + +.home-main-text { + padding: 50px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.home-main-text.right { + text-align: right; +} + +.home-main .title { + color: #3692FF; + font-size: 18px; + font-weight: 700; + margin: 10px 0; +} + +.phrase { + color: #374151; + font-size: 40px; + font-weight: 700; + min-width: 290px; + margin: 20px 0; +} + +.home-main .description { + color: #374151; + font-size: 24px; + font-weight: 500; + margin: 10px 0; +} + +footer { + background-color: #111827; + height: 160px; + padding: 50px 200px; + font-size: 16px; + font-weight: 400; +} + +footer .copyright { + color: #9CA3AF; +} + +footer .privacy-and-faq { + display: grid; + grid-template: 19px / 100px 29px; + gap: 0 30px +} + +footer .privacy-and-faq > a { + color: #E5E7EB; + text-decoration: none; +} + +footer .social-link { + display: grid; + grid-template: 20px / repeat(4, 20px); + gap: 0 12px; +} \ No newline at end of file