1
Guys, I’m starting to get interested in html and css, I’ve been studying and taking a course, and I’m doing this site. I put a transition for when it scrolls the sidebar, but I wanted to be smoother the transition with image, with the text I used the transicion 1s in the proper css, but image does not work
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y < 25) {
$('.cabecalho').css({
'padding-bottom': '10px'
});
$('.cabecalho').css({
'height': '68px'
});
$('.im').css({
'padding': '10px 10px 22px 10px'
});
$('.icon').css({
'display': 'inline-block'
});
$('.efc').css({
'display': 'initial'
});
$('.cabecalho').css({
'transition': '0.2s'
});
} else {
$('.cabecalho').css({
'padding': '0px'
});
$('.cabecalho').css({
'margin': '0px'
});
$('.cabecalho').css({
'height': '40px'
});
$('.im').css({
'padding': '20px 10px 2px 10px'
});
$('.icon').css({
'display': 'none'
});
$('.efc').css({
'display': 'none'
});
$('.cabecalho').css({
'transition': '0.3s'
});
}
});
@charset "UTF-8";
@font-face {
font-family: Agency FB;
src: url(../_fontes/agencyfb.ttf);
}
html {
overflow-y: scroll;
}
/*Corpo do site*/
.postagem {
background-color: rgba(255, 140, 40, .05);
margin: 0px;
font-family: arial;
}
/*Divisão de conteudo do meu site*/
#interface {
width: 1100px;
background-color: white;
margin: 90px auto 10px auto;
box-shadow: 0px 4px 6px 3px rgba(0, 0, 0, .1);
}
/*Cabeçalho do meu site*/
.cabecalho {
top: 0px;
position: fixed;
width: 100%;
height: 68px;
background-color: rgba(255, 140, 40, 1);
margin: 0px;
padding-bottom: 10px;
transition: 0.4s;
}
.logo {
margin: 0px;
padding: 0px;
color: rgba(255, 255, 255, 1);
font-family: 'Agency FB';
font-size: 20pt;
display: inline-block;
}
#fcor {
color: rgba(255, 220, 180, 1);
}
/*Menu*/
.menu {
display: block;
}
.mn {
margin: 0px;
padding: 0px;
list-style: none;
text-transform: uppercase;
}
.icon {}
.mn a {
text-decoration: none;
color: white;
}
.im {
font-weight: 600;
text-align: center;
color: white;
font-size: 10pt;
transition: 0s;
font-family: 'Agency FB';
padding: 10px 10px 22px 10px;
margin: 0px;
display: inline-block;
}
.efc {}
.im:hover {
transition: 0.2s;
background-color: rgba(244, 116, 0, 1);
}
/*Postagens*/
.artigo {
padding: 15px 25px 15px 25px;
}
.titulo {
font-family: arial;
font-size: 12pt;
color: rgba(0, 0, 0, .8);
margin: 0px 0px 5px 0px;
padding: 0px;
}
.paragrafo {
margin: 0px;
padding: 0px;
color: rgba(0, 0, 0, .6);
font-family: arial;
text-align: justify;
}
.li {
font-size: 20pt;
font-weight: 900;
}
.link {
color: black;
text-decoration: none;
}
.link:hover {
font-style: none;
text-decoration: underline;
}
.icone {
transition: 2s;
border: solid white 6px;
box-shadow: 4px 4px 6px 2px rgba(0, 0, 0, 0.1);
height: 400px;
width: 600px;
}
/*Folhas de estilo de tabela*/
.tabela {
border-collapse: collapse;
}
.tdn {
border: solid black 2px;
padding: 2px;
}
.vazio {
border: solid black 2px;
padding: 12px;
}
.vazio#vm {
padding: 36px;
}
.tabt {
background-color: white;
padding: 2px;
border: solid black 2px;
}
.subt {
background-color: lightgray;
padding: 2px;
border: solid black 2px;
}
.ft {
border: solid black 2px;
}
.asst {
padding: 12px;
font-weight: 900;
text-align: center;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../_imagens/icon.png" type="image/x-icon" />
<link rel="shortcut icon" href="../_imagens/icon.png" type="image/x-icon" />
<title>Checklist, manutenção de computador</title>
<link rel="stylesheet" type="text/css" href="../_css/estilo.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class="postagem">
<header class="cabecalho">
<nav class="menu">
<h1 hidden>Menu Principal</h1>
<ul class="mn">
<a href="../index.html">
<li class="im"><img class="icon" src="../_imagens/icasa.png"><br class="efc">Home</li>
<a href="../index.html">
<li class="im"><img class="icon" src="../_imagens/ilivro.png"><br class="efc">Manuais e Processos</li>
</a>
<a href="../index.html">
<li class="im"><img class="icon" src="../_imagens/iferramentas.png"><br class="efc">Equipamentos</li>
</a>
<a href="../index.html">
<li class="im"><img class="icon" src="../_imagens/ietiqueta.png"><br class="efc">Inventário</li>
</a>
<h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA</span></h1>
</ul>
</nav>
</header>
<div id="interface">
<article class="artigo">
<h1 class="titulo">CHECKLIST, MANUTENÇÃO DE COMPUTADOR</h1>
<p class="paragrafo">
<table class="tabela" style="width:100%">
<tr>
<th class="tabt" colspan="4">CHECKLIST DE MANUTENÇÃO DE COMPUTADOR</th>
</tr>
<tr>
<th class="subt">OS</th>
<th class="subt">NOME DA MÁQUINA</th>
<th class="subt">USUÁRIO</th>
<th class="subt">SETOR</th>
</tr>
<tr>
<td class="vazio"> </td>
<td class="vazio"> </td>
<td class="vazio"> </td>
<td class="vazio"> </td>
</tr>
<tr>
<th class="subt" colspan="4">MANUTENÇÃO FÍSICA</th>
</tr>
<tr>
<th class="subt" colspan="3">PASSO A PASSO</th>
<th class="subt" colspan="1">RESULTADO</th>
</tr>
<tr>
<td class="tdn" colspan="3">Limpeza física interna</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Limpeza física externa</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<th class="subt" colspan="4">VERIFICAÇÃO INICIAL</th>
</tr>
<tr>
<th class="subt" colspan="3">PASSO A PASSO</th>
<th class="subt" colspan="1">RESULTADO</th>
</tr>
<tr>
<td class="tdn" colspan="3">Efetuar backup</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Executar diagnóstico do Dell/Lenovo</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Remoção de todos os bloatware</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<th class="subt" colspan="4">STATUS DO EQUIPAMENTO</th>
</tr>
<tr>
<th class="subt" colspan="1">NOME DO HARDWARE</th>
<th class="subt" colspan="1">CAPACIDADE</th>
<th class="subt" colspan="1">STATUS DO HARDWARE</th>
<th class="subt" colspan="1">RESULTADO</th>
</tr>
<tr>
<td class="tdn" colspan="1">Memória RAM</td>
<td class="vazio" colspan="1"></td>
<td class="vazio" colspan="1"></td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="1">Disco Rigido</td>
<td class="vazio" colspan="1"></td>
<td class="vazio" colspan="1"></td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<th class="subt" colspan="4">INSTALAÇÃO BÁSICA</th>
</tr>
<tr>
<th class="subt" colspan="3">PASSO A PASSO</th>
<th class="subt" colspan="1">RESULTADO</th>
</tr>
<tr>
<td class="tdn" colspan="3"><a href="1009181.html" class="link">Instalar sistema operacional</a></td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3"><a href="1009183.html" class="link">Alterar nome do computador</a></td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3"><a href="1009184.html" class="link">Inserir máquina no domínio usinacoruripe.com.br</a></td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Verificar chave de licença do sistema operacional</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Adicionar gg_Informatica no grupo Administradores local</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Ativar acesso remoto de área de trabalho (Com permissão p/ gg_Informatica)</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar Oracle</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar Centura (Gupta)</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Criar atalho do Gestão Coruripe na área de trabalho publica</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar SAP Gui</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar Adobe Acrobat Reader DC</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar UltraVNC Server</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar 7Zip</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar Citrix Receiver</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar Mozilla Firefox</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar Google Chrome</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Diminuir o level UAC</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar Agent OCS (Executar como Administrador)</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Instalar Antivirus Symantec</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Verificar atualizações disponiveis no Windows Update</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Verificar atualizações de drivers no computador</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<th class="subt" colspan="4">INSTALAÇÃO DE SOFTWARE CONDICIONAIS</th>
</tr>
<tr>
<th class="subt" colspan="3">NOME</th>
<th class="subt" colspan="1">RESULTADO</th>
</tr>
<tr>
<td class="tdn" colspan="3">Microsoft Office</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Skype for Business</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">Java</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<td class="tdn" colspan="3">CutePDF</td>
<td class="vazio" colspan="1"></td>
</tr>
<tr>
<th class="subt" colspan="4">DESCRIÇÃO DO RESULTADO</th>
</tr>
<tr>
<td class="vazio" id="vm" colspan="4"></td>
</tr>
<tr class="ft">
<td class="asst" colspan="2">CONFERIDO POR:_________________</td>
<td class="asst" colspan="2">ANALISTA RESPONSÁVEL:_________________________</td>
</tr>
</table>
</p>
<article>
</div>
</body>
</html>
I also wanted to center my logo, I made it using inline-block, I wanted to center just the logo and leave the menu to the left.
– Marcos Aurélio