diff --git a/README.md b/README.md new file mode 100644 index 00000000..a8fb850e --- /dev/null +++ b/README.md @@ -0,0 +1,35 @@ +## 요구사항 + +- [] 피그마 디자인에 맞게 페이지를 만들어주세요. +- [] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다. +- [] HTML, CSS 파일을 Netlify로 배포해 주세요. => https://leech-spfe15-panda-market.netlify.app/ +- [] PC사이즈만 고려해 주어진 디자인으로 구현합니다. + +### 기본 + +- [] 랜딩 페이지의 url path는 루트('/')로 설정합니다. +- [] title은 "판다마켓"로 설정합니다. +- [] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다. +- [] 화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다. +- [] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다. +- [] "판다마켓" 클릭 시 루트 페이지('/')로 이동합니다. +- [] '로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지) +- [] "구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지) +- [] "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지) +- [] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다. + +### 심화 + +- [] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다) + +## 주요 변경사항 + +- + +## 스크린샷 + +![image](![alt text](image.png)) + +## 멘토에게 + +- diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..e69de29b diff --git a/image.png b/image.png new file mode 100644 index 00000000..65d10079 Binary files /dev/null and b/image.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..1ca1d5d2 --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + + + 판다마켓 + + + +
+
+ + + +
+
+ +
+ +
+
+
+

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

+ 구경하러 가기 +
+
+ 메인배너 +
+
+
+ + +
+
+
+ 핫아이템 +
+
+ Hot Item +

인기 상품을
확인해 보세요

+

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

+
+
+
+ + +
+
+
+ Search +

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

+

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

+
+
+ 서치 +
+
+
+ + +
+
+
+ 레지스터 +
+
+ Register +

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

+

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

+
+
+
+ + +
+
+

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

