diff --git a/footer/faq.html b/footer/faq.html new file mode 100644 index 00000000..e69de29b diff --git a/footer/privacy.html b/footer/privacy.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/footer/privacy.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/images/Component 2.png b/images/Component 2.png new file mode 100644 index 00000000..49852a6b Binary files /dev/null and b/images/Component 2.png differ diff --git a/images/Component 2@2x.png b/images/Component 2@2x.png new file mode 100644 index 00000000..53575dc0 Binary files /dev/null and b/images/Component 2@2x.png differ diff --git a/images/Component 2@3x.png b/images/Component 2@3x.png new file mode 100644 index 00000000..55700030 Binary files /dev/null and b/images/Component 2@3x.png differ diff --git a/images/Component 3.png b/images/Component 3.png new file mode 100644 index 00000000..73a01dd9 Binary files /dev/null and b/images/Component 3.png differ diff --git a/images/Component 3@2x.png b/images/Component 3@2x.png new file mode 100644 index 00000000..000d07e3 Binary files /dev/null and b/images/Component 3@2x.png differ diff --git a/images/Component 3@3x.png b/images/Component 3@3x.png new file mode 100644 index 00000000..2a6cb101 Binary files /dev/null and b/images/Component 3@3x.png differ diff --git a/images/Group 19.png b/images/Group 19.png new file mode 100644 index 00000000..4575ae59 Binary files /dev/null and b/images/Group 19.png differ diff --git a/images/Img_home_01.png b/images/Img_home_01.png new file mode 100644 index 00000000..36275849 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..f575819a 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..38f55fe2 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..5d2c075d 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..3f404d6f Binary files /dev/null and b/images/Img_home_top.png differ diff --git a/images/ic_facebook.svg b/images/ic_facebook.svg new file mode 100644 index 00000000..8491c2f8 --- /dev/null +++ b/images/ic_facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_instagram.svg b/images/ic_instagram.svg new file mode 100644 index 00000000..c83306f8 --- /dev/null +++ b/images/ic_instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_twitter.svg b/images/ic_twitter.svg new file mode 100644 index 00000000..14a6069a --- /dev/null +++ b/images/ic_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/ic_youtube.svg b/images/ic_youtube.svg new file mode 100644 index 00000000..7316d2cd --- /dev/null +++ b/images/ic_youtube.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/loginLogo.png b/images/loginLogo.png new file mode 100644 index 00000000..7db8527a Binary files /dev/null and b/images/loginLogo.png differ diff --git a/index.css b/index.css new file mode 100644 index 00000000..2a651c7b --- /dev/null +++ b/index.css @@ -0,0 +1,330 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + overflow-x: hidden; +} +a {color: inherit; text-decoration: none; outline: none} a:hover, a:active {text-decoration: none;} +.wrap { + width: 100%; + height: auto; +} +header { + width: 100%; + height: 70px; + background: #fff; +} +header .container { + width: calc(100% - 27vw); + padding: 10px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + +} +.icon { + background-image: url(/images/Group\ 19.png); + width: 153px; + height: 51px; + cursor: pointer; +} +.login { + background: #3692FF; + width: 128px; + height: 48px; + border-radius: 8px; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} +.login:hover { + background: #1251AA; +} +nav { + width: 100%; + height: 540px; + background: #cfe5ff; + display: flex; +} +nav .container { + width: calc(100% - 27vw); + margin: 0 auto; + display: grid; + grid-template: 1fr / 1fr 1fr; + align-items: end; + flex-direction: row; +} +.navDesc h4{ + font-size: 1.4em; + color: #374151; +} +.navDesc button { + margin-bottom: 30%; + margin-top: 30px; + width: 20vw; + height: 46px; + color: #fff; + background: #3692FF; + border-radius: 40px; + border: none; +} +.navDesc button:hover { + background: #1251AA; +} +.navImgWrap { + width: 51vw; + height: 21vw; +} +.navImg { + background-image: url(/images/Img_home_top.png); + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-size: contain; +} + +main { + width: 100%; + height: auto; + background: #fff; + padding-bottom: 10%; +} +main .container { + width: calc(100% - 32vw); + margin: 0 auto; + /* background: #000; */ + height: auto; +} +.mainWrap { + width: 100%; + height: 444px; + display: flex; + background: #fcfcfc; + margin-top: 10%; +} +.hotImg{ + background-image: url(/images/Img_home_01.png); + width: 60%; + height: 444px; + background-repeat: no-repeat; + background-size: cover; +} +.searImg{ + background-image: url(/images/Img_home_02.png); + width: 60%; + height: 444px; + background-repeat: no-repeat; + background-size: cover; +} + +.mainTxt { + display: flex; + justify-content: center; + width: 40%; +} +.txtWrap { + width: calc(100% - 100px); + margin: 0 auto; + text-align: left; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.searchtxtWrap { + width: calc(100% - 100px); + margin: 0 auto; + text-align: right; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +.SPANtitleTxt { + font-weight: bold; + font-size: 18px; + color: #3692FF; + line-height: 4; +} +.h4titleTxt { + font-weight: bold; + font-size: 30px; +} +.PtitleTxt { + margin-top: 20px; + font-size: 24px; + white-space: nowrap; + +} +aside { + width: 100%; + height: 540px; + background: #cfe5ff; + display: flex; +} +aside .container { + width: calc(100% - 37vw); + margin: 0 auto; + display: grid; + grid-template: 1fr / 1fr 1fr; + align-items: end; + flex-direction: row; +} +aside h4{ + font-size: 2em; + color: #374151; + margin-bottom: 30%; +} +.asideImgWrap { + width: 44vw; + height: 22vw; +} +.asideImg { + background-image: url(/images/Img_home_bottom.png); + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-size: cover; +} +footer { + width: 100%; + height: 160px; + background: #111827; + display: flex; + padding-top: 30px; +} +.footerTxtWrap { + display: flex; + gap: 20px; +} + +footer .container { + width: calc(100% - 27vw); + margin: 0 auto; + height: auto; + /* background: #fff; */ +} +.footerTxt { + color: #9ca3af; + font-size: 16px; + display: flex; + justify-content: space-between; +} +.iconWrap { + display: flex; + gap: 20px; +} +.facebook { + width: 20px; + height: 20px; + background-size: cover; + background-image: url(/images/ic_facebook.svg); + cursor: pointer; +} +.twitter { + width: 20px; + height: 20px; + background-size: cover; + background-image: url(/images/ic_twitter.svg); + cursor: pointer; +} +.youtube { + width: 20px; + height: 20px; + background-size: cover; + background-image: url(/images/ic_youtube.svg); + cursor: pointer; +} +.insta { + width: 20px; + height: 20px; + background-size: cover; + background-image: url(/images/ic_instagram.svg); + cursor: pointer; +} +.txt2, .txt3 { + cursor: pointer; + color: #374151; +} +@media (max-width: 800px) { + header .container { + width: 100%; + padding: 10px; + } + nav { + height: 771px; + position: relative; + background: #cfe5ff; + } + nav .container { + display: flex; + width: auto; + width: 100%; + + text-align: center; + } + nav .navImgWrap { + width: 100%; + height: 23vh; + } + nav .navImgWrap .navImg { + background-size: cover; + background-repeat: no-repeat; + } + .navDesc { + position: absolute; + top: 10%; + } + .navDesc h4 { + font-size: 2vw; + white-space: nowrap; + margin-bottom: 20px; + } + .navDesc button { + margin-bottom: 0; + margin-top: 0; + width: 357px; + } +} +@media (max-width: 375px) { + nav { + height: 540px; + position: relative; + background: #cfe5ff; + } + nav .container { + display: flex; + width: auto; + width: 100%; + text-align: center; + } + nav .navImgWrap { + width: 120vw; + height: 10vh; + } + nav .navImgWrap .navImg { + width: 100%; + height: 10vh; + background-repeat: no-repeat; + } + .navDesc { + display: flex; /* 중앙 정렬을 위해 flexbox 사용 */ + justify-content: center; /* 가로 중앙 정렬 */ + align-items: center; /* 세로 중앙 정렬 */ + flex-direction: column; /* 텍스트와 버튼을 세로로 배치 */ + text-align: center; + } + .navDesc h4 { + font-size: 40px; + margin-bottom: 20px; + } + .navDesc button { + margin-bottom: 0; + margin-top: 0; + width: 240px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..9a7bfe3d --- /dev/null +++ b/index.html @@ -0,0 +1,93 @@ + + + + + + 판다마켓 + + + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ Hot item +

인기 상품을
확인해 보세요

+

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

+
+
+
+
+
+
+ Search +

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

+

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

+
+
+
+
+
+
+
+
+ Hot item +

인기 상품을
확인해 보세요

+

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

+
+
+
+
+
+ + +
+ + + + \ No newline at end of file diff --git a/items/items.css b/items/items.css new file mode 100644 index 00000000..e69de29b diff --git a/items/items.html b/items/items.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/items/items.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/login/login.css b/login/login.css new file mode 100644 index 00000000..efdfb930 --- /dev/null +++ b/login/login.css @@ -0,0 +1,127 @@ +/* 기본 스타일 초기화 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* 전체 화면을 감싸는 컨테이너 */ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +/* 로그인 박스 */ +.login-container { + width: 640px; + text-align: center; + border-radius: 10px; + +} + +/* 로고 */ +.logo img { + width: 250px; + margin-bottom: 10px; +} + + +/* 입력 그룹 */ +.input-group { + text-align: left; + margin-bottom: 15px; +} + +.input-group label { + display: block; + font-size: 14px; + margin-bottom: 5px; + font-weight: bold; +} + +.input-group input { + height: 56px; + width: 100%; + padding: 12px; + border: none; + border-radius: 6px; + font-size: 16px; + background-color: #f3f4f6; +} + +/* 비밀번호 입력 + 아이콘 */ +.password-wrapper { + position: relative; +} + +.password-wrapper input { + width: 100%; + padding-right: 40px; +} + +.toggle-password { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; +} + +/* 로그인 버튼 */ +.login-btn { + width: 100%; + padding: 12px; + background-color: #3692FF; + color: white; + border: none; + border-radius: 40px; + font-size: 16px; + cursor: pointer; + margin-top: 10px; + height: 56px; +} + +.login-btn:hover { + background-color: #1d4ed8; +} + +/* 소셜 로그인 */ +.social-login { + width: 100%; + margin-top: 20px; + font-size: 14px; + color: #000; + background: #E6f2ff; + height: 74px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; + border-radius: 8px; +} + +.social-icons { + display: flex; + justify-content: center; + gap: 10px; +} + +.social-icons img { + width: 42px; + height: 42px; + cursor: pointer; +} + +/* 회원가입 */ +.signup-text { + font-size: 14px; + margin-top: 20px; +} + +.signup-text a { + color: #3692FF; + text-decoration: none; + font-weight: bold; +} diff --git a/login/login.html b/login/login.html new file mode 100644 index 00000000..c5a4a953 --- /dev/null +++ b/login/login.html @@ -0,0 +1,44 @@ + + + + + + 로그인 - 판다마켓 + + + +
+ +
+
+ + +
+ +
+ +
+ + 👁️ +
+
+ + +
+ +
+

간편 로그인하기

+ +
+ +

판다마켓이 처음이신가요? 회원가입

+
+ + diff --git a/login/sing.css b/login/sing.css new file mode 100644 index 00000000..e69de29b diff --git a/login/sing.html b/login/sing.html new file mode 100644 index 00000000..d01f779f --- /dev/null +++ b/login/sing.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file