diff --git a/12-Sprint-Mission b/12-Sprint-Mission new file mode 160000 index 000000000..4dc5dd08f --- /dev/null +++ b/12-Sprint-Mission @@ -0,0 +1 @@ +Subproject commit 4dc5dd08f4106231a7aad060e895360af8d0ff1a diff --git a/faq.html b/faq.html new file mode 100644 index 000000000..e49f09537 --- /dev/null +++ b/faq.html @@ -0,0 +1,11 @@ + + + + + + faq + + + faq 페이지 + + diff --git a/images/bannerPanda.png b/images/bannerPanda.png new file mode 100644 index 000000000..3baf642b2 Binary files /dev/null and b/images/bannerPanda.png differ diff --git a/images/bottomBannerPanda.png b/images/bottomBannerPanda.png new file mode 100644 index 000000000..cc7d2e10a Binary files /dev/null and b/images/bottomBannerPanda.png differ diff --git a/images/closeEyeIcon.png b/images/closeEyeIcon.png new file mode 100644 index 000000000..8c2764bf3 Binary files /dev/null and b/images/closeEyeIcon.png differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 000000000..65edf9a29 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/firstMain.png b/images/firstMain.png new file mode 100644 index 000000000..3baf642b2 Binary files /dev/null and b/images/firstMain.png differ diff --git a/images/googleLogo.png b/images/googleLogo.png new file mode 100644 index 000000000..49107bd86 Binary files /dev/null and b/images/googleLogo.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 000000000..ef3b63598 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/kakaoLogo.png b/images/kakaoLogo.png new file mode 100644 index 000000000..b389433f7 Binary files /dev/null and b/images/kakaoLogo.png differ diff --git a/images/logoPanda.png b/images/logoPanda.png new file mode 100644 index 000000000..6b4db5055 Binary files /dev/null and b/images/logoPanda.png differ diff --git a/images/mainHotItem.png b/images/mainHotItem.png new file mode 100644 index 000000000..9e1aa5e7d Binary files /dev/null and b/images/mainHotItem.png differ diff --git a/images/mainRegister.png b/images/mainRegister.png new file mode 100644 index 000000000..f399196fc Binary files /dev/null and b/images/mainRegister.png differ diff --git a/images/mainSearch.png b/images/mainSearch.png new file mode 100644 index 000000000..3c700ddb6 Binary files /dev/null and b/images/mainSearch.png differ diff --git a/images/openEyeIcon.png b/images/openEyeIcon.png new file mode 100644 index 000000000..f62585103 Binary files /dev/null and b/images/openEyeIcon.png differ diff --git a/images/panda.png b/images/panda.png new file mode 100644 index 000000000..6b4db5055 Binary files /dev/null and b/images/panda.png differ diff --git a/images/secondHot.png b/images/secondHot.png new file mode 100644 index 000000000..9e1aa5e7d Binary files /dev/null and b/images/secondHot.png differ diff --git a/images/secondRegister.png b/images/secondRegister.png new file mode 100644 index 000000000..f399196fc Binary files /dev/null and b/images/secondRegister.png differ diff --git a/images/secondSearch.png b/images/secondSearch.png new file mode 100644 index 000000000..3c700ddb6 Binary files /dev/null and b/images/secondSearch.png differ diff --git a/images/thirdMain.png b/images/thirdMain.png new file mode 100644 index 000000000..cc7d2e10a Binary files /dev/null and b/images/thirdMain.png differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 000000000..fae5aa789 Binary files /dev/null and b/images/twitter.png differ diff --git a/images/youtube.png b/images/youtube.png new file mode 100644 index 000000000..44785de3e Binary files /dev/null and b/images/youtube.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..243209be7 --- /dev/null +++ b/index.html @@ -0,0 +1,147 @@ + + + + + + + + 판다마켓 + + +
+
+ + 판다 로고 이미지 + + +
+ + + +
+
+
+ +
+
+ +
+ +
+
+
+
+ 메인 hot item 이미지 +
+
+
Hot item
+
인기 상품을 확인해 보세요
+
+ 가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요 +
+
+
+
+
+ +
+
+
+
+ 메인 search 이미지 +
+
+
Search
+
+ 구매를 원하는 상품을 검색하세요 +
+
+ 구매하고 싶은 물품은 검색해서 쉽게 찾아보세요 +
+
+
+
+
+ +
+
+
+
+ 메인 register 이미지 +
+
+
Register
+
+ 판매를 원하는 상품을 등록하세요 +
+
+ 어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요 +
+
+
+
+
+ +
+
+
+
+
+ 믿을 수 있는
+ 판다마켓 중고 거래 +
+
+
+ 하단배너 판다 이미지 +
+ > +
+
+
+
+ + + + diff --git a/items.html b/items.html new file mode 100644 index 000000000..c7217dea8 --- /dev/null +++ b/items.html @@ -0,0 +1,11 @@ + + + + + + item + + +
아이템페이지
+ + diff --git a/login.css b/login.css new file mode 100644 index 000000000..53e52aefc --- /dev/null +++ b/login.css @@ -0,0 +1,316 @@ +* { + box-sizing: border-box; +} + +:root { + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray50: #f9fafb; + --blue: #3692ff; +} + +html { + font-size: 16px; +} + +header, +main { + width: 100vw; +} + +button { + cursor: pointer; +} + +body { + margin: 0; + padding: 0; + font-family: "Pretendard"; +} + + + +/* Tablet 부터 desktop 사이즈까지*/ +@media screen and (min-width: 768px) { + .login { + height: 38.625rem; + margin: 0 auto; + } + + input { + border: 0; + } + + input:focus { + border: 1px solid var(--blue); + } + + .login__header { + margin-top: 10.4375rem; + text-align: center; + } + + .login__header img { + width: 24.75rem; + height: 8.25rem; + } + + .login__form{ + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .login__form-field { + width: 40rem; + height: 6.125rem; + margin-bottom: 1.25rem; + } + + .login__form-field label { + font-weight: 700; + font-size: 1.125rem; + line-height: 1.625rem; + display: block; + margin: 1rem 0; + } + + .login__form-field input { + width: 40rem; + height: 3.5rem; + background-color: var(--gray100); + border-radius: 0.75rem; + + } + + .login__label__container { + position: relative; + display: flex; + } + + .login__form-field img { + position: absolute; + width: 1.5rem; + height: 1.5rem; + top: 1.125rem; + right: 0.625rem; + } + + .login__button { + width: 40rem; + height: 3.5rem; + background-color: var(--blue); + color: white; + padding: 1rem 7.75rem; + border-radius: 2.5rem; + margin: 2rem 0px; + } + + .social-login { + width: 40rem; + height: 4.625rem; + background-color: #e6f2ff; + display: flex; + justify-content: space-between; + text-align: center; + padding: 1rem 1.4375rem; + gap: 0.625rem; + border-radius: 0.5rem; + } + + .social-login__title { + height: 1.625rem; + font-weight: 500; + font-size: 1rem; + line-height: 1.625rem; + margin-top: 0.625rem; + } + + .social-login__img-box { + width: 6.25rem; + height: 42px; + display: flex; + gap: 1rem; + } + + .social-login__img-box img { + width: 2.625rem; + height: 2.625rem; + } + + .signup__text-box { + height: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + gap: 0.25rem; + margin-top: 1.25rem; + } + + .signup__question { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.5rem; + } + + .signup__text-box a { + font-weight: 500; + font-size: 14px; + line-height: 1.0444rem; + color: var(--blue); + } +} + + +/* Mobile 스타일 375px 이상 767px 이하*/ +@media screen and (min-width: 375px) and (max-width: 767px){ + + .login { + height: 38.625rem; + margin: 0 auto; + } + + header{ + padding: 0 1rem; + width: 100%; + } + + input { + border: 0; + } + + input:focus { + border: 1px solid var(--blue); + } + + .login{ + max-width: 25rem; + width: 100%; + margin: 0 auto; + } + + .login__header { + margin-top: 10.4375rem; + text-align: center; + width: 100%; + } + + .login__header img { + width: 12.375rem; + height: 4.125rem; + } + + .login__form{ + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + } + + .login__form-field { + width: 100%; + height: 5.5rem; + margin-bottom: 1.25rem; + } + + .login__form-field label { + font-weight: 700; + font-size: 1.125rem; + line-height: 1.625rem; + display: block; + margin: 1rem 0; + } + + .login__form-field input { + width: 100%; + height: 3.5rem; + background-color: var(--gray100); + border-radius: 0.75rem; + } + + .login__label__container { + position: relative; + display: flex; + } + + .login__form-field img { + position: absolute; + width: 1.5rem; + height: 1.5rem; + top: 1.125rem; + right: 0.625rem; + } + + .login__button { + width: 100%; + height: 3.5rem; + background-color: var(--blue); + color: white; + padding: 1rem 7.75rem; + border-radius: 2.5rem; + margin: 2rem 0px; + } + + .social-login { + width: 100%; + height: 4.625rem; + background-color: #e6f2ff; + display: flex; + justify-content: space-between; + text-align: center; + padding: 1rem 1.4375rem; + gap: 0.625rem; + border-radius: 0.5rem; + } + + .social-login__title { + height: 1.625rem; + font-weight: 500; + font-size: 1rem; + line-height: 1.625rem; + margin-top: 0.625rem; + } + + .social-login__img-box { + width: 6.25rem; + height: 42px; + display: flex; + gap: 1rem; + } + + .social-login__img-box img { + width: 2.625rem; + height: 2.625rem; + } + + .signup__text-box { + height: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + gap: 0.25rem; + margin-top: 1.25rem; + } + + .signup__question { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.5rem; + } + + .signup__text-box a { + font-weight: 500; + font-size: 14px; + line-height: 1.0444rem; + color: var(--blue); + } +} diff --git a/login.html b/login.html new file mode 100644 index 000000000..7a8c440b6 --- /dev/null +++ b/login.html @@ -0,0 +1,65 @@ + + + + + + + 로그인 + + +
+
+ + + +
+
+ + diff --git a/privacy.html b/privacy.html new file mode 100644 index 000000000..0f0bf95aa --- /dev/null +++ b/privacy.html @@ -0,0 +1,11 @@ + + + + + + privacy + + + privacy 페이지 + + diff --git a/signup.css b/signup.css new file mode 100644 index 000000000..514fd49dd --- /dev/null +++ b/signup.css @@ -0,0 +1,314 @@ +* { + box-sizing: border-box; +} + +:root { + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray50: #f9fafb; + --blue: #3692ff; +} + +html { + font-size: 16px; +} + +header, +main { + width: 100vw; +} + +button { + cursor: pointer; +} + +body { + margin: 0; + padding: 0; + font-family: "Pretendard"; +} + +/* Tablet 부터 desktop 사이즈까지*/ +@media screen and (min-width: 768px) { + .signup { + height: 53.5625rem; + margin: 0 auto; + } + + input { + border: 0; + } + + input:focus { + border: 1px solid var(--blue); + } + + .signup__header { + margin-top: 5.4375rem; + text-align: center; + } + + .signup__header img { + width: 24.75rem; + height: 8.25rem; + } + + .signup__form{ + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + width:100%; + } + + .signup__form-field { + width: 40rem; + height: 6.125rem; + margin-bottom: 1.25rem; + } + + .signup__form-field label { + font-weight: 700; + font-size: 1.125rem; + line-height: 1.625rem; + display: block; + margin: 1rem 0; + } + + .signup__form-field input { + width: 40rem; + height: 3.5rem; + background-color: var(--gray100); + border-radius: 0.75rem; + } + + .signup__label__container { + position: relative; + display: flex; + } + + .signup__form-field img { + position: absolute; + width: 1.5rem; + height: 1.5rem; + top: 1.125rem; + right: 0.625rem; + } + + .signup__button { + width: 40rem; + height: 3.5rem; + background-color: var(--blue); + color: white; + padding: 1rem 7.75rem; + border-radius: 2.5rem; + margin: 2rem 0px; + } + + .social-login { + width: 40rem; + height: 4.625rem; + background-color: #e6f2ff; + display: flex; + justify-content: space-between; + text-align: center; + padding: 1rem 1.4375rem; + gap: 0.625rem; + border-radius: 0.5rem; + } + + .social-login__title { + height: 1.625rem; + font-weight: 500; + font-size: 1rem; + line-height: 1.625rem; + margin-top: 0.625rem; + } + + .social-login__img-box { + width: 6.25rem; + height: 42px; + display: flex; + gap: 1rem; + } + + .social-login__img-box img { + width: 2.625rem; + height: 2.625rem; + } + + .signup__text-box { + height: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + gap: 0.25rem; + margin-top: 1.25rem; + } + + .signup__question { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.5rem; + } + + .signup__text-box a { + font-weight: 500; + font-size: 14px; + line-height: 1.0444rem; + color: var(--blue); + } + +} + + +/* Mobile 스타일 375px 이상 767px 이하*/ +@media screen and (min-width: 375px) and (max-width: 767px){ + .signup { + height: 53.5625rem; + margin: 0 auto; + } + + header{ + padding: 0 1rem; + width: 100%; + } + + input { + border: 0; + } + + input:focus { + border: 1px solid var(--blue); + } + + .signup{ + max-width: 25rem; + width: 100%; + margin: 0 auto; + } + + .signup__header { + margin-top: 5.4375rem; + text-align: center; + width: 100%; + margin-right: 1rem; + } + + .signup__header img { + width: 12.375rem; + height: 4.125rem; + } + + .signup__form{ + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + width:100%; + } + + .signup__form-field { + width: 100%; + height: 6.125rem; + margin-bottom: 1.25rem; + } + + .signup__form-field label { + font-weight: 700; + font-size: 1.125rem; + line-height: 1.625rem; + display: block; + margin: 1rem 0; + } + + .signup__form-field input { + width: 100%; + height: 3.5rem; + background-color: var(--gray100); + border-radius: 0.75rem; + } + + .signup__label__container { + position: relative; + display: flex; + } + + .signup__form-field img { + position: absolute; + width: 1.5rem; + height: 1.5rem; + top: 1.125rem; + right: 0.625rem; + } + + .signup__button { + width: 100%; + height: 3.5rem; + background-color: var(--blue); + color: white; + padding: 1rem 7.75rem; + border-radius: 2.5rem; + margin: 2rem 0px; + } + + .social-login { + width: 100%; + height: 4.625rem; + background-color: #e6f2ff; + display: flex; + justify-content: space-between; + text-align: center; + padding: 1rem 1.4375rem; + gap: 0.625rem; + border-radius: 0.5rem; + } + + .social-login__title { + height: 1.625rem; + font-weight: 500; + font-size: 1rem; + line-height: 1.625rem; + margin-top: 0.625rem; + } + + .social-login__img-box { + width: 6.25rem; + height: 42px; + display: flex; + gap: 1rem; + } + + .social-login__img-box img { + width: 2.625rem; + height: 2.625rem; + } + + .signup__text-box { + height: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + gap: 0.25rem; + margin-top: 1.25rem; + } + + .signup__question { + font-weight: 500; + font-size: 0.875rem; + line-height: 1.5rem; + } + + .signup__text-box a { + font-weight: 500; + font-size: 14px; + line-height: 1.0444rem; + color: var(--blue); + } +} \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 000000000..5189357d6 --- /dev/null +++ b/signup.html @@ -0,0 +1,90 @@ + + + + + + + 로그인 + + +
+
+ + + +
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 000000000..59b882ddf --- /dev/null +++ b/style.css @@ -0,0 +1,650 @@ +* { + box-sizing: border-box; +} + +html { + font-size: 16px; + overflow-x: hidden; +} + +header, +main { + width: 100vw; +} + +button { + cursor: pointer; +} + +body { + margin: 0; + padding: 0; + font-family: "Pretendard"; +} + +/*1200px PC 스크린*/ +@media screen and (min-width: 1200px) { + .headerContainer { + display: flex; + justify-content: space-between; + align-items: center; + height: 3.1875rem; + width: 70rem; + margin: 0 auto; + } + + .headerContainer img { + width: 9.5625rem; + height: 3.1875rem; + cursor: pointer; + } + + .headerLogin button { + width: 8rem; + height: 3rem; + background-color: #3692ff; + color: white; + } + + .banner { + height: 33.75rem; + background-color: #cfe5ff; + display: flex; + max-width: 120rem; + } + + .banner__container { + width: 69.375rem; + height: 21.25rem; + display: flex; + margin: 12.5rem auto; + } + + .banner__container__text { + height: 16.25rem; + margin-top: 1.875rem; + } + + .banner__container__text div { + height: 7rem; + font-size: 2.5rem; + font-weight: 700; + line-height: 3.5rem; + } + + .banner__container__text button { + width: 22.3125rem; + height: 3.5rem; + background-color: #3692ff; + color: #cfe5ff; + margin: 3.125rem 0px; + border-radius: 2.5rem; + padding: 1rem 7.75rem 1rem 7.75rem; + gap: 0.625rem; + } + + .banner__container img { + width: 46.625rem; + height: 21.25rem; + } + + .main-section { + height: 45rem; + display: flex; + } + + .main-section__container { + width: 61.75rem; + height: 27.75rem; + display: flex; + margin: 8.625rem auto; + background-color: #fcfcfc; + } + + .main-section__img-box img { + width: 36.1875rem; + height: 27.75rem; + } + + .main-section__text-box { + width: 18.625rem; + height: 14.875rem; + margin: 6.4375rem auto; + display: flex; + flex-direction: column; + gap: 0.75rem; + } + + .main-section__title { + width: 100%; + height: 1.625rem; + color: #3692ff; + font-size: 1.125rem; + font-weight: 700; + line-height: 1.625rem; + } + + .main-section__heading { + font-weight: 700; + font-size: 2.5rem; + line-height: 3.5rem; + color: #374151; + } + + .main-section__description { + font-weight: 500; + font-size: 1.5rem; + line-height: 2rem; + color: #374151; + } + + .main-section--search .main-section__container { + flex-direction: row-reverse; + } + + .main-section--search .main-section__text-box { + text-align: right; + } + + .bottom-banner { + height: 33.75rem; + background-color: #cfe5ff; + display: flex; + max-width: 120rem; + } + + .bottom-banner__container { + width: 69.375rem; + height: 21.25rem; + display: flex; + margin: 12.5rem auto; + } + + .bottom-banner__text-box { + height: 16.25rem; + margin-top: 1.875rem; + } + + .bottom-banner__text-box div { + height: 7rem; + font-size: 2.5rem; + font-weight: 700; + line-height: 3.5rem; + } + + .bottom-banner__img-box img { + width: 46.625rem; + height: 21.25rem; + margin-left: 4.3125rem; + } + + .footer { + height: 10rem; + background-color: #111827; + display: flex; + justify-content: space-evenly; + align-items: center; + } + + .footer div:nth-child(1) { + font-weight: 400; + font-size: 1rem; + line-height: 1.1931rem; + text-align: center; + color: #9ca3af; + } + + .footer div:nth-child(2) { + display: flex; + gap: 1.875rem; + } + + .footer a { + font-weight: 400; + font-size: 1rem; + line-height: 1.1931rem; + text-align: center; + color: #e5e7eb; + text-decoration: none; + } + + .footer div:nth-child(3) { + gap: 0.75rem; + display: flex; + } + .footer img { + width: 1.25rem; + height: 1.25rem; + } +} + +/* Tablet 스타일 768px 이상 1199px 이하*/ +@media screen and (min-width : 768px) and (max-width: 1199px) { + .headerContainer { + display: flex; + justify-content: space-between; + align-items: center; + height: 3.1875rem; + margin: 0 auto; + } + + .headerContainer img { + width: 9.5625rem; + height: 3.1875rem; + cursor: pointer; + margin-left: 1.5rem; + } + + .headerLogin button { + width: 8rem; + height: 3rem; + background-color: #3692ff; + color: white; + margin-right: 1.5rem; + } + + .banner { + height: 48.1875rem; + background-color: #cfe5ff; + display: flex; + } + + .banner__container { + height: 21.25rem; + margin: 4.5rem auto; + } + + .banner__container__text { + height: 19.9rem; + padding-left: 6.125rem; + } + + .banner__container__text div { + height: 5rem; + font-size: 2.5rem; + font-weight: 700; + line-height: 3.5rem; + margin-top: 2.5rem; + } + + .banner__container__text button { + width: 22.3125rem; + height: 3.5rem; + background-color: #3692ff; + color: #cfe5ff; + margin-left: 5rem; + border-radius: 2.5rem; + padding: 1rem 7.75rem 1rem 7.75rem; + gap: 0.625rem; + } + + .banner__container img { + width: 46.5rem; + height: 21.25rem; + } + + .main-section { + height: 44.25rem; + display: flex; + } + + .main-section__container { + width: 43.5rem; + height: 44.25rem; + margin: 2.625rem auto; + background-color: #fcfcfc; + } + + .main-section__img-box img { + width: 43.5rem; + height: 32.75rem; + } + + .main-section__text-box { + width: 30.9375rem; + height: 10rem; + display: flex; + flex-direction: column; + gap: 1.5rem + } + + .main-section__title { + width: 100%; + height: 1.625rem; + color: #3692ff; + font-size: 1.125rem; + font-weight: 700; + line-height: 1.625rem; + } + + .main-section__heading { + font-weight: 700; + font-size: 2rem; + line-height: 2.625rem; + height: 2.625rem; + color: #374151; + } + + .main-section__description { + font-weight: 500; + font-size: 1.125rem; + line-height: 1.625rem; + color: #374151; + } + + .main-section--search .main-section__container { + position: relative; + } + + .main-section--search .main-section__text-box { + text-align: right; + position: absolute; + bottom: 0; + right: 0; + + } + + .bottom-banner { + height: 57.9375rem; + background-color: #cfe5ff; + max-width: 120rem; + } + + .bottom-banner__container { + height: 21.25rem; + margin: 6.5rem auto; + display: flex; + flex-direction: column; + align-items: center; + } + + .bottom-banner__text-box { + height: 33.1rem; + padding-top: 12.5rem; + text-align: center; + } + + .bottom-banner__text-box div { + height: 5rem; + font-size: 2.5rem; + font-weight: 700; + line-height: 3.5rem; + margin-top: 2.5rem; + margin: 0 auto; + display: block; + } + + .bottom-banner__img-box{ + padding-top: 15.6rem; + text-align: center; + } + + .bottom-banner__img-box img { + width: 46.5rem; + height: 24.8125rem; + display: block; + } + + .footer { + height: 10rem; + background-color: #111827; + display: flex; + justify-content: space-evenly; + align-items: center; + } + + .footer div:nth-child(1) { + font-weight: 400; + font-size: 1rem; + line-height: 1.1931rem; + text-align: center; + color: #9ca3af; + } + + .footer div:nth-child(2) { + display: flex; + gap: 1.875rem; + } + + .footer a { + font-weight: 400; + font-size: 1rem; + line-height: 1.1931rem; + text-align: center; + color: #e5e7eb; + text-decoration: none; + } + + .footer div:nth-child(3) { + gap: 0.75rem; + display: flex; + } + .footer img { + width: 1.25rem; + height: 1.25rem; + } +} + +/* Mobile 스타일 375px 이상 767px 이하*/ +@media screen and (min-width: 375px) and (max-width: 767px){ + .headerContainer { + display: flex; + justify-content: space-between; + align-items: center; + height: 3.1875rem; + margin: 0 auto; + } + + .headerContainer img { + width: 9.5625rem; + height: 3.1875rem; + cursor: pointer; + margin-left: 1rem; + } + + .headerLogin button { + width: 8rem; + height: 3rem; + background-color: #3692ff; + color: white; + margin-right: 1rem; + } + + .banner { + height: 33.75rem; + background-color: #cfe5ff; + display: flex; + } + + .banner__container { + height: 21.25rem; + margin: 4.5rem auto; + } + + .banner__container__text { + height: 9.75rem; + width: 20rem; + padding-left: 4.125rem; + margin-bottom: 6.6875rem; + } + + .banner__container__text div { + height: 5.625rem; + font-size: 2rem; + font-weight: 700; + line-height: 2.8rem; + align-items: center; + } + + .banner__container__text button { + width: 15rem; + height: 3rem; + background-color: #3692ff; + color: #cfe5ff; + border-radius: 2.5rem; + padding: .75rem 4.4375rem; + margin-top: 1.25rem; + } + + .banner__container img { + width: 28rem; + height: 12.75rem; + } + + .main-section { + height: 26.0625rem; + display: flex; + } + + .main-section__container { + width: 22.5rem; + height: 26.0625rem; + margin: 2.625rem auto; + background-color: #fcfcfc; + } + + .main-section__img-box img { + width: 21.5rem; + height: 16.1875rem; + } + + .main-section__text-box { + width: 23rem; + height: 8.375rem; + display: flex; + flex-direction: column; + gap: 1rem + } + + .main-section__title { + width: 100%; + height: 1.625rem; + color: #3692ff; + font-size: 1rem; + font-weight: 700; + line-height: 1.625rem; + } + + .main-section__heading { + font-weight: 700; + font-size: 1.5rem; + line-height: 2rem; + height: 2rem; + color: #374151; + } + + .main-section__description { + font-weight: 500; + font-size: 1rem; + line-height: 1.625rem; + color: #374151; + } + + .main-section--search .main-section__container { + position: relative; + } + + .main-section--search .main-section__text-box { + text-align: right; + position: absolute; + bottom: 0; + right: 0; + + } + + .bottom-banner { + height: 33.75rem; + background-color: #cfe5ff; + } + + .bottom-banner__container { + height: 21.25rem; + margin: 6.5rem auto; + display: flex; + flex-direction: column; + align-items: center; + } + + .bottom-banner__text-box { + height: 21rem; + padding-top: 7.5rem; + text-align: center; + } + + .bottom-banner__text-box div { + height: 5.625rem; + font-size: 2rem; + font-weight: 700; + line-height: 2.8rem; + margin-top: 2.5rem; + margin: 0 auto; + display: block; + } + + .bottom-banner__img-box{ + padding-top: 8.23rem; + text-align: center; + } + + .bottom-banner__img-box img { + width: 23.4375rem; + height: 12.375rem; + display: block; + } + + .footer { + height: 10rem; + background-color: #111827; + display: flex; + justify-content: space-evenly; + align-items: center; + flex-direction: column; + position: relative; + } + + .footer div:nth-child(1) { + font-weight: 400; + font-size: 1rem; + line-height: 1.1931rem; + text-align: center; + color: #9ca3af; + position: absolute; + left: 10%; + bottom: 1rem; + } + + + .footer div:nth-child(2) { + display: flex; + gap: 1.875rem; + position: absolute; + left: 10%; + white-space: nowrap; + } + + .footer a { + font-weight: 400; + font-size: 1rem; + line-height: 1.1931rem; + text-align: center; + color: #e5e7eb; + text-decoration: none; + + } + + .footer div:nth-child(2) a:nth-child(2){ + margin-right: 40%; + } + + .footer div:nth-child(3) { + gap: 0.75rem; + display: flex; + position: absolute; + right: 10%; + } + .footer img { + width: 1.25rem; + height: 1.25rem; + } +} +