- 
-
-
-
- - 일상의 모든 물건을 - 거래해 보세요 -
- 구경하러 가기 -
-
-
-
- 
-
-
-
-
+ Hot item
-
- 인기 상품을 확인해 보세요
-
-
- 가장 HOT한 중고거래 물품을
- 판다 마켓에서 확인해 보세요
-
+
+
+
+ 일상의 모든 물건을 + 거래해 보세요 +
+ 구경하러 가기
-
-
-
- Search
-
- 구매를 원하는
- 상품을 검색하세요
-
-
- 구매하고 싶은 물품은 검색해서쉽게 찾아보세요
+
@@ -25,8 +25,8 @@
+
-
+
+
+
+
+
+
+
Hot item
+
+ 인기 상품을 확인해 보세요
+
+
+ 가장 HOT한 중고거래 물품을
+ 판다 마켓에서 확인해 보세요
+
+
+ 
-
-
+
+
-
+
+
+
Search
+
+ 구매를 원하는
+ 상품을 검색하세요
+
+
+ 구매하고 싶은 물품은 검색해서쉽게 찾아보세요
+
+
-
-
-
-
-
- 
-
-
-
-
+ Register
-
- 판매를 원하는
- 상품을 등록하세요
-
-
- 어떤 물건이든 판매하고 싶은 상품을
- 쉽게 등록하세요
-
+
+
+
+
+
+
Register
+
+ 판매를 원하는
+ 상품을 등록하세요
+
+
+ 어떤 물건이든 판매하고 싶은 상품을
+ 쉽게 등록하세요
+
+
- 
+
+
+
+
-
+
+
diff --git a/login.css b/login.css
new file mode 100644
index 000000000..ee4592a82
--- /dev/null
+++ b/login.css
@@ -0,0 +1,141 @@
+:root {
+ --gray900: #111927;
+ --gray800: #1f2937;
+ --gray700: #374151;
+ --gray600: #4B5563;
+ --gray500: #6B7280;
+ --grat400: #9ca3af;
+ --gary200: #e5e7eB;
+ --gray100: #F3F4F6;
+ --gray50: #f9fafb;
+ --blue: #3692ff;
+}
+
+html {
+ font-family: "pretendard";
+
+}
+
+body {
+ display: block;
+
+}
+
+.pan_main {
+ display: block;
+ width: 640px;
+ height: 618px;
+ margin: 231px auto;
+
+}
+
+.login-title {
+ display: flex;
+ justify-content: center;
+ width: 396px;
+ height: 132px;
+ margin: 0px 122px;
+ margin-bottom: 40px;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ margin-top: 40px;
+ gap: 24px;
+}
+
+label {
+ display: block;
+ font-size: 18px;
+ line-height: 26px;
+ font-weight: 700;
+ gap: 10px;
+ text-align: left;
+}
+
+input {
+ display: block;
+ width: 640px;
+ height: 56px;
+ border: none;
+ padding: 16px 24px;
+ gap: 10px;
+ border-radius: 12px;
+ background-color: var(--gray100);
+}
+
+.login-set {
+ border: none;
+ border-radius: 40px;
+ width: 640px;
+ height: 56px;
+ padding: 16px 124px;
+ color: var(--gray100);
+ background-color: #9cA3AF;
+ text-align: center;
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.login-easy {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 640px;
+ height: 74px;
+ padding: 16px 23px;
+ border: none;
+ border-radius: 8px;
+ background-color: var(--gary200);
+}
+
+.login-first {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 24px;
+ text-align: center;
+}
+
+.login-set:hover {
+ background-color: var(--blue);
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+ body {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+ .pan_main{
+ width: 100%;
+ max-width: 400px;
+ }
+ .login-title{
+ width: 200px;
+ height: auto;
+ }
+ form {
+ width: 100%;
+ max-width: 400px;
+ }
+ label{
+ width: 100%;
+ max-width: 400px;
+ }
+ input{
+ width: 100%;
+ max-width: 400px;
+ }
+ .login-set{
+ width: 100%;
+ max-width: 400px;
+ }
+ .login-easy{
+ width: 100%;
+ max-width: 400px;
+ }
+ .login-first{
+ width: 100%;
+ max-width: 400px;
+ }
+}
diff --git a/login.html b/login.html
index 0efcb9f63..1042a8135 100644
--- a/login.html
+++ b/login.html
@@ -6,7 +6,7 @@
-
+
-
+
+
+
+
+
+
-
-
+
-
-
-
-
+
+
판다 마켓이 처음이신가요? 회원가입
+ 판다 마켓이 처음이신가요? 회원가입
-