-
Notifications
You must be signed in to change notification settings - Fork 601
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into loginPageAndFeedbackPage
- Loading branch information
Showing
7 changed files
with
824 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,161 @@ | ||
| @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap"); | ||
| @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); | ||
|
|
||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| font-family: "Roboto", sans-serif; | ||
| font-weight: 500; | ||
| font-style: normal; | ||
| } | ||
| .main-container { | ||
| min-height: 100vh; | ||
| min-width: 100vw; | ||
| background-image: url("./img/img1.jpeg"); | ||
| background-position: center; | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .form-container { | ||
| display: flex; | ||
| gap: 2rem; | ||
| justify-content: center; | ||
| align-items: center; | ||
| color: white; | ||
| backdrop-filter: blur(8px); | ||
| padding: 2rem 1rem; | ||
| background-color: rgba(44, 57, 104, 0.2); | ||
| border-radius: 20px; | ||
| } | ||
| .content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 2rem; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 2rem 0; | ||
| font-weight: 600; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| .content h1 { | ||
| font-weight: 700; | ||
| font-size: 3rem; | ||
| text-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618; | ||
| text-align: center; | ||
| position: relative; | ||
| } | ||
| .content p { | ||
| width: 100%; | ||
| font-size: 1.5rem; | ||
| color: white; | ||
| opacity: 1; | ||
| font-weight: 600; | ||
| text-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618; | ||
| text-align: center; | ||
| } | ||
| text{ | ||
| color:aquamarine | ||
| } | ||
| .register-link { | ||
| font-weight: bold; | ||
| color: white; | ||
| text-decoration: none; | ||
| transition: color 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .register-link:hover { | ||
| color: #f39c12; /* Change to your desired hover color */ | ||
| } | ||
| .passForget{ | ||
| color: rgb(234, 35, 35); | ||
| font-weight: bold; | ||
|
|
||
|
|
||
| } | ||
|
|
||
| .content button { | ||
| font-size: 1.5rem; | ||
| padding: 1rem 2rem; | ||
| border-radius: 0.5rem; | ||
| border: none; | ||
| background: linear-gradient( | ||
| 109.6deg, | ||
| rgb(5, 85, 84) 11.2%, | ||
| rgb(64, 224, 208) 91.1% | ||
| ); | ||
| color: white; | ||
| font-weight: 700; | ||
| box-shadow: 0px 0px 10px rgb(10, 64, 88); | ||
| transition: all 0.2s ease-in-out; | ||
| letter-spacing: 1.1px; | ||
| } | ||
|
|
||
| .content button:hover { | ||
| transform: scale(1.02); | ||
| box-shadow: 0px 0px 10px rgb(10, 64, 88), 0px 0px 20px rgb(10, 64, 88), | ||
| 0px 0px 30px rgb(10, 64, 88); | ||
| transition: all 0.2s ease-in-out; | ||
| } | ||
| form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| form > input { | ||
| font-size: 1.3rem; | ||
| padding: 0.5rem 0.5rem; | ||
| width: 20rem; | ||
| background: transparent; | ||
| border: 2px solid white; | ||
| border-radius: 6px; | ||
| color: white; | ||
| transition: outline 0.2s ease-in-out; | ||
| outline: none; | ||
| } | ||
|
|
||
| form > input::placeholder { | ||
| color: white; | ||
| } | ||
|
|
||
| form > input:focus { | ||
| outline: 3px solid #010618; | ||
| transition: outline 0.2s ease-in-out; | ||
| border: none; | ||
| } | ||
|
|
||
| @media screen and (max-width: 815px) { | ||
| .form-container { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .content { | ||
| box-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618; | ||
| padding: 2rem 0rem; | ||
| border-radius: 10px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 510px) { | ||
| .content h1 { | ||
| font-size: 2rem; | ||
| } | ||
|
|
||
| .content p { | ||
| width: 50%; | ||
| } | ||
| } | ||
| form>input { | ||
| font-size: 1rem; | ||
| padding: 0.5rem 0.5rem; | ||
| width: 14rem; | ||
| background: transparent; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Login Page</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" | ||
| integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" | ||
| crossorigin="anonymous" referrerpolicy="no-referrer" /> | ||
| <link rel="icon" | ||
| href="img/A T logo with a white background and a square shape, connected to nature for a travel company.png" | ||
| type="image/x-icon" /> | ||
| <link rel="stylesheet" href="./loginPage.css"> | ||
| </head> | ||
| <body> | ||
| <div class="main-container"> | ||
| <div class="form-container"> | ||
| <div class="content"> | ||
| <h1>Welcome Back !</h1> | ||
| <p>Login with your personal information.</p> | ||
| <form action=""> | ||
| <input type="email" name="" id="" placeholder="Email"> | ||
| <input type="password" name="" id="" placeholder="Password"> | ||
| <button type="submit" >Login</button> | ||
| </form> | ||
| <div class="passForget">Forgot your password?</div> | ||
| <text>Don't have an account? <a href="registerPage.html" class="register-link">Please Register here.<a></a></text> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.