+
+ 하단베너 +
+
+
+
+ + + + diff --git a/items.html b/items.html new file mode 100644 index 00000000..e69de29b diff --git a/login.html b/login.html new file mode 100644 index 00000000..e69de29b diff --git a/privacy.html b/privacy.html new file mode 100644 index 00000000..e69de29b diff --git a/public/icons/ic_facebook.png b/public/icons/ic_facebook.png new file mode 100644 index 00000000..58333d45 Binary files /dev/null and b/public/icons/ic_facebook.png differ diff --git a/public/icons/ic_instagram.png b/public/icons/ic_instagram.png new file mode 100644 index 00000000..98e24ea6 Binary files /dev/null and b/public/icons/ic_instagram.png differ diff --git a/public/icons/ic_twitter.png b/public/icons/ic_twitter.png new file mode 100644 index 00000000..5df0852d Binary files /dev/null and b/public/icons/ic_twitter.png differ diff --git a/public/icons/ic_youtube.png b/public/icons/ic_youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/public/icons/ic_youtube.png differ diff --git a/public/images/Img_home_01.png b/public/images/Img_home_01.png new file mode 100644 index 00000000..a2d4be5f Binary files /dev/null and b/public/images/Img_home_01.png differ diff --git a/public/images/Img_home_02.png b/public/images/Img_home_02.png new file mode 100644 index 00000000..faccb9f7 Binary files /dev/null and b/public/images/Img_home_02.png differ diff --git a/public/images/Img_home_03.png b/public/images/Img_home_03.png new file mode 100644 index 00000000..ef5972b3 Binary files /dev/null and b/public/images/Img_home_03.png differ diff --git a/public/images/Img_home_bottom.png b/public/images/Img_home_bottom.png new file mode 100644 index 00000000..31853d71 Binary files /dev/null and b/public/images/Img_home_bottom.png differ diff --git a/public/images/Img_home_top.png b/public/images/Img_home_top.png new file mode 100644 index 00000000..83a4881c Binary files /dev/null and b/public/images/Img_home_top.png differ diff --git a/public/logos/Property 1=lg.png b/public/logos/Property 1=lg.png new file mode 100644 index 00000000..7db8527a Binary files /dev/null and b/public/logos/Property 1=lg.png differ diff --git a/public/logos/Property 1=lg@2x.png b/public/logos/Property 1=lg@2x.png new file mode 100644 index 00000000..59b95456 Binary files /dev/null and b/public/logos/Property 1=lg@2x.png differ diff --git a/public/logos/Property 1=lg@3x.png b/public/logos/Property 1=lg@3x.png new file mode 100644 index 00000000..d2ceb6dd Binary files /dev/null and b/public/logos/Property 1=lg@3x.png differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..4fa5a22e --- /dev/null +++ b/style.css @@ -0,0 +1,365 @@ +/* 기본 요구사항 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + color: #374151; +} + +a { + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +.header { + padding: 20px 0; + width: 100%; +} + +.header-container { + max-width: 1520px; + padding: 0; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + margin-left: 200px; +} + +.logo img { + width: 153px; + height: 51px; +} + +.login-btn { + width: 128px; + height: 48px; + background-color: #3692ff; + color: white; + border-radius: 8px; + font-weight: 600; + font-size: 16px; + margin-right: 200px; + transition: background-color 0.3s; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.login-btn:hover { + background-color: #1967d6; +} + +.main-banner { + background-color: #cfe5ff; + padding: 50px 0 0 0; + overflow: hidden; + width: 100%; + height: 540px; +} + +.main-banner-container { + max-width: 1520px; + margin: 0 auto; + padding: 0 200px; + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; +} + +.main-banner-text h1 { + font-size: 40px; + font-weight: 700; + line-height: 56px; + margin-bottom: 30px; +} + +.action-btn { + background-color: #3692ff; + border-radius: 40px; + padding: 16px 124px; + color: white; + font-size: 20px; + font-weight: 600; +} + +.action-btn:hover { + background-color: #1967d6; +} + +.main-banner-image { + flex: 1; + display: flex; + margin-top: auto; + margin-bottom: 0; +} + +.hot-item-container, +.search-container, +.register-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.hot-item { + padding: 80px 0; +} + +.hot-item-container { + background-color: #fcfcfc; + display: flex; + justify-content: space-between; + align-items: center; +} + +.hot-item-image { + flex: 1; + margin-right: 40px; +} + +.hot-item-text { + flex: 1; +} + +.item-tag, +.search-tag, +.register-tag { + display: inline-block; + color: #3692ff; + font-weight: 700; + font-size: 18px; + margin-bottom: 16px; +} + +.hot-item-text h2, +.search-text h2, +.register-text h2 { + font-weight: 700; + font-size: 40px; + line-height: 56px; + margin-bottom: 16px; +} + +.hot-item-text p { + font-weight: 500; + font-size: 24px; + line-height: 32px; +} + +.search { + text-align: right; + padding: 80px 0; +} + +.search-container { + background-color: #fcfcfc; + display: flex; + justify-content: space-between; + align-items: center; +} + +.search-text { + flex: 1; + margin-right: 40px; +} + +.search-text p { + font-weight: 500; + font-size: 24px; + line-height: 32px; +} + +.search-image { + flex: 1; +} + +.register { + padding: 80px 0; +} + +.register-container { + background-color: #fcfcfc; + display: flex; + justify-content: space-between; + align-items: center; +} + +.register-image { + flex: 1; + margin-right: 40px; +} + +.register-text { + flex: 1; +} + +.register-text p { + font-weight: 500; + font-size: 24px; + line-height: 32px; +} + +.bottom-banner { + background-color: #cfe5ff; + padding: 60px 0 0 0; + text-align: center; + width: 100%; +} + +.bottom-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1520px; + margin: 0 auto; + padding: 0 200px; +} + +.bottom-container h2 { + flex: 1; + font-weight: 700; + font-size: 40px; + line-height: 56px; + margin-bottom: 40px; + text-align: left; +} + +.bottom-image { + flex: 1; + max-width: 560px; + margin: 0 auto; +} + +.footer { + background-color: #111827; + color: white; + padding: 32px 0; +} + +.footer-container { + max-width: 1200px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + padding: 0 20px; +} + +.footer-info { + font-weight: 400; + font-size: 16px; + color: #9ca3af; +} + +.footer-links a { + margin-right: 30px; + font-weight: 400; + font-size: 16px; + color: #e5e7eb; + cursor: pointer; +} + +.social-links { + display: flex; +} + +.social-icon { + margin-left: 12px; +} + +.social-icon img { + width: 20px; + height: 20px; +} + +/* 심화 요구사항 */ +@media (min-width: 1920px) { + .header, + .main-banner, + .bottom-banner { + width: 100%; + } + + .header-container, + .main-banner-container, + .bottom-container { + max-width: 1520px; + } +} + +@media (max-width: 1600px) { + .logo { + margin-left: 100px; + } + + .login-btn { + margin-right: 100px; + } +} + +@media (max-width: 992px) { + .main-banner-container, + .bottom-container { + flex-direction: column; + text-align: center; + padding: 0 30px; + } + + .main-banner-text, + .bottom-container h2 { + margin-bottom: 30px; + } + + .bottom-container h2 { + text-align: center; + } + + .bottom-image { + max-width: 400px; + } + + .action-btn { + padding: 16px 60px; + } + + .main-banner-text h1 { + font-size: 34px; + line-height: 48px; + } + + .hot-item-text h2, + .search-text h2, + .register-text h2, + .bottom-container h2 { + font-size: 34px; + line-height: 48px; + } + + .hot-item-text p, + .search-text p, + .register-text p { + font-size: 20px; + line-height: 28px; + } + + .action-btn { + font-size: 18px; + } +}