diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..5ae2b19e Binary files /dev/null and b/.DS_Store differ diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 00000000..cb8ac217 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/click_main.png b/images/click_main.png new file mode 100644 index 00000000..2e980ac1 Binary files /dev/null and b/images/click_main.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_login.png b/images/ic_login.png new file mode 100644 index 00000000..fbc8a4f3 Binary files /dev/null and b/images/ic_login.png differ diff --git a/images/ic_pandamarket_logo.png b/images/ic_pandamarket_logo.png new file mode 100644 index 00000000..2d40c1d1 Binary files /dev/null and b/images/ic_pandamarket_logo.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/img_home_top.png b/images/img_home_top.png new file mode 100644 index 00000000..b403a315 Binary files /dev/null and b/images/img_home_top.png differ diff --git a/images/img_hotitem.png b/images/img_hotitem.png new file mode 100644 index 00000000..8e68b13f Binary files /dev/null and b/images/img_hotitem.png differ diff --git a/images/img_main.png b/images/img_main.png new file mode 100644 index 00000000..9989e29c Binary files /dev/null and b/images/img_main.png differ diff --git a/images/img_main2.png b/images/img_main2.png new file mode 100644 index 00000000..40bb8ce5 Binary files /dev/null and b/images/img_main2.png differ diff --git a/images/img_resister.png b/images/img_resister.png new file mode 100644 index 00000000..651a00fa Binary files /dev/null and b/images/img_resister.png differ diff --git a/images/img_search.png b/images/img_search.png new file mode 100644 index 00000000..8a067ec5 Binary files /dev/null and b/images/img_search.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..cf3fe306 --- /dev/null +++ b/index.html @@ -0,0 +1,67 @@ + + + + + + 판다마켓 + + + +
+
+ + + + +
+
+
+
+
+

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

+ +

구경하러 가기

 +
+ 판다 +
+
+
+
+ 핫 아이템 + 검색 + 등록 +
+
+
+ 하단이미지 +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..e094529d --- /dev/null +++ b/style.css @@ -0,0 +1,204 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } +:root { + view-transition-name: root; +} + +html { + display: block; +} + +.header{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 9px 400px; + width: 1920px; + height: 70px; + color: #ffffff; + margin: 0 auto; + gap: 10px; + border-bottom: 1px; +} + +.logo{ + width: 153px; + height: 51px; + margin: 0 auto; + display: block; + cursor: pointer; +} + +.login{ + width: 128px; + height: 48px; + border-radius: 8px; + + gap: 10px; + margin: 0 200; + display: block; +} + +.headline-wrap{ + display: flex; + justify-content: center; + align-items:center; + padding-top: 200px; + width: 1920px; + height: 540px; + margin: 0 auto; + background-color: #CFE5FF; + width: 100%; +} + +.headline{ + display: flex; + justify-content: center; + align-items: center; + width: 1110px; + height: 340px; + gap: 7px; + margin: 0 auto; +} + +.headline-content{ + display: flex; + position: relative; + flex-direction: column; + justify-content: center; + align-items: center; + width: 357px; + height: 260px; + padding: auto 60px; + gap: 32px; +} + +.headline-heading{ + + margin: 0 auto; + height: 112px; + font-size: 40px; + font-weight: 700; + line-height: 56px; + font-family: Pretendard; + color: #374151; +} + +.headline-button{ + text-decoration: none; + width: 357px; + height: 56px; + border-radius: 40px; + padding: 16px 120px; + background-color: #3B82F6; + color: #F9FAFB; + font-size: 20px; + font-weight: 500; + text-align: center; + font-family: Pretendard; + cursor: pointer; +} + +.headline-content a { + text-decoration: none; + } + +.headline-image{ + display: flex; +} + +.wrap{ + display: flex; + justify-content: center; + width: 1920px; + height: 2160px; + position: relative; + top: 610px; + padding: 138px 466px; + gap: 10px; + margin: 0 auto; +} + +.content{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 988px; + height: 444px; + border-radius: 12px; + gap: 138px; + margin: 0 auto; +} + +.main2{ + display: flex; + justify-content: center; + align-items: center; + width: 1920px; + height: 540px; + top: 2908px; + margin: 0 auto; +} + +footer { + display: flex; + justify-content: center; + align-items: center; + width: 1920px; + height: 160px; + top: 3348px; + padding: 32px 400px; + background-color: #111827; + gap: 10px; + margin: 0 auto; + } + +.footer-content { + display: flex; + justify-content:space-between; + align-items: center; + width: 1120px; + height: 20px; + top: -20px; + padding-bottom: 50px; + } + +.footer-one{ + display: flex; + width: 112px; + height: 19px; + font-family: pretendard; + font-weight: 400px; + font-size: 16px; + line-height: 19.09px; + text-align: center; + color: #9CA3AF; +} + +.footer-two{ + display: flex; + height: 19px; + gap: 30px; + font-family: pretendard; + font-size: 16px; + line-height: 19.09px; + text-align: center; + color: #E5E7EB; + text-decoration: none; +} + +.footer-two a{ + color: #E5E7EB; + text-decoration: none; +} + +.footer-icons{ + display: flex; + width: 116px; + height: 20px; + gap: 12px; +} \ No newline at end of file