diff --git a/userForm.css b/auth.css
similarity index 79%
rename from userForm.css
rename to auth.css
index 48844766..5024532c 100644
--- a/userForm.css
+++ b/auth.css
@@ -7,7 +7,7 @@
align-items: center;
}
-#user_form_logo {
+.user_form_logo {
width: 396px;
height: 132px;
margin-bottom: 40px;
@@ -37,10 +37,10 @@
background-color: var(--gray100);
padding: 16px 24px;
margin: 16px 0 24px;
+ border-radius: 12px;
}
-.visible_on,
-.visible_off {
+.visible_button {
width: 24px;
height: 24px;
position: absolute;
@@ -48,6 +48,15 @@
top: 50%;
right: 24px;
margin-top: -16px;
+ padding: 0;
+ border: none;
+ cursor: pointer;
+}
+
+.visible_on,
+.visible_off {
+ width: 100%;
+ height: 100%;
}
.login_button,
@@ -57,12 +66,19 @@
line-height: 32px;
font-weight: 600;
font-family: Pretendard;
- background-color: var(--blue);
+ background-color: var(--gray400);
width: 100%;
height: 56px;
border-radius: 9999px;
border: none;
margin-bottom: 24px;
+ cursor: pointer;
+ transition: all 300ms ease;
+}
+
+.login_button:hover,
+.signup_button:hover {
+ background-color: var(--blue);
}
.simple_login {
@@ -73,6 +89,7 @@
align-items: center;
justify-content: space-between;
padding: 16px 23px;
+ margin-bottom: 24px;
}
.simple_login span {
@@ -99,14 +116,15 @@
color: var(--blue);
}
-@media (max-width: 744px) {
- #user_form_logo {
+@media (min-width: 375px) and (max-width: 767px) {
+ .user_form_logo {
width: unset;
height: 95px;
}
.userForm_main {
margin: 130px auto;
- padding: 0 20px;
+ padding: 0 16px;
width: 100%;
+ max-width: 400px;
}
}
diff --git a/common.css b/common.css
new file mode 100644
index 00000000..fbf08595
--- /dev/null
+++ b/common.css
@@ -0,0 +1,154 @@
+:root {
+ --gray900: #111827;
+ --gray800: #1f2937;
+ --gray700: #374151;
+ --gray600: #4b5563;
+ --gray500: #6b7280;
+ --gray400: #9ca3af;
+ --gray200: #e5e7eb;
+ --gray100: #f3f4f6;
+ --gray50: #f9fafb;
+ --blue: #3692ff;
+}
+
+/* Reset CSS: start - body에 폰트 추가 */
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
+}
+body {
+ line-height: 1;
+ font-family: Pretendard;
+}
+ol,
+ul {
+ list-style: none;
+}
+blockquote,
+q {
+ quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+/* Reset CSS: end */
+
+* {
+ box-sizing: border-box;
+}
+
+a {
+ text-decoration: none;
+ cursor: pointer;
+}
diff --git a/image/login_page.png b/image/login_page.png
new file mode 100644
index 00000000..96567f83
Binary files /dev/null and b/image/login_page.png differ
diff --git a/image/logo.png b/image/logo.png
index 2695e335..80e574ad 100644
Binary files a/image/logo.png and b/image/logo.png differ
diff --git a/image/mobile_logo.png b/image/mobile_logo.png
new file mode 100644
index 00000000..e791f293
Binary files /dev/null and b/image/mobile_logo.png differ
diff --git a/image/singup_page.png b/image/singup_page.png
new file mode 100644
index 00000000..07cb5e70
Binary files /dev/null and b/image/singup_page.png differ
diff --git a/style.css b/index.css
similarity index 61%
rename from style.css
rename to index.css
index b5acc981..0bd54dda 100644
--- a/style.css
+++ b/index.css
@@ -1,27 +1,5 @@
-:root {
- --gray900: #111827;
- --gray800: #1f2937;
- --gray700: #374151;
- --gray600: #4b5563;
- --gray500: #6b7280;
- --gray400: #9ca3af;
- --gray200: #e5e7eb;
- --gray100: #f3f4f6;
- --gray50: #f9fafb;
- --blue: #3692ff;
-}
-
-* {
- box-sizing: border-box;
-}
-
-body {
- margin: 0;
- font-family: Pretendard;
-}
-
-/* Header-start */
-header {
+/* Header: start */
+.navbar {
display: flex;
align-items: center;
background-color: #ffffff;
@@ -34,7 +12,7 @@ header {
border-bottom: 1px solid #dfdfdf;
}
-.header_wrap {
+.navbar_wrap {
width: 1120px;
height: 51px;
display: flex;
@@ -48,6 +26,10 @@ header {
height: 51px;
}
+.m_logo {
+ display: none;
+}
+
.login {
display: inline-flex;
justify-content: center;
@@ -66,12 +48,12 @@ header {
.login:hover {
background-color: #1967d6;
}
-/* Header-end */
+/* Header: end */
main {
margin-top: 70px;
}
-/* Main - Heading - start */
+/* Main Heading: start */
.heading {
background-color: #cfe5ff;
display: flex;
@@ -89,10 +71,12 @@ main {
margin-top: 0;
margin-bottom: 32px;
font-size: 40px;
+ font-weight: 700;
}
.heading_title span {
display: block;
+ line-height: 140%;
}
.view_button {
@@ -113,27 +97,31 @@ main {
background-color: #1967d6;
}
-/* Main - Heading - end */
+/* Main Heading: end */
-/* Main - Content - start */
+/* Main Content: start */
.content_wrap {
height: 720px;
display: flex;
justify-content: center;
align-items: center;
}
+
.category_box {
display: flex;
justify-content: center;
align-items: center;
background-color: #fcfcfc;
+ width: 988px;
+ height: 444px;
+ gap: 64px;
}
.content_wrap:nth-child(odd) .category_box {
flex-direction: row-reverse;
}
.category_box img {
- width: 588px;
+ width: 579px;
height: 100%;
}
@@ -144,34 +132,43 @@ main {
align-items: flex-start;
}
+.content_wrap:nth-child(odd) .category_description {
+ align-items: flex-end;
+ text-align: right;
+}
+
.category_title {
color: var(--blue);
font-size: 18px;
font-weight: 700;
}
-.content_wrap:nth-child(even) .category_description {
- margin-left: 64px;
-}
-
-.content_wrap:nth-child(odd) .category_description {
- margin-right: 64px;
-}
-
.title {
font-size: 40px;
font-weight: 700;
color: var(--gray700);
+ line-height: 140%;
+ margin-bottom: 24px;
+}
+
+.title span {
+ display: block;
}
.description {
font-size: 24px;
font-weight: 500;
color: var(--gray700);
+ line-height: 32px;
+}
+
+.register {
+ margin-bottom: 138px;
}
-/* Main - Content - end */
-/* Main - ad - start */
+/* Main Content: end */
+
+/* Main ad: start */
.ad {
background-color: #cfe5ff;
display: flex;
@@ -185,10 +182,10 @@ main {
position: relative;
bottom: 113px;
}
-/* Main - ad - end */
+/* Main ad: end */
-/* Footer-start */
-footer {
+/* Footer: start */
+.footer_wrap {
background-color: var(--gray900);
color: var(--gray400);
height: 160px;
@@ -196,6 +193,7 @@ footer {
justify-content: space-between;
align-items: flex-start;
position: relative;
+ bottom: 0;
}
.ft_content_wrap {
@@ -227,43 +225,58 @@ footer {
cursor: pointer;
list-style: none;
}
-/* Footer-end */
+/* Footer: end */
/* Media Query-start */
-@media (max-width: 1919px) {
+@media (min-width: 1200px) {
.header_wrap {
width: 100%;
margin: 0 200px;
}
}
-@media (max-width: 1200px) {
+@media (min-width: 768px) and (max-width: 1199px) {
+ /* header: start */
+ .navbar_wrap {
+ width: 100%;
+ margin: 0 24px;
+ }
+ /* header: end */
+
+ /* main heading: start */
.heading {
flex-direction: column;
- justify-content: flex-end;
+ justify-content: space-between;
align-items: center;
height: 771px;
+ margin-bottom: 24px;
}
.text_box {
display: flex;
flex-direction: column;
align-items: center;
+ margin-top: 20.699vw;
}
.heading_title span {
display: inline-block;
}
-
+ /* main heading: end */
+ /* main content: start */
.content_wrap {
- height: 708px;
- margin-top: 160px;
+ height: 100%;
+ margin-bottom: 52px;
+ padding: 0 24px;
}
.content_wrap .category_box {
flex-direction: column;
align-items: flex-start;
+ gap: unset;
+ width: 100%;
+ height: 100%;
}
.content_wrap:nth-child(odd) .category_box {
@@ -271,8 +284,9 @@ footer {
align-items: flex-end;
}
- .description {
- margin-top: 0;
+ .content_wrap .category_box img {
+ width: 100%;
+ border-radius: 14px;
}
.content_wrap:nth-child(even) .category_description {
@@ -287,19 +301,34 @@ footer {
.category_title {
margin-bottom: 0;
+ margin-top: 24px;
}
.title {
margin-top: 16px;
- margin-bottom: 32px;
+ margin-bottom: 24px;
+ font-size: 32px;
+ }
+
+ .title span {
+ display: inline;
}
+ .description {
+ margin-top: 0;
+ font-size: 18px;
+ }
+
+ .register {
+ margin-bottom: 56px;
+ }
+ /* main content: end */
+ /* main ad: start */
.ad {
height: 927px;
flex-direction: column;
justify-content: flex-end;
align-items: center;
- margin-top: 160px;
}
.ad > .title {
@@ -307,15 +336,36 @@ footer {
margin-right: 0;
margin-bottom: 140px;
}
-
+ /* main ad: end */
+ /* footer: start */
.ft_content_wrap {
width: 100%;
- margin-left: 30px;
- margin-right: 30px;
+ margin-left: 104px;
+ margin-right: 104px;
}
+
+ .privacy_faq {
+ font-family: 'Abel', sans-serif;
+ }
+ /* footer: end */
}
-@media (max-width: 744px) {
+@media (min-width: 375px) and (max-width: 767px) {
+ /* header: start */
+ .navbar_wrap {
+ width: 100%;
+ margin: 0 16px;
+ }
+
+ .logo {
+ display: none;
+ }
+
+ .m_logo {
+ display: inline-block;
+ width: 103px;
+ }
+
.header_wrap {
margin-left: 30px;
margin-right: 30px;
@@ -329,132 +379,119 @@ footer {
.login {
width: 100px;
}
-
+ /* header: end */
+ /* main heading: start */
.heading {
- height: 572px;
+ height: 103.629vw;
+ min-height: 540px;
+ overflow: hidden;
+ margin-bottom: 52px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
+ .text_box {
+ text-align: center;
}
.heading_title {
- font-size: 35px;
+ font-size: 32px;
}
.view_button {
- width: 290px;
+ width: 240px;
+ height: 48px;
+ font-size: 18px;
}
.heading img {
- width: 448px;
- height: 204px;
+ width: 100%;
+ height: 45.699vw;
}
-
+ /* main heading: end */
+ /* main content: start */
.content_wrap {
- margin-top: 130px;
- height: 20%;
+ height: 100%;
+ padding: 0 16px;
+ margin-bottom: 40px;
}
- .content_wrap img {
- width: 93.548vw;
- height: 70.43vw;
- }
-
- .category_title {
- font-size: 15px;
- }
-
- .title {
- font-size: 35px;
- }
-
- .description {
- font-size: 20px;
- }
-
- .ad {
- height: 572px;
- }
-
- .ad > .title {
- margin-bottom: 50px;
- }
-
- .ad img {
- width: 375px;
- height: 198px;
- }
-}
-
-@media (max-width: 455px) {
- .heading {
- overflow: hidden;
- }
-
- .heading_title span {
- font-size: 28px;
- }
-
- .ft_content_wrap {
- font-size: 12px;
- }
- .codeit {
- position: absolute;
- top: 65px;
- }
-}
-
-@media (max-width: 375px) {
- .header_wrap {
- margin-left: 20px;
- margin-right: 20px;
- }
-
- .heading {
- height: 540px;
- }
-
- .heading_title span {
- font-size: 25px;
- }
-
- .view_button {
- font-size: 18px;
- width: 258px;
- }
-
- .heading img {
- width: 375px;
- height: 198px;
+ .content_wrap:nth-child(odd) .category_box {
+ flex-direction: column;
+ align-items: flex-end;
}
- .content_wrap {
- height: 20%;
- margin-top: 85px;
+ .content_wrap .category_box {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: unset;
+ width: 100%;
+ height: 100%;
}
.category_box img {
- width: 343px;
- height: 259px;
+ width: 100%;
+ border-radius: 7px;
+ margin-bottom: 24px;
}
.category_title {
font-size: 16px;
+ margin-bottom: 8px;
}
.title {
font-size: 24px;
+ margin-bottom: 16px;
+ }
+
+ .title span {
+ display: inline;
}
.description {
font-size: 16px;
}
+ .register {
+ margin-bottom: 83px;
+ }
+ /* main content: end */
+ /* main ad: start */
.ad {
- height: 540px;
+ height: 124.597vw;
overflow: hidden;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-end;
}
.ad > .title {
+ margin-top: 131px;
+ margin-right: 0;
+ text-align: center;
font-size: 32px;
}
+
+ .ad img {
+ min-width: 375px;
+ width: 100%;
+ min-height: 198px;
+ }
+ /* main content: end */
+ /* footer: start */
+ .ft_content_wrap {
+ font-size: 16px;
+ margin-left: 32px;
+ margin-right: 32px;
+ }
+
+ .codeit {
+ position: absolute;
+ bottom: 32px;
+ }
+ /* footer: end */
}
/* Media Query-end */
diff --git a/index.html b/index.html
index 0183f5b7..f0b149ac 100644
--- a/index.html
+++ b/index.html
@@ -5,18 +5,32 @@
판다마켓
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
- 
+ 
