- 
+
일상의 모든 물건을
+
Hot item
-인기 상품을
확인해 보세요
인기 상품을 확인해 보세요
가장 HOT한 중고거래 물품을
판다 마켓에서 확인해 보세요
일상의 모든 물건을
거래해 보세요
-
+
- 
+
Search
구매를 원하는
상품을 검색하세요
- 구매하고 싶은 물품은 검색해서
쉽게 찾아보세요
+ 구매하고 싶은 물품은 검색해서 쉽게 찾아보세요
+
- 
+
diff --git a/reset.css b/reset.css
index 72268eda..4063b515 100644
--- a/reset.css
+++ b/reset.css
@@ -2,6 +2,129 @@
box-sizing: border-box;
margin: 0;
padding: 0;
+ font-size: 10px;
font-family: Pretendard;
- height: 100%;
+}
+
+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;
+ 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;
+}
+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;
}
diff --git a/signup.css b/signup.css
index bae617dd..84b39981 100644
--- a/signup.css
+++ b/signup.css
@@ -18,10 +18,12 @@
font-style: normal;
}
+body p {
+ font-size: 1.6rem;
+}
+
.container {
display: flex;
- width: 100%;
- height: 100%;
justify-content: center;
}
@@ -29,83 +31,103 @@
display: flex;
flex-direction: column;
flex-shrink: 0;
- width: 640px;
- height: 857px;
- margin: 60px 640px 407px;
+ width: 64rem;
+ height: 85.7rem;
+ margin: 6rem 64rem 40.7rem;
}
+
.header-logo {
- height: 132px;
- margin: 0 122px;
+ height: 13.2rem;
+ margin: 0 auto;
}
.loginLogoImg {
- width: 396px;
- height: 132px;
+ width: 39.6rem;
+ height: 13.2rem;
}
.input-form-container {
- margin-top: 40px;
+ margin-top: 4rem;
display: flex;
flex-direction: column;
- width: 640px;
- height: 539px;
- gap: 24px;
+ width: 64rem;
+ height: 53.9rem;
+ gap: 2.4rem;
}
.input-box-container {
width: 100%;
- height: 98px;
+ height: 9.8rem;
}
.input-box-container label {
- font-size: 18px;
+ font-size: 1.8rem;
font-weight: 700;
}
+.wrapper-for-icon {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-items: center;
+}
+
.input-box {
- margin-top: 16px;
+ margin-top: 1.6rem;
width: 100%;
- height: 56px;
- border-radius: 12px;
- padding: 16px 24px;
- font-weight: 400px;
- border: 1px soild var(--cool-gray-100);
+ height: 5.6rem;
+ border-radius: 1.2rem;
+ padding: 1.6rem 2.4rem;
+ font-weight: 400;
+ border: 0.1rem solid var(--cool-gray-100);
+ background-color: #f3f4f6;
+ font-size: 1.6rem;
+}
+
+.passwordIcon {
+ position: absolute;
+ right: 3rem;
+ width: 2.4rem;
+ height: 2.4rem;
+ top: 45%;
+ cursor: pointer;
}
.button-container {
- margin-top: 24px;
- height: 56px;
+ margin-top: 2.4rem;
+ height: 5.6rem;
}
.signup-button {
width: 100%;
- height: 56px;
- padding: 16px 124px;
- border-radius: 40px;
- background-color: var(--button-color);
- border: 0 soild var(--button-color);
+ height: 5.6rem;
+ padding: 1.6rem 12.4rem;
+ border-radius: 4rem;
+ background-color: #9ca3af;
+ border: 0 solid #9ca3af;
color: #f3f4f6;
- font-size: 20px;
+ font-size: 2rem;
font-weight: 600;
+ cursor: pointer;
}
.simple-login-box {
display: flex;
justify-content: center;
align-items: center;
- margin-top: 24px;
- height: 74px;
- gap: 10px;
+ margin-top: 2.4rem;
+ height: 7.4rem;
+ gap: 1rem;
background-color: #e6f2ff;
}
.simple-login-content {
width: 100%;
- height: 42px;
+ height: 4.2rem;
display: flex;
justify-content: space-between;
align-items: center;
- margin: 16px 23px;
+ margin: 1.6rem 2.3rem;
}
.simple-login-text {
@@ -113,24 +135,176 @@
align-items: center;
font-weight: 500;
color: #1f2937;
- height: 24px;
+ height: 2.4rem;
}
.logo-box {
display: flex;
- gap: 16px;
+ gap: 1.6rem;
+}
+.logo-box img {
+ height: 4.2rem;
}
.register {
- margin-top: 24px;
+ margin-top: 2.4rem;
display: flex;
justify-content: center;
align-items: center;
- gap: 4px;
+ gap: 0.4rem;
}
-.register-a {
- font-size: 14px;
+.register-navigate {
+ font-size: 1.4rem;
font-weight: 500;
color: var(--button-color);
}
+
+/* 모바일 */
+@media (min-width: 375px) and (max-width: 767px) {
+ .container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 1.6rem;
+ }
+
+ .content-box {
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ width: 100%;
+ max-width: 40rem;
+ height: 50.1rem;
+ margin: 5.1rem auto;
+ }
+
+ .header-logo {
+ height: 13.2rem;
+ }
+
+ .loginLogoImg {
+ width: 19.8rem;
+ height: 6.6rem;
+ }
+
+ .input-form-container {
+ margin-top: 4rem;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 53.9rem;
+ max-width: 40rem;
+ gap: 2.4rem;
+ }
+
+ .input-box-container {
+ width: 100%;
+ }
+
+ .input-box-container label {
+ font-size: 1.8rem;
+ font-weight: 700;
+ }
+
+ .wrapper-for-icon {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ }
+
+ .input-box {
+ margin-top: 1.6rem;
+ width: 100%;
+ height: 5.6rem;
+ border-radius: 1.2rem;
+ padding: 1.6rem 2.4rem;
+ font-weight: 400;
+ border: 0.1rem solid var(--cool-gray-100);
+ background-color: #f3f4f6;
+ font-size: 1.6rem;
+ }
+
+ .passwordIcon {
+ position: absolute;
+ right: 3rem;
+ width: 2.4rem;
+ height: 2.4rem;
+ top: 45%;
+ cursor: pointer;
+ }
+
+ .button-container {
+ margin-top: 2.4rem;
+ height: 5.6rem;
+ }
+
+ .signup-button {
+ width: 100%;
+ height: 5.6rem;
+ max-width: 40rem;
+ padding: 1.6rem;
+ border-radius: 4rem;
+ background-color: #9ca3af;
+ border: 0 solid #9ca3af;
+ color: #f3f4f6;
+ font-size: 2rem;
+ font-weight: 600;
+ cursor: pointer;
+ }
+
+ .simple-login-box {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 2.4rem;
+ height: 7.4rem;
+ gap: 1rem;
+ background-color: #e6f2ff;
+ width: 100%;
+ max-width: 40rem;
+ }
+
+ .simple-login-content {
+ width: 100%;
+ height: 4.2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 1.6rem 2.3rem;
+ border-radius: 0.8rem;
+ }
+
+ .simple-login-text {
+ display: flex;
+ align-items: center;
+ font-weight: 500;
+ color: #1f2937;
+ height: 2.4rem;
+ }
+
+ .logo-box {
+ display: flex;
+ gap: 1.6rem;
+ }
+ .logo-box img {
+ height: 4.2rem;
+ }
+
+ .register {
+ margin-top: 2.4rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.4rem;
+ width: 100%;
+ max-width: 40rem;
+ }
+
+ .register-navigate {
+ font-size: 1.4rem;
+ font-weight: 500;
+ color: var(--button-color);
+ }
+}
diff --git a/style.css b/style.css
index adf4735e..23cafe57 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,5 @@
+@import 'reset.css';
+
:root {
--button-color: #3692ff;
--bg-color: #cfe5ff;
@@ -15,68 +17,64 @@
font-style: normal;
}
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- font-family: Pretendard;
-}
-
.header {
width: 100%;
- height: 70px;
+ height: 7rem;
position: fixed;
background-color: #ffffff;
+ top: 0;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
- margin: 9.5px 200px;
+ margin: 0.95rem 20rem;
}
.header-button {
display: flex;
justify-content: center;
align-items: center;
- width: 128px;
- height: 48px;
- padding: 12px 23px;
- border-radius: 8px;
+ width: 12.8rem;
+ height: 4.8rem;
+ padding: 1.2rem 2.3rem;
+ border-radius: 0.8rem;
background-color: var(--button-color);
color: #ffffff;
- border: 1px solid var(--button-color);
+ border: 0.1rem solid var(--button-color);
flex-shrink: 0;
text-decoration: none;
cursor: pointer;
+ font-size: 1.6rem;
}
.topLanding {
width: 100%;
- height: 540px;
+ height: 54rem;
background-color: var(--bg-color);
display: flex;
justify-content: center;
+ margin-top: 7rem;
}
.top-content {
display: flex;
align-items: end;
- gap: 7px;
+ gap: 0.7rem;
}
.top-content-text {
display: flex-col;
justify-content: center;
- margin: 40px 0;
+ margin: 4rem 0;
flex-shrink: 0;
}
.top-content-text h2 {
- line-height: 56px;
+ line-height: 5.6rem;
color: var(--main-font-color);
- font-size: 40px;
+ font-size: 4rem;
font-weight: 700;
}
@@ -88,7 +86,7 @@
.section-content {
width: 100%;
- height: 720px;
+ height: 72rem;
display: flex;
justify-content: center;
align-items: center;
@@ -98,18 +96,19 @@
display: flex;
justify-content: center;
align-items: center;
- gap: 64px;
- width: 988px;
- height: 444px;
+ gap: 6.4rem;
+ width: 98.8rem;
+ height: 44.4rem;
}
+
.section-text {
display: flex-col;
flex-shrink: 0;
- gap: 12px;
+ gap: 1.2rem;
}
.section-text.card1 {
- padding-right: 24px;
+ padding-right: 2.4rem;
}
.section-text.card2 {
@@ -117,98 +116,109 @@
}
.section-text-tag {
- font-size: 18px;
+ font-size: 1.8rem;
font-weight: 700;
color: var(--button-color);
- line-height: 26px;
+ line-height: 2.6rem;
}
+
.section-text-title {
color: var(--main-font-color);
- font-size: 40px;
+ font-size: 4rem;
font-weight: 700;
- line-height: 56px;
- margin-top: 12px;
+ line-height: 5.6rem;
+ margin-top: 1.2rem;
}
.section-text-subtitle {
color: var(--main-font-color);
- font-size: 24px;
+ font-size: 2.4rem;
font-weight: 500;
- line-height: 32px;
- margin-top: 24px;
+ line-height: 3.2rem;
+ margin-top: 2.4rem;
}
.bottomLanding {
width: 100%;
- height: 540px;
+ height: 54rem;
background-color: var(--bg-color);
display: flex;
justify-content: center;
- margin-top: 138px;
+ margin-top: 13.8rem;
}
.bottom-content {
display: flex;
align-items: end;
- gap: 69px;
+ gap: 6.9rem;
flex-shrink: 0;
}
.bottom-content-text {
display: flex-col;
justify-content: center;
- margin: 40px 0;
+ margin: 4rem 0;
flex-shrink: 0;
- gap: 10px;
- padding-bottom: 60px;
- margin: 112.5px 0;
+ gap: 1rem;
+ padding-bottom: 6rem;
+ margin: 11.25rem 0;
}
.bottom-content-text h2 {
font-weight: 700;
- font-size: 40px;
+ font-size: 4rem;
color: var(--main-font-color);
+ line-height: 140%;
}
.footer {
- height: 160px;
+ height: 16rem;
background-color: #111827;
}
.items-button {
- margin-top: 32px;
- margin-bottom: 60px;
+ margin-top: 3.2rem;
+ margin-bottom: 6rem;
background-color: var(--button-color);
color: #ffffff;
- padding: 16px 124px;
+ padding: 1.6rem 12.4rem;
text-align: center;
text-decoration: none;
display: inline-block;
- border: 1px solid var(--button-color);
- border-radius: 40px;
+ border: 0.1rem solid var(--button-color);
+ border-radius: 4rem;
cursor: pointer;
+ font-size: 1.6rem;
}
.footer-content {
+ font-size: 1.6rem;
display: flex;
- height: 20px;
- padding: 32px 400px 108px 400px;
+ height: 2rem;
+ padding: 3.2rem 40rem 10.8rem 40rem;
justify-content: space-between;
}
.footer-left-text {
+ font-size: 1.6rem;
flex-shrink: 0;
color: #9ca3af;
font-weight: 400;
}
+.footer-left-text p {
+ font-size: 1.6rem;
+}
+
.footer-middle-text {
+ font-size: 1.6rem;
display: flex;
- gap: 30px;
+ gap: 3rem;
flex-shrink: 0;
}
.footer-middle-text a {
+ font-size: 1.6rem;
color: var(--secondary-font-color);
font-weight: 400;
text-decoration: none;
@@ -217,40 +227,593 @@
.footer-icons {
display: flex;
flex-shrink: 0;
- gap: 12px;
+ gap: 1.2rem;
}
.footer-icons img {
- width: 20px;
- height: 20px;
+ width: 2rem;
+ height: 2rem;
}
.button:hover {
background-color: var(--button-hover-color);
- border: 1px solid var(--button-hover-color);
+ border: 0.1rem solid var(--button-hover-color);
}
.button:active {
background-color: var(--button-active-color);
- border: 1 solid var(--button-active-color);
+ border: 0.1rem solid var(--button-active-color);
}
.logoImg {
- width: 153px;
- height: 51px;
+ width: 15.3rem;
+ height: 5.1rem;
}
.topLandingImg {
- width: 746px;
- height: 340px;
+ width: 74.6rem;
+ height: 34rem;
}
-.sectionImg {
- width: 579px;
- height: 444px;
+.section-Img {
+ width: 57.9rem;
+ height: 44.4rem;
}
.bottomLandingImg {
- width: 746px;
- height: 397px;
+ width: 74.6rem;
+ height: 39.7rem;
+}
+/* ******************************************************************* */
+/* 태블릿 */
+@media (min-width: 768px) and (max-width: 1199px) {
+ .header {
+ width: 100%;
+ height: 7rem;
+ position: fixed;
+ background-color: #ffffff;
+ top: 0;
+ }
+
+ .header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0.95rem 2.4rem;
+ }
+
+ .header-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 12.8rem;
+ height: 4.8rem;
+ padding: 1.2rem 2.3rem;
+ border-radius: 0.8rem;
+ background-color: var(--button-color);
+ color: #ffffff;
+ border: 0.1rem solid var(--button-color);
+ flex-shrink: 0;
+ text-decoration: none;
+ cursor: pointer;
+ font-size: 1.6rem;
+ }
+
+ .topLanding {
+ width: 100%;
+ height: 77.1rem;
+ background-color: var(--bg-color);
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
+ align-items: center;
+ margin-top: 7rem;
+ }
+
+ .top-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.7rem;
+ }
+
+ .top-content-text {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 4rem 0;
+ flex-shrink: 0;
+ }
+
+ .top-content-text h2 {
+ line-height: 5.6rem;
+ color: var(--main-font-color);
+ font-size: 4rem;
+ font-weight: 700;
+ text-align: center;
+ }
+
+ .section {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-top: 2.4rem;
+ gap: 5.2rem;
+ }
+
+ .section-content {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: center;
+ }
+
+ .section-card {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 2.4rem;
+ width: 70.6rem;
+ height: 70.8rem;
+ }
+
+ .section-card.reverse {
+ flex-direction: column-reverse;
+ }
+
+ .section-text {
+ width: 100%;
+ max-width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 0 1.4rem;
+ }
+
+ .section-text.card1 {
+ justify-content: start;
+ }
+
+ .section-text.card2 {
+ text-align: right;
+ justify-content: end;
+ }
+
+ .section-text-tag {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: var(--button-color);
+ }
+
+ .section-text-title {
+ color: var(--main-font-color);
+ font-size: 3.2rem;
+ font-weight: 700;
+ }
+
+ .section-text-subtitle {
+ color: var(--main-font-color);
+ font-size: 1.8rem;
+ font-weight: 500;
+ }
+
+ .bottomLanding {
+ width: 100%;
+ height: 92.7rem;
+ background-color: var(--bg-color);
+ display: flex;
+ align-items: end;
+ justify-content: center;
+ margin-top: 13.8rem;
+ }
+
+ .bottom-content {
+ display: flex;
+ flex-direction: column;
+ justify-items: center;
+ align-items: center;
+ gap: 6.9rem;
+ flex-shrink: 0;
+ }
+
+ .bottom-content-text {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex-shrink: 0;
+ gap: 1rem;
+ padding-bottom: 6rem;
+ margin: 11.25rem 0;
+ line-height: 140%;
+ }
+
+ .bottom-content-text h2 {
+ font-weight: 700;
+ font-size: 4rem;
+ color: var(--main-font-color);
+ }
+
+ .footer {
+ width: 100%;
+ height: 16rem;
+ background-color: #111827;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .items-button {
+ margin-top: 3.2rem;
+ margin-bottom: 6rem;
+ background-color: var(--button-color);
+ color: #ffffff;
+ padding: 1.6rem 12.4rem;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ border: 0.1rem solid var(--button-color);
+ border-radius: 4rem;
+ cursor: pointer;
+ font-size: 1.6rem;
+ }
+
+ .footer-content {
+ font-size: 1.6rem;
+ display: flex;
+ height: 2rem;
+ gap: 7rem;
+ padding: 3.2rem 1rem 10.8rem 1rem;
+ justify-content: space-between;
+ }
+
+ .footer-left-text p {
+ font-size: 1.6rem;
+ flex-shrink: 1;
+ color: #9ca3af;
+ font-weight: 400;
+ }
+
+ .footer-middle-text {
+ font-size: 1.6rem;
+ display: flex;
+ gap: 3rem;
+ flex-shrink: 1;
+ }
+
+ .footer-middle-text a {
+ font-size: 1.6rem;
+ color: var(--secondary-font-color);
+ font-weight: 400;
+ text-decoration: none;
+ }
+
+ .footer-icons {
+ display: flex;
+ flex-shrink: 1;
+ gap: 1.2rem;
+ }
+
+ .footer-icons img {
+ width: 2rem;
+ height: 2rem;
+ }
+
+ .button:hover {
+ background-color: var(--button-hover-color);
+ border: 0.1rem solid var(--button-hover-color);
+ }
+
+ .button:active {
+ background-color: var(--button-active-color);
+ border: 0.1rem solid var(--button-active-color);
+ }
+
+ .logoImg {
+ width: 15.3rem;
+ height: 5.1rem;
+ }
+
+ .topLandingImg {
+ width: 74.6rem;
+ height: 34rem;
+ }
+
+ .section-Img {
+ width: 69.6rem;
+ height: 52.4rem;
+ }
+
+ .bottomLandingImg {
+ width: 74.6rem;
+ height: 39.7rem;
+ }
+}
+
+/* 모바일 */
+@media (min-width: 375px) and (max-width: 767px) {
+ .header {
+ width: 100%;
+ height: 7rem;
+ position: fixed;
+ background-color: #ffffff;
+ top: 0;
+ }
+
+ .header-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0.95rem 2.4rem;
+ }
+
+ .header-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 12.8rem;
+ height: 4.8rem;
+ padding: 1.2rem 2.3rem;
+ border-radius: 0.8rem;
+ background-color: var(--button-color);
+ color: #ffffff;
+ border: 0.1rem solid var(--button-color);
+ flex-shrink: 0;
+ text-decoration: none;
+ cursor: pointer;
+ font-size: 1.6rem;
+ }
+
+ .topLanding {
+ width: 100%;
+ height: 54rem;
+ background-color: var(--bg-color);
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
+ align-items: center;
+ margin-top: 7rem;
+ }
+
+ .top-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.7rem;
+ }
+
+ .top-content-text {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 4rem 0;
+ flex-shrink: 0;
+ }
+
+ .top-content-text h2 {
+ color: var(--main-font-color);
+ font-size: 3.2rem;
+ font-weight: 700;
+ text-align: center;
+ }
+
+ .section {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ margin-top: 5.2rem;
+ gap: 4rem;
+ }
+
+ .section-content {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: center;
+ height: 41.7rem;
+ }
+
+ .section-card {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1.6rem;
+ width: 100%;
+ }
+
+ .section-card.reverse {
+ flex-direction: column-reverse;
+ }
+
+ .section-text {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 0 2rem;
+ }
+
+ .section-text.card1 {
+ justify-content: start;
+ }
+
+ .section-text.card2 {
+ text-align: right;
+ justify-content: end;
+ }
+
+ .section-text-tag {
+ font-size: 1.6rem;
+ font-weight: 700;
+ color: var(--button-color);
+ }
+
+ .section-text-title {
+ color: var(--main-font-color);
+ font-size: 2.4rem;
+ font-weight: 700;
+ line-height: 1.2;
+ }
+
+ .section-text-subtitle {
+ color: var(--main-font-color);
+ font-size: 1.6rem;
+ font-weight: 500;
+ }
+
+ .bottomLanding {
+ width: 100%;
+ height: 54rem;
+ background-color: var(--bg-color);
+ display: flex;
+ align-items: end;
+ justify-content: center;
+ margin-top: 13.8rem;
+ }
+
+ .bottom-content {
+ display: flex;
+ flex-direction: column;
+ justify-items: center;
+ align-items: center;
+ gap: 6.9rem;
+ flex-shrink: 0;
+ }
+
+ .bottom-content-text {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ gap: 1rem;
+ padding-bottom: 6rem;
+ margin: 3.25rem 0;
+ font-size: 4rem;
+ line-height: 140%;
+ text-align: center;
+ }
+
+ .bottom-content-text h2 {
+ font-weight: 700;
+ font-size: 4rem;
+ color: var(--main-font-color);
+ }
+
+ .footer {
+ width: 100%;
+ height: 16rem;
+ background-color: #111827;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .items-button {
+ margin-top: 3.2rem;
+ margin-bottom: 6rem;
+ background-color: var(--button-color);
+ color: #ffffff;
+ padding: 1.2rem 7.1rem;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ border: 0.1rem solid var(--button-color);
+ border-radius: 4rem;
+ cursor: pointer;
+ font-size: 1.6rem;
+ width: 240px;
+ }
+
+ .footer-content {
+ font-size: 1.6rem;
+ display: grid;
+ grid-template-areas:
+ 'item2 item2 item3'
+ 'item1 item1 item1';
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ height: 2rem;
+ gap: 7rem;
+ padding: 3.2rem 1rem 10.8rem 1rem;
+ align-items: center;
+ }
+
+ .footer-left-text {
+ grid-area: item1;
+ }
+
+ .footer-left-text p {
+ font-size: 1.6rem;
+ flex-shrink: 1;
+ color: #9ca3af;
+ font-weight: 400;
+ }
+
+ .footer-middle-text,
+ .footer-icons {
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ .footer-middle-text {
+ font-size: 1.6rem;
+ display: flex;
+ gap: 3rem;
+ flex-shrink: 1;
+ grid-area: item2;
+ }
+
+ .footer-middle-text a {
+ font-size: 1.6rem;
+ color: var(--secondary-font-color);
+ font-weight: 400;
+ text-decoration: none;
+ }
+
+ .footer-icons {
+ display: flex;
+ flex-shrink: 1;
+ gap: 1.2rem;
+ grid-area: item3;
+ }
+
+ .footer-icons img {
+ width: 2rem;
+ height: 2rem;
+ }
+
+ .button:hover {
+ background-color: var(--button-hover-color);
+ border: 0.1rem solid var(--button-hover-color);
+ }
+
+ .button:active {
+ background-color: var(--button-active-color);
+ border: 0.1rem solid var(--button-active-color);
+ }
+
+ .logoImg {
+ content: url('/images/mobileLogo.png');
+ width: 15.3rem;
+ height: 5.1rem;
+ }
+
+ .topLandingImg {
+ width: 44.8rem;
+ height: 20.4rem;
+ }
+
+ .section-Img {
+ width: 34.4rem;
+ height: 25.9rem;
+ }
+
+ .bottomLandingImg {
+ width: 37.5rem;
+ height: 19.8rem;
+ }
}
+
Register
-
- 판매를 원하는
상품을 등록하세요
-
판매를 원하는 상품을 등록하세요
어떤 물건이든 판매하고싶은 상품을
쉽게 등록하세요
diff --git a/pages/signup.html b/pages/signup.html
index 17e07c93..d91fa155 100644
--- a/pages/signup.html
+++ b/pages/signup.html
@@ -22,22 +22,56 @@
@@ -64,7 +98,7 @@
-
+
-
+
-
+
+
+ 
+
+
-
+
+
+
+
+