Transparent Login Form in HTML and CSS

Hello friends how are you , Today in this post "Transparent Login Form in HTML and CSS " i am going to teach you how you can create a transparent Login form using very simple lines of HTML and CSS code and without JavaScript. If you wan to create a website or something interesting using simple HTML and CSS then this post is for you. 

If you want to understand this through video then watch this video i have explained it step by step live

Now i am going to explain step by step.

Step 1:Create a Folder: Just  create a folder with any name and in any drive in your system, In my case my folder name is MyLogin.

Step 2:Create an HTML file: Now open notepad and type the below code or you can copy this code for your personal use

<html>
    <head>
        <title>Krazyprogrammer</title>
        <style>
            body
            {
                margin: 0;
                background-image: url('bg.jpg');
            }
            .outer
            {
                height: 100%;
                background-color: rgba(0,0,0,0.5);
            }
            .container
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                width: 300px;
                height: 300px;
                text-align: center;
                box-shadow: 1px 1px 15px cyan;
                padding: 10px;
                background-color: rgba(0,0,0,0.3);
            }
            .login
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .container input
            {
                border-radius: 100px;
                color: cyan;
                background-color: rgba(0, 0, 0, 0);
                font-weight: bold;
                margin: 10px;
                padding: 5px;
                width: 200px;
                border: 1px solid cyan;
                letter-spacing: 5px;
                font-family: arial;
                text-align: center;
                transition: 1.5s;
            }
        </style>
    </head>
    <body>
        <div class="outer">
         <div class="container">
            <div class="login">
                 <div>
                     <img src="login.png" style="width: 30%;margin-bottom: 30px;border-radius: 100px;box-shadow: 1px 1px 10px cyan;">
                 </div>
                 <div>
                     <input type="text" placeholder="USERNAME">
                 </div>
                 <div>
                    <input type="password" placeholder="PASSWORD">
                </div>
                <div>
                    <input type="submit" value="LOGIN">
                </div>
            </div>
         </div>
        </div>
    </body>
</html>

Now save this file with name login.html inside the created folder [MyLogin]. Note:Don't forget to type .html after the file name because .html is the extension for HTML file.

Step 3:Download and store images: I have used two images here in which one image for background and other for login icon. click here to download background image that i have used. If you want to use your own image then you can also use. For icon image for login you can create or download any image from google that you want to show in login page.


After doing these your created folder will look like below.

Transparent Login Form in HTML and CSS

Here the name of background image is bg.jpg and resolution is 1920x1280 and name of icon image is login.png and resolution is 200x200.

Step 4:Run HTML file: Now its time to run HTML file so right click on login.html file and then select open with and then select chrome browser or you can select any browser for output. 

Transparent Login Form in HTML and CSS

You will get output screen like below screenshot.

Transparent Login Form in HTML and CSS


I hope now you can  create "Transparent Login Form in HTML and CSS ". If you have any doubt regarding this post  or you want something more in this post then let me know by comment below i will work on it definitely.
 

Request:-If you found this post helpful then let me know by your comment and share it with your friend. 
 
If you want to ask a question or want to suggest then type your question or suggestion in comment box so that we could do something new for you all. 

If you have not subscribed my website then please subscribe my website. Try to learn something new and teach something new to other. 

If you like my post then share it with your friends. Thanks😊Happy Coding.



Post a Comment

2 Comments

  1. When the banker loses a coup, the proper 원 엑스 벳 to be banker is obtainable to the following player in rotation. Once all players have positioned a wager the vendor will then deal 2 playing cards to the Player hand and a couple of|and a pair of} playing cards to the Banker hand. It must be stressed that only a single Player hand is dealt no matter what number of} players there are on the table.

    ReplyDelete
  2. The sheets are then milled in a CNC machine to form the object’s form. Another form of Powder Bed Fusion, MJF makes use of a sweeping arm to deposit powder and an inkjet-equipped arm to apply binder selectively on prime. Next, a detailing agent is applied around the detailing agent for precision. Direct Metal Laser Sintering additionally utilizes this same course of but with metallic powder vibrating panties amazon specifically.

    ReplyDelete