Projeto-PI---site/styles.css at main · Edinaldo-long/Projeto-PI---site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

 /* Estilo do contêiner principal do topo */
 .topo-container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100px;
    margin: 30px; /* Espaçamento no topo */
}


body {
    background-image: url('./imagens/fundo2.jpg');
    background-size: cover; /* Ajusta a imagem para cobrir toda a área */
}


body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }

  th, td {
    border: 2px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2;
    color: #333;
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  tr:hover {
    background-color: #f1f1f1;
  }


  .logo {
    width: 300px; /* Define a largura da imagem */
    height: auto; /* Mantém a proporção da imagem */
    transition: transform 0.3s ease-in-out; /* Adiciona a transição suave */
}

.logo:hover {
    transform: scale(1.1); /* Efeito de salto */
}


.imagem-salto {  /*efeito do logo de lupa*/
    width: 10px; /* Ajuste a largura conforme necessário */
    height: auto; /* Mantém a proporção da imagem */
    transition: transform 0.3s ease-in-out; /* Adiciona a transição suave */
}


/* Estilo do letreiro digital */
.letreiro {
  background: rgba(0, 128, 0, 0.7); /* fundo verde translúcido */
  color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 2em;
  animation: piscar 1s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Animação do letreiro digital */
@keyframes piscar {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}


/* Estilo do contêiner dos botões */
.botao-container {
  display: flex;
  justify-content: flex-start; /* Alinha os botões à esquerda */
  gap: 10px; /* Espaçamento entre os botões */
  margin-top: 20px; /* Espaçamento acima dos botões */
}