diff --git a/index.html b/index.html index 7e725196..a001f9a9 100644 --- a/index.html +++ b/index.html @@ -3,27 +3,30 @@ 판다마켓 + - + +
-
-
- -

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

- 구경하러 가기 -
-
+
+
+
+ 인사하는 판다 일러스트 +

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

+ 구경하러 가기 +
+
- + 물건을 구경하는 판다 일러스트

Hot item @@ -33,7 +36,7 @@

- + 돋보기 일러스트

Search @@ -43,7 +46,7 @@

- + 카테고리 일러스트

Register @@ -53,7 +56,7 @@

-
+
diff --git a/login/index.html b/login/index.html new file mode 100644 index 00000000..a58e2dd6 --- /dev/null +++ b/login/index.html @@ -0,0 +1,51 @@ + + + + + 판다마켓 + + + + + + + +
+
+
+ + + +
+ + +
+ +
+ +

판다마켓이 처음이신가요? 회원가입

+
+
+ + diff --git a/signup/index.html b/signup/index.html new file mode 100644 index 00000000..fe00704e --- /dev/null +++ b/signup/index.html @@ -0,0 +1,59 @@ + + + + + 판다마켓 + + + + + + + +
+
+
+ + + +
+ + +
+ +
+ + +
+ +
+ +

이미 회원이신가요? 로그인

