diff --git a/Login/SignIn/Assests/APPLE.png b/Login/SignIn/Assests/APPLE.png new file mode 100644 index 0000000..7f671cd Binary files /dev/null and b/Login/SignIn/Assests/APPLE.png differ diff --git a/Login/SignIn/Assests/EMAIL.png b/Login/SignIn/Assests/EMAIL.png new file mode 100644 index 0000000..50e6ac9 Binary files /dev/null and b/Login/SignIn/Assests/EMAIL.png differ diff --git a/Login/SignIn/Assests/PASSWORD.png b/Login/SignIn/Assests/PASSWORD.png new file mode 100644 index 0000000..7a3b1ff Binary files /dev/null and b/Login/SignIn/Assests/PASSWORD.png differ diff --git a/Login/SignIn/Assests/image22.png b/Login/SignIn/Assests/image22.png new file mode 100644 index 0000000..739ec9b Binary files /dev/null and b/Login/SignIn/Assests/image22.png differ diff --git a/Login/SignIn/Signin.css b/Login/SignIn/Signin.css new file mode 100644 index 0000000..ca4c6b4 --- /dev/null +++ b/Login/SignIn/Signin.css @@ -0,0 +1,334 @@ +@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); + +:root { + --primary: #4978F0; + --primary-light: #E1EEF5; + --secondary: #1D1D1D; + --background: #F4F1FF; + --text: #1F2346; +} + +body{ + margin: auto; + font-family: -apple-system, BlinkMacSystemFont, sans-serif; + overflow: auto; + background: linear-gradient(315deg, rgb(252, 208, 158) 3%, rgb(144, 200, 255) 38%, rgb(104, 245, 250) 68%, rgb(45, 151, 250) 98%); + animation: gradient 25s ease infinite; + background-size: 400% 400%; + background-attachment: fixed; +} + +@keyframes gradient { + 0% { + background-position: 0% 0%; + } + 50% { + background-position: 100% 100%; + } + 100% { + background-position: 0% 0%; + } +} + +.wave { + background: rgba(255, 255, 255, 0.25); + border-radius: 1000% 1000% 0 0; + position: fixed; + width: 200%; + height: 12em; + animation: wave 20s -3s linear infinite; + transform: translate3d(0, 0, 0); + opacity: 0.8; + bottom: 0; + left: 0; + z-index: -1; +} + +.wave:nth-of-type(2) { + bottom: -1.25em; + animation: wave 18s linear reverse infinite; + opacity: 0.8; +} + +.wave:nth-of-type(3) { + bottom: -2.5em; + animation: wave 20s -1s reverse infinite; + opacity: 0.9; +} + +@keyframes wave { + 2% { + transform: translateX(1); + } + + 25% { + transform: translateX(-25%); + } + + 50% { + transform: translateX(-50%); + } + + 75% { + transform: translateX(-25%); + } + + 100% { + transform: translateX(1); + } +} + + +body { + font-size: 16px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Mulish; +} + +.socials-row { + display: flex; + gap: 16px; + flex-wrap: wrap; +} + +.socials-row img { + width: 22px; + height: 22px; +} +img.apple { + width: 32px; + height: 32px; +} + +.text-field.lock{ + width:15px; + height:20px; +} + +.socials-row > a { + padding: 8px; + border-radius: 8px; + width: 100%; + min-height: 48px; + display: flex; + gap: 12px; + justify-content: center; + align-items: center; + text-decoration: none; + font-size: 1.1rem; + color: var(--text); + padding: 8px; + border: 1px solid var(--primary-light); + font-weight: 700; +} + +.socials-row > a:hover { + border: 1px solid var(--primary); +} + +.email{ + height: 30px; + width: 40px; + padding-left: -20px; +} + +.lock{ + height: 27px; + width: 27px; +} + +.divider { + display: flex; + flex-direction: row; + color: var(--secondary); + gap: 16px; + align-items: center; +} + +.divider-line { + width: 100%; + height: 1px; + background-color: var(--secondary); + opacity: .2; +} + +.login-wrapper { + position: relative; + display: grid; + grid-template-columns: 4fr 3fr; + max-width: 1200px; + margin: 0 auto; + margin-right: -180px; +} + + +.login-side { + padding: 20px 32px 48px 32px; + display: flex; + justify-content: center; + align-items: start; +} + +.logo { + height: 48px; + position: absolute; + top: 20px; + left: 20px; +} + +.my-form__wrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; + max-width: 460px; + width: 100%; + padding: 48px 32px; + height: fit-content; + box-shadow: + rgba(100, 100, 111, 0.2) + 0px 7px 29px 0px; +} + +.my-form { + display: flex; + flex-direction: column; + justify-content: start; + position: relative; + gap: 16px; +} + +.login-welcome { + height: 80px; + width: 80px; + border-radius: 50%; + object-fit: cover; +} + +.login-welcome-row { + display: flex; + width: 100%; + flex-direction: column; + gap: 8px; +} + +.my-form__button { + background-color: var(--primary); + color: white; + white-space: nowrap; + border: none; + display: flex; + justify-content: center; + align-items: center; + margin-top: 16px; + line-height: 50px; + outline: none; + font-size: 18px; + letter-spacing: .025em; + text-decoration: none; + cursor: pointer; + font-weight: 800; + min-height: 50px; + width: 100%; + border-radius: 8px; + box-shadow: 0 5px 10px rgba(0,0,0,.15); + transition: all .3s ease; + -webkit-transition: all .3s ease; +} + +.my-form__actions { + display: flex; + flex-direction: column; + color: var(--secondary); + gap: 16px; + margin-top: 8px; +} + +.my-form__actions a { + color: var(--secondary); + font-weight: 600; + text-decoration: none; +} + +.my-form__actions a:hover { + text-decoration: underline; +} + +.my-form__row { + display: flex; + justify-content: space-between; +} + +.my-form__signup { + display: flex; + justify-content: center; +} + +.my-form__signup a { + color: var(--primary); + font-weight: 800; + text-decoration: none; + font-size: 18px; +} + +.my-form__signup a:hover { + text-decoration: underline; +} + +.text-field input { + color: var(--secondary); + font-size: 16px; + font-weight: 500; + max-width: 100%; + width: 100%; + border: 1px solid var(--secondary); + height: 50px; + letter-spacing: .03rem; + background-color: transparent; + outline: none; + transition: .25s; + border-radius: 8px; + text-indent: 20px; + margin-top: 8px; +} + +.text-field { + position: relative; +} + +.text-field img { + position: absolute; + right: -2px; + bottom: -4px; + transform: translate(-50%,-50%); + transform-origin: center; +} + +.text-field input:focus { + border: 1px solid var(--primary); +} + +.text-field label { + color: var(--secondary); + font-size: 14px; + font-weight: 600; + letter-spacing: .03rem; + z-index: 10; +} + +@media (max-width: 640px) { + .login-wrapper { + grid-template-columns: 1fr; + height: 100vh; + } + + .info-side { + flex-direction: column-reverse; + padding: 48px 48px 48px 32px; + } +} \ No newline at end of file diff --git a/Login/SignIn/Signin.html b/Login/SignIn/Signin.html new file mode 100644 index 0000000..3ce1a73 --- /dev/null +++ b/Login/SignIn/Signin.html @@ -0,0 +1,88 @@ + + + + + Login Example + + + + +
+
+
+
+
+
+
+ +
+ +
+
+ + Google + Log in with Google + + + Apple + Log in with Apple + +
+
+
+ Or +
+
+
+ + + +
+
+ + + Password Icon +
+ +
+
+ Did you forget your password? + + Reset Password + +
+ +
+
+
+
+ +