diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..41557d51d Binary files /dev/null and b/.DS_Store differ diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index a85814779..48e9a70b4 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,14 +2,29 @@ ### 기본 -- [x] -- [] -- [] +- [x] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다. + PC: 1200px 이상 + Tablet: 768px 이상 ~ 1199px 이하 + Mobile: 375px 이상 ~ 767px 이하 + 375px 미만 사이즈의 디자인은 고려하지 않습니다 -### 심화 +##랜딩페이지 -- [x] -- [] +- [x] Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다. +- [ ] Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다. +- [x] 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다. + +##로그인, 회원가입 페이지 + +- [x] Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다. +- [x] Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다. +- [x] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다. + +## 심화 + +- [x] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요. +- [x] 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다. +- [x] 주소와 이미지는 자유롭게 설정하세요. ## 주요 변경사항 @@ -18,10 +33,9 @@ ## 스크린샷 -![image](이미지url) +스크린샷 2024-11-08 오후 11 27 02 ## 멘토에게 - - -- 셀프 코드 리뷰를 통해 질문 이어가겠습니다. diff --git a/12-Sprint-Mission/images/Img_home_01.png b/12-Sprint-Mission/images/Img_home_01.png new file mode 100644 index 000000000..49ac1f08c Binary files /dev/null and b/12-Sprint-Mission/images/Img_home_01.png differ diff --git a/12-Sprint-Mission/images/Img_home_02.png b/12-Sprint-Mission/images/Img_home_02.png new file mode 100644 index 000000000..5a10726e5 Binary files /dev/null and b/12-Sprint-Mission/images/Img_home_02.png differ diff --git a/12-Sprint-Mission/images/Img_home_03.png b/12-Sprint-Mission/images/Img_home_03.png new file mode 100644 index 000000000..4ead70730 Binary files /dev/null and b/12-Sprint-Mission/images/Img_home_03.png differ diff --git a/12-Sprint-Mission/images/Img_home_bottom.png b/12-Sprint-Mission/images/Img_home_bottom.png new file mode 100644 index 000000000..d0f82930b Binary files /dev/null and b/12-Sprint-Mission/images/Img_home_bottom.png differ diff --git a/12-Sprint-Mission/images/Img_home_top.png b/12-Sprint-Mission/images/Img_home_top.png new file mode 100644 index 000000000..bbfc5eedd Binary files /dev/null and b/12-Sprint-Mission/images/Img_home_top.png differ diff --git a/12-Sprint-Mission/images/Property 1=Typo.png b/12-Sprint-Mission/images/Property 1=Typo.png new file mode 100644 index 000000000..2e89dc16e Binary files /dev/null and b/12-Sprint-Mission/images/Property 1=Typo.png differ diff --git a/12-Sprint-Mission/images/Property 1=md.png b/12-Sprint-Mission/images/Property 1=md.png new file mode 100644 index 000000000..ba65195bd Binary files /dev/null and b/12-Sprint-Mission/images/Property 1=md.png differ diff --git a/12-Sprint-Mission/images/Property 1=sm.png b/12-Sprint-Mission/images/Property 1=sm.png new file mode 100644 index 000000000..4f0399c75 Binary files /dev/null and b/12-Sprint-Mission/images/Property 1=sm.png differ diff --git a/12-Sprint-Mission/images/btn_sort.png b/12-Sprint-Mission/images/btn_sort.png new file mode 100644 index 000000000..ae610b09b Binary files /dev/null and b/12-Sprint-Mission/images/btn_sort.png differ diff --git a/12-Sprint-Mission/images/favicon.ico b/12-Sprint-Mission/images/favicon.ico new file mode 100644 index 000000000..9fecc692d Binary files /dev/null and b/12-Sprint-Mission/images/favicon.ico differ diff --git a/12-Sprint-Mission/images/ic_facebook.png b/12-Sprint-Mission/images/ic_facebook.png new file mode 100644 index 000000000..fec1d9da4 Binary files /dev/null and b/12-Sprint-Mission/images/ic_facebook.png differ diff --git a/12-Sprint-Mission/images/ic_google.png b/12-Sprint-Mission/images/ic_google.png new file mode 100644 index 000000000..49852a6bd Binary files /dev/null and b/12-Sprint-Mission/images/ic_google.png differ diff --git a/12-Sprint-Mission/images/ic_instagram.png b/12-Sprint-Mission/images/ic_instagram.png new file mode 100644 index 000000000..7e834b20e Binary files /dev/null and b/12-Sprint-Mission/images/ic_instagram.png differ diff --git a/12-Sprint-Mission/images/ic_kakao.png b/12-Sprint-Mission/images/ic_kakao.png new file mode 100644 index 000000000..2a6cb101d Binary files /dev/null and b/12-Sprint-Mission/images/ic_kakao.png differ diff --git a/12-Sprint-Mission/images/ic_twitter.png b/12-Sprint-Mission/images/ic_twitter.png new file mode 100644 index 000000000..3a07baa63 Binary files /dev/null and b/12-Sprint-Mission/images/ic_twitter.png differ diff --git a/12-Sprint-Mission/images/ic_youtube.png b/12-Sprint-Mission/images/ic_youtube.png new file mode 100644 index 000000000..1fe0a48bc Binary files /dev/null and b/12-Sprint-Mission/images/ic_youtube.png differ diff --git a/12-Sprint-Mission/images/logo1.png b/12-Sprint-Mission/images/logo1.png new file mode 100644 index 000000000..97e251af0 Binary files /dev/null and b/12-Sprint-Mission/images/logo1.png differ diff --git a/12-Sprint-Mission/index.html b/12-Sprint-Mission/index.html new file mode 100644 index 000000000..590de5061 --- /dev/null +++ b/12-Sprint-Mission/index.html @@ -0,0 +1,90 @@ + + + + + + + 판다마켓 + + + +
+
+ + + + +
+
+
+
+
+

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

