Только половина текста работает как кликабельная ссылка. ⇐ Html

[Anonymous]

Недавно я создал веб-сайт для входа в систему и впервые использовал JavaScript, и все работает отлично, за исключением одной крошечной детали. "Забыли пароль?" Работает только для половины текста. Для другой половины это не так. Я понятия не имею, почему это происходит. В любом случае, это мой вопрос: «Почему половина текста не работает как кликабельная ссылка? И как я могу это исправить, не искажая другие части веб-сайта.
Код также на GitHub

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function() {
const loginBtn = document.querySelector(".loginbtn");
const emailInput = document.querySelector(".email");
const passInput = document.querySelector(".pass");
const userAlert = document.querySelector(".userpass");
const passAlert = document.querySelector(".alertpass");

loginBtn.addEventListener("click", function() {
let showUserAlert = false;
let showPassAlert = false;

// check empty fields
if (emailInput.value.trim() === "") {
showUserAlert = true;
} else if (passInput.value.trim() === "") {
showPassAlert = true;
}

// show the proper alerts
if (showUserAlert) {
userAlert.style.opacity = "1";
setTimeout(() => (userAlert.style.opacity = "0"), 3000);
}
if (showPassAlert) {
passAlert.style.opacity = "1";
setTimeout(() =>  (passAlert.style.opacity = "0"), 3000);
}
});
});

Код: Выделить всё

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #1abc9c;
font-family: Arial, sans-serif;

}

.login {
width: 360px;
height: 400px;
background-color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
}

.top {
flex: 1;
background-color: #16a085;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}

.bottom {
flex: 3;
}

.icon {
background-color: #16a085;
font-size: 20px;
height: 45px;
width: 45px;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
position: relative;
left: 30px;
top: 30px;
z-index: 1;
}

.email {
height: 40px;
width: 240px;
position: relative;
left: 65px;
top: -15px;
display: flex;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 2px solid #ccc;
padding-left: 20px;
}

.email:focus {
outline: none;
border-color: #16a085;
}

.pass {
height: 40px;
width: 240px;
position: relative;
left: 65px;
top: -45px;
display: flex;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 2px solid #ccc;
padding-left: 20px;
}

.pass:focus {
outline: none;
border-color: #16a085;
}

.icon2 {
background-color: #16a085;
font-size: 20px;
height: 45px;
width: 45px;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
position: relative;
left: 30px;
top: 0px;
z-index: 1;
}

.Link {
position: relative;
left: 30px;
top: -30px;
font-size: 14px;
color: #16a085;
cursor: pointer;
text-decoration: none;
display: block;
}

.forgot:hover {
text-decoration: underline;
}

.loginbtn {
height: 40px;
width: 260px;
background-color: #16a085;
color: white;
border: none;
border-radius: 5px;
position: relative;
left: 50px;
top: -10px;
cursor: pointer;
font-size: 16px;
margin-left: auto;
margin-right: auto;
}

.loginbtn:hover {
background-color: #138d75;
}

.alertpass {
position: relative;
bottom: 94px;
left: 80px;
height: 40px;
width: 200px;
font-size: 12px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
border: 1px solid black;
opacity: 0;
transition: opacity 0.5s ease;
}

.alertpass:after {
position: absolute;
transform: translateY(-30px) translateX(-50px);
border: 11px solid transparent;
border-bottom: 11px solid white;
content: "";
box-sizing: border-box;
}

.alertpass:before {
position: absolute;
transform: translateY(-31px) translateX(-50px);
border: 11px solid transparent;
border-bottom: 11px solid black;
content: "";
box-sizing: border-box;
}

.userpass {
position: relative;
bottom: 196px;
left: 80px;
height: 40px;
width: 250px;
font-size: 12px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);
border: 1px solid black;
opacity: 0;
transition: opacity 0.5s ease;
}

.userpass:after {
position: absolute;
transform: translateY(-30px) translateX(-50px);
border: 11px solid transparent;
border-bottom: 11px solid white;
content: "";
box-sizing: border-box;
}

.userpass:before {
position: absolute;
transform: translateY(-31px) translateX(-50px);
border:  11px solid transparent;
border-bottom: 11px solid black;
content: "";
box-sizing: border-box;
}

.Link2 {
color: #1abc9c;
text-decoration: none;
}

.Link2:hover {
text-decoration: underline;
}

.Link:hover {
text-decoration: underline;
}

.final {
position: relative;
bottom: 55px;
left: 78px;
}

Код: Выделить всё

Login on your account



[i][/i]

[i]



[/i]

[i]

[url=#]Forgot Password?[/url]
Login


[/i]
Please enter a valid password.

[i][/i]
Please enter a valid User ID or Email

Not a Member?
[url=#]Signup Now[/url]

Подробнее здесь: https://stackoverflow.com/questions/797 ... kable-link