diff --git a/images/Img_home_01.png b/assets/Img_home_01.png
similarity index 100%
rename from images/Img_home_01.png
rename to assets/Img_home_01.png
diff --git a/images/Img_home_02.png b/assets/Img_home_02.png
similarity index 100%
rename from images/Img_home_02.png
rename to assets/Img_home_02.png
diff --git a/images/Img_home_03.png b/assets/Img_home_03.png
similarity index 100%
rename from images/Img_home_03.png
rename to assets/Img_home_03.png
diff --git a/images/Img_home_bottom.png b/assets/Img_home_bottom.png
similarity index 100%
rename from images/Img_home_bottom.png
rename to assets/Img_home_bottom.png
diff --git a/images/Img_home_top.png b/assets/Img_home_top.png
similarity index 100%
rename from images/Img_home_top.png
rename to assets/Img_home_top.png
diff --git a/images/ic_facebook.svg b/assets/ic_facebook.svg
similarity index 100%
rename from images/ic_facebook.svg
rename to assets/ic_facebook.svg
diff --git a/images/ic_google.svg b/assets/ic_google.svg
similarity index 100%
rename from images/ic_google.svg
rename to assets/ic_google.svg
diff --git a/images/ic_instagram.svg b/assets/ic_instagram.svg
similarity index 100%
rename from images/ic_instagram.svg
rename to assets/ic_instagram.svg
diff --git a/images/ic_kakaoTalk.svg b/assets/ic_kakaoTalk.svg
similarity index 100%
rename from images/ic_kakaoTalk.svg
rename to assets/ic_kakaoTalk.svg
diff --git a/images/ic_twitter.svg b/assets/ic_twitter.svg
similarity index 100%
rename from images/ic_twitter.svg
rename to assets/ic_twitter.svg
diff --git a/images/ic_visibility_off.svg b/assets/ic_visibility_off.svg
similarity index 100%
rename from images/ic_visibility_off.svg
rename to assets/ic_visibility_off.svg
diff --git a/images/ic_visibility_on.svg b/assets/ic_visibility_on.svg
similarity index 100%
rename from images/ic_visibility_on.svg
rename to assets/ic_visibility_on.svg
diff --git a/images/ic_youtube.svg b/assets/ic_youtube.svg
similarity index 100%
rename from images/ic_youtube.svg
rename to assets/ic_youtube.svg
diff --git a/images/logo_lg.svg b/assets/logo_lg.svg
similarity index 100%
rename from images/logo_lg.svg
rename to assets/logo_lg.svg
diff --git a/images/logo_md.svg b/assets/logo_md.svg
similarity index 100%
rename from images/logo_md.svg
rename to assets/logo_md.svg
diff --git a/images/logo_sm.svg b/assets/logo_sm.svg
similarity index 100%
rename from images/logo_sm.svg
rename to assets/logo_sm.svg
diff --git a/assets/thumbnail.png b/assets/thumbnail.png
new file mode 100644
index 00000000..bfcb64b4
Binary files /dev/null and b/assets/thumbnail.png differ
diff --git a/login/style.css b/css/auth.css
similarity index 73%
rename from login/style.css
rename to css/auth.css
index 14c986a7..d3510369 100644
--- a/login/style.css
+++ b/css/auth.css
@@ -1,29 +1,31 @@
-@import "../global.css";
-@import "../reset.css";
+@import "global.css";
+@import "reset.css";
-body {
+.body {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
+ width: 100%;
+ padding: 0 16px;
}
-main {
+.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
- width: 50%;
- margin: 64px auto;
- width: 600px;
+ margin: 2rem 0;
+ width: 100%;
+ max-width: 640px;
}
-.button-home {
+.main__button-top {
margin-bottom: 1.5rem;
}
-.auth-form {
+.form {
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -32,7 +34,7 @@ main {
width: 100%;
}
-.form-field {
+.form__field {
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -40,12 +42,12 @@ main {
gap: 1rem;
}
-.form-field-label {
+.form__field-label {
font-weight: 700;
font-size: 1.125rem;
}
-.form-field-input-wrapper {
+.form__field-input-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
@@ -58,43 +60,43 @@ main {
/*
:focus-within이란 - 스스로 :focus 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나타냄
*/
-.form-field-input-wrapper:focus-within {
+.form__field-input-wrapper--focused:focus-within {
outline: 2px solid var(--blue100);
}
-.form-field-input {
+.form__field-input {
color: var(--gray800);
font-weight: 400;
background-color: var(--gray100);
width: 100%;
}
-.form-field-input::placeholder {
+.form__field-input::placeholder {
color: var(--gray400);
}
-.input-visibility-button {
+.form__field-toggle-button {
background-color: inherit;
cursor: pointer;
}
-.form-button-submit {
+.form__submit-button {
color: var(--gray100);
font-size: 1.25rem;
font-weight: 600;
- background-color: var(--gray400);
+ background-color: var(--blue100);
border-radius: 2.5rem;
width: 100%;
padding: 1rem 0;
- cursor: not-allowed;
+ cursor: pointer;
}
-.form-button-submit.active {
- background-color: var(--blue100);
- cursor: pointer;
+.form__submit-button--disabled:disabled {
+ background-color: var(--gray400);
+ cursor: not-allowed;
}
-.social-login-container {
+.social-login {
display: flex;
justify-content: space-between;
align-items: center;
@@ -103,7 +105,7 @@ main {
padding: 1rem 2.5rem;
}
-.social-login-container > ul {
+.social-login__list {
display: flex;
justify-content: center;
align-items: center;
@@ -114,7 +116,15 @@ main {
font-size: 0.875rem;
}
-a.helper-text-link {
+.helper-text__link {
color: var(--blue100);
text-decoration: underline;
}
+
+/* Mobile */
+
+@media (375px <= width < 768px) {
+ .main {
+ max-width: 400px;
+ }
+}
diff --git a/global.css b/css/global.css
similarity index 74%
rename from global.css
rename to css/global.css
index 41c81828..866fb18a 100644
--- a/global.css
+++ b/css/global.css
@@ -26,3 +26,16 @@
--gray800: #1f2937;
--gray900: #111827;
}
+
+/* Tablet, Mobile 기기에 따라 폰트 크기 조정*/
+@media (768px <= width < 1200px) {
+ :root {
+ font-size: 14px;
+ }
+}
+
+@media (375px <= width < 768px) {
+ :root {
+ font-size: 12px;
+ }
+}
diff --git a/css/landing.css b/css/landing.css
new file mode 100644
index 00000000..dbbbe422
--- /dev/null
+++ b/css/landing.css
@@ -0,0 +1,276 @@
+@import "global.css";
+@import "reset.css";
+
+.header {
+ background-color: #ffffff;
+ border-bottom: solid 1px #dfdfdf;
+ position: sticky;
+ top: 0px;
+ padding: 0.5rem 0;
+}
+
+.header__container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1980px;
+ gap: 20px;
+ padding: 0 200px;
+ margin: 0 auto;
+}
+
+.header__button--primary {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ color: #ffffff;
+ font-weight: 600;
+ background-color: var(--blue100);
+ height: 48px;
+ width: 128px;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.header__button--primary:visited {
+ color: var(--gray100);
+}
+
+.hero {
+ display: flex;
+ justify-content: center;
+ align-items: end;
+ background-color: #cfe5ff;
+ height: 540px;
+}
+
+.hero__container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1980px;
+ margin: 0 auto;
+}
+
+.hero__title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ line-height: 1.4;
+
+ text-align: center;
+ padding: 0 0.5rem;
+}
+
+.hero__button {
+ color: #ffffff;
+ background-color: var(--blue100);
+ border-radius: 40px;
+ padding: 1.25rem 7.5rem;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.hero__content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1.75rem;
+ margin: 1.75rem 0;
+ word-break: keep-all;
+ width: 20rem;
+}
+
+.feature-list {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+ gap: 138px;
+ padding-top: 138px;
+ padding-bottom: 276px;
+}
+
+.feature {
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ background-color: #fcfcfc;
+ gap: 2.5rem;
+ padding: 0 1rem;
+}
+
+.feature--reverse {
+ flex-direction: row-reverse;
+}
+
+.feature__content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: start;
+ gap: 1.75rem;
+ margin: 1.75rem 0;
+ word-break: keep-all;
+ width: 20rem;
+}
+
+.feature__content--reverse {
+ align-items: end;
+}
+
+.feature__title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ line-height: 1.4;
+}
+
+.feature__title--reverse {
+ text-align: right;
+}
+
+.feature__tag {
+ font-size: 1.125rem;
+ font-weight: 700;
+ color: var(--blue100);
+}
+
+.feature__tag--reverse {
+ text-align: right;
+}
+
+.feature__text {
+ font-size: 1.5rem;
+}
+
+.feature__text--reverse {
+ text-align: right;
+}
+
+.footer {
+ font-weight: 400;
+ color: var(--gray400);
+ background-color: var(--gray900);
+ height: 160px;
+ padding-top: 40px;
+}
+
+.footer__container {
+ display: flex;
+ align-items: center;
+ max-width: 1980px;
+ gap: 20px;
+ padding: 0 200px;
+ margin: 0 auto;
+}
+
+.foooter__text {
+ flex-grow: 1;
+}
+
+.footer__links {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-grow: 1;
+}
+
+.footer__pages {
+ display: flex;
+ gap: 0 30px;
+ font-weight: 400;
+}
+
+.footer__socials {
+ display: flex;
+ gap: 0 12px;
+}
+
+/* Tablet */
+@media (768px <= width < 1200px) {
+ .header__container {
+ padding: 0 24px;
+ }
+
+ .hero {
+ align-items: stretch;
+ }
+
+ .hero__container {
+ flex-direction: column;
+ }
+
+ .hero__content {
+ width: 100%;
+ }
+
+ .feature__content {
+ width: 100%;
+ }
+
+ .feature__content-reverse {
+ width: 100%;
+ }
+
+ .feature {
+ flex-direction: column;
+ }
+
+ .feature__reverse {
+ flex-direction: column;
+ }
+
+ .footer__container {
+ padding: 0 24px;
+ }
+}
+
+/* Mobile */
+@media (375px <= width < 768px) {
+ .header__container {
+ padding: 0 24px;
+ }
+
+ .hero {
+ align-items: stretch;
+ }
+
+ .hero__container {
+ flex-direction: column;
+ }
+
+ .hero__content {
+ width: 100%;
+ margin-top: 5rem;
+ }
+
+ .feature__content {
+ width: 100%;
+ }
+
+ .feature__content-reverse {
+ width: 100%;
+ }
+
+ .feature {
+ flex-direction: column;
+ }
+
+ .feature__reverse {
+ flex-direction: column;
+ }
+
+ .footer__container {
+ flex-direction: column-reverse;
+ justify-content: space-between;
+ align-items: start;
+ gap: 5rem;
+ padding: 0 24px;
+ }
+
+ .footer__links {
+ justify-content: space-evenly;
+ width: 100%;
+ }
+}
diff --git a/reset.css b/css/reset.css
similarity index 100%
rename from reset.css
rename to css/reset.css
diff --git a/index.html b/index.html
index fd15d411..afe8b864 100644
--- a/index.html
+++ b/index.html
@@ -3,135 +3,134 @@
-
+
판다마켓
+
+
+
+
+
+
+
+
+
+
+
+
- 
+ 
+ 
- 
+
- 
- 
+ 