+ 구경하러 가기 +
+ +
+
+
+
+ +
+
+

Hot item

+

인기 상품을
확인해 보세요

+

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

+
+
+
+
+
+
+

Search

+

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

+

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

+
+
+ +
+
+
+
+
+
+ +
+
+

Register

+

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

+

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

+
+
+
+
+
+
+
+

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

+
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/12-Sprint-Mission/items.html b/12-Sprint-Mission/items.html new file mode 100644 index 000000000..e69de29bb diff --git a/12-Sprint-Mission/login.html b/12-Sprint-Mission/login.html new file mode 100644 index 000000000..4237d77ad --- /dev/null +++ b/12-Sprint-Mission/login.html @@ -0,0 +1,50 @@ + + + + + + + 판다마켓 + + + +
+ + + + + + + +

로그인

+ +
+ 간편 로그인하기 +
+ + +
+
+ +
+ 판다마켓이 처음이신가요? + 회원가입 +
+
+ + diff --git a/12-Sprint-Mission/signup.html b/12-Sprint-Mission/signup.html new file mode 100644 index 000000000..326fd6b3b --- /dev/null +++ b/12-Sprint-Mission/signup.html @@ -0,0 +1,64 @@ + + + + + + + 판다마켓 + + + +
+ + + + + + + + + + + +

회원가입

