Repositório Códigos HTML
3. Caixa de destaque com ícone(s)
Título
Texto
Veja a seguir o código HTML comentado.
<div class="spotlight spotlight-v2" style="border-left: 4px solid #1b3a43;"><i class="fas fa-comment fa-3x" style="float: left; margin-top: 7px; color: #1b3a43;"></i>
<div style="margin-left: 90px;">
<h3 style="color: #1b3a43;">Título da caixa</h3>
<p><span>Texto</span></p>
<a class="btn btn-sucess" href="#" target="_blank" style="background-color: #1b3a43;"><i class="fas fa-external-link-alt"> </i>Arquivo</a></div>
</div>
O padrão é o mesmo para as diferentes caixas.
O trecho em amarelo claro se refere ao ícone (comment=balãozinho, book=livro, puzzle-piece=quebra cabeça, font=A).
Os trechos em salmão são o título da caixa e o texto explicativo. Aqui basta inserir os textos, cuidando para não apagar nenhuma demarcação HTML. Importante manter relação do ícone com o título da caixa.
O trecho em azul é o link para o "arquivo". Para obter esse link, suba o arquivo em uma pasta do ambiente, clique com o botão direito sobre o arquivo e copie o endereço do link.