Bem vindo ao HTML System8

Os tópicos são divididos por MACROS 1, 2, 3, 4, 5…… Para facilitar a busca futura.

TL = Texto Livre | CSS = Estilo CSS

Acentuação e Caracteres em HTML

Atendimento Personalizado
Garantia de Satisfação
Orçamento sem Compromisso
Serviço Rápido

Nossos diferenciais

1. Linhas decorativas na esquerda

TL: <h3 class="headline2"> </h3>

2. Título centralizado

CSS:

.title-exemplo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.line { -webkit-box-flex: 0.5; -ms-flex: 0.5; flex: 0.5; }

.line-hr { border: 1px solid; border-color: #000000; margin-top: 30px; margin-right: 15px; margin-left: 15px; }

TL:

</div>

<h3>Teste</h3>

</div>

</div>

3. Tópicos

TL:

•

4. Centralizar vídeo

TL:

Para vídeo do youtube, colocar a tag antes do frame <p class="video">

Para vídeo de arquivo, colocar a tag antes do vídeo <p class="video">

5. Espaços entre os textos

TL:

<p> = abre

</p> = fecha

6. Negrito

TL:

<b> = abre

</b> = fecha

7. Colorir

TL:

8. Quatro Colunas

TL:

<div class="col-md-3">Coluna 1</div>

<div class="col-md-3">Coluna 2</div>

<div class="col-md-3">Coluna 3</div>

<div class="col-md-3">Coluna 4</div>

</div>

9. Linkar o telefone

TL:

10. Linkar e-mail

TL:

<a href="mailto:comercial@site8.com.br" target="_blank">comercial@site8.com.br</a></span></p>

11. Botão com número de telefone linkado

TL:

12. Botão com whatsapp linkado

TL:

<p align="center"><span style="color: #e4d3e8; font-size: 12pt;"> <a class="botao_orc" href="http://api.whatsapp.com/send?1=pt_BR&phone=5511954858924&" target="_blank">WhatsApp Clique Aqui</a></span></p>

13. Whatsapp Topbar

TL:

14. Whatsapp Rodapé e Contato

TL:

15. Cinco colunas

CSS:

.col-xs-15,

.col-sm-15,

.col-md-15,

.col-lg-15 {

position: relative;

min-height: 1px;

padding-right: 10px;

padding-left: 10px;

}

/*Medias queries */

.col-xs-15 {

width: 20%;

float: left;

}

@media (min-width: 768px) {

.col-sm-15 {

width: 20%;

float: left;

}

@media (min-width: 992px) {

.col-md-15 {

width: 20%;

float: left;

}

@media (min-width: 1200px) {

.col-lg-15 {

width: 20%;

float: left;

}

TL:

</div>

16. Botão

CSS:

.botao_orc {background-color:#b0228a;border:0;border-radius:3.5em;color:#fff !important;cursor:pointer;display:inline-block;height:2.5em;line-height:2.5em;outline:0; margin-bottom: 6px; padding:0 2em;position:relative;text-align:center;text-decoration:none;-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;-ms-appearance:none;appearance:none;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.botao_orc:hover{background:#C52299;}

TL:

<p align="center"><span style="color: #e4d3e8; font-size: 12pt;"> <a class="botao_orc" href="/contato">Contato</a> </span></p>

17. Para tirar Margens do Texto Livre

.forma_s_tiny1 { margin-bottom: -60px; }
.forma_qs_tiny1 { margin-bottom: -60px; }

18 Para tirar todo o menu

.header, .sticky-wrapper {display: none;}

19 Foto Quem Somos com descrição ao lado

<div class="row"><br />
<div class="col-md-3"><br />
<p><em><strong><span style="font-size: 12pt;">s<img src="/img/upload/source/b3.jpg" alt="" width="392" height="289" />s<br /></span></strong></em></p>
</div>
<br />
<div class="col-md-9"><br />
<p> </p>
<br />
<p><span style="font-size: 14pt;"><em><strong>Construção</strong></em></span></p>
<br />
<p style="text-align: justify;"><span style="font-size: 12pt;">Execução de obras e projetos previamente elaborados de construção, atendendo demandas de pequeno, médio e grande portes em residências, comércios e indústrias.</span></p>
</div>
</div>

20 Banner de fora a fora

CSS:
@media only screen and ( min-width: 1141px ) { .full-width { margin-left: calc(-100vw / 2 + 1140px / 2)!important; margin-right: calc(-100vw / 2 + 1140px / 2)!important; } } @media only screen and ( max-width: 1140px ) { .full-width { margin-left: calc(-100vw / 2 + 1140px / 2)!important; margin-right: calc(-100vw / 2 + 1140px / 2)!important; } } @media only screen and ( max-width: 1024px ) { .full-width { margin-left: calc(-100vw / 2 + 1024px / 2)!important; margin-right: calc(-100vw / 2 + 1024px / 2)!important; } } @media only screen and ( max-width: 768px ) { .full-width { margin-left: calc(-100vw / 2 + 768px / 2)!important; margin-right: calc(-100vw / 2 + 768px / 2)!important; } } @media only screen and ( max-width: 425px ) { .full-width { margin-left: calc(-100vw / 2 + 425px / 2)!important; margin-right: calc(-100vw / 2 + 425px / 2)!important; } } @media only screen and ( max-width: 375px ) { .full-width { margin-left: calc(-100vw / 2 + 375px / 2)!important; margin-right: calc(-100vw / 2 + 375px / 2)!important; } } @media only screen and ( max-width: 320px ) { .full-width { margin-left: calc(-100vw / 2 + 320px / 2)!important; margin-right: calc(-100vw / 2 + 320px / 2)!important; } } .full-width img { width: 100%; border-radius: 0px; }

HTML:
<figure class="full-width"><img style="display: block; margin-left: auto; margin-right: auto;" src="/img/upload/source/BANNER FINO V.png" width="1140" height="254" /></figure>

21 Colunas Flip

CSS:

.services:nth-child(4) { display: none; } /* esconde a quarta coluna */
.ih-item{diplay:none !important;} .flip-container { perspective: 1000px; } .flipper { position: relative; width: 100%; height: 400px; transform-style: preserve-3d; transition: transform 0.6s; } .flip-container:hover .flipper { transform: rotateX(180deg); } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font-size: 24px; } .front { background-color: #ccc; color: #064AAB; padding: 20px 20px; } .back { background-color: #064AAB; color: #fff; padding: 20px 20px; transform: rotateX(180deg); }

TL:

<p style="text-align: center;"><span style="font-size: 14pt;"><strong>Benefícios de integrar a nossa rede</strong></span></p>
<div class="row">
<div class="col-md-4" style="text-align: center;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<p style="text-align: center;"><img src="https://painel.site8.com.br/imagens/globe-solid.svg" width="64px" /><br /> <span style="font-size: 12pt;"><strong>IMPACTO POSITIVO NO MUNDO </strong></span></p>
</div>
<div class="back">
<p style="text-align: center;"><span style="font-size: 12pt;">Você poderá contribuir com o desenvolvimento sustentável e com a transformação social, em qualquer área de atuação, gerando resultados positivos para a atual e futuras gerações.</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<p style="text-align: center;"><img src="https://painel.site8.com.br/imagens/sitemap-solid.svg" width="64px" /><br /><span style="font-size: 12pt;"><strong>APOIO ESTRUTURADO </strong></span></p>
</div>
<div class="back">
<p style="text-align: center;"><span style="font-size: 12pt;">Promovemos apoio técnico, desde a constituição das organizações, até à restruturação, de acordo com a legislação aplicável, possibilitando qualificar as entidades para receber o investimento social privado ou celebrar parcerias públicas.</span></p>
</div>
</div>
</div>
</div>
<div class="col-md-4" style="text-align: center;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<p style="text-align: center;"><img src="https://painel.site8.com.br/imagens/tasks-solid.svg" width="64px" /><br /><span style="font-size: 12pt;"><strong>FOCO NAS ATIVIDADES FINALÍSTICAS E NOS RESULTADOS </strong></span></p>
</div>
<div class="back">
<p style="text-align: center;"><span style="font-size: 12pt;">A partir de método que garante assistência técnica e administrativa, você poderá focar nas atividades finalísticas da OSC e na geração de resultados positivos.</span></p>
</div>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>

22 Para decidir quantas colunas deseja nos pilares

Código para esconder a 4ª coluna dos ícones:
.services { width: 33.3% } /* transforma em tres colunas */
@media (max-width: 991px) { .services { width: 100% } } /* transforma em uma coluna no responsivo */
.services:nth-child(4) { display: none; } /* esconde a quarta coluna */

23 Avaliação de cliente

<div style="font-family: Arial, sans-serif; max-width: 1000px; margin: 20px auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px;">

 <!-- Avaliação 1 -->
 <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px; width: 23%; min-width: 200px; box-sizing: border-box;">
 <div style="display: flex; align-items: center; margin-bottom: 10px;">
 <div style="width: 32px; height: 32px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">M</div>
 <div>
 <div style="font-weight: bold; font-size: 14px;">Marcos Oliveira</div>
 <div style="font-size: 11px; color: #666;">Há 1 dia</div>
 </div>
 </div>
 <div style="color: #FFB400; font-size: 16px; margin-bottom: 5px;">★★★★★</div>
 <div style="font-weight: bold; margin-bottom: 5px; font-size: 14px;">Produto excelente!</div>
 <div style="margin-bottom: 10px; line-height: 1.4; font-size: 13px;">
 Comprei para presentear e superou todas as expectativas. Qualidade premium e entrega super rápida.
 </div>
 <div style="font-size: 11px; color: #666;">
 <span style="margin-right: 10px;">👍 12 úteis</span>
 <span>✏️ Responder</span>
 </div>
 </div>

 <!-- Avaliação 2 -->
 <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px; width: 23%; min-width: 200px; box-sizing: border-box;">
 <div style="display: flex; align-items: center; margin-bottom: 10px;">
 <div style="width: 32px; height: 32px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">A</div>
 <div>
 <div style="font-weight: bold; font-size: 14px;">Ana Costa</div>
 <div style="font-size: 11px; color: #666;">Há 3 dias</div>
 </div>
 </div>
 <div style="color: #FFB400; font-size: 16px; margin-bottom: 5px;">★★★★★</div>
 <div style="font-weight: bold; margin-bottom: 5px; font-size: 14px;">Vale cada centavo</div>
 <div style="margin-bottom: 10px; line-height: 1.4; font-size: 13px;">
 Estou usando há uma semana e já posso dizer que foi um dos melhores investimentos que fiz.
 </div>
 <div style="font-size: 11px; color: #666;">
 <span style="margin-right: 10px;">👍 8 úteis</span>
 <span>✏️ Responder</span>
 </div>
 </div>

 <!-- Avaliação 3 -->
 <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px; width: 23%; min-width: 200px; box-sizing: border-box;">
 <div style="display: flex; align-items: center; margin-bottom: 10px;">
 <div style="width: 32px; height: 32px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">R</div>
 <div>
 <div style="font-weight: bold; font-size: 14px;">Roberto Silva</div>
 <div style="font-size: 11px; color: #666;">Há 1 semana</div>
 </div>
 </div>
 <div style="color: #FFB400; font-size: 16px; margin-bottom: 5px;">★★★★★</div>
 <div style="font-weight: bold; margin-bottom: 5px; font-size: 14px;">Super recomendo</div>
 <div style="margin-bottom: 10px; line-height: 1.4; font-size: 13px;">
 Produto de altíssima qualidade. Chegou antes do prazo e bem embalado.
 </div>
 <div style="font-size: 11px; color: #666;">
 <span style="margin-right: 10px;">👍 15 úteis</span>
 <span>✏️ Responder</span>
 </div>
 </div>

 <!-- Avaliação 4 -->
 <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px; width: 23%; min-width: 200px; box-sizing: border-box;">
 <div style="display: flex; align-items: center; margin-bottom: 10px;">
 <div style="width: 32px; height: 32px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 10px;">C</div>
 <div>
 <div style="font-weight: bold; font-size: 14px;">Carla Mendes</div>
 <div style="font-size: 11px; color: #666;">Há 2 semanas</div>
 </div>
 </div>
 <div style="color: #FFB400; font-size: 16px; margin-bottom: 5px;">★★★★★</div>
 <div style="font-weight: bold; margin-bottom: 5px; font-size: 14px;">Perfeito</div>
 <div style="margin-bottom: 10px; line-height: 1.4; font-size: 13px;">
 Já comprei vários produtos similares, mas esse se destacou pela qualidade excepcional.
 </div>
 <div style="font-size: 11px; color: #666;">
 <span style="margin-right: 10px;">👍 22 úteis</span>
 <span>✏️ Responder</span>
 </div>
 </div>

</div>

24 Para tirar o home da visão do site mesmo ele estando ativo

/* //////////////////////////////// HEADER //////////////////////////////// */
/* logo */
@media only screen and ( max-width: 766px ) { #logo_ap img { width: 50% !important; border-radius: 0; } }
/* nav */
.nav a { font-weight: 600 !important; }
.nav .m1 { display: none !important; }

25. Tabela de preços

CSS:

/* Estilos gerais */
.headline2 {
text-align: center;
margin-bottom: 30px;
color: #333;
font-weight: bold;
}

/* Estilos dos painéis de planos */
.plan-panel {
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
background: #fff;
transition: transform 0.3s ease;
}

.plan-panel:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.panel-heading {
background-color: #222;
color: white;
padding: 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
}

.panel-heading h4 {
margin: 0;
font-size: 18px;
font-weight: bold;
}

.panel-body {
padding: 20px;
background-color: #f9f9f9;
}

.panel-body .lead {
font-size: 24px;
margin: 0;
color: #333;
font-weight: bold;
}

/* Lista de características */
.plan-features {
list-style: none;
padding: 0;
margin: 0;
}

.feature-item {
padding: 12px 15px;
text-align: center;
border-bottom: 1px solid #eee;
font-size: 14px;
color: #555;
}

.feature-item:nth-child(odd) {
background-color: #f5f5f5;
}

.feature-item:nth-child(even) {
background-color: #fafafa;
}

/* Rodapé do painel */
.panel-footer {
padding: 0;
background-color: #333;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

.plan-button {
display: block;
padding: 12px;
text-align: center;
background-color: #444;
color: white;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
border: none;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

.plan-button:hover {
background-color: #555;
color: white;
text-decoration: none;
}

/* Efeito de sombra */
.effect2 {
position: relative;
}
.effect2:before, .effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}

TL:

<h2 class="headline2">Nossos Planos 100% fibra óptica.</h2>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="plan-panel">
<div class="panel-heading">
<h4 class="text-center">PLANO 1</h4>
</div>
<div class="panel-body text-center">
<p class="lead"><strong>100 MEGA</strong></p>
</div>
<ul class="plan-features">
<li class="feature-item">até 100 mbps</li>
<li class="feature-item">IP Dinâmico</li>
<li class="feature-item">Sem limite de download</li>
<li class="feature-item">Plano Residencial</li>
</ul>
<div class="panel-footer">
<a class="plan-button" href="http://api.whatsapp.com/send?1=pt_BR&phone=5524999010735">ASSINAR AGORA</a>
</div>
</div>
</div>

<div class="col-md-3">
<div class="plan-panel">
<div class="panel-heading">
<h4 class="text-center">PLANO 2</h4>
</div>
<div class="panel-body text-center">
<p class="lead"><strong>300 MEGA</strong></p>
</div>
<ul class="plan-features">
<li class="feature-item">até 300 MEGA</li>
<li class="feature-item">IP Dinâmico</li>
<li class="feature-item">Sem limite de download</li>
<li class="feature-item">Plano Residencial</li>
</ul>
<div class="panel-footer">
<a class="plan-button" href="http://api.whatsapp.com/send?1=pt_BR&phone=5524999010735">ASSINAR AGORA</a>
</div>
</div>
</div>

<div class="col-md-3">
<div class="plan-panel">
<div class="panel-heading">
<h4 class="text-center">PLANO 3</h4>
</div>
<div class="panel-body text-center">
<p class="lead"><strong>500 MEGA</strong></p>
</div>
<ul class="plan-features">
<li class="feature-item">até 500 MEGA</li>
<li class="feature-item">IP Dinâmico</li>
<li class="feature-item">Sem limite de Download</li>
<li class="feature-item">Plano Residencial</li>
</ul>
<div class="panel-footer">
<a class="plan-button" href="http://api.whatsapp.com/send?1=pt_BR&phone=5524999010735">ASSINAR AGORA</a>
</div>
</div>
</div>

<div class="col-md-3">
<div class="plan-panel">
<div class="panel-heading">
<h4 class="text-center">PLANO 4</h4>
</div>
<div class="panel-body text-center">
<p class="lead"><strong>700 MEGA</strong></p>
</div>
<ul class="plan-features">
<li class="feature-item">até 700 MEGA</li>
<li class="feature-item">IP Dinâmico</li>
<li class="feature-item">Sem limite de download</li>
<li class="feature-item">Plano Residencial</li>
</ul>
<div class="panel-footer">
<a class="plan-button" href="http://api.whatsapp.com/send?1=pt_BR&phone=5524999010735">ASSINAR AGORA</a>
</div>
</div>
</div>
</div>
</div>

Para LandingPage em menu ancora

CSS:
/* //////////////////////////////// BARRA SUPERIOR //////////////////////////////// */
ul.top-contact, ul.top-social { font-weight: 600 !important; }
ul.top-social li :is(a.icon-facebook, a.fa-instagram, a.icon-twitter, a.fa-youtube-play) { -webkit-transition: 0.3s ease all; -o-transition: 0.3s ease all; transition: 0.3s ease all; }
ul.top-social li :is(a.icon-facebook:hover, a.fa-instagram:hover, a.icon-twitter:hover, a.fa-youtube-play:hover) { background: #002F7D !important; color: #0060FF !important; }
/* //////////////////////////////// NAV //////////////////////////////// */
/* logo */
.logo { width: 90px; }
.header-fundo { display: none; }
/* menu */
.nav li { background: transparent !important; }
.nav a { font-weight: 600 !important; }
li.m1 { display: none; }
/* //////////////////////////////// */
.title-principal { font-size: 26px; font-weight: 600; text-align: center; }
/* quem somos */
.forma_h_tiny1 { padding-top: 40px; padding-bottom: 0; margin-top: -40px; }
#quem-somos { margin-top: -40px; }
.one_page { background: #f7f7f7; }
.anchor-consultoria { top: -40px !important; }
@media (max-width: 766px) { .anchor-consultoria { top: 40px !important; } }
.consultoria { padding-top: 40px; }
.consultoria h3.title-principal { line-height: 1.4; margin-bottom: 40px; }
.consultoria .col-md-7 { padding-left: 0; }
.consultoria p { font-size: 18px; text-align: justify; letter-spacing: 0.2px; line-height: 1.4; }
.consultoria ul { margin-top: 30px; }
.consultoria li { font-size: 18px; margin-top: 10px; }
.identificador-consultoria { font-size: 20px; color: #112855; font-weight: 700; }
/* como funciona */
.como-funciona { background: #fff; }
.consultoria-como .sep-container:before { background: #fff; }
.consultoria-como h3.title-principal { line-height: 1.4; }
.consultoria4 { text-align: center; margin-top: 30px; }
.consultoria4 img { max-width: 60%; margin: 20px auto; }
.consultoria4 em { color: #303030; }
/* planos */
.forma_h_tiny3 { padding-block: 40px; }
.planos .row { margin-top: 40px; }
.box-plano { background: #fff; padding: 0 0 10px; width: 32.7%; -webkit-box-shadow: 0px 5px 13px -3px rgba(0,47,125,0.60); box-shadow: 0px 5px 13px -3px rgba(0,47,125,0.60); }
.box-plano:nth-child(1) { margin-right: 5px; }
.box-plano:nth-child(2) { margin-inline: 5px; }
.box-plano:nth-child(3) { margin-left: 5px; }
.box-plano header { text-align: center; }
.nome-plano { font-size: 36px; font-weight: bold !important; display: block; color: #cfd2d8 !important; text-transform: uppercase; margin: 0; padding-block: 12px; }
.indicado { margin-block: 5px; background: #cfd2d8; padding: 7px; color: #fff; margin: 0; padding-block: 12px; }
.fix-indicado { padding-block: 23px; }
.indicado p { margin: 0; font-weight: 600; width: 90%; margin-inline: auto; }
.plano-anterior { margin-bottom: 20px; font-weight: 600; text-transform: uppercase; color: #002F7D; }
.content-plano { padding-inline: 27px; padding-block: 17px; }
.content-plano ul { list-style: inside; }
.content-plano li { margin-bottom: 13px; line-height: 1.6; }
a.btn-saiba-mais { width: 50%; margin-inline: auto; display: block; padding-block: 12px; background: #002F7D; text-align: center; font-weight: 600; color: #fff !important; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 7px; -webkit-transition: 0.3s ease all; -o-transition: 0.3s ease all; transition: 0.3s ease all; }
a.btn-saiba-mais:hover { background: #011f50; }
/* espaço para igualar os planos */
.space-top { margin-top: 256px; }
.space-top--2nd { margin-top: 128px; }
.space-top--4th { margin-top: 64px; }
/* saiba mais */
.forma_h_tiny4 { padding-top: 40px; padding-bottom: 0; margin-top: -40px; }
#quem-somos { margin-top: -40px; }
.one_page { background: #ffffff; }
/* responsivo */
@media (max-width: 1199px) { .box-plano { width: 32.6%; } .space-top { margin-top: 306px; } .space-top--2nd { margin-top: 176px; } .space-top--4th { margin-top: 160px; } .space-top--5th { margin-top: 60px; } }
@media (max-width: 991px) { .box-plano { width: 98%; display: block; margin: 20px auto !important; } }
@media (max-width: 767px) { .content-plano :is(.space-top, .space-top--1st, .space-top--2nd, .space-top--3rd, .space-top--4th, .space-top--5th, .space-top--6th) { margin-top: 40px; } }
/* /////////////// FOOTER ///////////// */
/* /// / footer a / /// */
.footer-top { padding-bottom: 0; margin-top: -40px; }
.footer-top h3 { font-weight: 600; font-size: 18px; }
.icon-contato-footer { border-radius: 0; margin-top: -2px; -webkit-filter: invert(8%) sepia(34%) saturate(6355%) hue-rotate(217deg) brightness(90%) contrast(89%); filter: invert(8%) sepia(34%) saturate(6355%) hue-rotate(217deg) brightness(90%) contrast(89%); }
ul.menu-um { padding-left: 0; }
ul.menu-um li { margin-bottom: 10px; }
ul.menu-um li a { font-weight: 500; font-size: 18px; color: #212121; border-bottom: 1px solid #fff; -webkit-transition: 0.3s ease all; -o-transition: 0.3s ease all; transition: 0.3s ease all; }
ul.menu-um li:hover a { color: #0B077A; border-bottom: 1px solid #0B077A; }
/* coluna um */
.column-um { padding-left: 50px; }
/* coluna três */
.conosco { display: block; }
.column-tres p { margin-top: 25px; color: #323232; font-size: 18px; }
/* / column quatro / */
/* rede sociais */
.rs-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: end; align-content: flex-end; padding: 0 0 20px 0; }
.rs-icon { float: left; text-align: center; padding: 8px; background: #e0e0e0; border-radius: 50%; -webkit-transition: 0s ease all; -o-transition: 0s ease all; transition: 0s ease all; margin-top: 15px; }
.rs-icon img { border-radius: 0; -webkit-filter: none; filter: none; -webkit-transition: 0s ease all; -o-transition: 0s ease all; transition: 0s ease all; }
.rs-icon:hover { background-color: #0B077A; }
.rs-icon:hover img { filter: invert(1); -webkit-filter: invert(1); }
.pull-right { display: none; }
/* /// / lawtechs / /// */
.footer-b { display: block; margin: 15px auto 0; padding: 18px 0; }
.logo-footer, .logo-footer2 { border-radius: 0; -webkit-filter: grayscale(.3); filter: grayscale(.3); }
.b-bg { background-color: #e0e0e0; }
.col1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; width: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.membro-associacao { text-align: center; font-size: 14pt; font-weight: 600; color: #383838; margin-left: 20px; margin-bottom: 0; }
/* barra inferior */
.centro strong { font-weight: 600; }
.centro a.empresa { font-weight: 400; }
.centro a.empresa b { font-weight: 400; }
/* ///////////////////////////// OUTROS ///////////////////////////// */
.amazingslider-bottom-shadow-0, .amazingslider-timer-0, .amazingslider-arrow-right-0, .amazingslider-arrow-left-0 { display: none !important; }
/* anchor offset */
.anchor-offset { display: block; position: relative; top: -90px; visibility: hidden; height: 1px; }
@media (max-width: 767px) { .anchor-offset { top: -40px; } }
/* títulos */
h1, h2, h3, h4, h5, h6 { font-weight: 600 !important; }
/* full width */
.content-full-width { width: 1130px; display: block; margin-left: auto; margin-right: auto; }
@media only screen and ( min-width: 1200px ) { .full-width { margin-left: calc(-100vw / 2 + 1120px / 2)!important; margin-right: calc(-100vw / 2 + 1120px / 2)!important; } }
@media only screen and ( max-width: 1199px ) { .full-width { margin-left: calc(-100vw / 2 + 940px / 2)!important; margin-right: calc(-100vw / 2 + 940px / 2)!important; } .content-full-width { width: 970px; } }
@media only screen and ( max-width: 991px ) { .full-width { margin-left: calc(-100vw / 2 + 650px / 2)!important; margin-right: calc(-100vw / 2 + 650px / 2)!important; } .content-full-width { width: 750px; } }
@media only screen and ( max-width: 766px ) { .full-width { margin-left: -15px !important; margin-right: -15px !important; } .content-full-width { width: 95%; } }
/* NAV BAR 991PX */
@media only screen and ( max-width: 991px ) and ( min-width: 767px ) { .navbar .container { display: flex; flex-direction: column; } .navbar-header { display: flex; justify-content: center; } ul.nav.navbar-nav.navbar-right { width: 100%; display: flex; justify-content: center; } }
/* RESPONSIVO */
@media ( max-width: 991px ) { .planos img { padding-top: 0; } .column-um { padding-inline: 0; } .footer-a { text-align: center; } .rs-footer { display: flex; flex-direction: row; justify-content: center; } .rs-icon { margin-inline: 10px; } .consultoria .col-md-7 { padding-left: 15px; } .consultoria p { padding-inline: 15px; text-align: center; } .planos p { text-align: center; } .col1 { flex-direction: column; } .consultoria img { margin-right: auto; } }
@media ( max-width: 767px ) { .sticky-navigation.stuck .navbar-default { display: none; } #logo_ap img { padding-block: 10px; } img.logo { display: none; } .row-2 { margin-top: 0 !important; } }
.botao_orc {background-color:#04337a;border:0;border-radius:3.5em;color:#fff !important;cursor:pointer;display:inline-block;height:2.5em;line-height:2.5em;outline:0; margin-bottom: 6px; padding:0 2em;position:relative;text-align:center;text-decoration:none;-moz-appearance:none;-webkit-appearance:none;-o-appearance:none;-ms-appearance:none;appearance:none;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.botao_orc:hover{background:#0162c7;}

HTML:
<div id="quem-somos" class="anchor-offset anchor-consultoria"> </div>
<div class="consultoria">
<div class="row">
<h3 class="title-principal"><a href="https://www.advogadoonline24hs.com.br/">Advogado Empresarial</a><br />Quem somos?</h3>
<div class="col-md-7">
<p><span style="font-size: 12pt;">Primeira plataforma do Brasil, de <a href="https://www.advogadoonline24hs.com.br/">Consultoria Jurídica ONLINE</a>, em tempo real, para Pequenas Empresas e Grandes Empresários.</span></p>
<ul>
<li data-aos="fade-right" data-aos-duration="400"><span class="identificador-consultoria">⁍</span> Rápido</li>
<li data-aos="fade-right" data-aos-duration="500"><span class="identificador-consultoria">⁍</span> Prático</li>
<li data-aos="fade-right" data-aos-duration="600"><span class="identificador-consultoria">⁍</span> Personalizado</li>
<li data-aos="fade-right" data-aos-duration="650"><span class="identificador-consultoria">⁍</span> Sem burocracia</li>
<li data-aos="fade-right" data-aos-duration="650"><span class="identificador-consultoria">⁍</span> Melhor custo benefício</li>
<li data-aos="fade-right" data-aos-duration="700"><span class="identificador-consultoria">⁍</span> Garantia de satisfação</li>
</ul>
</div>
<div class="col-md-5"><img style="display: block; margin-left: auto; margin-right: auto;" src="/img/upload/source/mtablet.png" alt="" width="399" height="336" /></div>
</div>
</div>

3 imagens com fadein fadeout

CSS:

/* ANIMAÇÃO DE FADE IN E OUT */
.galeria-imagens{ display:flex; justify-content:center; gap:15px; flex-wrap:wrap;
}
.item-galeria{ width:32%; text-align:center;
}
.item-galeria img{ width:100%; height:auto; display:block; opacity:0; animation:fadeIn 1s ease forwards;
}
.item-galeria:nth-child(2) img{ animation-delay:0.3s;
}
.item-galeria:nth-child(3) img{ animation-delay:0.6s;
}
.item-galeria p{ margin-top:10px; font-size:16px; line-height:1.4;
}
@keyframes fadeIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); }
}
@media (max-width:768px){ .item-galeria{ width:100%; max-width:500px; }
}
/* FINAL ANIMAÇÃO DE FADE IN E OUT */

HTML:

<div class="galeria-imagens">
<div class="item-galeria" style="text-align: center;"><img src="/img/upload/source/i1.jpg" alt="" />
<p><span style="font-size: 14pt; color: #eea972;"><strong>Fale com especialistas</strong></span></p>
<p><span style="color: #f1f1f1;">Nossos profissionais são capacitados e experientes, oferecendo consultoria e agilizando ao máximo os processos.</span></p>
</div>
<div class="item-galeria" style="text-align: center;"><img src="/img/upload/source/i2.jpg" alt="" />
<p><span style="font-size: 14pt; color: #eea972;"><strong>Atendimento para todo o Brasil</strong></span></p>
<p><span style="color: #f1f1f1;">Contamos com parceiros escolhidos em pontos estratégicos e oferecemos atendimento online.</span></p>
</div>
<div class="item-galeria"><img style="display: block; margin-left: auto; margin-right: auto;" src="/img/upload/source/i3.jpg" alt="" />
<p style="text-align: center;"><span style="font-size: 14pt; color: #eea972;"><strong>Consultoria jurídica</strong></span></p>
<p style="text-align: center;"><span style="color: #f1f1f1;">Consultoria jurídica em seus processos, desenvolvimento de contratos, etc.</span></p>
</div>
</div>

Links com conteúdo:

AOS