diff --git a/README.md b/README.md new file mode 100644 index 00000000..85cfc6bc --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +## 판다마켓 + +### 기본 요구사항 + +- [x] 피그마 디자인에 맞게 페이지 제작 +- [x] UI 라이브러리 없이 진행 +- [x] HTML, CSS 파일을 Netlify로 배포 + -> https://myungjiwoo-panda-market.netlify.app/ +- [x] PC 사이즈 기준 + +### 체크 리스트 (기본) + +- [x] 랜딩 페이지의 url path는 루트로 설정 +- [x] title은 "판다마켓" +- [x] 화면의 너비가 1920px 이상이면 하늘색 배경은 너비를 꽉 채우고, 내부 요소들의 위치는 고정되며, 여백만 커지도록 함 +- [x] 화면의 너비가 1920px보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px "로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소 간의 거리가 가까워짐 +- [x] 클릭으로 동작해야 하는 경우, 마우스 커서의 모양을 pointer로 변경 +- [x] "판다마켓" 클릭 시 루트 페이지로 이동 +- [x] "로그인" 버튼 클릭 시 로그인 페이지("/login")로 이동 (빈 페이지) +- [x] "구경하러가기" 버튼 클릭 시 ("/items")로 이동 (빈 페이지) +- [x] "Priacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지("/privacy"), FAQ 페이지("/faq")로 이동 (빈 페이지) +- [x] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 + +### 체크 리스트 (심화) + +- [x] 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정 (상세 설정은 자유) diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..ddf749e2 --- /dev/null +++ b/faq.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 - FAQ + + + diff --git a/images/Img_home_01.png b/images/Img_home_01.png new file mode 100644 index 00000000..11f037eb 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 00000000..3f28ecb3 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 00000000..f83d97b9 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 00000000..7b3cc447 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 00000000..6d797da2 Binary files /dev/null and b/images/Img_home_top.png differ diff --git a/images/Img_logo.png b/images/Img_logo.png new file mode 100644 index 00000000..89751ba8 Binary files /dev/null and b/images/Img_logo.png differ diff --git a/images/ic_facebook.png b/images/ic_facebook.png new file mode 100644 index 00000000..f32e7ef8 Binary files /dev/null and b/images/ic_facebook.png differ diff --git a/images/ic_instagram.png b/images/ic_instagram.png new file mode 100644 index 00000000..8c1837df Binary files /dev/null and b/images/ic_instagram.png differ diff --git a/images/ic_twitter.png b/images/ic_twitter.png new file mode 100644 index 00000000..216c58d2 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 00000000..27d12233 Binary files /dev/null and b/images/ic_youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..47c02e73 --- /dev/null +++ b/index.html @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + 판다마켓 + + + +
+ + + + + + +
+ +
+
+ + 상단 배너 이미지 +
+
+ +
+
+ 인기 상품 이미지 +
+

Hot item

+

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

+

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

+
+
+ +
+
+

Search

+

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

+

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

+
+ 상품 검색 이미지 +
+ +
+ 상품 등록 이미지 +
+

Register

+

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

+

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

