diff --git a/index.html b/index.html index 7368afa..1ef5487 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,9 @@ - + + 판다마켓 @@ -16,32 +17,34 @@

판다마켓

- +
-

- 일상의 모든 물건을
- 거래해 보세요 -

- +
+

+ 일상의 모든 물건을
+ 거래해 보세요 +

+
+ + 구경하러 가기 + +
+
-
+
구매하고 싶은 물품은 검색해서
쉽게 찾아보세요

-
+
-
+
- + diff --git a/login.html b/login.html index 6b8a4e1..438501d 100644 --- a/login.html +++ b/login.html @@ -1,11 +1,77 @@ - + - login + 판다마켓 | 로그인 + + + + -
login
+
+
+

+ +

+
+
+ + +
+
+ +
+ +
+
+
+
+ +
+
+
+ 간편 로그인 하기 + +
+ +
+
+ diff --git a/privacy.html b/privacy.html index bb5e773..acee298 100644 --- a/privacy.html +++ b/privacy.html @@ -1,5 +1,5 @@ - + diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..d9a39a1 --- /dev/null +++ b/signup.html @@ -0,0 +1,98 @@ + + + + + + 판다마켓 | 회원가입 + + + + + + +
+
+

+ +

+
+
+ + +
+
+ + +
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+ 간편 로그인 하기 + +
+ +
+
+ + + diff --git a/src/assets/css/style.css b/src/assets/css/main.css similarity index 87% rename from src/assets/css/style.css rename to src/assets/css/main.css index a70de7b..680b3c9 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/main.css @@ -6,6 +6,11 @@ text-decoration: none; font-family: "Pretendard-Regular"; } +html, +body { + width: 100%; + height: 100%; +} button { border: none; outline: none; @@ -52,9 +57,14 @@ img { /* 헤더 */ .header { + position: fixed; + top: 0; + left: 0; + width: 100%; height: 70px; background-color: #fff; padding: 0 200px; + z-index: 1; } .header__wrap { display: flex; @@ -81,9 +91,9 @@ img { /* 키비쥬얼 */ .main-kv { width: 100%; - height: 540px; + height: 610px; background-color: #cfe5ff; - padding: 0 200px; + padding: 70px 200px 0 200px; } .main-kv__wrap { max-width: 1120px; @@ -93,15 +103,24 @@ img { background-repeat: no-repeat; background-position: bottom right; } - +.main-kv__contents { + position: relative; + height: 100%; +} +.main-kv__slogan { + position: absolute; + top: 240px; + left: 0; +} .main-kv__contents h2 { font-size: 40px; line-height: 1.4; color: #374151; - padding-top: 240px; } .main-kv__button { margin-top: 32px; + display: inline-block; + text-align: center; } /* 컨테이너 섹션 */ @@ -113,8 +132,7 @@ img { margin: 0 auto; display: flex; align-items: center; - justify-content: space-between; - column-gap: 64px; + gap: 64px; } .main-section__category { @@ -144,10 +162,12 @@ img { } .main-banner__inner { + display: flex; max-width: 1160px; margin: 0 auto; padding: 0 20px; height: 100%; + align-items: center; background-image: url(../image/banner_img.png); background-repeat: no-repeat; background-position: bottom right; @@ -155,7 +175,6 @@ img { .main-banner__inner h2 { font-size: 40px; color: #374151; - padding-top: 250px; } /* 푸터 */ @@ -211,9 +230,6 @@ img { /* 미디어 쿼리 */ @media screen and (max-width: 1366px) { - .mov { - display: none; - } .mov2 { display: none; } @@ -224,8 +240,13 @@ img { .main-kv__contents { text-align: center; } + .main-kv__slogan { + width: 100%; + top: 83px; + left: 50%; + transform: translateX(-50%); + } .main-kv__contents h2 { - padding-top: 50px; font-size: 35px; } .main-kv__button { @@ -238,9 +259,18 @@ img { } @media screen and (max-width: 1024px) { + .mov { + display: none; + } .header { padding: 0 20px; } + .main-kv__slogan { + top: 48px; + } + .main-kv__slogan h2 { + font-size: 32px; + } .main-section { padding: 24px; } @@ -250,8 +280,7 @@ img { .main-section__image { width: 100%; } - .main-section__right--image, - .main-section__left--image { + .main-section__imagewrap { width: 100%; margin-bottom: 24px; } @@ -271,9 +300,14 @@ img { .main-banner__inner { text-align: center; background-position: bottom center; + position: relative; } .main-banner__inner h2 { - padding-top: 200px; + width: 100%; + position: absolute; + top: 200px; + left: 50%; + transform: translateX(-50%); } } @@ -313,8 +347,8 @@ img { background-size: 375px 198px; } .main-banner__inner h2 { - padding-top: 120px; font-size: 30px; + top: 100px; } .footer__top { position: relative; diff --git a/src/assets/css/sub.css b/src/assets/css/sub.css new file mode 100644 index 0000000..18935a7 --- /dev/null +++ b/src/assets/css/sub.css @@ -0,0 +1,141 @@ +.form-box { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +.form-box__wrap { + max-width: 680px; + width: 100%; + padding: 0 20px; +} +.form-box__logo { + display: block; + width: 396px; + height: 132px; + margin: 0 auto; + background-image: url(../image/logo_sign.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} +.form-box__simplelogin { + display: flex; + padding: 16px 23px; + justify-content: space-between; + align-items: center; + background-color: #e6f2ff; + border-radius: 8px; + margin-top: 24px; +} +.form-box__social { + display: flex; + column-gap: 16px; +} +.social-icon { + width: 42px; + height: 42px; + display: block; + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} +.social-icon--google { + background-image: url(../image/google.svg); +} +.social-icon--kakao { + background-image: url(../image/kakao.svg); +} +.form-box__signup { + text-align: center; + margin-top: 24px; +} +.form-box__signup a { + text-decoration: underline; + color: var(--blue); +} + +/* form */ +.form { + margin-top: 40px; +} +.form__group { + display: flex; + flex-direction: column; +} +.form__group + .form__group { + margin-top: 24px; +} +.form__group label { + line-height: 26px; + font-size: 18px; + font-weight: 700; + color: var(--gray800); + margin-bottom: 16px; +} +.form__input { + width: 100%; + padding: 15px 24px; + border-radius: 12px; + border: none; + outline: none; + background-color: var(--gray100); + line-height: 26px; +} +.form__input:focus { + outline: 1px solid var(--blue); +} +.form__input::placeholder { + color: var(--gray400); + line-height: 26px; + font-size: 16px; +} +.form__visible { + position: relative; +} +.visible-icon { + position: absolute; + top: 50%; + right: 24px; + transform: translateY(-50%); + width: 24px; + height: 24px; + background-image: url(../image/visibility_off.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + cursor: pointer; +} +.visible-icon.active { + background-image: url(../image/visibility_on.png); +} + +.form__button { + display: block; + background-color: var(--gray400); + width: 100%; + border-radius: 28px; + cursor: pointer; +} +.form__button.active { + background-color: var(--blue); +} +.form__button span { + line-height: 56px; + font-size: 20px; + color: var(--gray100); +} + +@media screen and (max-width: 750px) { + .form-box__logo { + display: block; + width: 250px; + height: 75px; + margin: 0 auto; + background-image: url(../image/logo_sign.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + } +} diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css new file mode 100644 index 0000000..c17564e --- /dev/null +++ b/src/assets/css/variables.css @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +:root { + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #9ca3af; + --gray200: #e5e7eb; + --gray100: #f3f4f6; + --gray500: #f9fafb; + + --blue: #3692ff; +} diff --git a/src/assets/image/google.svg b/src/assets/image/google.svg new file mode 100644 index 0000000..39de633 --- /dev/null +++ b/src/assets/image/google.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/image/kakao.svg b/src/assets/image/kakao.svg new file mode 100644 index 0000000..15dc4d0 --- /dev/null +++ b/src/assets/image/kakao.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/image/logo_sign.png b/src/assets/image/logo_sign.png new file mode 100644 index 0000000..ec00f2d Binary files /dev/null and b/src/assets/image/logo_sign.png differ diff --git a/src/assets/image/visibility_off.png b/src/assets/image/visibility_off.png new file mode 100644 index 0000000..c61b09f Binary files /dev/null and b/src/assets/image/visibility_off.png differ diff --git a/src/assets/image/visibility_on.png b/src/assets/image/visibility_on.png new file mode 100644 index 0000000..5263589 Binary files /dev/null and b/src/assets/image/visibility_on.png differ diff --git a/src/assets/js/sub.js b/src/assets/js/sub.js new file mode 100644 index 0000000..fb560b8 --- /dev/null +++ b/src/assets/js/sub.js @@ -0,0 +1,30 @@ +let visible_icon = document.querySelectorAll(".visible-icon"); +let inputs = document.querySelectorAll(".form__input"); +let formBtn = document.querySelector(".form__button"); + +visible_icon.forEach(function (value) { + value.addEventListener("click", function (e) { + if (e.target.previousElementSibling.getAttribute("type") == "text") { + e.target.previousElementSibling.setAttribute("type", "password"); + e.target.classList.remove("active"); + } else { + e.target.previousElementSibling.setAttribute("type", "text"); + e.target.classList.add("active"); + } + }); +}); + +function Check() { + let result = [...inputs].some((input) => input.value.trim() === ""); + console.log(result); + + if (result) { + formBtn.classList.remove("active"); + } else { + formBtn.classList.add("active"); + } +} + +inputs.forEach(function (value) { + value.addEventListener("input", Check); +});