*{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;
|
|
}
|
|
|