diff --git a/login and sign up Foodie/dist/Screenshot (804).png b/login and sign up Foodie/dist/Screenshot (804).png new file mode 100644 index 0000000..fc59252 Binary files /dev/null and b/login and sign up Foodie/dist/Screenshot (804).png differ diff --git a/login and sign up Foodie/dist/index.html b/login and sign up Foodie/dist/index.html new file mode 100644 index 0000000..e2fab83 --- /dev/null +++ b/login and sign up Foodie/dist/index.html @@ -0,0 +1,66 @@ + + + + + FoodiesWeb + + + + + +
+ +

FoodiesWeb

+
+ + +
+
+
+

Create Account

+ + or use your email for registration + + + + +
+
+
+
+

Sign in

+ + or use your account + + + Forgot your password? + +
+
+
+
+
+

Welcome Back!

+

To keep connected with us please login with your personal info

+ +
+
+

Hello, Customer!

+

Enter your personal details and start journey with us

+ +
+
+
+
+ + + + diff --git a/login and sign up Foodie/dist/script.js b/login and sign up Foodie/dist/script.js new file mode 100644 index 0000000..ee5c567 --- /dev/null +++ b/login and sign up Foodie/dist/script.js @@ -0,0 +1,11 @@ +const signUpButton = document.getElementById('signUp'); +const signInButton = document.getElementById('signIn'); +const container = document.getElementById('container'); + +signUpButton.addEventListener('click', () => { + container.classList.add("right-panel-active"); +}); + +signInButton.addEventListener('click', () => { + container.classList.remove("right-panel-active"); +}); \ No newline at end of file diff --git a/login and sign up Foodie/dist/style.css b/login and sign up Foodie/dist/style.css new file mode 100644 index 0000000..3e85258 --- /dev/null +++ b/login and sign up Foodie/dist/style.css @@ -0,0 +1,246 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); + +* { + box-sizing: border-box; +} + +body { + background: #f6f5f7; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: 'Montserrat', sans-serif; + height: 100vh; + margin: -20px 0 50px; +} +.header { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +.logo { + height: 50px; /* Adjust the height as needed */ + margin-right: 15px; +} + +.header h1 { + font-family: 'Riona Sans', italic; + font-weight: bold; + font-size: 24px; /* Adjust the size as needed */ + margin: 0; + color: blue; /* Matching the color theme */ +} + + +h1 { + font-weight: bold; + margin: 0; +} + +h2 { + text-align: center; +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; +} + +span { + font-size: 12px; +} + +a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; +} + +button { + border-radius: 20px; + border: 1px solid rgb(35, 110, 222); + background-color: rgb(35, 110, 222); + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; +} + +button:active { + transform: scale(0.95); +} + +button:focus { + outline: none; +} + +button.ghost { + background-color: transparent; + border-color: #FFFFFF; +} + +form { + background-color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: #eee; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} + +.container { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 14px 28px rgba(0,0,0,0.25), + 0 10px 10px rgba(0,0,0,0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 480px; +} + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.sign-in-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .sign-in-container { + transform: translateX(100%); +} + +.sign-up-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.right-panel-active .sign-up-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + 0%, 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container{ + transform: translateX(-100%); +} + +.overlay { + background:navy; + background: -webkit-linear-gradient(to right, navy,navy); + background: linear-gradient(to right, navy, navy); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: rgb(234, 228, 228); + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay-left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay-left { + transform: translateX(0); +} + +.overlay-right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay-right { + transform: translateX(20%); +} + +.social-container { + margin: 20px 0; +} + +.social-container a { + border: 1px solid #DDDDDD; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; + height: 40px; + width: 40px; +} \ No newline at end of file