diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index a8581477..a6bba292 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,15 +1,40 @@ ## 요구사항 +● UI 디자인 기초 토픽을 수강해 보세요. + +● 피그마 디자인에 맞게 페이지를 만들어 주세요. + +● React와 같은 UI 라이브러리를 사용하지 않고 진행합니다. + +● HTML, CSS 파일을 Netlify로 배포해 주세요. (https://gentle-cactus-6c2f2d.netlify.app/) + +● PC사이즈만 고려해 주어진 디자인으로 구현합니다. + ### 기본 -- [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] -- [] +- [] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다) ## 주요 변경사항 @@ -18,7 +43,7 @@ ## 스크린샷 -![image](이미지url) +![image](/siteImg.png) ## 멘토에게 diff --git a/images/bottomImg.png b/images/bottomImg.png new file mode 100644 index 00000000..01ff641b Binary files /dev/null and b/images/bottomImg.png differ diff --git a/images/card1.png b/images/card1.png new file mode 100644 index 00000000..b6c67475 Binary files /dev/null and b/images/card1.png differ diff --git a/images/card2.png b/images/card2.png new file mode 100644 index 00000000..1f5255cc Binary files /dev/null and b/images/card2.png differ diff --git a/images/card3.png b/images/card3.png new file mode 100644 index 00000000..b22e7284 Binary files /dev/null and b/images/card3.png differ diff --git a/images/icons/ic_facebook.png b/images/icons/ic_facebook.png new file mode 100644 index 00000000..06d825f1 Binary files /dev/null and b/images/icons/ic_facebook.png differ diff --git a/images/icons/ic_instagram.png b/images/icons/ic_instagram.png new file mode 100644 index 00000000..826dee2d Binary files /dev/null and b/images/icons/ic_instagram.png differ diff --git a/images/icons/ic_twitter.png b/images/icons/ic_twitter.png new file mode 100644 index 00000000..b312e6e3 Binary files /dev/null and b/images/icons/ic_twitter.png differ diff --git a/images/icons/ic_youtube.png b/images/icons/ic_youtube.png new file mode 100644 index 00000000..35644e4d Binary files /dev/null and b/images/icons/ic_youtube.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 00000000..efcb3581 Binary files /dev/null and b/images/logo.png differ diff --git a/images/topImg.png b/images/topImg.png new file mode 100644 index 00000000..e96d0ec2 Binary files /dev/null and b/images/topImg.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..f9ace8ec --- /dev/null +++ b/index.html @@ -0,0 +1,117 @@ + + + + + + 판다마켓 + + + + +
+
+ + logo + + + 로그인 +
+
+ +
+
+
+

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

+ 구경하러 가기 + +
+ + topImg + +
+ +
+ +
+ +
+
+ sectionImg1 +
+

Hot item

+

인기 상품을
확인해 보세요

+

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

+
+ +
+
+ +
+
+
+

Search

+

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

+

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

+
+ + sectionImg2 + +
+
+ +
+
+ sectionImg3 +
+

Register

+

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

+

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

+
+ +
+
+ +
+ +
+
+
+

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

+ +
+ + bottomImg + +
+
+ + + + + \ No newline at end of file diff --git a/pages/faq.html b/pages/faq.html new file mode 100644 index 00000000..e2da1b77 --- /dev/null +++ b/pages/faq.html @@ -0,0 +1,11 @@ + + + + + + FAQ + + +

FAQ

+ + \ No newline at end of file diff --git a/pages/items.html b/pages/items.html new file mode 100644 index 00000000..64ba6b4f --- /dev/null +++ b/pages/items.html @@ -0,0 +1,11 @@ + + + + + + ITEMS + + +

Items

+ + \ No newline at end of file diff --git a/pages/login.html b/pages/login.html new file mode 100644 index 00000000..93207fc4 --- /dev/null +++ b/pages/login.html @@ -0,0 +1,11 @@ + + + + + + Login + + +

Login

+ + \ No newline at end of file diff --git a/pages/privacy.html b/pages/privacy.html new file mode 100644 index 00000000..9628dcc1 --- /dev/null +++ b/pages/privacy.html @@ -0,0 +1,11 @@ + + + + + + Privacy + + +

Privacy

