WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bilhete de Identidade de Angola</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="login.html">Login</a></li> <li><a href="register.html">Registrar</a></li> </ul> </nav> </header> <main> <section id="home"> <h1>Bem-vindo ao Sistema de Bilhete de Identidade de Angola</h1> <p>Informacoes sobre o Bilhete de Identidade de Angola e suas funcionalidades.</p> </section> </main> <script src="scripts.js"></script> </body> </html>
body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; color: #333; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 20px; } .gallery-item { overflow: hidden; position: relative; } .gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .gallery-item img:hover { transform: scale(1.1); /* Efeito de zoom na imagem */ } header { background-color: goldenrod; /* Cor de fundo do cabeçalho */ padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; } .logo { width: 50px; margin-right: 20px; } nav ul { list-style-type: none; padding: 0; margin: 0; display: flex; } nav ul li { margin-right: 15px; } nav ul li a { color: white; /* Cor do texto do menu */ text-decoration: none; font-weight: bold; } nav ul li a:hover { text-decoration: underline; } main { padding: 20px; text-align: center; } .login-container, .register-container { background-color: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; margin: 0 auto; padding: 20px; } h1 { color: goldenrod; /* Cor dos títulos */ margin-bottom: 20px; } label { display: block; margin-bottom: 5px; text-align: left; } input[type="text"], input[type="password"], input[type="date"], input[type="email"] { width: calc(100% - 20px); padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #ccc; } button { width: 100%; padding: 10px; border: none; border-radius: 4px; background-color: goldenrod; /* Cor dos botões */ color: white; font-size: 16px; cursor: pointer; } button:hover { background-color: #daa520; /* Efeito hover dos botões */ } p { margin-top: 15px; } a { color: goldenrod; /* Cor dos links */ text-decoration: none; } a:hover { text-decoration: underline; }
document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); const validUsername = 'usuario'; const validPassword = 'senha123'; const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username === validUsername && password === validPassword) { alert('Login bem-sucedido!'); window.location.href = 'cadastros.html'; // Redireciona para a página de cadastros } else { alert('Usuário ou senha incorretos!'); } });
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bilhete de Identidade de Angola</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="login.html">Login</a></li> <li><a href="register.html">Registrar</a></li> </ul> </nav> </header> <main> <section id="home"> <h1>Bem-vindo ao Sistema de Bilhete de Identidade de Angola</h1> <p>Informacoes sobre o Bilhete de Identidade de Angola e suas funcionalidades.</p> </section> </main> <script src="scripts.js"></script> </body> </html>
body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; color: #333; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 20px; } .gallery-item { overflow: hidden; position: relative; } .gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; } .gallery-item img:hover { transform: scale(1.1); /* Efeito de zoom na imagem */ } header { background-color: goldenrod; /* Cor de fundo do cabeçalho */ padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; } .logo { width: 50px; margin-right: 20px; } nav ul { list-style-type: none; padding: 0; margin: 0; display: flex; } nav ul li { margin-right: 15px; } nav ul li a { color: white; /* Cor do texto do menu */ text-decoration: none; font-weight: bold; } nav ul li a:hover { text-decoration: underline; } main { padding: 20px; text-align: center; } .login-container, .register-container { background-color: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; margin: 0 auto; padding: 20px; } h1 { color: goldenrod; /* Cor dos títulos */ margin-bottom: 20px; } label { display: block; margin-bottom: 5px; text-align: left; } input[type="text"], input[type="password"], input[type="date"], input[type="email"] { width: calc(100% - 20px); padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #ccc; } button { width: 100%; padding: 10px; border: none; border-radius: 4px; background-color: goldenrod; /* Cor dos botões */ color: white; font-size: 16px; cursor: pointer; } button:hover { background-color: #daa520; /* Efeito hover dos botões */ } p { margin-top: 15px; } a { color: goldenrod; /* Cor dos links */ text-decoration: none; } a:hover { text-decoration: underline; }
document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); const validUsername = 'usuario'; const validPassword = 'senha123'; const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username === validUsername && password === validPassword) { alert('Login bem-sucedido!'); window.location.href = 'cadastros.html'; // Redireciona para a página de cadastros } else { alert('Usuário ou senha incorretos!'); } });