Design Transparent Login Form in HTML & CSS - Html Login Page Design

Design Transparent Login Form in HTML & CSS - Html Login Page Design - Login form Design Source Code

In this tutorial we will learn how to create beautiful sign in form in html and css.
we will need
1. A background image (.jpg, .png)
2. A user icon image
3. Any text editor
4. passion to learn and a cup of coffee :)
So lets get to work
1. Create a folder and place the images mentioned at no 1 and 2.
2. Now open your favourite text editor (I am using Sublime text) and type following html code

3. save it at the folder of images you just created with index.html
4. Now create a new file and type the css code and save it in same folder as style.css

body { margin: 0; padding: 0; background: url(Nature.jpg); background-size: cover; font-family: sans-serif;}
.loginBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 350px; height: 420px; padding: 80px 40px; box-sizing: border-box; background: rgba(0,0,0,.5); }.user { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; position: absolute; top: calc(-100px/2); left: calc(50% - 50px)
}h2 { margin: 0; padding: 0 0 20px; color: #efed40; text-align: center; }.loginBox p { margin: 0; padding: 0; font-weight: bold; color: #fff;}.loginBox input { width: 100%; margin-bottom: 20px; }.loginBox input[type="text"],.loginBox input[type="password"]{ border: none; border-bottom: 1px; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px;}::placeholder { color: rgba(255, 255, 255, .5);}.loginBox input[type="submit"] { border: none; outline: none; height: 40px; color: #fff; font-size: 16px; background: #ff26ff; cursor: pointer; border-radius: 25px;}.loginBox a { color: #fff; font-size: 14px; font-weight: bold; text-decoration: none;}

You are done. open the index.html file and wallla!!!
See the video for how it looks

Thanks for reading and watching.

Like and subscribe to my YouTube Channel HomeTech for more interesting videos