diff --git a/image/Group.png b/image/Group.png deleted file mode 100644 index 7c8f37b9..00000000 Binary files a/image/Group.png and /dev/null differ diff --git a/image/eye_icon.png b/image/eye_icon.png new file mode 100644 index 00000000..df802563 Binary files /dev/null and b/image/eye_icon.png differ diff --git a/image/favicon.ico b/image/favicon.ico new file mode 100644 index 00000000..9fecc692 Binary files /dev/null and b/image/favicon.ico differ diff --git a/image/google.png b/image/google.png new file mode 100644 index 00000000..64db8acb Binary files /dev/null and b/image/google.png differ diff --git a/image/Vector (1).png b/image/instagram.png similarity index 100% rename from image/Vector (1).png rename to image/instagram.png diff --git a/image/invisible_icon.png b/image/invisible_icon.png new file mode 100644 index 00000000..1b53b9d4 Binary files /dev/null and b/image/invisible_icon.png differ diff --git a/image/kakaotalk.png b/image/kakaotalk.png new file mode 100644 index 00000000..6c3e2487 Binary files /dev/null and b/image/kakaotalk.png differ diff --git a/image/panda.png b/image/panda.png new file mode 100644 index 00000000..03341187 Binary files /dev/null and b/image/panda.png differ diff --git a/image/Vector.png b/image/twitter.png similarity index 100% rename from image/Vector.png rename to image/twitter.png diff --git a/image/youtube.png b/image/youtube.png new file mode 100644 index 00000000..f51731d4 Binary files /dev/null and b/image/youtube.png differ diff --git a/index.html b/index.html index 75d8045f..fc1aee53 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ 판다마켓 - +
@@ -16,7 +16,9 @@
-

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

+

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

구경하러가기
@@ -31,15 +33,17 @@

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

Hot_item

-

인기 상품을

-

확인해 보세요

+

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

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

-

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

+

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

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

@@ -52,8 +56,8 @@

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

-

register

-

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

+

Register

+

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

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

@@ -74,7 +78,7 @@

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

-

©codeit - 2024

+

©codeit-2024

privacy policy @@ -82,9 +86,9 @@

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

diff --git a/sign-in.html b/sign-in.html index e69de29b..bfd6ac54 100644 --- a/sign-in.html +++ b/sign-in.html @@ -0,0 +1,62 @@ + + + + + + 판다마켓 - 로그인 + + + + + +
+
+ 판다로고 +

판다마켓

+
+
+
+
+ + +
+
+ +
+ + 비밀번호 보기 +
+
+ +
+
+
+
+

간편 로그인하기

+
+ + +
+
+

판다마켓이 처음이신가요?

+ 회원가입 +
+ + +
+ + + diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..249e78fe --- /dev/null +++ b/signup.html @@ -0,0 +1,72 @@ + + + + + + 판다마켓 - 로그인 + + + + + +
+
+ 판다로고 +

판다마켓

+
+
+
+
+ + +
+
+ + +
+
+ +
+ + 비밀번호 보기 +
+
+
+ +
+ + 비밀번호 보기 +
+
+ +
+
+
+
+

간편 로그인하기

+ +
+
+
+

판다마켓이 처음이신가요?

