diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index a8581477..4b5b798e 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,9 +2,14 @@ ### 기본 -- [x] -- [] -- [] +- 랜딩 페이지의 url path는 루트(‘/’) 입니다. +- title은 “판다마켓”으로 설정해 주세요. +- 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 - 커지도록 해주세요. +- 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고,- 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요. +- 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요. +- “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동시켜주세요. +- “구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지) + ### 심화 @@ -18,7 +23,7 @@ ## 스크린샷 -![image](이미지url) +https://66b6c74acc7773b04ed9bcb6--weekly-kotaeho.netlify.app/ ## 멘토에게 diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..42c36749 --- /dev/null +++ b/faq.html @@ -0,0 +1,32 @@ + + + + + + + + + 판다마켓 - FAQ + + + + + + +

임시 FAQ 페이지

+ + diff --git a/images/home/bottom-banner-image.png b/images/home/bottom-banner-image.png new file mode 100644 index 00000000..4a5f85b2 Binary files /dev/null and b/images/home/bottom-banner-image.png differ diff --git a/images/home/feature1-image.png b/images/home/feature1-image.png new file mode 100644 index 00000000..4684b9a7 Binary files /dev/null and b/images/home/feature1-image.png differ diff --git a/images/home/feature2-image.png b/images/home/feature2-image.png new file mode 100644 index 00000000..31e20b97 Binary files /dev/null and b/images/home/feature2-image.png differ diff --git a/images/home/feature3-image.png b/images/home/feature3-image.png new file mode 100644 index 00000000..5b8084a7 Binary files /dev/null and b/images/home/feature3-image.png differ diff --git a/images/home/hero-image.png b/images/home/hero-image.png new file mode 100644 index 00000000..d28fb652 Binary files /dev/null and b/images/home/hero-image.png differ diff --git a/images/home/password_eye.png b/images/home/password_eye.png new file mode 100644 index 00000000..69a949ba Binary files /dev/null and b/images/home/password_eye.png differ diff --git a/images/logo/Component 2.png b/images/logo/Component 2.png new file mode 100644 index 00000000..f75dc761 Binary files /dev/null and b/images/logo/Component 2.png differ diff --git a/images/logo/Component 3.png b/images/logo/Component 3.png new file mode 100644 index 00000000..bd767800 Binary files /dev/null and b/images/logo/Component 3.png differ diff --git a/images/logo/favicon.ico b/images/logo/favicon.ico new file mode 100644 index 00000000..9fecc692 Binary files /dev/null and b/images/logo/favicon.ico differ diff --git a/images/logo/panda-market-logo.png b/images/logo/panda-market-logo.png new file mode 100644 index 00000000..a1dc1c6a Binary files /dev/null and b/images/logo/panda-market-logo.png differ diff --git a/images/social/facebook-logo.svg b/images/social/facebook-logo.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/images/social/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/instagram-logo.svg b/images/social/instagram-logo.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/images/social/instagram-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/twitter-logo.svg b/images/social/twitter-logo.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/images/social/twitter-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/social/youtube-logo.svg b/images/social/youtube-logo.svg new file mode 100644 index 00000000..5fcc0ff3 --- /dev/null +++ b/images/social/youtube-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 00000000..802dcd64 --- /dev/null +++ b/index.html @@ -0,0 +1,183 @@ + + + + + + + 판다마켓 + + + + + + + + + + + +
+ + + 판다마켓 홈 + + + 로그인 +
+ + +
+ + + + + +
+ +
+ + 인기 상품 +
+

Hot item

+

인기 상품을
확인해 보세요

+

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

+
+
+
+
+

Search

+

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

+

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

+
+ 검색 기능 +
+
+ 판매 상품 등록 +
+

Register

+

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

+

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

+
+
+
+ + +
+ + + + diff --git a/items.html b/items.html new file mode 100644 index 00000000..7829b822 --- /dev/null +++ b/items.html @@ -0,0 +1,32 @@ + + + + + + + + + 판다마켓 - 상품 리스트 + + + + + + +

임시 상품 리스트 페이지

