-
+
alt="상품 등록"
/>
Search
-
+ Search
+
구매를 원하는
상품을 검색하세요
-
+
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
@@ -83,11 +83,11 @@
alt="상품 등록"
/>
- Register
-
+ Register
+
판매를 원하는
상품을 등록하세요
-
+
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
@@ -98,10 +98,10 @@
@@ -118,22 +118,22 @@
href="https://www.facebook.com/"
target="_blank"
rel="noopener noreferrer"
- >
diff --git a/login.html b/login.html
index ec8b0949..aed05590 100644
--- a/login.html
+++ b/login.html
@@ -1,9 +1,86 @@
-
+
판다마켓 - login
+
+
+
+
+
-
+
+
+
diff --git a/signup.html b/signup.html
new file mode 100644
index 00000000..9f46929f
--- /dev/null
+++ b/signup.html
@@ -0,0 +1,111 @@
+
+
+
+
+
+ 판다마켓 - signup
+
+
+
+
+
+
+
+
+
+
diff --git a/styles/auth.css b/styles/auth.css
new file mode 100644
index 00000000..8dffd2cf
--- /dev/null
+++ b/styles/auth.css
@@ -0,0 +1,91 @@
+.auth-container {
+ max-width: 640px;
+ margin: 60px auto;
+ color: var(--gray800);
+}
+
+/* 로고 */
+.logo-wrapper {
+ text-align: center;
+ margin-bottom: 40px;
+}
+
+/* 로그인 폼 */
+.input-form {
+ margin-bottom: 24px;
+}
+
+.input-form label {
+ display: block;
+ font-weight: 700;
+ font-size: var(--font-size-2lg);
+ line-height: var(--line-height-2lg);
+ margin-bottom: 16px;
+}
+
+input {
+ width: 100%;
+ padding: 16px 24px;
+ border: none;
+ border-radius: 12px;
+ background-color: var(--gray100);
+}
+
+input:focus {
+ outline-color: var(--primary100);
+}
+
+.input-form-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+
+.password-show {
+ position: absolute;
+ right: 24px;
+ cursor: pointer;
+}
+
+#auth-button {
+ width: 100%;
+ margin-bottom: 24px;
+}
+
+/* 간편 로그인하기 */
+.login-simple {
+ width: 100%;
+ height: 74px;
+ padding: 16px 23px;
+ background-color: #e6f2ff;
+ border-radius: 8px;
+ margin-bottom: 24px;
+
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.login-simple-title {
+ font-weight: 500;
+ font-size: var(--font-size-lg);
+ line-height: var(--line-height-lg);
+}
+
+.login-simple-social {
+ display: flex;
+ gap: 16px;
+}
+
+/* 회원가입 바로가기 */
+.switch-auth-wrapper {
+ text-align: center;
+ font-weight: 500;
+ font-size: var(--font-size-md);
+ line-height: var(--line-height-md);
+}
+
+.switch-auth {
+ color: var(--primary100);
+ text-decoration: underline;
+}
diff --git a/styles/global.css b/styles/global.css
index bae885e5..fe7ff85d 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -29,14 +29,14 @@
--font-size-xs: 12px;
/* line-height */
- --line-height-3xl: 1.313;
- --line-height-2xl: 1.333;
- --line-height-xl: 1.6;
- --line-height-2lg: 1.444;
- --line-height-lg: 1.625;
- --line-height-md: 1.714;
- --line-height-sm: 1.692;
- --line-height-xs: 1.5;
+ --line-height-3xl: 1.313; /* 32px / 42px */
+ --line-height-2xl: 1.333; /* 24px / 32px */
+ --line-height-xl: 1.6; /* 20px / 32px */
+ --line-height-2lg: 1.444; /* 18px / 26px */
+ --line-height-lg: 1.625; /* 16px / 26px */
+ --line-height-md: 1.714; /* 14px / 24px */
+ --line-height-sm: 1.692; /* 13px / 22px */
+ --line-height-xs: 1.5; /* 12px / 18px */
}
*,
@@ -58,13 +58,17 @@ button {
outline: none;
box-shadow: none;
cursor: pointer;
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ color: inherit;
}
img {
vertical-align: bottom;
}
-h1 {
+span {
font-size: 40px;
font-weight: 700;
line-height: 56px;
@@ -88,6 +92,10 @@ header {
justify-content: space-between;
background-color: #fff;
border-bottom: 1px solid #dfdfdf;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1;
}
footer {
@@ -102,14 +110,14 @@ footer {
}
.container {
- max-width: 1200px;
+ max-width: 1120px;
margin: 0 auto;
width: 100%;
}
.button {
background-color: var(--primary100);
- color: #ffffff;
+ color: var(--gray100);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -118,7 +126,6 @@ footer {
.btn-round {
font-size: var(--font-size-xl);
- line-height: var(--line-height-xl);
font-weight: 600;
padding: 16px 124px;
border-radius: 9999px;
diff --git a/styles/home.css b/styles/home.css
index 1ad48423..4165f740 100644
--- a/styles/home.css
+++ b/styles/home.css
@@ -17,8 +17,7 @@
height: 540px;
background-color: #cfe5ff;
background-repeat: no-repeat;
- background-position: 70% bottom;
- background-size: 50%;
+ background-position: calc(100% - 30%) bottom;
display: flex;
align-items: center;
}
Register
-
+ Register
+
판매를 원하는
상품을 등록하세요
-
+
어떤 물건이든 판매하고 싶은 상품을
쉽게 등록하세요
@@ -98,10 +98,10 @@
@@ -118,22 +118,22 @@
href="https://www.facebook.com/"
target="_blank"
rel="noopener noreferrer"
- >
+ 
