Atualizaçã do HTML

Lucas-Sussuarana · May 11, 2024 · e4add86 · e4add86
1 parent 4bad989
commit e4add86
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 10 deletions.
diff --git a/profissionais.css b/profissionais.css
@@ -1,36 +1,71 @@
 body{
     font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    font-size: 124x;
 }
 
 
 div.logo{
-    background: linear-gradient(#999999, #f93434);
+    background: linear-gradient(#56f3f3, #0cb6b6);
     text-align: center;
     font-size: 60px;
     color: aliceblue;
+    margin: 10px 30px;  /*Controla as bordas do container*/
+    border: 3px solid lightblue;  /*Controla as bordas do container*/
+    padding: 5px 10px 20px 30px;  /*Controla a margem do container*/
+     /*OS AVALORES DENTRO DO PADDING (QUE VALE PARA OUTROS COMPONENTES)SE REFERE A: A B C D, REFERESE A A=LEFT, B=TOP, C=BOTTOM E D=RIGHT*/
+
 
 }/*o linear deixa o background gradiente*/
+
+div.usuario{
+    display: inline;
+    text-align: right;
+}
+
+div.logo spam{
+    font-size: 14px;
+    text-align: center;
+}
+
 /*Main*/
 main{
-    background: linear-gradient(#304274, #b2cd68);
+    background: linear-gradient(#7ffeb0, #e2f7aa);
     padding: 10px
 }
 /*Rodape*/
 
-.botao{
-    background-color: aqua;
-    color: bisque;
-    border: #304274;
-    border-radius: 4px;
+.botao, 
+input[type="submit"]
+input[type="button"]{ /*Se houver algo apos a classe esses seriam a TAG e o ATRIBUTO como no exemplo ao lado*/
 
+    font-size: 15px;
+    background-color: rgb(231, 255, 255);
+    color: rgb(0, 0, 0);
+    border: #3c2ef7;
+    border-radius: 4px;
+    line-height: 2em;/*meche no peso da linha*/
+    cursor: pointer;/*Aplica a opçãode apontar ao mouse quando colocadosobre o botao*/
+    padding: 0 0.4em;/*meche nas bordas do botao*/
+    display: inline-block;/*Permite o botao preencher algum espaço*/
+    text-decoration: none;/*Remove o hiperlink*/
+}
+/*Pseudo classe para mudar a cor do botao quando o mouse passar por cima*/
+a.botao:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+    background-color: #f82d2d;
 }
 
-a.submit{
+a.botao#Excluir:hover{/*depoisdo # vem uma heranca de ID demoninada EXCLUIR*/
+    background-color: rgb(150, 2, 64);/*Altera um botao especifico*/
+}
 
+a.submit{
+    color: #e7edff;
 }
 
 footer{
-    background: linear-gradient(#307454, #b2cd68)
+    background: linear-gradient(#a8ffd6, #b2cd68)
 }
 
 

diff --git a/profissionais.html b/profissionais.html
@@ -9,6 +9,10 @@
    <div class="logo">
       <img src="logo.png" alt="logo da pagina">
       <p>Logo AI</p>
+      <div class="usuario">
+         <span>Usuario: Admin</span>
+         <span>Papel: Webmaster</span>
+      </div>
    </div>
  </header>  
  <nav>
@@ -77,7 +81,7 @@
             <td>x</td>
             <td>x</td>
             <td>x</td>
-            <td><a href="javascript:void{0}" class="botao">editar</a> \ <a href="javascript:void{1}" class="botao">excluir</a></td>
+            <td><a href="javascript:void{0}" class="botao">editar</a> \ <a id="Excluir" href="javascript:void{1}" class="botao">excluir</a></td>
          </tr>
          <tr>
             <td>2</td>