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.



Foget Password?

  <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    background-image: url('/images/flower.jpg');
    background-position-x: center;
    background-size: cover;
    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;
    background-color: rgba(223, 210, 227, 0.9);
    border-radius: 25px;
    opacity: 0.9;
    margin-left: 30%;
    margin-right: 30%;
    text-align: center;
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 ;
    background-color: #c120ac;   
         width: 30%;  
         border-radius: 20px;
          color: black;   
          padding: 15px;   
          margin: 10px 0px;   
          border: none;   
          cursor: pointer;
    opacity: 0.7;
    <h2 class="txt">
    <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>


 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.


Post a Comment

Codecademy Code Foundations

Popular Posts


Android (23) AngularJS (1) Assembly Language (2) Books (10) C (75) C# (12) C++ (81) Course (1) Data Strucures (4) Downloads (1) Engineering (13) flutter (1) FPL (17) Hadoop (1) HTML&CSS (40) IS (25) Java (89) Leet Code (4) Pandas (1) PHP (20) Projects (19) Python (423) R (69) Selenium Webdriver (2) Software (14) SQL (27)