diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html index bf20f4cb..f0e7cd87 100644 --- a/index.html +++ b/index.html @@ -3,48 +3,157 @@ - Panda_login + + + + 판다마켓 + - + + + + + + - -
- - -
- - - - - - - -
- - -
- - -
-
- - -
- +
+
+ 페이스북 + 트위터 + 유튜브 + 인스타그램 +
+ + \ No newline at end of file diff --git a/item.html b/item.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/signin.html b/signin.html new file mode 100644 index 00000000..582a0e50 --- /dev/null +++ b/signin.html @@ -0,0 +1,51 @@ + + + + + + Panda_login + + + + + + +
+ + +
+ + + + + + + +
+ + +
+ + +
+
+ +
+
+ 판다마켓에 처음이신가요? 회원가입 +
+
+ + + \ No newline at end of file diff --git a/signup.html b/signup.html index e69de29b..b2567798 100644 --- a/signup.html +++ b/signup.html @@ -0,0 +1,55 @@ + + + + + + 판다마켓_회원가입 + + + + + +
+
+ +
+ +
+
+ + +
+
+ + +
+
+ +
+ + 비밀번호 숨김 +
+
+ +
+ + 비밀번호 숨김 +
+
+ +
+
+ +
+

간편 로그인하기

+ +
+ +
+ 이미 회원이신가요? 로그인 +
+ + \ No newline at end of file diff --git a/signup_2.html b/signup_2.html deleted file mode 100644 index b2567798..00000000 --- a/signup_2.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - 판다마켓_회원가입 - - - - - -
-
- -
- -
-
- - -
-
- - -
-
- -
- - 비밀번호 숨김 -
-
- -
- - 비밀번호 숨김 -
-
- -
-
- - - -
- 이미 회원이신가요? 로그인 -
- - \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 54e2e926..00000000 --- a/style.css +++ /dev/null @@ -1,141 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: Arial, sans-serif; -} - -/* 화면 가운데 배치(body) : 로그인 박스를 화면 정가운데 위치 */ -body { -/* 가로 정렬(가운데 정렬 가능) */ -display: flex; -/* 가로 가운데 정렬 */ -justify-content: center; -/* 세로 가운데 정렬 */ -align-items: center; -/* 화면 전체 높이를 사용 */ -height: 100vh; -background-color:#f5f5f5; -} - -/* 큰 박스 만들기 */ -.container { - /* 가로길이 640px */ - width: 640px; - /* 세로길이 618px */ - height: auto; - /* 흰색배경 */ - background-color: rgb(255, 255, 255); - /* 안쪽여백추가 */ - padding: 20px; - /* 모서리를 둥글게 */ - /* border-radius: 10px; - /* 그림자 효과 */ - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */ - /* 글자 가운데 정렬 */ - text-align: center; - margin-top: 172px; - border-radius: 8px; -} - -.logo { - display: flex; - /* 가로 가운데 정렬 */ - justify-content: center; - /* 세로 가운데 정렬 */ - align-items: center; - margin-bottom: 40px; -} - -.login_box { - /* 요소들을 정렬할 준비 */ - display: flex; - /* 세로로 정렬 */ - flex-direction: column; - /* 각 요소들 사이에 10px 간격주기 */ - gap: 10px; -} - -input { - width: 100%; - /* 글씨가 입력창 안에서 너무 붙지 않도록 여백 추가 */ - padding: 10px; - border: 1px solid white; - font-size: 18px; -} - -label { - /* 라벨을 한 줄씩 표시 */ - display: block; - /* 왼쪽 정렬 */ - text-align: left; - font-size: 18px; - /* 글씨 강조 */ - font-weight: 700; - line-height: 26px; - margin-bottom: 16px; -} -.password { - margin-top: 24px; -} -.password_wrapper { - /* 부모 위치 기준 */ - position: relative; - /* div 안에 있는 요소들을 가로로 배치 */ - display: flex; - /* 위아래 정렬을 딱 맞게 */ - align-items: center; - margin-right: 16px; -} - -.login_btn { - width: 100%; - /* 버튼 안 글자가 너무 붙지 않게 여백 추가 */ - padding:16px 124px 16px 124px ; - /* 파란색 배경 */ - background-color: #3692FF; - /* 글씨 색상을 흰색으로 */ - color: white; - /* 테두리 둥글게 */ - border-radius: 40px; - font-size: 20px; - /* 마우스 올리면 클릭 하도록 커서변경 */ - cursor: pointer; - margin-bottom: 24px; -} - -.login_btn:hover { - /* 로그인 버튼에 마우스를 올리면 더 진해짐 */ - background-color: #0056b3; -} - -.social_login { - /* 요소를 가로 정렬 */ - display: flex; - /* 우측정렬 */ - justify-content: right; - gap: 10px; - margin-right: 10px; -} - -.social { - background-color: #E6F2FF; - width: 100%; - padding: 16px 23px 16px 23px; - /* 버튼 사이 여백 추가 */ - gap: 10px; - /* 위쪽 여백 추가 */ - margin-top: 15px; -} - -.signup { -/* 위쪽 여백 추가 */ -margin-top: 45px; -font-size: 14px; - /* 글자 가운데 정렬 */ - text-align: center; -} - -.signup a { - color: #3692FF; -} \ No newline at end of file diff --git a/style_2.css b/style_2.css deleted file mode 100644 index 2a2268e5..00000000 --- a/style_2.css +++ /dev/null @@ -1,116 +0,0 @@ -* { - margin: 0; - padding: 0; - /* 박스에 사이즈 딱 맞추려면 border-box를 적용 */ - box-sizing: border-box; -} - -body { - color: #374151; - font-family: "Pretendard", sans-serif; -} -.container { - max-width: 640px; - margin: 0 auto; -} - -.logo_container { - display: block; - text-align: center; - margin-top: 60px; - margin-bottom: 40px; -} - -.info_box { - display: flex; - flex-direction: column; - margin-bottom: 24px; -} - -label { - display: block; - font-size: 18px; - font-weight: 700; - margin-bottom: 16px; -} - -input { - width: 100%; - background-color: #f3f4f6; - border: none; - padding: 16px 24px; - border-radius: 12px; - line-height: 24px; - margin-bottom: 24px; -} - -.input-wrapper { - position: relative; - display: flex; - align-items: center; -} - -.toggle-password { - position:absolute; - right: 24px; - cursor: pointer; -} - -.full_width { - width: 100%; -} - -.pill_button { - font-size: 20px; - font-weight: 700; - border-radius: 999px; - padding: 16px 126px; -} - -.submit_button { - color: white; - background-color:#3692ff; - display: inline-block; - align-items: center; - justify-content: center; -} - -button { - background: none; - border: none; - outline: none; - box-shadow: none; - cursor: pointer; - font-family: inherit; - line-height: inherit; - appearance: none; -} - -.social_login { - background-color: #e6f2ff; - border-radius: 8px; - display: flex; - justify-content: space-between; - margin-top: 24px; - padding:16px 23px; - align-items: center; -} - -.social_login_container { - display: flex; - gap: 16px; -} - -img { - vertical-align: bottom; - -} - -.member { - display: flex; - justify-content: center; - align-items: center; - font-size: 15px; - font-weight: 500; - padding: 24px; -} \ No newline at end of file diff --git a/styles/auth.css b/styles/auth.css new file mode 100644 index 00000000..1782be55 --- /dev/null +++ b/styles/auth.css @@ -0,0 +1,119 @@ +.auth-container { + max-width: 400px; + margin: 0 auto; + padding: 0 16px; +} + +.logo-home-button { + margin: 0 auto; + display: block; + margin-top: 24px; + margin-bottom: 24px; + width: 198px; +} + +.logo-home-button img { + width: 100%; +} + +.input-item { + margin-bottom: 24px; + display: flex; + flex-direction: column; +} + +label { + display: block; + font-weight: 700; + font-size: 14px; + margin-bottom: 8px; +} + +input { + padding: 16px 24px; + background-color: #f3f4f6; + border: none; + border-radius: 12px; + font-size: 16px; + line-height: 24px; + width: 100%; +} + +input::placeholder { + color: #9ca3af; + font-size: 16px; + line-height: 24px; +} + +input:focus { + outline-color: var(--blue); +} + +.input-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.toggle-password { + position: absolute; + right: 24px; + cursor: pointer; +} + +.social-login-container { + background-color: #e6f2ff; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 23px; + margin: 24px 0; +} + +.social-login-container h3 { + font-weight: 500; + font-size: 16px; + line-height: 24px; +} + +.social-login-buttons-container { + display: flex; + gap: 16px; +} + +.auth-switch { + font-weight: 500; + font-size: 15px; + text-align: center; +} + +.auth-switch a { + color: #3182f6; + text-decoration: underline; + text-underline-offset: 2px; +} + +@media (min-width: 768px) { + .auth-container { + max-width: 640px; + } + + .logo-home-button { + width: 396px; + margin-top: 48px; + margin-bottom: 40px; + } + + label { + font-size: 18px; + margin-bottom: 16px; + } +} + +@media (min-width: 1280px) { + .logo-home-button { + margin-top: 60px; + margin-bottom: 40px; + } +} diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 00000000..1f9aa633 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,179 @@ +:root { + /* Gray scale */ + --gray-900: #1b1d1f; + --gray-800: #26282b; + --gray-600: #454c53; + --gray-500: #72787f; + --gray-400: #9ea4a8; + --gray-200: #e5e7eb; + --gray-100: #e8ebed; + --gray-50: #f7f7f8; + + /* Primary color */ + --blue: #3692ff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #374151; + word-break: keep-all; + font-family: "Pretendard", sans-serif; +} + +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 70px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 16px; + background-color: #ffffff; + border-bottom: 1px solid #dfdfdf; +} + +main { + margin-top: 70px; +} + +footer { + background-color: #111827; + padding: 32px; + font-size: 16px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 60px; +} + +#copyright { + order: 3; + flex-basis: 100%; + color: #9ca3af; +} + +#footerMenu { + display: flex; + gap: 30px; + color: var(--gray-200); +} + +#sns { + display: flex; + gap: 12px; +} + +a { + text-decoration: none; + color: inherit; +} + +img { + vertical-align: bottom; +} + +.container { + max-width: 1200px; + margin: 0 auto; + width: 100%; + padding: 0 16px; +} + +button { + background: none; + border: none; + outline: none; + box-shadow: none; + cursor: pointer; + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.button { + background-color: var(--blue); + color: #ffffff; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.button:hover { + background-color: #1967d6; +} + +.button:focus { + background-color: #1251aa; +} + +.button:disabled { + background-color: #9ca3af; + cursor: default; + pointer-events: none; +} + +.see-button { + font-size: 16px; + font-weight: 600; + border-radius: 999px; + padding: 14.5px 33.5px; +} + +.full-width { + width: 100%; +} + +.break-on-desktop { + display: none; +} + +@media (min-width: 768px) { + header { + padding: 0 24px; + } + + .container { + padding: 0 24px; + } + + .pill-button { + font-size: 20px; + font-weight: 700; + padding: 16px 126px; + } + + footer { + padding: 32px 104px 108px 104px; + } + + #copyright { + flex-basis: auto; + order: 0; + } +} + +@media (min-width: 1280px) { + header { + padding: 0 200px; + } + + .break-on-desktop { + display: inline; + } + + footer { + padding: 32px 200px 108px 200px; + } +} diff --git a/styles/home.css b/styles/home.css new file mode 100644 index 00000000..8f6441fa --- /dev/null +++ b/styles/home.css @@ -0,0 +1,164 @@ +.banner { + background-color: #cfe5ff; + height: 60vh; + text-align: center; + background-repeat: no-repeat; + background-position: bottom; + background-size: 130%; +} + +#hero { + background-image: url("../images/home/hero-image.png"); +} + +.banner h1 { + font-weight: 700; + font-size: 32px; + line-height: 44.8px; + padding-top: 48px; + padding-bottom: 18px; +} + +#bottomBanner { + background-image: url("../images/home/bottom-banner-image.png"); +} + +#signinButton { + font-size: 16px; + font-weight: 600; + border-radius: 8px; + padding: 14.5px 43px; +} + +#features { + padding-top: 51px; +} + +.feature { + margin-bottom: 64px; +} + +.feature img { + width: 100%; + margin-bottom: 20px; +} + +.feature:nth-child(2) { + text-align: right; +} + +.feature-text { + flex: 1; +} + +.feature-text h2 { + color: var(--blue); + font-size: 16px; + line-height: 22.4px; + font-weight: 700; + margin-bottom: 8px; +} + +.feature-text h1 { + font-weight: 700; + font-size: 24px; + line-height: 33.6px; +} + +.feature-description { + font-weight: 500; + font-size: 16px; + line-height: 19.2px; + letter-spacing: 0.08em; + margin-top: 20px; +} + +@media (min-width: 768px) { + .banner { + height: 90vh; + background-size: 120%; + } + + .banner h1 { + font-size: 40px; + line-height: 56px; + padding-top: 84px; + padding-bottom: 24px; + } + + #hero h1 br { + display: none; + } + + #features { + padding-top: 24px; + padding-bottom: 16px; + } + + .feature-content h2 { + font-size: 18px; + line-height: 25.2px; + margin-bottom: 12px; + } + + .feature-content h1 { + font-size: 32px; + line-height: 44.8px; + } + + .feature-description { + font-size: 18px; + line-height: 21.6px; + } +} + +@media (min-width: 1280px) { + .banner { + text-align: left; + height: 540px; + display: flex; + align-items: center; + background-position: 80% bottom; + background-size: 55%; + } + + .banner h1 { + padding-top: 0; + padding-bottom: 32px; + } + + #hero h1 br { + display: inline; + } + + #features { + padding: 138px 0; + } + + .feature { + margin-bottom: 138px; + display: flex; + align-items: center; + gap: 5%; + } + + .feature:nth-child(2) { + flex-direction: row-reverse; + } + + .feature img { + width: 50%; + margin-bottom: 0; + } + + .feature-text h1 { + font-size: 40px; + line-height: 56px; + } + + .feature-description { + font-size: 24px; + line-height: 28.8px; + margin-top: 24px; + } +}