+ + \ No newline at end of file diff --git a/siteImg.png b/siteImg.png new file mode 100644 index 00000000..fa80d00c Binary files /dev/null and b/siteImg.png differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..fa17adf7 --- /dev/null +++ b/style.css @@ -0,0 +1,287 @@ +:root{ + --button-color : #3692ff; + --bg-color : #CFE5FF; + --main-font-color : #374151; + --secondary-font-color : #E5E7EB; + --button-hover-color : #1967D6; + --button-active-color : #1251AA; + + +} + +@font-face { + font-family: 'Pretendard'; + src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} + + +*{ + box-sizing : border-box; + margin: 0; + padding: 0; + font-family: Pretendard; +} + + + + + +.header{ + width: 100%; + height: 70px; +} + +.header-content{ + display: flex; + justify-content: space-between; + align-items: center; + margin: 9.5px 200px; + +} + +.header-button { + display: flex; + justify-content: center; + align-items: center; + width: 128px; + height: 48px; + padding: 12px 23px; + border-radius: 8px; + background-color: var(--button-color); + color: #FFFFFF; + border: 1px solid var(--button-color); + flex-shrink: 0; + text-decoration: none; + cursor: pointer; +} + + +.topLanding{ + width: 100%; + height: 540px; + background-color: var(--bg-color); + display: flex; + justify-content: center; + +} + +.top-content{ + display: flex; + align-items: end; + gap: 7px; + +} + +.top-content-text{ + display: flex-col; + justify-content: center; + margin: 40px 0; + flex-shrink: 0; + +} + +.top-content-text h2 { + line-height: 56px; + color: var(--main-font-color); + font-size: 40px; + font-weight: 700; + +} + +.section{ + width: 100%; + display: flex-col; + align-items: center; + +} + +.section-content{ + width: 100%; + height: 720px; + display: flex; + justify-content: center; + align-items: center; +} + +.section-card{ + display: flex; + justify-content: center; + align-items: center; + gap: 64px; + width: 988px; + height: 444px; + +} +.section-text{ + display: flex-col; + flex-shrink: 0; + gap: 12px; +} + +.section-text.card1{ + padding-right: 24px; +} + +.section-text.card2{ + text-align: right; +} + +.section-text-top{ + font-size: 18px; + font-weight: 700; + color: var(--button-color); + line-height: 26px; +} +.section-text-middle{ + color: var(--main-font-color); + font-size: 40px; + font-weight: 700; + line-height: 56px; + margin-top: 12px; +} + +.section-text-bottom{ + color: var(--main-font-color); + font-size: 24px; + font-weight: 500; + line-height: 32px; + margin-top: 24px; +} + +.bottomLanding { + width: 100%; + height: 540px; + background-color: var(--bg-color); + display: flex; + justify-content: center; + margin-top: 138px; +} + +.bottom-content{ + display: flex; + align-items: end; + gap: 69px; + flex-shrink: 0; +} + +.bottom-content-text{ + + display: flex-col; + justify-content: center; + margin: 40px 0; + flex-shrink: 0; + gap: 10px; + padding-bottom: 60px; + margin: 112.5px 0; + + +} + +.bottom-content-text h2{ + font-weight: 700; + font-size: 40px; + color: var(--main-font-color); +} + +.footer{ + height: 160px; + background-color: #111827; + +} + +.items-button{ + margin-top: 32px; + margin-bottom: 60px; + background-color: var(--button-color); + color: #ffffff; + padding: 16px 124px; + text-align: center; + text-decoration: none; + display: inline-block; + border: 1px solid var(--button-color); + border-radius: 40px; + cursor: pointer; +} + + + +.footer-content{ + display: flex; + height: 20px; + padding: 32px 400px 108px 400px; + justify-content: space-between; + +} + +.footer-left-text { + flex-shrink: 0; + color: #9CA3AF; + font-weight: 400; +} + + +.footer-middle-text{ + display: flex; + gap: 30px; + flex-shrink: 0; +} + +.footer-middle-text a { + color: var(--secondary-font-color); + font-weight: 400; + text-decoration: none; +} + +.footer-icons{ + display: flex; + flex-shrink: 0; + gap: 12px; +} + + +.footer-icons img{ + width: 20px; + height: 20px; +} + + +.button:hover{ + background-color: var(--button-hover-color); + border: 1px solid var(--button-hover-color); +} + +.button:active{ + background-color: var(--button-active-color); + border: 1 solid var(--button-active-color); +} + + +.logoImg{ + width: 153px; + height: 51px; +} + +.topLandingImg{ + width: 746px; + height: 340px; +} + +.sectionImg{ + width: 579px; + height: 444px; +} + + +.bottomLandingImg{ + width: 746px; + height: 397px; +} + + + + + + +