+ 로그인 +
+ + +
+ + + diff --git a/sprint mission/style b/sprint mission/style new file mode 100644 index 00000000..e69de29b diff --git a/style/sign-in.css b/style/sign-in.css new file mode 100644 index 00000000..86486798 --- /dev/null +++ b/style/sign-in.css @@ -0,0 +1,202 @@ + +.login-container { + position: absolute; + width: 640px; + height: 618px; + top: 231px; + left: 640px; + gap: 40px; + + + + } + .title{ + display: flex; + width: 396px; + height: 132px; + align-items: center; + justify-content: center; + margin: 0 122px; + gap:10px; + margin-bottom: 40px; + + + + } + .title img{ + width: 103.53px; + height: 103.88px; + top: 12.98px; + + } + .title h1{ + width:266px; + height: 90px; + top:23.98px; + left: 125.77px; + font-family: ROKAF Sans; + font-weight: 700; + font-size: 66.34px; + line-height: 89.56px; + letter-spacing: 0%; + color:#3692FF; + + } + .input-form{ + width: 640px; + height: 300px; + gap: 24px; + margin-top:40px; + } + .group{ + width: 100%; + height: 98px; + margin-bottom: 16px; + + } + .group label{ + width: 47px; + height: 26px; + font-family: Pretendard; + font-weight: 700; + font-size: 18px; + line-height: 26px; + letter-spacing: 0%; + + } + + .group input{ + display: block; + width: 632.68px; + height: 51.67px; + gap: 10px; + border-radius: 12px; + background-color: #F3F4F6; + border: 2px; + margin-top: 16px; + + } + .password-input { + position: relative; + + } + + .password-input input { + margin-right: 30px; + + } + + .password-icon { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + width: 24px; + cursor: pointer; + + } + button{ + width: 640px; + height: 56px; + gap: 10px; + border-radius: 40px; + padding:16px 124px; + background-color: #3692FF; + color: #F3F4F6; + border:none; + margin-top: 16px; + + } + + .bottom{ + width: 595px; + height: 48px; + gap: 10px; + border-radius: 8px; + padding:16px 23px; + display: flex; + align-items: center; + background-color: #E6F2FF; + margin-top:32px; + + + } + .input-bottom{ + width: 594px; + height: 42px; + align-items: center; + display: flex; + justify-content: space-between; + } + .bottom h1{ + width: 101px; + height: 26px; + font-family: Pretendard; + font-weight: 500; + font-size: 16px; + line-height: 26px; + letter-spacing: 0%; + + + } + + .social{ + align-items: center; + width: 100px; + height: 42px; + justify-content: space-between; + justify-content: center; + display: flex; + gap:16px; + } + .social img{ + width: 42px; + height: 42px; + } + + + .bottom h1{ + width: 101px; + height: 26px; + font-family: Pretendard; + font-weight: 500px; + font-size: 16px; + line-height: 26px; + letter-spacing: 0%; + + } + .footer{ + display: flex; + align-items: center; + width: 197px; + height: 24px; + gap:4px; + margin-left:221.5px; + margin-top: 24px; + border-radius: 8px; + + } + .footer h1{ + font-family: Pretendard; + font-weight: 500; + font-size: 14px; + line-height: 24px; + letter-spacing: 0%; + color:#1F2937 + + } + .footer a { + color: #3692FF; + font-family: Pretendard; + font-weight: 500px; + font-size: 14px; + line-height: 16.71px; + letter-spacing: 0%; + text-decoration: underline; + text-decoration-style: solid; + text-decoration-thickness: Auto; + + } + + + \ No newline at end of file diff --git a/style/signup.css b/style/signup.css new file mode 100644 index 00000000..f100e24e --- /dev/null +++ b/style/signup.css @@ -0,0 +1,189 @@ + +.login-container { + position: absolute; + width: 640px; + height: 857px; + top: 60px; + left: 640px; + gap: 40px; + justify-content: center; + + } + .title{ + display: flex; + width: 396px; + height: 132px; + align-items: center; + justify-content: center; + margin: 0 122px; + gap:10px; + margin-bottom: 40px; + + + + } + .title img{ + width: 103.53px; + height: 103.88px; + top: 12.98px; + + } + .title h1{ + font-family: ROKAF Sans; + font-size: 66.34px; + line-height: 89.56px; + letter-spacing: 0%; + color:#3692FF; + + + } + .input-form{ + width: 640px; + height: 300px; + gap: 24px; + margin-top:40px; + } + + .group{ + width: 100%; + height: 98px; + gap: 160px; + margin-bottom: 16px; + + } + + .group input{ + display: block; + width: 632.68px; + height: 51.67px; + gap: 10px; + border-radius: 12px; + background-color: #F3F4F6; + border: 2px; + margin-top: 16px; + + } + .group label{ + width: 47px; + height: 26px; + font-family: Pretendard; + font-weight: 700; + font-size: 18px; + line-height: 26px; + letter-spacing: 0%; + + } + .password-input { + position: relative; + + } + + .password-input input { + margin-right: 30px; + } + + .password-icon { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + width: 24px; + cursor: pointer; + + } + + button{ + width: 640px; + height: 56px; + gap: 10px; + border-radius: 40px; + padding:16px 124px; + background-color: #3692FF; + color: #F3F4F6; + border:none; + margin-top:16px; + + } + + .bottom{ + width: 595px; + height: 48px; + gap: 10px; + border-radius: 8px; + padding:16px 23px; + display: flex; + align-items: center; + background-color: #E6F2FF; + margin-top: 32px; + + + } + .input-bottom{ + width: 594px; + height: 42px; + justify-content: space-between; + display: flex; + } + .bottom h1{ + width: 101px; + height: 26px; + font-family: Pretendard; + font-weight: 500; + font-size: 16px; + line-height: 26px; + letter-spacing: 0%; + + + } + .social{ + display: flex; + align-items: center; + width: 100px; + height: 42px; + gap:16px; + justify-content: space-between; + + } + .social img{ + width: 42px; + height: 42px; + } + + + .footer{ + display: flex; + align-items: center; + width: 197px; + height: 24px; + gap:4px; + margin-left:221.5px; + margin-top: 24px; + border-radius: 8px; + + } + .footer h1{ + font-family: Pretendard; + font-weight: 500; + font-size: 14px; + line-height: 24px; + letter-spacing: 0%; + color:#1F2937 + + } + .footer a { + color: #3692FF; + font-family: Pretendard; + font-weight: 500px; + font-size: 14px; + line-height: 16.71px; + letter-spacing: 0%; + text-decoration: underline; + text-decoration-style: solid; + + text-decoration-thickness: Auto; + + } + + + + \ No newline at end of file diff --git a/style.css b/style/style.css similarity index 73% rename from style.css rename to style/style.css index 7d4bc8c1..c31c33cb 100644 --- a/style.css +++ b/style/style.css @@ -1,20 +1,28 @@ -* { + * { margin: 0; padding: 0; box-sizing: border-box; + } + body{ + width:1920px; + } .title { + position: fixed; align-items: center; display:flex; height: 70px; border-bottom: 1px solid #DFDFDF; - padding:9px 400px; + padding:9px 200px; gap:10px; justify-content: space-between; - width:1920px; + width:100%; + z-index: 120; + background-color: #FFFFFF; + } - /* 판다로고 */ + .logo { width: 150px; height: auto; @@ -33,41 +41,48 @@ } .container0{ + position: relative; display:flex; - width:1920px; height:540px; - gap:10px; - padding:138px 466px; + top:70px; justify-content: space-around; - align-items: center; + align-items: end; background-color: #CFE5FF; + } + .inner_box0{ - display: flex; - align-items: center; - margin-top:0; width:1110px; height: 340px; - margin-top:200px; + display: flex; + align-items: center; + top:200px; + left:405px; + gap:7px; + } + .inner_box0 a{ text-decoration: none; } .text-box0{ - width:357; - height:260; + display: flex; + width:357px; + height:260px; padding-bottom: 60px; gap:32px; } - h1{ + .text-box0 h{ + width: 295px; + height: 112px; font-weight:700; font-size:40px; line-height: 56px; letter-spacing:2%; } - /* 구경하러가기 */ + .see{ width:357; height:56px; @@ -76,15 +91,27 @@ background-color:#3692FF ; color:#F9FAFB; padding:16px 124px; + margin:46px 0; gap:10px; white-space: nowrap; } -.contents0{ - width: 746px; - height: 340px; +.see p { + width:109px; + height: 32px; + font-family: Pretendard; + font-weight: 600; + font-size: 20px; + line-height: 32px; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; } +.contents0 img{ + width: 746px; + height: 340px; +} .container1{ display:flex; @@ -111,17 +138,28 @@ .text-box{ width:298px; height:238px; - /* padding-right: 24px; */ gap:12px; margin-right:24px; +} +.text-box h1{ + width:222px; + height: 112px; + font-family: Pretendard; + font-weight: 700; + font-size: 40px; + line-height: 140%; + letter-spacing: 2%; + vertical-align: middle; + } .hot-item{ font-size: 18px; line-height: 26px; color:#3692FF; font-weight:700; + margin-bottom:-12px; } .description{ @@ -139,6 +177,18 @@ padding-left: 24px; gap:12px; +} +.text-box2 h1{ + width: 293px; + height: 112px; + font-family: Pretendard; + font-weight: 700; + font-size: 40px; + line-height: 140%; + letter-spacing: 2%; + text-align: right; + vertical-align: middle; + } .text-box3{ @@ -151,8 +201,20 @@ font-weight: 700; font-size:18px; line-height: 26px; + color: #3692FF; + margin-bottom: -16px; } +.text-box3 h1{ + width: 293px; + height: 112px; + font-family: Pretendard; + font-weight: 700; + font-size: 40px; + line-height: 140%; + letter-spacing: 2%; + vertical-align: middle; +} .container2{ display: flex; width:1920px; @@ -195,7 +257,7 @@ .content-bottom img{ width:746px; - height: 397px; + height: 393px; margin-right: 80px; } @@ -208,28 +270,25 @@ gap:10px; justify-content: space-between; background-color: #111827; - align-items: center; + } .inner_box2{ display: flex; width: 1120px; height: 20px; justify-content: space-between; - display: flex; - margin-right: -50px; - margin-top:-80px; - + align-items: center; + } .copyright{ + display: flex; width: 112px; - height: 19px; font-weight: 400; font-size:16px; - line-height: 19.09px; letter-spacing: 0%; - text-align: center; color: #9CA3AF; + } .links{ @@ -256,8 +315,9 @@ height: 20px; gap:12px; } -.social_img a{ +.social_img img{ width: 20px; height: 20px; -} \ No newline at end of file +} +