<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
body {
    width: 100vw;
    height: 100vh;  /* Make sure the body takes the full height of the viewport */
    background-image: url("https://i.ibb.co/9NcNvGY/Whats-App-Image-2024-04-22-at-12-07-10-bea0a50d.jpg");
    background-size: contain;
    background-repeat:;
    background-size: 200px;

}

* {
    text-decoration: none;
}

.submit {
    background-color: burlywood;
    display: flex;
    align-items: center;
    border-radius: 8px;
    justify-content: center;
    position: relative;
    width: 250px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* Correct syntax */
}

#text-box {
    display: block;
    border-radius: 4px;
    border: none;
    padding: 4px 8px;
}

.form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;  /* Correct syntax */
}

form {
    /* Additional styles for your form, if needed */
}

.image {
    position: absolute;
    top: 0;
    left: 200px;
    height: 200px;
}
.silly-girl {
    width: 200px;
    cursor: pointer;
}

@media only screen and (max-width: 600px) {

.image {
    position: absolute;
    top: 0;
    left: 100pxs;
    height: 200px;
}
   
.silly-girl {
    width: 100px;
    cursor: pointer;

}


body {
    width: 100vw;
    height: 100vh;  /* Make sure the body takes the full height of the viewport */
    background-image: url("https://i.ibb.co/9NcNvGY/Whats-App-Image-2024-04-22-at-12-07-10-bea0a50d.jpg");
    background-size: contain;
    background-repeat:;
    background-size: 100px;

}

}

</style>
<body>


<div class="image">
    <a class="text-anchor" href="https://www.text.is/sachinium" target="_blank">
    <img src="https://i.ibb.co/9NcNvGY/Whats-App-Image-2024-04-22-at-12-07-10-bea0a50d.jpg" class="silly-girl" alt="">
    </a>
</div>
   
<div class="submit">
    <div class="form">
        <form action="index.php"
                    method="post">
                    <label class="label" for="Username">Username:</label>
                <input class="user" type="text" name="username" id="text-box" >
                <br>
                    <label class="label" for="password">Password:</label>
                <input class="pass" type="password" name="password" id="text-box" >
                <br>
                <input class="btn" type="submit">
        </form>
    </div>
</div>

<?php
    ini_set('display_errors', 0);

    echo $_POST["password"];
?>
   
</body>
</html>