diff --git a/global.css b/global.css index 0b5b1cb3..f0a80518 100644 --- a/global.css +++ b/global.css @@ -1,7 +1,19 @@ +:root { + --gray900: #111827; + --gray800: #1f2937; + --gray700: #374151; + --gray600: #4b5563; + --gray500: #6b7280; + --gray400: #9ca3af; + --gray300: #e5e7eb; + --gray200: #f3f4f6; + --gray100: #f9fafb; + + --primary-color: #3692ff; +} + body { font-family: "Pretendard-Regular", Arial, Helvetica, sans-serif; padding: 0; margin: 0; } - - diff --git a/image/Component 2.png b/image/Component 2.png new file mode 100644 index 00000000..f75dc761 Binary files /dev/null and b/image/Component 2.png differ diff --git a/image/Component 3.png b/image/Component 3.png new file mode 100644 index 00000000..bd767800 Binary files /dev/null and b/image/Component 3.png differ diff --git a/image/btn_visibility_off_24px.png b/image/btn_visibility_off_24px.png new file mode 100644 index 00000000..5dc09fbe Binary files /dev/null and b/image/btn_visibility_off_24px.png differ diff --git a/image/logo_big.png b/image/logo_big.png new file mode 100644 index 00000000..8248f602 Binary files /dev/null and b/image/logo_big.png differ diff --git a/index.html b/index.html index 312e5bd6..e5731775 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ 판다마켓 로고 - + diff --git a/login.css b/login.css new file mode 100644 index 00000000..f8e78d79 --- /dev/null +++ b/login.css @@ -0,0 +1,94 @@ +#wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +header { + margin-top: 231px; +} + +main { + display: flex; + flex-direction: column; + gap: 24px; +} + +form, +label { + width: 640px; + display: flex; + flex-direction: column; + gap: 16px; +} + +label { + font-weight: 700; +} + +input { + height: 36px; + background-color: var(--gray100); + border: 0; + border-radius: 12px; + padding: 10px 24px; + font-size: 16px; + flex-grow: 1; +} + +form button { + padding: 16px 0px; + border: 0; + border-radius: 40px; + background-color: var(--primary-color); + color: #fff; + font-size: 20px; + font-weight: 600; + cursor: pointer; +} + +.password-container { + display: inline-flex; + position: relative; +} + +.password-container>button { + position: absolute; + background-color: transparent; + right: 20px; + top: 0px; + z-index: 1; +} + +.easy-login-container { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #e6f2ff; + border-radius: 8px; + padding: 16px 23px; + font-size: 16px; + font-weight: 500; +} + +.easy-login-icon { + display: flex; + gap: 16px; +} + +.easy-login-icon>button { + background-color: transparent; + border: 0; + padding: 0; + margin: 0; + cursor: pointer; +} + +footer { + margin-top: 16px; +} + +footer>a { + color: var(--primary-color); +} diff --git a/login.html b/login.html index e69de29b..61ef68e6 100644 --- a/login.html +++ b/login.html @@ -0,0 +1,56 @@ + + + + + + + + + 판다마켓 + + + +
+
+ + 판다마켓 로고 + +
+
+
+
+ + + +
+
+ +
+ +
+ + + diff --git a/signup.html b/signup.html new file mode 100644 index 00000000..17d4b1ec --- /dev/null +++ b/signup.html @@ -0,0 +1,69 @@ + + + + + + + + + 판다마켓 + + + +
+
+ + 판다마켓 로고 + +
+
+
+
+ + + + + +
+
+ +
+ +
+ + + + diff --git a/style.css b/style.css index 73147281..6a7c2895 100644 --- a/style.css +++ b/style.css @@ -3,16 +3,15 @@ src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff"); } -:root { - --primary-color: #3692ff; -} - header { background-color: #fff; + width: 100%; height: 70px; padding: 9px; display: flex; justify-content: center; + position: fixed; + top: 0; } header img {