Fernando/FrontFocusAgenda
1
0
Fork 0
forked from Gustavo/FrontFocusAgenda
Code Pull Requests Activity

Enviar arquivos para "/"

Browse Source 
Criação do menu de login e um pouco de estilização
This commit is contained in:
Gustavo
2026-02-27 01:00:13 +00:00
parent e478ffcaa7
commit 9a2ea6114c
3 changed files with 174 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
fundo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

49
site.html Normal file
View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>TCC de cria</title>
</head>
<body>
<!--Barrinha que fica no topo-->
<div id="topo">
<h1 id="textotop">Focus Agenda</h1>
</div>
<!--cabo bar-->
<!--Login e outras coisas-->
<div id="log">
<h1 class="mens">Bem Vindo!</h1>
<h3 class="mens">Faça seu login</h3>
<form method="POST" action="login.php">
<div class="campo">
<label for="emailid">Email</label>
<input type="email" placeholder="Digite seu email" name="email" id="emailid" required>
</div>
<div class="campo">
<label for="senhaid">Senha</label>
<input type="password" placeholder="Digite sua senha" name="senha" id="senhaid" required>
</div>
<button type="submit" id="logbtn">Logar</button>
</form>
<p class="mens">Cadastrar-se</p>
</div>
<!--cabo log-->
</body>
</html>

113
style.css
View File

@@ -1,11 +1,51 @@
body{
background-color: pink;
* {
padding: 0;
margin: 0;
}
.topo{
p,
h1,
h2,
h3 {
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
label{
display: block;
}
body {
background-image: url(imagens/fundo1.png);
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;
}
@media (max-width: 768px) {
body {
padding-left: 20px;
padding-right: 20px;
justify-content: center;
}
}
@media (max-width: 480px) {
#log {
width: 100% !important;
max-width: 320px;
}
}
#topo {
width: 100%;
height: 60px;
height: 70px;
background-color: #111;
position: fixed;
top: 0;
@@ -17,8 +57,73 @@
padding-left: 20px;
}
#textotop {
font-size: 48px;
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#log {
margin-top: 70px;
width: 350px;
display: flex;
flex-direction: column;
gap: 15px;
color: white;
margin: 0;
}
#campo {
display: flex;
flex-direction: column;
gap: 15px;
align-self: center;
}
#menslog{
font-size: 20px;
}
#emailid, #senhaid {
height: 50px;
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: white;
}
form {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
}
#logbtn {
align-self: center;
width: 50%;
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;
}
#logbtn:hover {
background-color: #A03224;
}
.mens {
align-self: center;
}