diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/assets/apple_store.svg b/assets/apple_store.svg new file mode 100644 index 0000000..9a39510 --- /dev/null +++ b/assets/apple_store.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/daangnee.png b/assets/daangnee.png new file mode 100644 index 0000000..778884b Binary files /dev/null and b/assets/daangnee.png differ diff --git a/assets/google_play.svg b/assets/google_play.svg new file mode 100644 index 0000000..de0ef4d --- /dev/null +++ b/assets/google_play.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/headerImg.png b/assets/headerImg.png new file mode 100644 index 0000000..fd42bad Binary files /dev/null and b/assets/headerImg.png differ diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..94802f6 Binary files /dev/null and b/assets/logo.png differ diff --git a/mission/index.html b/mission/index.html index f6f815c..8a1a099 100644 --- a/mission/index.html +++ b/mission/index.html @@ -4,6 +4,47 @@ 당근마켓 클론 + + - +
+
+ +
+
    +
  • 중고거래
  • 동네업체
  • 알바
  • 부동산
  • 중고차 직거래
    • +
+
+ +
+
+ +
+
+
+

당신 근처의

지역 생활 커뮤니티

+
+

동네라서 가능한 모든 것

당근에서 가까운 이웃과 함께해요.

+
+ 당근이 캐릭터 + +
+ + \ No newline at end of file diff --git a/mission/page.html b/mission/page.html new file mode 100644 index 0000000..641502c --- /dev/null +++ b/mission/page.html @@ -0,0 +1,47 @@ + + + + + + 중고거래 + + + + +
+
+ +
+
    +
  • 중고거래
  • 동네업체
  • 알바
  • 부동산
  • 중고차 직거래
    • +
+
+ +
+
+ +
+

믿을만한
이웃 간 중고거래

+

동네 주민들과 가깝고 따뜻한 거래를
지금 경험해보세요.

+ +
+ +
+

중고거래 인기매물

+
+ + + + \ No newline at end of file diff --git a/mission/script.js b/mission/script.js index c5268ea..d62dab8 100644 --- a/mission/script.js +++ b/mission/script.js @@ -1 +1,14 @@ -// 화이팅.. +fetch('../data.json') + .then((response) => { + return response.json(); + }) + .then((data) => { + data.data.map((item) => { + document.querySelector('.item').innerHTML += `
+ ${item.name}
+ ${item.name}
+

123004원

+

${item.address}

+
`; + }) + }); \ No newline at end of file diff --git a/mission/style.css b/mission/style.css index cca57b3..aa2c4d6 100644 --- a/mission/style.css +++ b/mission/style.css @@ -3,3 +3,269 @@ padding: 0; box-sizing: border-box; } + +header { + display: flex; + justify-content: space-around; + position: fixed; + z-index: 5; + top: 0px; /* 도달했을때 고정시킬 위치 */ + height: 4.5em; + width: 100vw; + background-color: #ffffff; +} +#wrapLogo { + width: 103px; + height: 38px; +} +#logo { + width: 63px; + height: 33px; +} +a { + text-align: center; + color:black; +} +a:visited { + color: black; +} +a:hover{ + color: #868b94; +} +a:active { + color: #fe6f0f; +} + +#textColor{ + color: #fe6f0f; +} + +.bigBox1 { + width: 80vw; + height: 7vh; + display: flex; + justify-content: center; + align-items: center; +} + +#center { + display: flex; + justify-content: flex-start; + align-items: end; + width: 50vw; + height: 2.5vh; + margin: 0 auto; +} + +#wrapInputText { + display: flex; + justify-content: flex-end; + align-items: center; + width: 25vw; + height: 4vh; +} + +.menu { + display: flex; + float:left; + gap: 29px; +} +.menu li { + font-weight: 30%; + font-size: 113%; + display:inline-block; + text-align:center; +} + +input[type=text] { + width: 140%; + height: 105%; + margin: 10px; + padding: 13px; + font-size: 16px; + background: #f2f3f6; + border-radius: 5px; + outline: none; + border: 0; + color: #868b94; +} +input[type=text]:focus { + color: black; +} + +button { + width: 13em; + height: 105%; + border: 0.6px solid #a3a1a1; + border-radius: 5px; + background-color: #ffffff; + color: black; + font-size: 16px; +} + + +#section1{ + height: 750px; +} + +.indexMain { + width: 100vw; + height: 90vh; + background-color: #fffae0; + padding: 0 100px; +} +.wrapTextIndex{ + margin-bottom: 2em +} +.font { + font-size: 48px; + line-height: 75px; + width: 95vw; + height: 13vh; + /* margin-top: 1em; */ + /* padding: 40px 0 20px 0; */ +} +.indexP{ + margin-top: 1rem; + /* padding: 65px 0 20px 0; */ + font-size: 20px; + line-height: 1em; + color: #7c7c7c; + height: 1em; +} +#daangnee { + margin-left: 800px; + margin-top: -630px; + width: 680px; + height: 825px; +} +#test { + display: flex; + padding: 14%; + flex-direction: column; +} + +.mainButton { + width: 40em; + height: 4em; + border-radius: 10px; + border-style: none; + background-color: #fe6f0f; + color: #ffffff; + font-size: 16px; + margin-right: 1em; +} + +.buttonLogoImgGP { + position: relative; + left: -5px; + top: 3px; +} + +.buttonLogoImgAS { + position: relative; + left: -7px; + top: 0.4px; +} + +.AStext { + position: relative; + bottom: 4px; +} +.GPtext { + position: relative; + bottom: 3px; +} + +.mainButton > span{ + margin-bottom: 10px; +} + +span { + text-align: center; +} + +#buttonSort{ + width: 24em; + height: 11em; + display: flex; + justify-content: space-between; + margin-left: 14em; + margin-top: -24em; +} + +footer { + height: 90vh; + background-color: #ffffff; +} + +#banner { + width: 100vw; + height: 37.4vh; + padding-right: 37%; + padding-left: 30%; + background-color: #FFF1AA; +} + +#headerBanner { + width: 416px; + height: 318px; + position: relative; + bottom: 116px; + left: 355px; +} + +#pageText { + font-size: 33px; + width: 120em; + height: 130px; + line-height: 50px; + position: relative; + bottom: -120px; +} + +#pagePtext { + width: 768px; + height: 47.52px; + color: #212529; + position: relative; + bottom: -105px; + left: 3px; +} + +#product > h1 { + font-size: 32px; + text-align: center; + padding-top: 70px; +} + +.list{ + width: 40vw; + height: 100vh; +} +.item { + display: grid; + grid-template-columns: repeat(3,1fr); +} +article{ + margin-bottom: 50px; + margin-right: 50px; +} +.productImg { + width: 14em; + height: 15em; + border-radius: 20px; + border: 1px solid #a3a1a1; + margin-bottom: 20px; +} + +#wrapFooter { + display: flex; + justify-content:center; + margin-top: 50px; +} + +p { + line-height: 30px; + font-size: 16px; +} \ No newline at end of file