+
+
+ + diff --git a/src/css/global.css b/src/css/global.css new file mode 100644 index 00000000..8a7df078 --- /dev/null +++ b/src/css/global.css @@ -0,0 +1,131 @@ +:root { + --white: #fff; + --gray900: #1b1d1f; + --gray800: #26282b; + --gray600: #454c53; + --gray500: #72787f; + --gray400: #9ea4a8; + --gray200: #e5e7eb; + --gray100: #e8ebed; + --gray50: #f7f7f8; + --blue: #3692ff; + --skyblue: #cfe5ff; + --red: #f74747; + --deepblue: #1967d6; +} + +body { + overflow-x: hidden; +} + +/* common */ +.inner { + max-width: 1200px; + margin: 0 auto; +} +/* gnb */ +header { + border-bottom: 1px solid var(--gray100); + margin-bottom: 70px; +} +.gnb { + width: 100%; + height: 70px; + display: flex; + justify-content: space-between; + max-width: 1520px; + margin: 0; + align-items: center; + position: fixed; + z-index: 2; + padding: 0 200px; +} + +/* button default style */ +.btn { + display: flex; + justify-content: center; + align-items: center; + background: var(--blue); + color: var(--white); + font-weight: 600; + font-size: 16px; + line-height: 1; + border: 0; +} + +.btn:hover { + background: var(--deepblue); +} + +.btn_small { + width: 128px; + height: 48px; + border-radius: 8px; +} + +.btn_large { + /* width: 360px; */ + width: 100%; + height: 56px; + border-radius: 40px; + font-size: 20px; +} + +/* input default style */ +.input_wrapper { + position: relative; +} +input { + display: block; + background-color: var(--gray100); + border: 0; + width: 100%; + border-radius: 12px; + height: 56px; + margin: 14px 0 24px; + padding: 0 24px; + font-size: 16px; + line-height: 24px; +} + +input:focus { + outline-color: var(--blue); + /* border-color: + border-color:red; */ +} + +input::placeholder { + color: var(--gray400); +} +.btn_visibility { + position: absolute; + top: 16px; + right: 24px; + border: 0; + width: 24px; + height: 24px; + background: none; + cursor: pointer; + padding: 0; +} + +.btn_visibility > img { + position: absolute; + top: 0; + right: 0; +} + +.btn_visibility.open .visibility_open, +.btn_visibility.close .visibility_close { + display: none; + visibility: hidden; +} + +label { + display: block; + font-weight: 700; + font-size: 18px; + line-height: 21.8px; + margin: 24px 0 14px; +} diff --git a/src/css/style.css b/src/css/home.css similarity index 59% rename from src/css/style.css rename to src/css/home.css index 06bda151..4b7a0c08 100644 --- a/src/css/style.css +++ b/src/css/home.css @@ -1,64 +1,24 @@ -:root { - --gray900: #1b1d1f; - --gray800: #26282b; - --gray600: #454c53; - --gray500: #72787f; - --gray400: #9ea4a8; - --gray200: #e5e7eb; - --gray100: #e8ebed; - --gray50: #f7f7f8; - --blue: #3692ff; - --skyblue: #cfe5ff; - --red: #f74747; -} - -body { - overflow-x: hidden; -} - -/* common */ -.inner { - max-width: 1200px; - margin: 0 auto; -} -/* gnb */ -header { - border-bottom: 1px solid var(--gray100); - /* padding: 0 24px; */ - padding: 0 200px; - /* 아니 왜 굳이 200px 씩이나...*/ -} -.gnb { - width: 100%; - height: 70px; - display: flex; - justify-content: space-between; - max-width: 1520px; - margin: 0 auto; - align-items: center; -} - -.kv { +.hero { height: 540px; background: var(--skyblue); position: relative; } -.kv .inner { +.hero .inner { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 32px; } -.kv h1 { +.hero h1 { font-family: Pretendard; font-size: 40px; font-weight: 700; line-height: 56px; text-align: left; } -.kv img { +.hero img { position: absolute; bottom: 0; left: 50%; @@ -66,33 +26,8 @@ header { height: 82.8%; max-height: 447px; } - -.btn { - display: flex; - justify-content: center; - align-items: center; - background: var(--blue); - color: #fff; - font-weight: 600; - font-size: 16px; - line-height: 1; -} - -.btn:hover { - background: #1967d6; -} - -.btn_small { - width: 128px; - height: 48px; - border-radius: 8px; -} - -.btn_large { - width: 360px; - height: 56px; - border-radius: 40px; - font-size: 20px; +.hero .btn_large { + max-width: 360px; } .wrapper > section.inner { @@ -136,19 +71,19 @@ header { letter-spacing: 0.08em; } -.bv { +.banner { background-color: var(--skyblue); height: 540px; margin-top: 140px; position: relative; } -.bv .desc { +.banner .desc { margin: 0; height: 100%; } -.bv img { +.banner img { position: absolute; bottom: 0; left: 50%; diff --git a/src/css/login.css b/src/css/login.css new file mode 100644 index 00000000..1654f83b --- /dev/null +++ b/src/css/login.css @@ -0,0 +1,71 @@ +/* body::after { + content: ''; + width: 1920px; + height: 100vh; + background-image: url('../img/login/desktop.png'); + background-size: 100% auto; + background-position: top center; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + opacity: 0.5; + pointer-events: none; +} */ + +.logo { + width: 396px; + margin: 0 auto; + margin-top: 58px; + margin-bottom: 44px; +} + +.wrapper { + width: 90%; + max-width: 640px; + margin: 0 auto; +} + +.wrapper .btn { + background-color: var(--gray400); +} + +.wrapper .btn:hover { + background-color: var(--blue); +} + +.social_login { + display: flex; + justify-content: space-between; + align-items: center; + margin: 26px 0 24px; + height: 74px; + padding: 10px 23px; + font-weight: 500; + font-size: 16px; + line-height: 24px; + box-sizing: border-box; + border-radius: 8px; + background-color: var(--skyblue); +} + +.social_login ul { + display: flex; + gap: 0 16px; +} + +.social_login ul a { + display: block; +} + +.bottom_text { + text-align: center; + font-weight: 500; + font-size: 15px; + line-height: 18px; + margin: 18px 0; +} +.bottom_text a { + color: var(--blue); + text-decoration: underline; +} diff --git a/src/img/common/logo.png b/src/img/common/logo.png index 1fa247ed..009b97d8 100644 Binary files a/src/img/common/logo.png and b/src/img/common/logo.png differ diff --git a/src/img/common/logo_small.png b/src/img/common/logo_small.png new file mode 100644 index 00000000..1fa247ed Binary files /dev/null and b/src/img/common/logo_small.png differ diff --git a/src/img/login/btn_visibility_close.svg b/src/img/login/btn_visibility_close.svg new file mode 100644 index 00000000..eb97f373 --- /dev/null +++ b/src/img/login/btn_visibility_close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/img/login/btn_visibility_open.svg b/src/img/login/btn_visibility_open.svg new file mode 100644 index 00000000..35a75305 --- /dev/null +++ b/src/img/login/btn_visibility_open.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/login/social_login_google.png b/src/img/login/social_login_google.png new file mode 100644 index 00000000..49852a6b Binary files /dev/null and b/src/img/login/social_login_google.png differ diff --git a/src/img/login/social_login_kakao.png b/src/img/login/social_login_kakao.png new file mode 100644 index 00000000..73a01dd9 Binary files /dev/null and b/src/img/login/social_login_kakao.png differ