Here's a responsive HTML/CSS/JS code snippet for a straightforward single-page application for online banking:
HTML:
```html
Online Banking
```
CSS (style.css):
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
.container {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 10px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
display: block;
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#message {
margin-top: 10px;
text-align: center;
font-weight: bold;
}
```
JavaScript (script.js):
```javascript
function login() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username === 'admin' && password === 'password') {
document.getElementById('message').innerHTML = 'Login successful';
} else {
document.getElementById('message').innerHTML = 'Invalid username or password';
}
}
```
This code snippet creates a simple login form for online banking. When the user enters a username and password and clicks on the "Login" button, the JavaScript function `login()` is called. It checks if the provided username and password are valid and displays a success message or an error message accordingly. The CSS styles define the layout and appearance of the form.