+ +
+ 간편 로그인하기 +
+ + +
+
+ +
+ 이미 회원이신가요? + 로그인 +
+
+ + diff --git a/12-Sprint-Mission/styles/style.css b/12-Sprint-Mission/styles/style.css new file mode 100644 index 000000000..459425bce --- /dev/null +++ b/12-Sprint-Mission/styles/style.css @@ -0,0 +1,251 @@ +* { + box-sizing: border-box; + font-family: "pretendard"; +} + +body { + margin: 0; + width: 100%; + padding-top: 70px; +} + +.basic-button { + display: inline-block; + padding: 10px 20px; + font-size: 16px; + line-height: 26px; + font-weight: 600; + color: #ffffff; + background-color: #007bff; + text-align: center; + text-decoration: none; + border-radius: 5px; +} + +.basic-button:hover { + background-color: #0056b3; +} + +.basic-button:active { + background-color: #1251aa; +} + +.more { + padding: 16px 124px; + border-radius: 40px; +} + +footer { + background-color: #111827; + height: 160px; + margin: 0 -200px; + padding-top: 20px; + display: flex; + justify-content: center; + align-items: flex-start; +} + +.nav { + position: fixed; + top: 0; + width: 100%; + z-index: 1; + background-color: #ffffff; + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; + padding: 9px 200px; +} + +.login-main { + padding: 12px 23px; + border-radius: 8px; +} + +.logo { + width: 153px; + height: 51px; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + background-color: #cfe5ff; + height: 540px; + margin: 0 -200px; +} + +.titles { + display: flex; + color: #374151; + font-size: 40px; + font-weight: 700; + line-height: 56px; +} + +.banner-img { + display: flex; + align-items: flex-end; + width: 746px; + height: 340px; +} + +.main-container { + display: flex; + justify-content: center; + align-items: center; + height: 720px; + padding: 276px 0; + margin: 0; +} + +.main-box { + display: flex; + justify-content: space-evenly; + align-items: center; + background-color: #fcfcfc; + width: 988px; + border-radius: 12px; +} + +.main-img { + display: flex; + width: 579px; + height: 444px; +} + +.main-subtitle { + color: #3692ff; + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +.main-content { + color: #374151; + font-weight: 500; + font-size: 24px; + line-height: 32px; +} + +.footer-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 1120px; + font-size: 16px; + font-weight: 400; + line-height: 19.09px; + text-decoration: none; + gap: 20px; +} + +.footer-codeit { + color: #9ca3af; +} + +.footer-link { + display: flex; + justify-content: center; + align-items: center; + color: #e5e7eb; + font-size: 16px; + font-weight: 400; + line-height: 19.09px; + text-decoration: none; + gap: 30px; +} + +.footer-links { + display: inline-block; + width: 20px; + height: 20px; +} + +/* Login */ +.login { + display: flex; + flex-direction: column; + margin: 120px auto; + width: 640px; + text-align: left; +} + +.login-logo { + max-width: 100%; + padding: 0 122px 40px; +} + +.login-text { + font-size: 36px; + font-weight: 700; + color: #4e4e4e; + margin: 24px 0; + text-align: center; +} + +label { + color: #1f2937; + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +input { + padding: 16px 24px; + margin-top: 16px; + margin-bottom: 24px; + color: #9ca3af; + border: none; + border-radius: 12px; + background-color: #f3f4f6; + text-align: left; + font-size: 16px; + width: 100%; +} + +.forgot { + text-align: right; + font-size: 14px; + font-weight: 400; + color: #ababab; +} + +.login-button { + background-color: #9ca3af; + width: 640px; + height: 56px; + border-radius: 40px; + padding: 16px 124px; +} + +.short-login { + display: flex; + justify-content: space-between; + align-items: center; + width: 640px; + height: 74px; + background-color: #e6f2ff; + border-radius: 8px; + padding: 16px 23px; + margin: 24px auto; +} + +.login-links { + width: 42px; + height: 42px; +} + +.arenot { + font-size: 14px; + font-weight: 400; + color: #ababab; + text-align: center; +} + +#join { + color: #3692ff; + text-decoration: underline; +} diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 000000000..48e69749b Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/Img_home_01.png b/images/Img_home_01.png new file mode 100644 index 000000000..49ac1f08c Binary files /dev/null and b/images/Img_home_01.png differ diff --git a/images/Img_home_02.png b/images/Img_home_02.png new file mode 100644 index 000000000..5a10726e5 Binary files /dev/null and b/images/Img_home_02.png differ diff --git a/images/Img_home_03.png b/images/Img_home_03.png new file mode 100644 index 000000000..4ead70730 Binary files /dev/null and b/images/Img_home_03.png differ diff --git a/images/Img_home_bottom.png b/images/Img_home_bottom.png new file mode 100644 index 000000000..d0f82930b Binary files /dev/null and b/images/Img_home_bottom.png differ diff --git a/images/Img_home_top.png b/images/Img_home_top.png new file mode 100644 index 000000000..bbfc5eedd Binary files /dev/null and b/images/Img_home_top.png differ diff --git a/images/Property 1=Typo.png b/images/Property 1=Typo.png new file mode 100644 index 000000000..2e89dc16e Binary files /dev/null and b/images/Property 1=Typo.png differ diff --git a/images/Property 1=md.png b/images/Property 1=md.png new file mode 100644 index 000000000..ba65195bd Binary files /dev/null and b/images/Property 1=md.png differ diff --git a/images/Property 1=sm.png b/images/Property 1=sm.png new file mode 100644 index 000000000..4f0399c75 Binary files /dev/null and b/images/Property 1=sm.png differ diff --git a/images/btn_sort.png b/images/btn_sort.png new file mode 100644 index 000000000..ae610b09b Binary files /dev/null and b/images/btn_sort.png differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 000000000..9fecc692d Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/ic_facebook.png b/images/ic_facebook.png new file mode 100644 index 000000000..fec1d9da4 Binary files /dev/null and b/images/ic_facebook.png differ diff --git a/images/ic_google.png b/images/ic_google.png new file mode 100644 index 000000000..49852a6bd Binary files /dev/null and b/images/ic_google.png differ diff --git a/images/ic_instagram.png b/images/ic_instagram.png new file mode 100644 index 000000000..7e834b20e Binary files /dev/null and b/images/ic_instagram.png differ diff --git a/images/ic_kakao.png b/images/ic_kakao.png new file mode 100644 index 000000000..2a6cb101d Binary files /dev/null and b/images/ic_kakao.png differ diff --git a/images/ic_twitter.png b/images/ic_twitter.png new file mode 100644 index 000000000..3a07baa63 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 000000000..1fe0a48bc Binary files /dev/null and b/images/ic_youtube.png differ diff --git a/images/logo1.png b/images/logo1.png new file mode 100644 index 000000000..97e251af0 Binary files /dev/null and b/images/logo1.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..590de5061 --- /dev/null +++ b/index.html @@ -0,0 +1,90 @@ + + + + + + + 판다마켓 + + + +
+
+ + + + +
+
+
+
+
+

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

+ 구경하러 가기 +
+ +
+
+
+
+ +
+
+

Hot item

+

인기 상품을
확인해 보세요

+

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

+
+
+
+
+
+
+

Search

+

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

+

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

+
+
+ +
+
+
+
+
+
+ +
+
+

Register

+

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

+

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

+
+
+
+
+
+
+
+

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

+
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/items.html b/items.html new file mode 100644 index 000000000..e69de29bb diff --git a/login.html b/login.html new file mode 100644 index 000000000..4237d77ad --- /dev/null +++ b/login.html @@ -0,0 +1,50 @@ + + + + + + + 판다마켓 + + + +
+ + + + + + + +

로그인

+ +
+ 간편 로그인하기 +
+ + +
+
+ +
+ 판다마켓이 처음이신가요? + 회원가입 +
+
+ + diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..326fd6b3b --- /dev/null +++ b/signup.html @@ -0,0 +1,64 @@ + + + + + + + 판다마켓 + + + +
+ + + + + + + + + + + +

회원가입

+ +
+ 간편 로그인하기 +
+ + +
+
+ +
+ 이미 회원이신가요? + 로그인 +
+
+ + diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 000000000..459425bce --- /dev/null +++ b/styles/style.css @@ -0,0 +1,251 @@ +* { + box-sizing: border-box; + font-family: "pretendard"; +} + +body { + margin: 0; + width: 100%; + padding-top: 70px; +} + +.basic-button { + display: inline-block; + padding: 10px 20px; + font-size: 16px; + line-height: 26px; + font-weight: 600; + color: #ffffff; + background-color: #007bff; + text-align: center; + text-decoration: none; + border-radius: 5px; +} + +.basic-button:hover { + background-color: #0056b3; +} + +.basic-button:active { + background-color: #1251aa; +} + +.more { + padding: 16px 124px; + border-radius: 40px; +} + +footer { + background-color: #111827; + height: 160px; + margin: 0 -200px; + padding-top: 20px; + display: flex; + justify-content: center; + align-items: flex-start; +} + +.nav { + position: fixed; + top: 0; + width: 100%; + z-index: 1; + background-color: #ffffff; + display: flex; + justify-content: space-between; + align-items: center; + height: 70px; + padding: 9px 200px; +} + +.login-main { + padding: 12px 23px; + border-radius: 8px; +} + +.logo { + width: 153px; + height: 51px; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + background-color: #cfe5ff; + height: 540px; + margin: 0 -200px; +} + +.titles { + display: flex; + color: #374151; + font-size: 40px; + font-weight: 700; + line-height: 56px; +} + +.banner-img { + display: flex; + align-items: flex-end; + width: 746px; + height: 340px; +} + +.main-container { + display: flex; + justify-content: center; + align-items: center; + height: 720px; + padding: 276px 0; + margin: 0; +} + +.main-box { + display: flex; + justify-content: space-evenly; + align-items: center; + background-color: #fcfcfc; + width: 988px; + border-radius: 12px; +} + +.main-img { + display: flex; + width: 579px; + height: 444px; +} + +.main-subtitle { + color: #3692ff; + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +.main-content { + color: #374151; + font-weight: 500; + font-size: 24px; + line-height: 32px; +} + +.footer-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 1120px; + font-size: 16px; + font-weight: 400; + line-height: 19.09px; + text-decoration: none; + gap: 20px; +} + +.footer-codeit { + color: #9ca3af; +} + +.footer-link { + display: flex; + justify-content: center; + align-items: center; + color: #e5e7eb; + font-size: 16px; + font-weight: 400; + line-height: 19.09px; + text-decoration: none; + gap: 30px; +} + +.footer-links { + display: inline-block; + width: 20px; + height: 20px; +} + +/* Login */ +.login { + display: flex; + flex-direction: column; + margin: 120px auto; + width: 640px; + text-align: left; +} + +.login-logo { + max-width: 100%; + padding: 0 122px 40px; +} + +.login-text { + font-size: 36px; + font-weight: 700; + color: #4e4e4e; + margin: 24px 0; + text-align: center; +} + +label { + color: #1f2937; + font-size: 18px; + font-weight: 700; + line-height: 26px; +} + +input { + padding: 16px 24px; + margin-top: 16px; + margin-bottom: 24px; + color: #9ca3af; + border: none; + border-radius: 12px; + background-color: #f3f4f6; + text-align: left; + font-size: 16px; + width: 100%; +} + +.forgot { + text-align: right; + font-size: 14px; + font-weight: 400; + color: #ababab; +} + +.login-button { + background-color: #9ca3af; + width: 640px; + height: 56px; + border-radius: 40px; + padding: 16px 124px; +} + +.short-login { + display: flex; + justify-content: space-between; + align-items: center; + width: 640px; + height: 74px; + background-color: #e6f2ff; + border-radius: 8px; + padding: 16px 23px; + margin: 24px auto; +} + +.login-links { + width: 42px; + height: 42px; +} + +.arenot { + font-size: 14px; + font-weight: 400; + color: #ababab; + text-align: center; +} + +#join { + color: #3692ff; + text-decoration: underline; +}