I'm facing an issue with the username and password input fields, as well as the login button. These elements are placed on a rectangle within an SVG tag.
The problem seems to be related to the animated background applied to one of the div elements in the body. While the animation runs smoothly, the input fields don't accept text input and the button doesn't respond to clicks. I attempted adjusting the z-index for the input fields and button without success, eventually removing them altogether.
The specific components causing trouble are identified by the IDs: loginButton, usernameInput, and passwordInput.
*{
margin: 0;
padding: 0;
}
.homePage-background{
background: linear-gradient(to left, #8942a8, #ba382f);
width: 100%;
height: 100vh;
z-index: 3;
}
.animation{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.animation li{
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animate 20s linear infinite;
bottom: -150px;
}
.animation li:nth-child(1){
left: 86%;
width: 80px;
height: 80px;
animation-delay: -0s;
}
.animation li:nth-child(2){
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.animation li:nth-child(3){
left: 70%;
width: 70px;
height:70px;
animation-delay: 4s; /*Change this to 5.5 seconds later and see the result*/
}
@keyframes animate{
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
z-index: 2;
}
100%{
transform: translateY(-800px) rotate(360deg);
opacity: 0;
z-index: 2;
}
}
#loginTitle{
position: absolute;
color: #dddddd;
font-weight: bold;
}
#username{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 30%;
margin-left: 20%;
color: #dddddd;
}
#usernameInput{border-radius: 10px;}
#password{
position: absolute;
font-size: large;
font-weight: bold;
margin-top: 55%;
margin-left: 20%;
color: #dddddd;
}
#passwordInput{border-radius: 10px;}
#loginButton{
position: relative;
margin-left: 45%;
margin-top: 65%;
height: 40px;
width: 70px;
z-index: 0;
}
#loginButton:hover{
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="../css/homePage.css" type="text/css">
</head>
<body>
<div class="homePage-background"> <!-- animation area-->
<svg class="container-sm" width="400" height="760" style="position:absolute; margin-left: 35%; margin-top:35px">
<rect id="loginRect" width="50%" height="100%" rx="40px" ry="40px" style="fill: cornflowerblue; stroke: pink; stroke-opacity: 0.0; stroke-width: 3px; "/>
<foreignObject height="760" width="50%">
<label id="username" for="usernameInput">UserName:
<input type="text" id="usernameInput" name="usernameInput" placeholder=" Enter your username ">
</label>
<label id="password" for="passwordInput">Password:
<input type="text" id="passwordInput" name="passwordInput" placeholder=" Enter your password">
</label>
<button type="submit" id='loginButton' value="Login" onclick="window.location.href='https://www.w3schools.com/tags/tag_button.asp';">Login</button>
</foreignObject>
</svg>
<ul class="animation"> <!-- box area-->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>Any suggestions or assistance would be greatly appreciated. Thank you!