+ + diff --git a/login.html b/login.html new file mode 100644 index 00000000..2159024b --- /dev/null +++ b/login.html @@ -0,0 +1,54 @@ + + + + + + + + + 판다마켓 - 로그인 + + + + + + +
+ + + +
+ + + +
+ +
+ +
+
+

간편 로그인하기

+ +
+

판다마켓이 처음이신가요? 회원가입

+
+ + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..d37e54e5 --- /dev/null +++ b/privacy.html @@ -0,0 +1,32 @@ + + + + + + + + + 판다마켓 - 이용약관 + + + + + + +

임시 이용약관 페이지

+ + diff --git a/sign_in.html b/sign_in.html new file mode 100644 index 00000000..aba0c6dd --- /dev/null +++ b/sign_in.html @@ -0,0 +1,35 @@ + + + + + 회원가입 + + + +
+ + + +
+ + + + + + + + + +
+
+

간편 로그인하기

+ +
+

판다마켓이 처음이신가요? 로그인

+ +
+ + \ No newline at end of file diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 00000000..b4625b79 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,247 @@ +/* + 전체 선택자(*) 및 a, button, img 태그에 대한 CSS는 새로운 웹 개발 프로젝트를 시작할 때 전역 스타일에 기본적으로 넣어주면 좋은 내용들입니다. + 브라우저 간의 스타일 차이를 최소화하고 예측 가능한 레이아웃을 위해 브라우저 기본 세팅을 일부 리셋해 준다고 생각하면 됩니다. +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* 링크가 상위 요소 또는 설정된 기본 텍스트 색상과 동일하게 표현되길 원한다면 a 태그에 명시적으로 color: inherit을 지정해 줘야 합니다. */ +a { + text-decoration: none; + color: inherit; +} + +button { + background: none; + border: none; + outline: none; + box-shadow: none; + cursor: pointer; +} + +/* + - 이미지는 기본적으로 inline 요소로 취급되기 때문에 텍스트의 baseline에 맞춰서 정렬됩니다. + 브라우저가 이미지를 텍스트와 같은 라인에 배치할 때 g, j, p 등 아래로 치우치는 알파벳의 descender 공간을 예약해 놓기 때문에 이미지와 주변 텍스트 사이에 의도하지 않은 작은 간격이 생기는 경우가 많습니다. + 태그에 vertical-align: bottom;을 설정해 주면 이미지가 텍스트 라인의 가장 아래쪽에 맞춰서 정렬되어, 불필요한 공간 없이 배치할 수 있습니다. + - 전역적으로 의 display 유형을 inline이 아닌 block으로 바꿔 해당 이슈를 해결하는 경우도 있습니다. +*/ +img { + vertical-align: bottom; +} + +/* + 프로젝트 전체에 일관된 텍스트 스타일을 적용합니다. + word-break: keep-all 속성을 사용하면 띄어쓰기를 기준으로 줄바꿈하도록 설정하여 어절 기반의 한국어 특성에 적합한 읽기 편한 레이아웃을 제공할 수 있습니다. +*/ +body { + color: #374151; + word-break: keep-all; + font-family: "Pretendard", sans-serif; +} + +/* 여러 요소가 나란히 배열되어 있을 때는 티가 나지 않아 보여도 항상 잊지 말고 display: flex; align-items: center;로 세로 중앙 정렬을 맞춰주세요. */ +header { + width: 100%; + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 200px; + background-color: #ffffff; + border-bottom: 1px solid #dfdfdf; +} + +footer { + background-color: #111827; + color: #9ca3af; + display: flex; + justify-content: space-between; + align-items: center; + padding: 32px 200px 108px 200px; + font-size: 16px; +} + +#footerMenu { + display: flex; + gap: 30px; + color: #e5e7eb; +} + +#socialMedia { + display: flex; + gap: 12px; +} + +/* 요소의 최대 너비를 1200px로 제한하고, 요소가 그보다 큰 경우에는 가로 중앙 정렬해 주는 inner container */ +.wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +h1 { + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0.02em; +} + +/* 위에서 스타일링해준