Skip to content

C
CRUD_Animais_da_Fazenda2
Commit 6b04c397 by Edvan
Options

corrigindo css da página

parent 0f33de1f
Showing with 57 additions and 114 deletions
Template/style
...@@ -5,116 +5,44 @@ ...@@ -5,116 +5,44 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* BODY - sensação de natureza */ /* BODY */
body { body {
font-family: 'Segoe UI', sans-serif; font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to bottom, #e9f5db, #d8f3dc); background: linear-gradient(to bottom, #e9f5db, #d8f3dc);
color: #333; color: #333;
}
/* HEADER - madeira/campo */
.topo {
background: #6b4226; /* marrom terra */
color: #fff;
padding: 20px;
text-align: center; text-align: center;
border-bottom: 5px solid #a3b18a; padding: 20px;
}
.topo h1 {
margin-bottom: 10px;
}
/* NAV */
nav a {
color: #fefae0;
margin: 0 10px;
text-decoration: none;
font-weight: bold;
padding: 6px 10px;
border-radius: 6px;
transition: 0.3s;
}
nav a:hover {
background: #a3b18a; /* verde claro */
color: #333;
}
/* CONTAINER */
.container {
width: 80%;
margin: 30px auto;
background: #fefae0; /* cor de palha clara */
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
} }
/* TÍTULOS */ /* TÍTULOS */
h2 { h1 {
text-align: center;
margin-bottom: 20px;
color: #6b4226;
}
/* TABELA */
table {
width: 100%;
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
}
/* CABEÇALHO */
th {
background: #588157; /* verde escuro */
color: white;
padding: 12px;
}
/* CÉLULAS */
td {
padding: 10px;
text-align: center;
}
/* LINHAS */
tr:nth-child(even) {
background: #e9edc9;
}
tr:hover {
background: #ccd5ae;
transition: 0.2s;
}
/* LINKS */
td a {
text-decoration: none;
font-weight: bold;
color: #6b4226; color: #6b4226;
margin-bottom: 20px;
} }
td a:hover { h2 {
color: #344e41; margin-top: 30px;
color: #588157;
} }
/* FORM */ /* FORM */
form { form {
display: flex; background: #fefae0;
flex-direction: column; padding: 20px;
align-items: center; margin: 0 auto;
width: 300px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
} }
/* INPUTS */ /* INPUTS */
input { input {
width: 60%; width: 100%;
padding: 10px; padding: 10px;
margin: 8px 0; margin: 8px 0;
border-radius: 6px; border-radius: 6px;
border: 1px solid #a3b18a; border: 1px solid #a3b18a;
background: #fefae0; background: #fff;
transition: 0.3s; transition: 0.3s;
} }
...@@ -127,11 +55,13 @@ input:focus { ...@@ -127,11 +55,13 @@ input:focus {
/* BOTÃO */ /* BOTÃO */
button { button {
width: 100%;
padding: 10px;
margin-top: 10px;
background: #6b4226; background: #6b4226;
color: white; color: white;
border: none; border: none;
padding: 12px 18px; border-radius: 6px;
border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
} }
...@@ -142,36 +72,48 @@ button:hover { ...@@ -142,36 +72,48 @@ button:hover {
transform: scale(1.05); transform: scale(1.05);
} }
/* TEXTO VAZIO */ /* LINHA DIVISÓRIA */
p { hr {
text-align: center; margin: 30px auto;
width: 60%;
border: 1px solid #a3b18a;
}
/* LISTA */
ul {
list-style: none;
margin-top: 20px; margin-top: 20px;
font-size: 18px; padding: 0;
color: #6b4226;
} }
/* ALERTA */ /* ITEM */
.alert { li {
background: #ccd5ae; background: #fefae0;
padding: 10px; margin: 10px auto;
margin-bottom: 15px; padding: 12px;
border-radius: 6px; width: 60%;
text-align: center; border-radius: 8px;
color: #344e41; box-shadow: 0 3px 8px rgba(0,0,0,0.1);
font-weight: bold; display: flex;
justify-content: space-between;
align-items: center;
}
/* TEXTO DO ITEM */
li span {
text-align: left;
} }
/* RESPONSIVO */ /* LINK EXCLUIR */
@media (max-width: 768px) { li a {
.container { text-decoration: none;
width: 95%; color: #d00000;
} font-weight: bold;
transition: 0.3s;
input { }
width: 90%;
}
table { /* HOVER EXCLUIR */
font-size: 12px; li a:hover {
} color: #9d0208;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment