diff --git a/23-Sprint-Mission/images/landing-content-footer.svg b/23-Sprint-Mission/images/landing-content-footer.svg new file mode 100644 index 0000000..8aac2a0 --- /dev/null +++ b/23-Sprint-Mission/images/landing-content-footer.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/23-Sprint-Mission/images/landing-content-header.svg b/23-Sprint-Mission/images/landing-content-header.svg new file mode 100644 index 0000000..687771d --- /dev/null +++ b/23-Sprint-Mission/images/landing-content-header.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/23-Sprint-Mission/images/landing-section-1.svg b/23-Sprint-Mission/images/landing-section-1.svg new file mode 100644 index 0000000..56aa003 --- /dev/null +++ b/23-Sprint-Mission/images/landing-section-1.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/23-Sprint-Mission/images/landing-section-2.svg b/23-Sprint-Mission/images/landing-section-2.svg new file mode 100644 index 0000000..be6cba6 --- /dev/null +++ b/23-Sprint-Mission/images/landing-section-2.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/23-Sprint-Mission/images/landing-section-3.svg b/23-Sprint-Mission/images/landing-section-3.svg new file mode 100644 index 0000000..82ad0e3 --- /dev/null +++ b/23-Sprint-Mission/images/landing-section-3.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/23-Sprint-Mission/images/logo.svg b/23-Sprint-Mission/images/logo.svg new file mode 100644 index 0000000..010acd4 --- /dev/null +++ b/23-Sprint-Mission/images/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/23-Sprint-Mission/index.css b/23-Sprint-Mission/index.css new file mode 100644 index 0000000..d296ee7 --- /dev/null +++ b/23-Sprint-Mission/index.css @@ -0,0 +1,177 @@ +/* common */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +.gnb { + width: 1120px; + margin: 9.5px auto; + +} + +.gnb > nav { + display: flex; + margin: 0; + justify-content: space-between; + align-items: center; +} + +.btn-small-48{ + padding: 12px 23px; + background-color: #3692FF; + border-radius: 8px; + color: #F3F4F6; + vertical-align: middle; + text-align: center; + + font: 700 16px/26px; +} + +.btn-small-48:hover { + background-color: #1967D6; +} + +.btn-small-48:active { + background-color: #1251AA; +} + +.btn-small-48:disabled { + background-color: #9CA3AF; +} + +a { + text-decoration: none; +} + +.btn-large{ + padding: 16px 124px; + background-color: #3692FF; + border-radius: 40px; + color: #F3F4F6; + vertical-align: middle; + text-align: center; + + font: 700 16px/26px; +} + +.btn-large:hover { + background-color: #1967D6; +} + +.btn-large:active { + background-color: #1251AA; +} + +.btn-large:disabled { + background-color: #9CA3AF; +} + +/* index.css */ +.login-button { + width: 128px; + height: 48px; +} + +.landing-header { + background-color: #CFE5FF; + padding-top: 200px; +} + +.landing-header > div { + width: 1110px; + margin: auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.landing-heading { + font-weight: 700; + font-size: 40px; + line-height: 1.4em; + color: #374151; +} + +.landing-header-content { + display: flex; + flex-direction: column; + gap: 32px; + margin-bottom: 60px; +} + +.landing-section { + display: flex; + align-items: center; + gap: 64px; + width: 988px; + margin: 138px auto; + background-color: #fcfcfc; +} + + + +.landing-section-content > span { + font: 800 18px/26px; + color: #3692FF; +} + +.landing-section-content > div { + margin-top: 12px; +} + +.landing-heading-2 { + font-weight: 500; + font-size: 24px; + line-height: 32px; + color: #374151 +} + +/* landing footer */ +.landing-footer { + background-color: #CFE5FF; + padding-top: 200px; +} + +.landing-footer > div { + width: 1110px; + margin: auto; + display: flex; + justify-content: space-between; + align-items: center; +} + + +.landing-footer-content { + display: flex; + flex-direction: column; + gap: 32px; + margin-bottom: 60px; +} + +/*footer*/ +.footer { + height: 160px; + background-color: #111827; +} + +.w-274 { + width: 274px; +} + +.w-288 { + width: 288px; +} + +.w-335 { + width: 335px; +} + +.flex-reverse { + flex-direction: row-reverse; +} + +.text-right { + text-align: right; +} \ No newline at end of file diff --git a/23-Sprint-Mission/index.html b/23-Sprint-Mission/index.html new file mode 100644 index 0000000..6d3699f --- /dev/null +++ b/23-Sprint-Mission/index.html @@ -0,0 +1,87 @@ + + + + + + 판다마켓 + + + + + + + +
+ +
+ +
+
+
+
+

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

+ 구경하러 가기 +
+ +
+
+ +
+ +
+ Hot Item +
+

인기 상품을
확인해 보세요

+

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

+
+
+
+ +
+ +
+ Search +
+

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

+

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

+
+
+
+ +
+ +
+ Register +
+

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

+

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

+
+
+
+ +
+
+
+

믿을 수 있는
판다마켓 중고 거래

+
+ +
+
+ +
+ + + + diff --git a/23-Sprint-Mission/main.css b/23-Sprint-Mission/main.css new file mode 100644 index 0000000..14bc93d --- /dev/null +++ b/23-Sprint-Mission/main.css @@ -0,0 +1,5 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} \ No newline at end of file diff --git a/23-Sprint-Mission/reset.css b/23-Sprint-Mission/reset.css new file mode 100644 index 0000000..e69de29 diff --git a/images/landing-content-footer.svg b/images/landing-content-footer.svg new file mode 100644 index 0000000..8aac2a0 --- /dev/null +++ b/images/landing-content-footer.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/landing-content-header.svg b/images/landing-content-header.svg new file mode 100644 index 0000000..687771d --- /dev/null +++ b/images/landing-content-header.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/landing-section-1.svg b/images/landing-section-1.svg new file mode 100644 index 0000000..56aa003 --- /dev/null +++ b/images/landing-section-1.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/landing-section-2.svg b/images/landing-section-2.svg new file mode 100644 index 0000000..be6cba6 --- /dev/null +++ b/images/landing-section-2.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/landing-section-3.svg b/images/landing-section-3.svg new file mode 100644 index 0000000..82ad0e3 --- /dev/null +++ b/images/landing-section-3.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..010acd4 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/index.css b/index.css new file mode 100644 index 0000000..fe05b73 --- /dev/null +++ b/index.css @@ -0,0 +1,177 @@ +/* common */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +.gnb { + width: 1120px; + margin: 9.5px auto; + +} + +.gnb > nav { + display: flex; + margin: 0; + justify-content: space-between; + align-items: center; +} + +.btn-small-48{ + padding: 12px 23px; + background-color: #3692FF; + border-radius: 8px; + color: #F3F4F6; + vertical-align: middle; + text-align: center; + + font: 700 16px/26px; +} + +.btn-small-48:hover { + background-color: #1967D6; +} + +.btn-small-48:active { + background-color: #1251AA; +} + +.btn-small-48:disabled { + background-color: #9CA3AF; +} + +a { + text-decoration: none; +} + +.btn-large{ + padding: 16px 124px; + background-color: #3692FF; + border-radius: 40px; + color: #F3F4F6; + vertical-align: middle; + text-align: center; + + font: 700 16px/26px; +} + +.btn-large:hover { + background-color: #1967D6; +} + +.btn-large:active { + background-color: #1251AA; +} + +.btn-large:disabled { + background-color: #9CA3AF; +} + +/* index.css */ +.login-button { + width: 128px; + height: 48px; +} + +.landing-header { + background-color: #CFE5FF; + padding-top: 200px; +} + +.landing-header > div { + width: 1110px; + margin: auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.landing-heading { + font-weight: 700; + font-size: 40px; + line-height: 1.4em; + color: #374151; +} + +.landing-header-content { + display: flex; + flex-direction: column; + gap: 32px; + margin-bottom: 60px; +} + +.landing-section { + display: flex; + align-items: center; + gap: 64px; + width: 988px; + margin: 138px auto; + background-color: #fcfcfc; +} + + + +.landing-section-content > span { + font: 800 18px/26px; + color: #3692FF; +} + +.landing-section-content > div { + margin-top: 12px; +} + +.landing-heading-2 { + font-weight: 500; + font-size: 24px; + line-height: 32px; + color: #374151 +} + +/* landing footer */ +.landing-footer { + background-color: #CFE5FF; + padding-top: 200px; +} + +.landing-footer > div { + width: 1110px; + margin: auto; + display: flex; + justify-content: space-between; + align-items: center; +} + + +.landing-footer-content { + display: flex; + flex-direction: column; + gap: 32px; + margin-bottom: 60px; +} + +/*footer*/ +.footer { + height: 160px; + background-color: #111827; +} + +.w-274 { + width: 274px; +} + +.w-288 { + width: 288px; +} + +.w-335 { + width: 335px; +} + +.flex-reverse { + flex-direction: row-reverse; +} + +.text-right { + text-align: right; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..b3c5f5b --- /dev/null +++ b/index.html @@ -0,0 +1,87 @@ + + + + + + 판다마켓 + + + + + + + +
+ +
+ +
+
+
+
+

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

+ 구경하러 가기 +
+ +
+
+ +
+ +
+ Hot Item +
+

인기 상품을
확인해 보세요

+

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

+
+
+
+ +
+ +
+ Search +
+

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

+

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

+
+
+
+ +
+ +
+ Register +
+

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

+

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

+
+
+
+ +
+
+
+

믿을 수 있는
판다마켓 중고 거래

+
+ +
+
+ +
+ + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..62f0ef4 --- /dev/null +++ b/main.css @@ -0,0 +1,5 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} \ No newline at end of file