Inicio do Desenvolvimento

2026-03-03 19:32:52 -03:00
commit 0d7144c460
2 changed files with 146 additions and 0 deletions
--- a/cadastro.html
+++ b/cadastro.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tcc parte2</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="card">
+        
+        <h2>Crie sua conta</h2>
+        <form>
+            <div class="field">
+                <label>E-mail</label>
+                <input type="email" placeholder="email@exemplo.com">
+            </div>
+            <div class="field">
+                <label>Usuario</label>
+                <input type="text" placeholder="nome de usuario">
+            </div>
+            <div class="field">
+                <label>Senha</label>
+                <input type="password" placeholder="Digite sua senha">
+            </div>
+            <div class="field">
+                <label>Confirmar Senha</label>
+                <input type="password" placeholder="Confirme a senha">
+            </div>
+            <button type="submit">Cadastrar</button>
+        </form>
+    </div>
+    
+    </body>
+    </html>
+</html>
--- a/style.css
+++ b/style.css
@@ -0,0 +1,108 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+p, h1, h2, h3 {
+    margin: 0;
+    color: black;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+body {
+    
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    height: 100vh;
+    display: flex;
+    justify-content: flex-start; 
+    align-items: center;        
+    padding-left: 300px;  
+}
+
+/* Responsividade do Body */
+@media (max-width: 768px) {
+    body {
+        padding-left: 20px;
+        padding-right: 20px;
+        justify-content: center;
+    }
+}
+
+/* Estilização do Card (antigo #log) */
+.card {
+    width: 350px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    color: white;
+}
+
+@media (max-width: 480px) {
+    .card {
+        width: 100%;
+        max-width: 320px;
+    }
+}
+
+.card h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+    align-self: center;
+}
+
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+label {
+    display: block;
+    font-weight: bold;
+    color: black;
+    margin: 0;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+
+input {
+    height: 50px;
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width: 100%;
+}
+
+
+button[type="submit"] {
+    align-self: center;
+    width: 60%;
+    padding: 12px;
+    font-size: 18px;
+    font-weight: bold;
+    background-color: #C0392B;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-top: 10px;
+}
+
+button[type="submit"]:hover {
+    background-color: #A03224;
+}