Wednesday, 22 March 2023

Creating a LOG IN form by taking image in background

Piyush March 22, 2023 HTML&CSS No comments

In this we are going to make a Log_In form in which login filling options will be in a transparent box. And you can add your own background image also.

Note*:- TO change the background go inside the style tag. Inside style tag go to the body and in background-image change the address of the url , give the address of the image which you want to keep in your background. Now,your image will be display on background.

CODE:- LOG_IN_FORM

LOG IN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOG_IN_FORM</title>
    <style>
body{
    background-image: url('/images/flower.jpg');
    background-position-x: center;
    background-size: cover;
}
.container{
    text-align: center;
    padding: 28px ;
    margin-left: 30%;
    margin-right: 30%;
    background-color: rgb(238, 192, 234);
    border-radius: 20px;
    display: block;
    box-shadow: 0 15px 20px rgba(0,0,0,.2);
    opacity: 0.8;
}
.txt{
    background-color: rgba(223, 210, 227, 0.9);
    border-radius: 25px;
    opacity: 0.9;
    margin-left: 30%;
    margin-right: 30%;
    text-align: center;
    font-family:cursive;
    font-size:xx-large;

}
input[type=text] , input[type=password]
{
    width: 350px;
    margin: 8px 0;
    padding: 12px 20px;
    display: inline-block ;
    border: 2px solid skyblue;
    border-radius: 9px;
    box-sizing: border-box ;

}
button{
    background-color: #c120ac;
         width: 30%;
         border-radius: 20px;
          color: black;
          padding: 15px;
          margin: 10px 0px;
          border: none;
          cursor: pointer;
}
button:hover{
    opacity: 0.7;
}
    </style>
</head>
<body>
    <h2 class="txt">
LOG IN
    </h2>
    <form action="login.php">
        <div class="container">
            <label>Username</label> <br>
            <input type="text" name="username" placeholder="Enter Your Username" required> <br>
            <label >Password</label> <br>
            <input type="password" name="password" placeholder="Enter Your Password" required> <br>
            <button type="submit">LOG IN</button>
            <button type="reset">SIGN UP</button> <br>
            <a href="#">Foget Password?</a>

        </div>
    </form>
</body>
</html>

OUTPUT:-The image in background is what I have selected in background you can choose your own it will be displayed like this only and you can change the colour of the box also inside the style tag in .txt and .container.