diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index a85814779..727a51413 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,19 +2,26 @@ ### 기본 -- [x] -- [] -- [] +- [x] 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다. +- [x] title은 “판다마켓”로 설정합니다. +- [x] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다. +- [x] 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다. +- [x] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다. +- [x] “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다. +- [x] '로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지) +- [x] “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지) +- [x] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지) +- [x] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다. ### 심화 -- [x] -- [] +- [] palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요. +- [] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해보세요. ## 주요 변경사항 -- -- +- +- ## 스크린샷 @@ -22,6 +29,6 @@ ## 멘토에게 -- -- +- +- - 셀프 코드 리뷰를 통해 질문 이어가겠습니다. diff --git a/mission_1/faq.html b/mission_1/faq.html new file mode 100644 index 000000000..cbdf6698f --- /dev/null +++ b/mission_1/faq.html @@ -0,0 +1,11 @@ + + + + + + FAQ + + + + + \ No newline at end of file diff --git a/mission_1/images/Img_home_01.png b/mission_1/images/Img_home_01.png new file mode 100644 index 000000000..8c664039b Binary files /dev/null and b/mission_1/images/Img_home_01.png differ diff --git a/mission_1/images/Img_home_02.png b/mission_1/images/Img_home_02.png new file mode 100644 index 000000000..48dfb59ce Binary files /dev/null and b/mission_1/images/Img_home_02.png differ diff --git a/mission_1/images/Img_home_03.png b/mission_1/images/Img_home_03.png new file mode 100644 index 000000000..d5fc107da Binary files /dev/null and b/mission_1/images/Img_home_03.png differ diff --git a/mission_1/images/Img_home_bottom.png b/mission_1/images/Img_home_bottom.png new file mode 100644 index 000000000..096413773 Binary files /dev/null and b/mission_1/images/Img_home_bottom.png differ diff --git a/mission_1/images/Img_home_top.png b/mission_1/images/Img_home_top.png new file mode 100644 index 000000000..658f4e1f7 Binary files /dev/null and b/mission_1/images/Img_home_top.png differ diff --git a/mission_1/images/ic_facebook.png b/mission_1/images/ic_facebook.png new file mode 100644 index 000000000..a3e343c77 Binary files /dev/null and b/mission_1/images/ic_facebook.png differ diff --git a/mission_1/images/ic_instagram.png b/mission_1/images/ic_instagram.png new file mode 100644 index 000000000..c47e044d1 Binary files /dev/null and b/mission_1/images/ic_instagram.png differ diff --git a/mission_1/images/ic_twitter.png b/mission_1/images/ic_twitter.png new file mode 100644 index 000000000..3f74b730a Binary files /dev/null and b/mission_1/images/ic_twitter.png differ diff --git a/mission_1/images/ic_youtube.png b/mission_1/images/ic_youtube.png new file mode 100644 index 000000000..874150b0b Binary files /dev/null and b/mission_1/images/ic_youtube.png differ diff --git a/mission_1/images/logo.png b/mission_1/images/logo.png new file mode 100644 index 000000000..4f6bc7bf9 Binary files /dev/null and b/mission_1/images/logo.png differ diff --git a/mission_1/index.html b/mission_1/index.html new file mode 100644 index 000000000..beeb7b4db --- /dev/null +++ b/mission_1/index.html @@ -0,0 +1,140 @@ + + + + + + + + 판다마켓 + + + +
+
+ 판다마켓_로고 + +
+
+ + + +
+
+
+

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

+ +
+ 판다마켓_탑_배너_이미지 +
+
+ + + +
+
+ 메인_섹션_이미지_1 +
+

Hot item

+ +

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

+ +

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

+
+
+ +
+
+

Search

+ +

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

+ +

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

+
+ 메인_섹션_이미지_2 +
+ +
+ 메인_섹션_이미지_3 +
+

Register

+ +

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

+ +

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

+
+
+
+ + + +
+
+

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

