Compare commits

...

3 Commits

Author SHA1 Message Date
1f6471adfe Excluir fundo1.png 2026-03-01 19:55:49 +00:00
6bffb165e9 Formatação do css 2026-03-01 19:52:45 +00:00
915f2f2ff7 Formatação do front end 2026-03-01 19:52:21 +00:00
3 changed files with 194 additions and 177 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

View File

@@ -40,10 +40,6 @@
</div> </div>
<!--cabo log--> <!--cabo log-->
</body> </body>
</html> </html>

249
style.css
View File

@@ -1,129 +1,150 @@
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
}
p,
h1,
h2,
h3 {
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
label{
display: block;
} }
body { p,
background-image: url(imagens/fundo1.png); h1,
background-size: cover; h2,
background-repeat: no-repeat; h3 {
background-position: center; margin: 0;
background-attachment: fixed; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
height: 100vh; label {
display: flex; display: block;
justify-content: flex-start; }
align-items: center;
padding-left: 300px;
}
@media (max-width: 768px) { body {
body {
padding-left: 20px;
padding-right: 20px;
justify-content: center;
}
}
@media (max-width: 480px) { background-size: cover;
#log { background-repeat: no-repeat;
width: 100% !important; background-position: center;
max-width: 320px; background-attachment: fixed;
}
}
#topo {
width: 100%;
height: 70px;
background-color: #111;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%);
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 20px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding-left: 0;
}
@media (max-width: 768px) {
body {
padding-left: 20px;
padding-right: 20px;
justify-content: center;
} }
}
#textotop { @media (max-width: 480px) {
font-size: 48px;
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#log { #log {
margin-top: 70px; width: 100% !important;
width: 350px; max-width: 320px;
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 { #topo {
height: 50px; width: 100%;
width: 100%; height: 70px;
padding: 10px; background-color: #111;
font-size: 16px; position: fixed;
border: 1px solid #ccc; top: 0;
border-radius: 4px; left: 0;
box-sizing: border-box; background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%);
} display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 20px;
label { }
display: block;
margin-bottom: 5px;
font-weight: bold;
color: white;
}
form { #textotop {
display: flex; font-size: 48px;
flex-direction: column; margin: 0;
gap: 15px; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
width: 100%; }
}
#logbtn { #log {
align-self: center; margin-top: 70px;
width: 50%; width: 350px;
padding: 12px; display: flex;
font-size: 18px; flex-direction: column;
font-weight: bold; gap: 15px;
background-color: #C0392B; color: rgb(0, 0, 0);
color: white; margin: 0;
border: none; }
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
#logbtn:hover { #campo {
background-color: #A03224; display: flex;
} flex-direction: column;
.mens { gap: 15px;
align-self: center; 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;
}
.mens-links {
display: flex;
justify-content: center;
gap: 20px;
}
.mens-links a {
color: inherit;
text-decoration: none;
font-weight: bold;
}
.mens-links a:hover {
text-decoration: underline;
}