Hub do Alquimista

Componentes & Estilo

Catálogo completo de elementos, molduras, efeitos e animações que você pode usar em qualquer lugar do site.

Tipografia

Título H1

Isto é um H1

<h1>Isto é um H1</h1>

Título H2

Isto é um H2

<h2>Isto é um H2</h2>

Título H3

Isto é um H3

<h3>Isto é um H3</h3>

Parágrafo comum

Lorem ipsum dolor sit amet. Este é um parágrafo em corpo de texto normal, com a fonte Lora.

<p>Lorem ipsum...</p>

Negrito e itálico

Texto com negrito, itálico e os dois.

<strong>negrito</strong>
<em>itálico</em>

Link

Um link em dourado que fica branco ao passar.

<a href="#">link</a>

Molduras & Bordas

Moldura simples

Bordas simples em dourado
class="moldura-simples"

Moldura dupla

Bordas duplas com sombra interna
class="moldura-dupla"

Moldura tracejada

Tracejada em cinza
class="moldura-tracejada"

Moldura pontilhada

Pontilhada em dourado
class="moldura-pontilhada"

Moldura com sombra

Offset com sombra dourada
class="moldura-sombra"

Moldura com brilho

Brilho dourado ao redor
class="moldura-glow"

Badges & Tags

Variações de badges

padrão outline índigo vinho
class="badge badge-outline"
class="badge badge-indigo"
class="badge badge-vinho"

Barras & Progresso

Barra de progresso

<div class="barra-progresso">
<div class="barra-progresso-fill"></div></div>

Cards

Card com borda esquerda

Título
Conteúdo do card com borda lateral.
class="card"
class="card-titulo"

Card duplo

Título
Combinando moldura dupla com um card.
class="moldura-dupla"

Divisórias Decoradas

Símbolos

class="divisoria-simbolo"

Com título

capítulo
class="divisoria-titulo"

Linha gradiente

class="divisoria-linha"

Linha simples

<hr/>

Efeitos Hover

Hover com brilho

Passe o mouse aqui
class="efeito-hover-glow"

Hover com elevação

Levita ao passar
class="efeito-hover-lift"

Hover com inversão

Inverte cores
class="efeito-hover-invert"

Animações

Piscar

✦ piscando ✦

class="anima-piscar"

Brilhar

✦ brilhando ✦

class="anima-brilhar"

Flutuar

✦ flutuando ✦

class="anima-flutuar"

Símbolos & Ícones

Símbolo grande

✦
class="simbolo-grande"

Linha de símbolos

❋ ◆ ✦ ◆ ❋
class="simbolo-linha"

Código

Código inline

Use const x = 10 para variáveis.

<span class="codigo-inline">código</span>

Bloco de código

function exemplo() {
  return "olá mundo";
}
class="codigo-bloco"

Gradientes

Gradiente ouro

Fundo com gradiente vinho→ouro
class="gradiente-ouro"

Gradiente índigo

Fundo com gradiente índigo
class="gradiente-indigo"

Botões

Botão preenchido

class="botao-padrao"

Botão outline

class="botao-outline"

Tabelas

Tabela estilizada

Coluna 1 Coluna 2 Coluna 3
Dado A Dado B Dado C
Dado D Dado E Dado F
class="tabela-custom"

Paleta de cores

Fundo
#0a0a0a
Fundo Alt
#3b0d17
Destaque
#c2a36b
Borda
#6b5a3d
Índigo
#2c3564
Vinho Claro
#5a1a2a
Neutro Quente
#9c8478
Índigo Claro
#8fa0d8
Texto
#eaeaea

Como usar

Esta página é um catálogo de tudo que você pode fazer. Não suba para o Neocities — é só para você estudar localmente.