Wednesday 22 March 2023

Creating a LOG IN form by taking image in background

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






Foget Password?
 

  <!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.

0 Comments:

Post a Comment

Popular Posts

Categories

AI (27) Android (24) AngularJS (1) Assembly Language (2) aws (17) Azure (7) BI (10) book (4) Books (112) C (77) C# (12) C++ (82) Course (60) Coursera (176) coursewra (1) Cybersecurity (22) data management (11) Data Science (85) Data Strucures (6) Deep Learning (9) Django (6) Downloads (3) edx (2) Engineering (14) Excel (13) Factorial (1) Finance (5) flutter (1) FPL (17) Google (18) Hadoop (3) HTML&CSS (46) IBM (25) IoT (1) IS (25) Java (92) Leet Code (4) Machine Learning (43) Meta (18) MICHIGAN (4) microsoft (3) Pandas (3) PHP (20) Projects (29) Python (719) Python Coding Challenge (155) Questions (2) R (70) React (6) Scripting (1) security (3) Selenium Webdriver (2) Software (17) SQL (40) UX Research (1) web application (8)

Followers

Person climbing a staircase. Learn Data Science from Scratch: online program with 21 courses