├── approach.php ├── Final.css └── new.php /approach.php: -------------------------------------------------------------------------------- 1 | connect_error){ 8 | echo "Connection failed".$conn->connect_error; 9 | } 10 | 11 | ?> 12 | 13 | -------------------------------------------------------------------------------- /Final.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "Poppins", sans-serif; 6 | } 7 | body{ 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: url(https://s39939.pcdn.co/wp-content/uploads/2022/03/iStock-490922474-1024x710.jpg) no-repeat; 13 | background-size: cover; 14 | background-position: center; 15 | } 16 | .wrapper{ 17 | width: 420px; 18 | background: transparent; 19 | border: 2px solid rgba(255, 255, 255, .2); 20 | backdrop-filter: blur(9px); 21 | color: #190c0c; 22 | border-radius: 12px; 23 | padding: 30px 40px; 24 | box-shadow:0 20px 35px rgba(0,0,1,0.9); 25 | } 26 | .wrapper h1{ 27 | font-size: 36px; 28 | text-align: center; 29 | } 30 | .wrapper .input-box{ 31 | position: relative; 32 | width: 100%; 33 | height: 50px; 34 | 35 | margin: 30px 0; 36 | } 37 | .input-box input{ 38 | width: 100%; 39 | height: 100%; 40 | background: transparent; 41 | border: none; 42 | outline: none; 43 | border: 2px solid rgba(255, 255, 255, .2); 44 | border-radius: 40px; 45 | font-size: 16px; 46 | color: #100f0f; 47 | padding: 20px 45px 20px 20px; 48 | } 49 | .input-box input::placeholder{ 50 | color: #111010; 51 | } 52 | .input-box i{ 53 | position: absolute; 54 | right: 20px; 55 | top: 30%; 56 | transform: translate(-50%); 57 | font-size: 20px; 58 | 59 | } 60 | .wrapper .remember-forgot{ 61 | display: flex; 62 | justify-content: space-between; 63 | font-size: 14.5px; 64 | margin: -15px 0 15px; 65 | } 66 | .remember-forgot label input{ 67 | accent-color: #08041e; 68 | margin-right: 3px; 69 | 70 | } 71 | .remember-forgot a{ 72 | color: #131212; 73 | text-decoration: none; 74 | 75 | } 76 | .remember-forgot a:hover{ 77 | text-decoration: underline; 78 | } 79 | .wrapper .btn{ 80 | width: 100%; 81 | height: 45px; 82 | background: #fff; 83 | border: none; 84 | outline: none; 85 | border-radius: 40px; 86 | box-shadow: 0 0 10px rgba(0, 0, 0, .1); 87 | cursor: pointer; 88 | font-size: 16px; 89 | color: #333; 90 | font-weight: 600; 91 | } 92 | .wrapper .register-link{ 93 | font-size: 14.5px; 94 | text-align: center; 95 | margin: 20px 0 15px; 96 | 97 | } 98 | .register-link p a{ 99 | color: #111010; 100 | text-decoration: none; 101 | font-weight: 600; 102 | } 103 | .register-link p a:hover{ 104 | text-decoration: underline; 105 | } -------------------------------------------------------------------------------- /new.php: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | Login Form | Dan Aleko 10 | 11 | 12 | 13 | 14 | 43 | 44 |

45 |

Login

46 | 64 |

65 | 91 | 92 | 93 | 94 | --------------------------------------------------------------------------------

SignUp

Login