|
|
@ -4,125 +4,9 @@ |
|
|
<title>Título Página</title> |
|
|
<title>Título Página</title> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/> |
|
|
<meta charset="utf-8"> |
|
|
<meta charset="utf-8"> |
|
|
|
|
|
<link rel="stylesheet" href="style.css"> |
|
|
</head> |
|
|
</head> |
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
|
|
|
|
*{padding:0;margin:0;box-sizing:border-box;} |
|
|
|
|
|
|
|
|
|
|
|
header{ |
|
|
|
|
|
min-height:8vh; |
|
|
|
|
|
display:flex; |
|
|
|
|
|
justify-content:space-between; |
|
|
|
|
|
align-items:center; |
|
|
|
|
|
padding: 0.5em 1em; |
|
|
|
|
|
background-color:#000; |
|
|
|
|
|
color:#FFF; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
nav ul{ |
|
|
|
|
|
display:flex; |
|
|
|
|
|
gap:0.8em; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
nav ul li{list-style:none;} |
|
|
|
|
|
|
|
|
|
|
|
a{text-decoration:none; color:#FFF;} |
|
|
|
|
|
|
|
|
|
|
|
main{ |
|
|
|
|
|
min-height:85vh; |
|
|
|
|
|
background-color:#CCC; |
|
|
|
|
|
display:flex; |
|
|
|
|
|
gap:1em; |
|
|
|
|
|
flex-direction:column; |
|
|
|
|
|
justify-content:center; |
|
|
|
|
|
align-items:center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
form{ |
|
|
|
|
|
width:350px; |
|
|
|
|
|
display:flex; |
|
|
|
|
|
flex-direction:column; |
|
|
|
|
|
gap:1em; |
|
|
|
|
|
border: 1px solid #000; |
|
|
|
|
|
border-radius:5px; |
|
|
|
|
|
padding:1em; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.form-group{ |
|
|
|
|
|
width:100%; |
|
|
|
|
|
display:flex; |
|
|
|
|
|
flex-direction:column; |
|
|
|
|
|
gap:0.3em; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.form-group input{ |
|
|
|
|
|
font-size:1em; |
|
|
|
|
|
padding:0.3em 0.4em; |
|
|
|
|
|
border-radius:5px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn{ |
|
|
|
|
|
padding:0.3em 0.1em; |
|
|
|
|
|
font-size:1em; |
|
|
|
|
|
cursor:pointer; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
footer{ |
|
|
|
|
|
min-height:7vh; |
|
|
|
|
|
background-color:#000; |
|
|
|
|
|
color:#FFF; |
|
|
|
|
|
display:flex; |
|
|
|
|
|
justify-content:center; |
|
|
|
|
|
align-items:center; |
|
|
|
|
|
font-size:1.3em; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
p{ |
|
|
|
|
|
text-align:center; |
|
|
|
|
|
margin:0.5em 0em; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
table { |
|
|
|
|
|
border-collapse: collapse; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
max-width: 800px; |
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
font-family: Arial, sans-serif; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
thead { |
|
|
|
|
|
background-color: #ebebeb; |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
th, td { |
|
|
|
|
|
padding: 10px; |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
border: 1px solid #000; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
th { |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
border-bottom: 2px solid #000; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
tbody tr:nth-child(even) { |
|
|
|
|
|
background-color: #f2f2f2; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
tbody td { |
|
|
|
|
|
border-bottom: 1px solid #000; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
<body> |
|
|
<header> |
|
|
<header> |
|
|
|
|
|
|
|
|
@ -144,13 +28,13 @@ tbody td { |
|
|
<form method="POST" > |
|
|
<form method="POST" > |
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
<div class="form-group"> |
|
|
<label for="name">Name:</label> |
|
|
|
|
|
|
|
|
<label for="name">Animal:</label> |
|
|
<input type="text" id="name" /> |
|
|
<input type="text" id="name" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="form-group"> |
|
|
<div class="form-group"> |
|
|
<label for="lastname">Lastname:</label> |
|
|
|
|
|
|
|
|
<label for="lastname">Quantidade:</label> |
|
|
<input type="text" id="lastname" /> |
|
|
<input type="text" id="lastname" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
@ -166,8 +50,8 @@ tbody td { |
|
|
|
|
|
|
|
|
<thead> |
|
|
<thead> |
|
|
<tr> |
|
|
<tr> |
|
|
<th scope="col">Name:</th> |
|
|
|
|
|
<th scope="col">Lastname:</th> |
|
|
|
|
|
|
|
|
<th scope="col">Animal:</th> |
|
|
|
|
|
<th scope="col">Quantidade:</th> |
|
|
</tr> |
|
|
</tr> |
|
|
|
|
|
|
|
|
</thead> |
|
|
</thead> |
|
|
|