+
+
+
+ +
+
+ + 하단 배너 이미지 +
+
+ + + + diff --git a/items.html b/items.html new file mode 100644 index 00000000..8edf8157 --- /dev/null +++ b/items.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 - Items + + + diff --git a/login.html b/login.html new file mode 100644 index 00000000..b5956fd9 --- /dev/null +++ b/login.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 - Login + + + diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..6d98e6c2 --- /dev/null +++ b/privacy.html @@ -0,0 +1,9 @@ + + + + + + 판다마켓 - Privacy + + + diff --git a/styles/banner.css b/styles/banner.css new file mode 100644 index 00000000..f6dbfe59 --- /dev/null +++ b/styles/banner.css @@ -0,0 +1,83 @@ +/* top banner */ +.home-top-banner { + width: 100%; + padding-top: 200px; + + display: flex; + justify-content: center; + align-items: flex-end; + + background-color: #cfe5ff; +} + +.home-top-banner > div { + max-width: 1920px; + width: 100%; + + display: flex; + justify-content: center; + align-items: center; + gap: 7px; +} + +.banner-content { + width: 357px; + flex-shrink: 0; +} + +.banner-title, +.section-title { + font-weight: 700; + font-size: 40px; + line-height: 56px; + color: #374151; + flex-shrink: 0; +} + +.btn-explore { + width: 100%; + border-radius: 40px; + padding: 16px 124px; + margin-top: 32px; + + display: flex; + justify-content: center; + align-items: center; + + background-color: #3692ff; + color: #ffffff; + + cursor: pointer; +} + +.image-top-banner { + width: 746px; + height: auto; + + flex-shrink: 0; +} + +/* bottom banner */ +.bottom-banner { + width: 100%; + padding-top: 143px; + + display: flex; + justify-content: center; + align-items: flex-end; + gap: 69px; + + background-color: #cfe5ff; +} + +.bottom-banner > div { + display: flex; + align-items: center; +} + +.image-bottom-banner { + width: 746px; + height: auto; + + flex-shrink: 0; +} diff --git a/styles/base.css b/styles/base.css new file mode 100644 index 00000000..d6ebb1de --- /dev/null +++ b/styles/base.css @@ -0,0 +1,13 @@ +@import url(../styles/reset.css); + +body { + display: flex; + flex-direction: column; + align-items: center; + + background-color: #ffffff; +} + +* { + transition: all 0.3s ease-in-out; +} diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 00000000..63ca793a --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,58 @@ +footer { + width: 100%; + padding: 32px 0 108px; + + display: flex; + justify-content: center; + align-items: center; + + background-color: #111827; +} + +footer > div { + max-width: 1920px; + width: 100%; + padding: 0 200px; + + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-company { + font-weight: 400; + font-size: 16px; + line-height: 19px; + text-align: center; + text-wrap: nowrap; + color: #9ca3af; + + flex-shrink: 0; +} + +.footer-links { + display: flex; + gap: 30px; + text-wrap: nowrap; + + flex-shrink: 0; +} + +.footer-links > a, +.footer-links > a:visited { + color: #ffffff; +} + +.footer-sns { + display: flex; + gap: 12px; + + flex-shrink: 0; +} + +.footer-sns img { + width: 20px; + height: 20px; + + cursor: pointer; +} diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 00000000..3cbeb8a3 --- /dev/null +++ b/styles/header.css @@ -0,0 +1,40 @@ +header { + max-width: 1920px; + width: 100%; + padding: 9.5px 200px; + + display: flex; + justify-content: space-between; + align-items: center; + + position: relative; + + background-color: #ffffff; +} + +.image-logo { + width: 153px; + flex-shrink: 0; + + cursor: pointer; +} + +.btn-login { + width: 128px; + height: 48px; + + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + + border-radius: 8px; + background-color: #3692ff; + + font-weight: 600; + font-size: 16px; + line-height: 26px; + color: #ffffff; + + cursor: pointer; +} diff --git a/styles/phone.css b/styles/phone.css new file mode 100644 index 00000000..54a721fb --- /dev/null +++ b/styles/phone.css @@ -0,0 +1,110 @@ +/* 반응형 : 핸드폰 (모바일의 0.6배) */ +@media screen and (max-width: 767px) { + /* header */ + header { + padding: 9.5px 72px; + } + + .image-logo { + width: 91px; + } + + .btn-login { + width: 55px; + height: 24px; + font-size: 12px; + } + + /* banner */ + .home-top-banner { + padding-top: 72px; + } + + .banner-title, + .section-title { + font-size: 16px; + line-height: 20px; + } + + .image-top-banner { + width: 268px; + height: auto; + } + + .banner-content { + width: 128px; + } + + .btn-explore { + padding: 8px; + margin-top: 10px; + font-size: 12px; + } + + .bottom-banner { + padding-top: 60px; + } + + .image-bottom-banner { + width: 240px; + height: auto; + } + + /* section */ + .section-hot-item, + .section-search, + .section-register { + width: 420px; + height: 160px; + margin: 49px 0; + gap: 15px; + } + + section img { + width: 214px; + height: 159px; + } + + .section-badge { + margin-bottom: 9px; + font-size: 10px; + line-height: 12px; + } + + .section-content { + margin-top: 12px; + font-size: 12px; + line-height: 15px; + } + + /* footer */ + footer { + padding: 19px 0 64px; + } + + footer > div { + padding: 0 72px; + } + + .footer-company { + font-size: 12px; + } + + .footer-links { + gap: 10px; + } + + .footer-sns { + gap: 5px; + } + + .footer-links > a, + .footer-links > a:visited { + font-size: 12px; + } + + .footer-sns img { + width: 15px; + height: 15px; + } +} diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 00000000..e4bede57 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,142 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a, +a:visited, +a:hover { + text-decoration: none; + color: inherit; +} diff --git a/styles/section.css b/styles/section.css new file mode 100644 index 00000000..3fa02ec8 --- /dev/null +++ b/styles/section.css @@ -0,0 +1,55 @@ +section { + max-width: 1920px; + width: 100%; + margin-bottom: 138px; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.section-hot-item, +.section-search, +.section-register { + width: 988px; + height: 444px; + + margin: 138px 0; + + display: flex; + justify-content: center; + align-items: center; + gap: 64px; + + border-radius: 12px; + background-color: #fcfcfc; +} + +.right { + text-align: right; +} + +section img { + width: 579px; + height: 444px; + border-radius: 0; +} + +.section-badge { + margin-bottom: 12px; + + font-weight: 700; + font-size: 18px; + line-height: 26px; + color: #3692ff; +} + +.section-content { + margin-top: 24px; + + font-weight: 500; + font-size: 24px; + line-height: 32px; + color: #374151; +} diff --git a/styles/tablet.css b/styles/tablet.css new file mode 100644 index 00000000..94c7b545 --- /dev/null +++ b/styles/tablet.css @@ -0,0 +1,78 @@ +/* 반응형 : 타블릿 (PC의 0.6배) */ +@media screen and (min-width: 768px) and (max-width: 1100px) { + /* header */ + header { + padding: 9.5px 120px; + } + + .btn-login { + width: 76px; + height: 40px; + } + + /* banner */ + .home-top-banner { + padding-top: 120px; + } + + .banner-title, + .section-title { + font-size: 24px; + line-height: 33px; + } + + .image-top-banner { + width: 447px; + height: auto; + } + + .banner-content { + width: 214px; + } + + .btn-explore { + padding: 10px; + margin-top: 10px; + } + + .bottom-banner { + padding-top: 100px; + } + + .image-bottom-banner { + width: 400px; + height: auto; + } + + /* section */ + .section-hot-item, + .section-search, + .section-register { + width: 600px; + height: 266px; + margin: 82px 0; + gap: 30px; + } + + section img { + width: 358px; + height: 266px; + } + + .section-badge { + margin-bottom: 7px; + font-size: 12px; + line-height: 15px; + } + + .section-content { + margin-top: 14px; + font-size: 14px; + line-height: 19px; + } + + /* footer */ + footer > div { + padding: 0 120px; + } +}