+ + 판다마켓_바텀_배너_이미지 +
+
+ + + + + + + diff --git a/mission_1/items.html b/mission_1/items.html new file mode 100644 index 000000000..eb63a202d --- /dev/null +++ b/mission_1/items.html @@ -0,0 +1,11 @@ + + + + + + 상품페이지 + + + + + \ No newline at end of file diff --git a/mission_1/privacy.html b/mission_1/privacy.html new file mode 100644 index 000000000..4f722e199 --- /dev/null +++ b/mission_1/privacy.html @@ -0,0 +1,11 @@ + + + + + + Privacy + + + + + \ No newline at end of file diff --git a/mission_1/signin.html b/mission_1/signin.html new file mode 100644 index 000000000..e2bea0d4f --- /dev/null +++ b/mission_1/signin.html @@ -0,0 +1,11 @@ + + + + + + 로그인_페이지 + + + + + \ No newline at end of file diff --git a/mission_1/style.css b/mission_1/style.css new file mode 100644 index 000000000..d7eeb2bc4 --- /dev/null +++ b/mission_1/style.css @@ -0,0 +1,248 @@ + +body { + padding: 0; + margin: 0; +} + +header { + padding: 0 200px; +} + +.header_container{ + text-align: center; + width: 100%; + max-width: 1920px; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 auto; +} + +header a{ + font-size: 16px; +} + +button { + /* 버튼 공통 요소 */ + background-color: #3692ff; + color: #ffffff; + border: none; + cursor: pointer; + font-weight: 600; + font-size: 16px; + font-family: Pretendard; +} + +button:hover { + background-color: #1967d6; +} + +button:active { + background-color: #1251aa; +} + +header button { + width: 128px; /* 해더 로그인 버튼 */ + height: 48px; /* 해더 로그인 버튼 */ + border-radius: 8px; /* 해더 로그인 버튼 */ + padding: 14.5px 43px; +} + +/* =========Header 영역============= */ +/* ================================= */ +/* =========Top_Banner 영역========= */ + +.top_banner { + background-color: #cfe5ff; + display: flex; + justify-content: center; +} + +.top_banner_container { + position: relative; + width: 1200px; + height: 540px; +} + +.top_banner_container_look { + position: absolute; + top: 170px; + display: flex; + flex-direction: column; + gap: 32px 0; +} + +.top_banner_container_look h1 { + color: #374151; + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0em; + text-align: left; +} + +.top_banner_container button { + width: 355px; /* 배너 구경하러가기 버튼 */ + height: 56px; /* 배너 구경하러가기 버튼 */ + border-radius: 40px; /* 배너 구경하러가기 버튼 */ + font-size: 20px; +} + +.top_banner_container img { + position: absolute; + top: 93px; + left: 341px; +} + +/* =========Top_Banner 영역========= */ +/* ================================= */ +/* ===========Main 영역============= */ + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +main section:nth-child(odd) { + text-align: left; +} + +main section:nth-child(even) { + text-align: right; +} + + +section { + display: flex; + gap: 64px; + margin: 138px auto; +} + +.section_container { + display: flex; + flex-direction: column; + justify-content: center; +} + +.section_container h3 { + margin: 6px 0; + color: #3692ff; + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 25px; + /* letter-spacing: 0em; */ +} + +.section_container h1 { + margin: 6px 0; + color: #374151; + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + /* letter-spacing: 0.02em; */ +} + +.section_container p { + margin: 12px 0; + color: #374151; + font-family: Pretendard; + font-size: 24px; + font-weight: 500; + line-height: 29px; + /* letter-spacing: 0.08em; */ +} + +/* ===========Main 영역============= */ +/* ================================= */ +/* =======Bottom_Banner 영역======== */ + +.bottom_banner { + background-color: #cfe5ff; + display: flex; + justify-content: center; +} + +.bottom_banner_container { + position: relative; + width: 1200px; + height: 540px; +} + +.bottom_banner_container h1 { + position: absolute; + top: 214px; + color: #374151; + font-family: Pretendard; + font-size: 40px; + font-weight: 700; + line-height: 56px; + letter-spacing: 0em; + text-align: left; +} + +.bottom_banner_container img { + position: absolute; + left: 341px; +} + +/* =======Bottom_Banner 영역======== */ +/* ================================= */ +/* ===========Footer 영역=========== */ + +footer { + background-color: #111827; + height: 160px; + /* display: flex; */ +} + +.footer_container { + width: 100%; + max-width: 1520px; + height: 20px; + padding: 0 200px; + padding-top: 32px; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 auto; +} + +.footer_year { + color: #9ca3af; + font-family: Pretendard; /* footer 공통요소 */ + font-size: 16px; /* footer 공통요소 */ + font-weight: 400; /* footer 공통요소 */ + line-height: 19px; /* footer 공통요소 */ + letter-spacing: 0em; /* footer 공통요소 */ + text-align: center; /* footer 공통요소 */ + display: flex; + align-items: center; +} + +.footer_privacy_faq { + color: #e5e7eb; + font-family: Pretendard; /* footer 공통요소 */ + font-size: 16px; /* footer 공통요소 */ + font-weight: 400; /* footer 공통요소 */ + line-height: 19px; /* footer 공통요소 */ + letter-spacing: 0em; /* footer 공통요소 */ + text-align: center; /* footer 공통요소 */ + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; +} + +.footer_SNS { + display: flex; + align-items: center; + justify-content: space-between; + gap: 13px; +} +/* ===========Footer 영역=========== */ +/* ================================= */