diff --git a/css/common.css b/css/common.css
new file mode 100644
index 00000000..67608a79
--- /dev/null
+++ b/css/common.css
@@ -0,0 +1,9 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+a ,a > button {
+ cursor: pointer;
+}
+/* aa */
\ No newline at end of file
diff --git a/css/login-signup.css b/css/login-signup.css
new file mode 100644
index 00000000..11559b2a
--- /dev/null
+++ b/css/login-signup.css
@@ -0,0 +1,108 @@
+.login-container,
+.signup-container {
+ width: 640px;
+ margin: 230px auto;
+ display: flex;
+ justify-items: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 30px;
+}
+
+/* 로그인이미지 */
+.login-img-box,
+.signup-img-box {
+ width: 400px;
+ height: 130px;
+}
+.login-img,
+.signup-img {
+ width: 100%;
+}
+
+/* 이메일,비번 signup 닉네임 비밀번호 확인 */
+.login-email-box,
+.login-password-box,
+.signup-email-box,
+.signup-password-box,
+.signup-nickname-box,
+.signup-ckpassword-box {
+ width: 100%;
+ justify-content: start;
+}
+
+.login-email-box h4,
+.login-password-box h4,
+.signup-email-box h4,
+.signup-password-box h4,
+.signup-nickname-box h4,
+.signup-ckpassword-box h4 {
+ font-size: 18px;
+ margin-bottom: 10px;
+ font-weight: 500;
+}
+
+.login-email-input,
+.login-password-input,
+.signup-email-input,
+.signup-password-input,
+.signup-ckpassword-input,
+.signup-nickname-input {
+ background-color: #F3F4F6;
+ border: none;
+ height: 55px;
+ width: 100%;
+ padding-left: 30px;
+}
+
+/* 비밀번호 눈알 */
+
+/* 로그인버튼 */
+.login-button-box,
+.signup-button-box {
+ width: 100%;
+}
+
+.login-button,
+.signup-button {
+ width: 100%;
+ height: 55px;
+ background-color: #3692FF;
+ border-radius: 40px;
+ color: white;
+ border: none;
+}
+
+/* 간편로그인 */
+.login-ezlogin-box,
+.signup-ezlogin-box {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ background-color: #E6F2FF;
+ height: 74px;
+ align-items: center;
+ justify-content: space-between;
+ padding: 30px;
+}
+.login-ezlogin-box h4,
+.signup-ezlogin-box h4 {
+ font-weight: 400;
+}
+.logo {
+ width: 42px;
+ margin: 10px;
+}
+/* 판다마켓이 처음이신가요 */
+.login-footer,
+.signup-footer {
+ margin-top: 20px;
+}
+.login-footer h5,
+.signup-footer h5 {
+ font-weight: 500;
+}
+.login-footer a,
+.signup-footer a {
+ color: #3692FF;
+}
\ No newline at end of file
diff --git a/panda.css b/css/panda.css
similarity index 95%
rename from panda.css
rename to css/panda.css
index f7addaaf..ba1141a3 100644
--- a/panda.css
+++ b/css/panda.css
@@ -1,16 +1,11 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-a ,a > button {
- cursor: pointer;
-}
/* header */
.header_top_container {
height: 70px;
display: flex;
justify-content: center;
+ position: fixed;
+ background-color: white;
+ width: 100%;
}
.header_top_box {
width: 55%;
diff --git a/images/main-page/eye-invisible.svg b/images/main-page/eye-invisible.svg
new file mode 100644
index 00000000..92252b05
--- /dev/null
+++ b/images/main-page/eye-invisible.svg
@@ -0,0 +1,10 @@
+
diff --git a/images/main-page/eye-visible.svg b/images/main-page/eye-visible.svg
new file mode 100644
index 00000000..35a75305
--- /dev/null
+++ b/images/main-page/eye-visible.svg
@@ -0,0 +1,3 @@
+
diff --git a/images/main-page/google-logo.png b/images/main-page/google-logo.png
new file mode 100644
index 00000000..199f3d62
Binary files /dev/null and b/images/main-page/google-logo.png differ
diff --git a/images/main-page/kakao-logo.png b/images/main-page/kakao-logo.png
new file mode 100644
index 00000000..bfadc1d3
Binary files /dev/null and b/images/main-page/kakao-logo.png differ
diff --git a/index.html b/index.html
index b6bf07e4..d534925d 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,8 @@
판다마켓
-
+
+
diff --git a/login.html b/login.html
index 8b1ea14a..52db745d 100644
--- a/login.html
+++ b/login.html
@@ -1 +1,54 @@
-loginn
\ No newline at end of file
+
+
+ 로그인페이지
+
+
+
+
+
+
+
+
+
+
+
이메일
+
+
+
+
비밀번호
+
+
+
+
+
+
+
+
+
+
+
이메일
+
+
+
+
닉네임
+
+
+
+
비밀번호
+
+
+
+
비밀번호 확인
+
+
+
+
+
+
+
+
+ 
+ 
+