diff --git a/README.md b/README.md new file mode 100644 index 000000000..52737420f --- /dev/null +++ b/README.md @@ -0,0 +1,23 @@ +## 요구사항 +넷틀리파이 링크 https://velvety-haupia-f4c1e8.netlify.app +### 기본 + +- 헤더, 배너, 상세, 푸터 작성 [o] +- 헤더 일부 반응 [o] + +### 심화 + +- 반응형 완벽하지 않음 [x] +- 위치, 사이즈, 여백 완벽하지 않음 [x] + +## 주요 변경사항 + +- 첫 제출입니다! + +## 스크린샷 + +![판다마켓](https://github.com/emotigom/6-Sprint-Mission/assets/89232159/cc172863-03ad-4b55-a174-243b19e3cd87) + +## 멘토에게 + +- 아무 이미지나 넣었는데.. 스프린트 미션 (figma)에서 가져와야 하나요? diff --git a/global.css b/global.css new file mode 100644 index 000000000..74771642b --- /dev/null +++ b/global.css @@ -0,0 +1,35 @@ +* { + box-sizing: border-box; +} + +body { + font-family: 'Noto Sans KR', sans-serif; + +} + + +@media screen and (min-width: 1920px) { + .headerHug { + margin: 0 200px; + } +} + +@media screen and (max-width: 1920px) { + .headerHug { + margin: 0 200px; + } + +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 18px; +} + +h3 { + font-size: 14px; + color: #3692FF; +} \ No newline at end of file diff --git a/images/banner1.png b/images/banner1.png new file mode 100644 index 000000000..3dbe1090f Binary files /dev/null and b/images/banner1.png differ diff --git a/images/banner2.png b/images/banner2.png new file mode 100644 index 000000000..bad6c7911 Binary files /dev/null and b/images/banner2.png differ diff --git a/images/bear.svg b/images/bear.svg new file mode 100644 index 000000000..ac8cda9f2 --- /dev/null +++ b/images/bear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/clothes.jpg b/images/clothes.jpg new file mode 100644 index 000000000..f0e991715 Binary files /dev/null and b/images/clothes.jpg differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 000000000..3c140f5c2 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 000000000..a424dab96 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/register.jpg b/images/register.jpg new file mode 100644 index 000000000..52ea9d4ea Binary files /dev/null and b/images/register.jpg differ diff --git a/images/search.jpg b/images/search.jpg new file mode 100644 index 000000000..b9f59cbd9 Binary files /dev/null and b/images/search.jpg differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 000000000..10bad07b2 Binary files /dev/null and b/images/twitter.png differ diff --git a/images/youtube.png b/images/youtube.png new file mode 100644 index 000000000..0d36d1206 Binary files /dev/null and b/images/youtube.png differ diff --git a/import.css b/import.css new file mode 100644 index 000000000..53cb9620b --- /dev/null +++ b/import.css @@ -0,0 +1,2 @@ +@import url("global.css"); +@import url("landing1.css"); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..09890aff9 --- /dev/null +++ b/index.html @@ -0,0 +1,112 @@ + + + + + + + 판다마켓 + + + + +
+
+ +
+ 홈 아이콘 +
+

판다마켓

+ + + 로그인 +
+
+
+
+
+

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

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

Hot item

+

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

+

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

+
+
+
+
+
+
+

Search

+

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

+

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

+
+ + +
+
+
+
+ + +
+

Register

+

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

+

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

+
+
+
+
+
+
+






+

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

+ +
+
+
+ + + + \ No newline at end of file diff --git a/landing1.css b/landing1.css new file mode 100644 index 000000000..3515d0875 --- /dev/null +++ b/landing1.css @@ -0,0 +1,236 @@ +/* 헤더 */ + +.landingHeader { + width: 100%; + height: 70px; + align-items: center; +} + +.headerHug { + margin: 0 200px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.container1 { + width: auto; + /* height: 40px; */ + position: relative; + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; +} +.pandaBack { + width: 40px; + height: 40px; + background-color: #3692FF; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; +} + +.pandaIcon { + width: 26px; + height: 26px; +} + +.pandaName { + margin-left: 5px; + width: 103; + font-size: 22px; + font-weight: 700; + color: #3692FF; + +} + +.buttonLogin { + background-color: #3692FF; + border-radius: 10px; + width: 128px; + height: 48px; + font-size: 14px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + color: #ffffff; + text-decoration: none; +} + +/* 상단 이미지 */ +.bannerTop { + background-color: #A0E5F1; + width: auto; + height: 540px; + display: flex; + justify-content: center; + align-items: center; +} + +.bannerContainer1 { + position: relative; + display: inline-block; + flex-direction: row; + justify-content: left; + align-items: center; + height: 100%; + width: 1600px; + padding: 80px 0px; + background-image: url(images/banner1.png); + background-repeat: no-repeat; + z-index: 1; + background-position: 500px 0px; + background-size: contain; +} + +.bannertext1 { + margin-left: 120px; + align-items: center; +} + +.buttonShop1 { + background-color: #3692FF; + display: flex; + border-radius: 99px; + width: 355px; + height: 56px; + justify-content: center; + align-items: center; + font-size: 20px; + cursor: pointer; + color: #ffffff; + text-decoration: none; +} + +/* 상세기능 - 아이템,검색,등록 */ +.main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.landingContainer1 { + display: flex; + justify-content: center; + align-items: center; + width: 1200px; + height: 720px; +} +.landingBox1 { + position: relative; + margin: 130px 255px 130px 0px; + display: flex; + align-items: center; + gap: 12px; +} +.landingImg1 { + position: relative; + height: auto; + width: 600px; + background-size: contain; + background-repeat: no-repeat; +} +.landingText1 { + height: 100%; + width: 400px; + margin-left: 100px; +} +.landingContainer2 { + display: flex; + justify-content: center; + align-items: center; + width: 1200px; + height: 720px; +} +.landingBox2 { + position: relative; + margin: 130px 0px 130px 255px; + display: flex; + align-items: center; + gap: 12px; +} +.landingImg2 { + position: relative; + height: auto; + width: 600px; + background-size: contain; + background-repeat: no-repeat; +} +.landingText2 { + height: 100%; + width: 400px; + margin-right: 100px; + text-align: right; +} + +/* 하단 이미지 */ +.bannerBottom { + background-color: #A0E5F1; + width: auto; + height: 540px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.bannerContainer2 { + position: relative; + display: inline-block; + flex-direction: row; + justify-content: left; + align-items: center; + height: 100%; + width: 1600px; + padding: 80px 0px; + background-image: url(images/banner2.png); + background-repeat: no-repeat; + z-index: 1; + background-position: 500px 0px; + background-size: contain; +} + +.bannertext2 { + margin-left: 120px; + align-items: center; +} + +/* 푸터 */ +.landingFooter { + display: flex; + flex-direction: row; + justify-content: space-around; + height: 160px; + padding-top: 30px; + background-color: #111827; + color: #ffffff; +} +.copyRight { + color: #9CA3AF; +} +.PPnFAQ { + display: flex; + gap: 50px; +} +.PP, .FAQ { + text-decoration: none; + color: #E5E7EB +} + +.SNS { + display: flex; + height: 20px; + width: 20px; + gap: 20px; + +} +.facebook-outer, .twitter-outer, .youtube-outer, .instagram-outer { + background-color: #ffffff; + border-radius: 9999px; + cursor: pointer; +} \ No newline at end of file