Browse Source

animals

master
jailton 3 years ago
parent
commit
e242028653
3 changed files with 123 additions and 121 deletions
  1. +5
    -121
      4-css/index.html
  2. +117
    -0
      4-css/style.css
  3. +1
    -0
      animals/index.html

+ 5
- 121
4-css/index.html View File

@ -4,125 +4,9 @@
<title>T&iacute;tulo P&aacute;gina</title> <title>T&iacute;tulo P&aacute;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>


+ 117
- 0
4-css/style.css View File

@ -0,0 +1,117 @@
*{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;
}
.container-table{
max-height: 250px;
overflow: scroll;
}
table {
border-collapse: collapse;
width: 100%;
max-width: 350px;
overflow: scroll;
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;
}

+ 1
- 0
animals/index.html View File

@ -0,0 +1 @@
<html></html>

Loading…
Cancel
Save