Create A Webpage With Algorithm And Join Now Buttons Active
Create A Webpage With Aloginandjoin Nowbuttons Activewith The Links I
Create a webpage with a login and join now buttons active. With the links in the sample picture ie. Other links don’t have to be active ONLY THE LOGIN and JOIN NOW BUTTON SHOULD BE ACTIVE When you enter a wrong user name or password it should have a warning Background image Sample USE DREAMWEAVER I NEED THE CODE AND THE PAGE THE FILES
Paper For Above instruction
body {
font-family: Arial, sans-serif;
background-image: url('sample-background.jpg');
background-size: cover;
margin: 0;
padding: 0;
}
.container {
width: 400px;
margin: 50px auto;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="password"] {
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.buttons {
display: flex;
justify-content: space-between;
}
.buttons a {
padding: 10px 20px;
text-decoration: none;
color: white;
border-radius: 4px;
font-weight: bold;
}
.login-btn {
background-color: #4CAF50;
}
.join-btn {
background-color: #008CBA;
}
/ Styles for inactive links if needed, but only the active ones are styled above /
.link {
opacity: 0.6;
pointer-events: none;
}
/ Warning message style /
.warning {
color: red;
font-weight: bold;
margin-top: 10px;
display: none;
text-align: center;
}
Login to Your Account
// Sample valid credentials
const validUsername = "user123";
const validPassword = "pass123";
const loginButton = document.getElementById('loginButton');
const joinButton = document.getElementById('joinButton');
const warningMessage = document.getElementById('warningMessage');
// Attach event listener to login button
loginButton.addEventListener('click', function(event) {
event.preventDefault(); // Prevent default link behavior
// Get input values
const usernameInput = document.getElementById('username').value;
const passwordInput = document.getElementById('password').value;
// Check credentials
if (usernameInput === validUsername && passwordInput === validPassword) {
// Simulate redirect to a logged-in page
window.location.href = 'dashboard.html';
} else {
// Show warning
warningMessage.style.display = 'block';
// Optional: focus or clear inputs
}
});
// The "Join Now" button is always active, goes to 'join.html' directly
// No need for special handling unless you want to validate on join page