diff --git a/common.css b/common.css new file mode 100644 index 00000000..382800fc --- /dev/null +++ b/common.css @@ -0,0 +1,56 @@ +.btn { + cursor: pointer; + display: inline-block; + text-decoration: none; + text-align: center; + border: none; + background-color: #3692ff; + color: #ffffff; + padding: 10px 20px; + border-radius: 10px; + font-size: 16px; + transition: background-color 0.2s ease; +} + +.btn--rounded { + border-radius: 50px; +} + +.btn--small { + padding: 8px 16px; + font-size: 14px; +} + +.btn--large { + padding: 12px 24px; + font-size: 18px; +} + +.btn:hover { + background-color: #2b74cc; /* Darker shade for hover */ +} + +.btn:active { + transform: translateY(1px); +} + +.btn:focus { + outline: 2px solid #3692ff; + outline-offset: 2px; +} + +.btn--primary { + background-color: #3692ff; + color: #ffffff; +} + +.btn--secondary { + background-color: transparent; + color: #3692ff; + border: 2px solid #3692ff; +} + +.btn--secondary:hover { + background-color: #3692ff; + color: #ffffff; +} diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..20cd8613 --- /dev/null +++ b/faq.html @@ -0,0 +1,11 @@ + + + + + + items + + +

빈 페이지

+ + diff --git a/icon_facebook.png b/icon_facebook.png new file mode 100644 index 00000000..65edf9a2 Binary files /dev/null and b/icon_facebook.png differ diff --git a/icon_instagram.png b/icon_instagram.png new file mode 100644 index 00000000..39eb0811 Binary files /dev/null and b/icon_instagram.png differ diff --git a/icon_twiter.png b/icon_twiter.png new file mode 100644 index 00000000..2b516cf4 Binary files /dev/null and b/icon_twiter.png differ diff --git a/icon_youtube.png b/icon_youtube.png new file mode 100644 index 00000000..845dad34 Binary files /dev/null and b/icon_youtube.png differ diff --git a/image1.png b/image1.png new file mode 100644 index 00000000..5eb83209 Binary files /dev/null and b/image1.png differ diff --git a/image2.png b/image2.png new file mode 100644 index 00000000..9e6fe6eb Binary files /dev/null and b/image2.png differ diff --git a/image3.png b/image3.png new file mode 100644 index 00000000..09a09337 Binary files /dev/null and b/image3.png differ diff --git a/image4.png b/image4.png new file mode 100644 index 00000000..78ffa0c4 Binary files /dev/null and b/image4.png differ diff --git a/image5.png b/image5.png new file mode 100644 index 00000000..716a6a12 Binary files /dev/null and b/image5.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..bd336509 --- /dev/null +++ b/index.html @@ -0,0 +1,156 @@ + + + + + + + + + 판다마켓 + + +
+ +
+ +
+
+
+
+
+

일상의 모든 물건을

+

거래해보세요

+
+
+ 구경하러 가기 +
+
+
+
+ 메인이미지 +
+
+
+
+
+
+
+
+ 구매를 원하시는 상품을 검색하세요 +
+
+

Hot Item

+

+ 구매를 원하는
상품을 검색하세요 확인해 보세요 +

+

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

+
+
+
+
+ 인기상품 그림 +
+
+

Search

+

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

+

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

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

Register

+

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

+

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

+
+
+
+
+
+ + + + diff --git a/items.html b/items.html new file mode 100644 index 00000000..20cd8613 --- /dev/null +++ b/items.html @@ -0,0 +1,11 @@ + + + + + + items + + +

빈 페이지

+ + diff --git a/login.html b/login.html new file mode 100644 index 00000000..61161f71 --- /dev/null +++ b/login.html @@ -0,0 +1,11 @@ + + + + + + Login + + +

빈 페이지

+ + diff --git a/logo.png b/logo.png new file mode 100644 index 00000000..6b4db505 Binary files /dev/null and b/logo.png differ diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..20cd8613 --- /dev/null +++ b/privacy.html @@ -0,0 +1,11 @@ + + + + + + items + + +

빈 페이지

+ + diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..dea8d92d --- /dev/null +++ b/reset.css @@ -0,0 +1,5 @@ +* { + margin: 0 0; + padding: 0 0; + box-sizing: border-box; +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..33fdc84a --- /dev/null +++ b/style.css @@ -0,0 +1,135 @@ +/* 헤더부분 */ + +nav { + align-items: center; +} + +.navbar { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + max-width: 1520px; + padding: 0 200px; + margin: 0 auto; + width: 100%; +} + +.logo-img { + height: 50px; + width: auto; +} + +.hero-section { + background-color: #cfe5ff; + height: 400px; +} + +.hero-main-img { + height: 250px; + width: auto; + position: relative; + top: 75px; +} + +.hero-container { + display: flex; + gap: 10px; + align-items: center; + justify-content: center; + height: 400px; + width: auto; + position: relative; +} + +.hero-img { + position: relative; + bottom: 0; +} + +.hero-container .hero-text-block { + display: flex; + flex-direction: column; + gap: 25px; +} + +.hero-button { + width: 100%; +} + +.look-button { + border-radius: 50px; +} + +.section2-div .part1, +.section2-div .part3 { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 50px; + margin-top: 50px; +} + +.subImage { + height: 300px; + width: auto; +} + +.subTitle { + width: 250px; +} + +.subTitle1 { + font-size: 12px; + font-weight: 1000; + color: #3692ff; + margin-bottom: 20px; +} + +.subTitle2 { + font-size: 25px; + font-weight: 1000; + margin-bottom: 20px; +} + +.section2-div .part2 { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: 50px; + margin-top: 50px; +} + +.right { + text-align: right; +} + +footer .section2 { + background-color: #000000; + display: flex; + justify-content: space-around; + height: 200px; + padding-top: 50px; +} + +.licence { + color: #ffffff; +} + +.privacy, +.FAQ { + margin: 0; + padding: 0; + background-color: #000000; + margin-left: 20px; + color: #ffffff; + text-decoration: none; +} + +.social-icon img { + height: 20px; + width: auto; + margin-left: 10px; +}