
The Login form is used to authenticate the user credentials to access the profile or the admin module on the websites. The Transparent login form using html and css contains 2 Textbox named as username, password, and 1 submit button. Once the user can enter the user credentials and click on the submit button authentication has been done and the user can access his profile or admin module.
Index.html – Create index.html and paste the HTML code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Free download Transparent login form using html and css</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Transparent login form using html and css" /> <meta name="keywords" content="Transparent login form, login form, HTML, CSS, Background Blur, login form using html and css, Avatar Icon, Login with Facebook and Google" /> <meta name="author" content="HTMLCSS3TUTORIALS" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div class="blur"></div> <div class="formContent blur"> <img src="images/avtar.jpg" class="avatarImg"> <h2>Login Form</h2> <form> <label>Email</label> <input type="email" name="email" placeholder="Enter Email" required> <label>Password</label> <input type="password" name="password" placeholder="Enter Password" required> <input type="submit" name="submit" value="Login"> <div class="remember"> <div class="login"><div class="Oroption">OR</div></div> <div>Login with Facebook and Google</div> <div class="links"> <div class="facebook"><img src="images/facebook.png" alt="Facebook Icon" /> </div> <div class="google"> <img src="images/google.png" alt="Facebook Icon" /> </div> </div> <div class="signup"> Don't have account? <a href="#">Signup Now</a> </div> </div> </form> </div> </body> </html> |
style.css : Put the below CSS code in style.css file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 |
@font-face { font-family: 'Muli Regular'; font-style: normal; font-weight: normal; src: local('Muli Regular'), url('Muli-Regular.woff') format('woff'); } @font-face { font-family: 'Muli Bold'; font-style: normal; font-weight: normal; src: local('Muli Bold'), url('Muli-Bold.woff') format('woff'); } @font-face { font-family: 'Muli ExtraBold'; font-style: normal; font-weight: normal; src: local('Muli ExtraBold'), url('Muli-ExtraBold.woff') format('woff'); } body { margin: 0; padding: 0; font-family: "Muli Regular"; } body:before { content: ''; position: fixed; width: 100vw; height: 100vh; background-image: url("../images/background.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; font-family: "Muli Regular"; } .blur { background: rgb(0 0 0 / 20%); backdrop-filter: blur(6px); height: 100vh; width: 100%; } .formContent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 550px; padding: 80px 40px; box-sizing: border-box; background: rgb(255 255 255 / 11%); box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75); border-radius: 10px; } .avatarImg { position: absolute; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; top: calc(-80px/2); left: calc(50% - 40px); } .formContent h2 { margin: 0; padding: 0 0 20px; color: #fff; text-align: center; text-transform: uppercase; font-family: "Muli Bold"; } .formContent label { margin: 0; padding: 0; font-weight: bold; color: #fff; } .formContent input { width: 100%; margin-bottom: 20px; } .formContent input[type="text"], .formContent input[type="password"], .formContent input[type="email"] { border: none; border-bottom: 1px solid #fff; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px; } .formContent input[type="submit"] { color: #000; font-size: 16px; background: #e8e8e8; cursor: pointer; border-radius: 5px; border: 1px solid #000; outline: none; margin-top: 5px; padding: 10px 10px 10px 10px; } .formContent input[type="submit"]:hover { color: #fff; background: #104e99; } .formContent a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; } input[type="checkbox"] { width: 6%; } .remember span { color: #fff; font-family: 'Muli Regular', "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif" } .remember span a { color: #fff; font-family: 'Muli Regular', "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif" } .login { color: #fff; text-align: center; margin: 20px 0; font-family: 'Muli Regular', sans-serif; } .Oroption:before { content: ""; display: block; width: 115px; height: 1px; background: #e8e8e8; left: 0; position: absolute; left: 15%; margin-top: 10px; } .Oroption:after { content: ""; display: block; width: 115px; height: 1px; background: #e8e8e8; right: 58px; /* top: 50%; */ position: absolute; margin-top: -10px; } .links { display: flex; cursor: pointer; color: white; margin: 0 0 20px 0; } .facebook { width: 80%; height: 31px; line-height: 45px; border: 1px solid #1f89d4; border-radius: 5px; } .google { width: 80%; height: 31px; line-height: 45px; margin-left: 10px; border: 1px solid #fb5859; border-radius: 5px; } .facebook img, .google img { width: 100%; } .links i { font-size: 17px; } i span { margin-left: 8px; font-weight: 500; letter-spacing: 1px; font-size: 16px; font-family: 'Muli Regular', sans-serif; } .signup { font-size: 15px; color: white; font-family: 'Muli Regular', sans-serif; text-align: center; } .signup a { color: #387aff; text-decoration: none; } |