File size: 3,615 Bytes
32ee4af bfe733a 32ee4af 2e82b88 32ee4af 2e82b88 bfe733a 2e82b88 bfe733a 2e82b88 bfe733a 2e82b88 bfe733a 2e82b88 9a3efcc 2e82b88 32ee4af bfe733a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Formulário Imobiliário</title>
<style>
/* Reset básico */
* {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
color: #333;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.container {
background: #fff;
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
max-width: 480px;
width: 100%;
}
h1 {
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 20px;
color: #2c3e50;
text-align: center;
}
form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #34495e;
}
form input[type="text"],
form input[type="email"],
form textarea {
width: 100%;
padding: 10px 14px;
margin-bottom: 18px;
border: 1.8px solid #d1d9e6;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s ease;
font-family: inherit;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 6px #a9c8ff;
}
form textarea {
resize: vertical;
min-height: 80px;
}
button {
width: 100%;
background: #007bff;
color: white;
font-size: 1.1rem;
font-weight: 700;
border: none;
padding: 14px 0;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: inherit;
}
button:hover {
background: #0056b3;
}
ul.flash-messages {
list-style: none;
padding: 0;
margin-bottom: 20px;
text-align: center;
color: #2ecc71; /* verde */
font-weight: 700;
}
ul.flash-messages li {
background: #d4edda;
padding: 12px 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}
@media (max-width: 520px) {
.container {
padding: 25px 20px;
}
h1 {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Quer uma oferta imobiliária exclusiva? Deixe seus dados:</h1>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flash-messages">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<form method="POST" action="/">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required placeholder="Seu nome completo" />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="[email protected]" />
<label for="bairro">Bairro desejado:</label>
<input type="text" id="bairro" name="bairro" placeholder="Ex: Vila Mariana" />
<label for="preco">Faixa de preço:</label>
<input type="text" id="preco" name="preco" placeholder="Ex: R$ 500.000 - R$ 800.000" />
<label for="mensagem">Mensagem extra:</label>
<textarea id="mensagem" name="mensagem" placeholder="Conte mais sobre o que deseja..."></textarea>
<button type="submit">Enviar</button>
</form>
</div>
</body>
</html>
|