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..1f71c79a
--- /dev/null
+++ b/css/login-signup.css
@@ -0,0 +1,129 @@
+.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%;
+ height: 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;
+ border-radius: 8px;
+}
+
+/* 비밀번호 눈알 */
+
+/* 로그인버튼 */
+.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;
+ border-radius: 8px;
+}
+.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;
+}
+
+@media screen and (max-width: 767px) {
+ .login-container,
+ .signup-container {
+ width: 400px;
+ padding: 0 16px;
+ }
+ .login-img-box,
+ .signup-img-box {
+ width: 200px;
+ height: 66px;
+ }
+ .login-img,
+ .signup-img {
+ object-fit: contain;
+ }
+}
\ No newline at end of file
diff --git a/css/panda.css b/css/panda.css
new file mode 100644
index 00000000..f7699c91
--- /dev/null
+++ b/css/panda.css
@@ -0,0 +1,288 @@
+/* header */
+.header_top_container {
+ height: 70px;
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ background-color: white;
+ width: 100%;
+ z-index: 1;
+}
+.header_top_box {
+ width: 55%;
+ display: flex;
+ justify-content: space-between;
+}
+.header_top_logo {
+ display: flex;
+ align-items: center;
+ width: 150px;
+}
+.header_top_login {
+ display: flex;
+ align-items: center;
+}
+.logo_img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+.login_button {
+ padding: 11px 42px;
+ border-radius: 8px;
+ background-color: #3692FF;
+ color: white;
+ border: none;
+}
+/* banner */
+.header_spacer {
+ height: 70px;
+}
+.header_banner ,
+.footer_banner {
+ background-color: #CFE5FF;
+ height: 540px;
+ padding: 200px 0 0;
+}
+.header_banner_container ,
+.footer_banner_container {
+ width: 1110px;
+ height: 340px;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: flex-end;
+ overflow: hidden;
+
+}
+.header_banner_textbox ,
+.footer_banner_textbox {
+ margin: 40px 0;
+ padding-bottom: 60px;
+ display: flex;
+ flex-direction: column;
+}
+.header_banner_imgbox ,
+.footer_banner_imgbox {
+ max-width: 750px;
+ width: 100%;
+
+}
+.link_itmes_button {
+ padding: 12px 124px;
+ width: 100%;
+ border-radius: 8px;
+ color: white;
+ border: none;
+ background-color: #3692FF;
+}
+.header_img ,
+.footer_img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.header_banner h1 ,
+.footer_banner h1 {
+ font-size: 40px;
+}
+
+
+/* content */
+.content {
+ display: flex;
+ width: 980px;
+ background-color: #fcfcfc;
+ flex-direction: row;
+ margin: 138px auto;
+ justify-content: center;
+ align-items: center;
+ gap: 60px;
+
+}
+.content_img_container {
+ width: 700px;
+}
+.content_img {
+ width: 100%;
+ height: 100%;
+}
+.content_font_container_left h2,
+.content_font_container_right h2 {
+ color: #3692FF;
+}
+.content_font_container_left {
+ text-align: left;
+}
+.content_font_container_right {
+ text-align: right;
+}
+
+/* footer */
+.footer {
+ background-color: black;
+ color: white;
+ height: 140px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+}
+.footer_container {
+ width: 1140px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.footer a {
+ color: #fcfcfc;
+ text-decoration: none;
+}
+.footer_link {
+ display: flex;
+ justify-content: space-around;
+ padding: 10px;
+ gap: 10px;
+}
+
+
+@media screen and (max-width: 1199px) {
+ /* header */
+ .header_top_box {
+ width: 100%;
+ }
+ .header_top_logo {
+ margin-left: 24px;
+ }
+ .header_top_login {
+ margin-right: 24px;
+ }
+
+ /* banner */
+ .header_banner ,
+ .footer_banner {
+ height: 770px;
+ position: relative;
+ }
+ .header_banner_imgbox,
+ .footer_banner_imgbox {
+ width: 700px;
+ }
+ .header_banner_container,
+ .footer_banner_container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 650px;
+
+ position: absolute;
+ bottom: 0;
+ }
+ .header_banner h1 br {
+ display: none;
+ }
+
+ .header_banner_textbox,
+ .footer_banner h1 {
+ text-align: center;
+ }
+ .link_itmes_button {
+ width: 70%;
+ }
+ /*content*/
+ .all-content {
+ padding: 0 24px;
+ }
+ .content {
+ width: 700px;
+ flex-direction: column;
+ background-color: white;
+ justify-content: flex-end;
+ gap: 10px;
+ margin: 52px auto;
+ }
+ .content h1 br {
+ display: none;
+ }
+ .content_font_container_left {
+ margin-right: auto;
+ text-align: left;
+ }
+
+ .content_font_container_right {
+ margin-left: auto;
+ text-align: right;
+ }
+ .content_img_container {
+ order: 1;
+ }
+ .content_font_container_left,
+ .content_font_container_right {
+ order: 2;
+ }
+}
+
+
+
+
+
+
+
+@media screen and (max-width: 767px) {
+ /* header */
+ .header_top_logo {
+ margin-left: 16px;
+ }
+ .header_top_login {
+ margin-right: 16px;
+ }
+
+ /* banner */
+
+
+
+ .header_banner ,
+ .footer_banner {
+ max-height: 767px;
+ min-height: 450px;
+ }
+
+ .header_banner_container,
+ .footer_banner_container {
+ height: 100%;
+ justify-content: flex-end;
+ }
+
+ .header_banner_imgbox,
+ .footer_banner_imgbox {
+ width: 100%;
+ min-width: 400px;
+ }
+
+ .header_banner h1 br {
+ display: block;
+ }
+ .link_itmes_button {
+ padding: 12px 50px;
+ width: 70%;
+ }
+
+ /* content */
+ .all-content {
+ padding: 0 16px;
+ }
+ .content {
+ width: 340px;
+ flex-direction: column;
+ background-color: white;
+ justify-content: flex-end;
+ gap: 10px;
+ margin: 52px auto;
+ }
+ .content_img_container {
+ width: 340px;
+ }
+}
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 00000000..e7ffb2ef
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,26 @@
+* {
+ box-sizing: border-box;
+ white-space: nowrap;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ margin: 0;
+ }
+
+ h1 {
+ margin: 0;
+ }
+
+ h2 {
+ margin: 0;
+ }
+
+ h3 {
+ margin: 0;
+ }
+
+ p {
+ margin: 0;
+ }
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/images/main-page/logo.svg b/images/main-page/logo.svg
new file mode 100644
index 00000000..55a63efc
--- /dev/null
+++ b/images/main-page/logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/index.html b/index.html
index b6bf07e4..7a5cc23d 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,20 @@
판다마켓
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -12,8 +25,12 @@
+ 
+ 
-
+
+ 
+ 
+