- Adobe
Photoshop - Fonte Myriad Pro, Tamanho 18, Cor Azul (tom da logo),
Itálico, Alinhamento à Esquerda.
- Illustrator
Vetor - Fonte Helvetica, Tamanho 20, Sublinhado por Palavra, Cor
Laranja (tom da logo), Centralizado.
- Premiere
Pro Edição - Fonte Arial Black, Tamanho 22, Negrito, Efeito de Texto
"Preenchimento - Gradiente", Justificado.
- After
Effects Animação - Fonte Century Gothic, Tamanho 16, Itálico,
Espaçamento de Caractere "Expandido", Alinhamento à Direita.
- AutoCAD
2D/3D - Fonte Times New Roman, Tamanho 14, Tachado, Cor Cinza, Alinhamento
à Esquerda.
- Game
School (GS) - Fonte Impact, Tamanho 26, Negrito e Itálico, Efeito de
Contorno no Texto, Centralizado.
- Monitor
180Hz - Fonte Verdana, Tamanho 18, Cor Ciano, Negrito, Alinhamento à
Direita.
- Teclado
Mecânico - Fonte Cambria, Tamanho 15, Versalete (Todas em Maiúsculas
Pequenas), Justificado.
- Mouse
Gamer - Fonte Calibri, Tamanho 12, Sublinhado Pontilhado, Cor Verde,
Alinhamento à Esquerda.
- Headset
7.1 - Fonte Arial Narrow, Tamanho 19, Itálico, Efeito de Reflexo no
Texto, Centralizado.
- APA
Uberlândia - Fonte Garamond, Tamanho 17, Negrito, Cor Laranja (tom da
logo da GS), Alinhamento à Direita.
- Corujão
Beneficente - Fonte Franklin Gothic Medium, Tamanho 24, Sublinhado
Ondulado, Cor Roxo, Centralizado.
- League
of Legends - Fonte Friz Quadrata (ou similar), Tamanho 20, Negrito,
Efeito de Brilho no Texto, Centralizado.
- Valorant
- Fonte Tungsten (ou similar), Tamanho 22, Cor Vermelha, Negrito e
Itálico, Alinhamento à Direita.
- CS2
(Counter-Strike 2) - Fonte Stratum 2 (ou similar), Tamanho 18, Cor
Amarela, Negrito, Alinhamento à Esquerda.
- Roblox
Studio - Fonte Gill Sans, Tamanho 16, Itálico, Cor Azul Claro,
Justificado.
- Inteligência
Artificial (IA) - Fonte Rockwell, Tamanho 20, Sublinhado, Efeito de
Texto "3D", Centralizado.
- Programação
em JavaScript - Fonte Lucida Console, Tamanho 13, Cor Verde Escuro,
Alinhamento à Esquerda.
- Certificado
de Conclusão - Fonte Palatino Linotype, Tamanho 22, Negrito, Cor
Dourada, Centralizado.
- Semana
das Crianças GS - Fonte Bauhaus 93, Tamanho 28, Cor do Texto em
Gradiente (várias cores), Efeito de Contorno, Centralizado.
- Blender - Fonte Arial, Tamanho 12, Cor do Texto Laranja, Efeito de Subscrito
- Notepad ++ - Fonte Verdade, Tamanho 14, Cor do Texto Roxo, Efeito de Sobrescrito
- PowerPoint - Fonte Times new Roman, Tamanho 9,5, Gradiente Laranja, Tachado Duplo
- Excel - Fonte Cambria, Tamanho 10,2 , Gradiente Verde, Todas em Maiúsculas, Posição Elevado
- Lightroom - Fonte Imbue, Tamanho 11, Gradiente Azul, Posição Rebaixado
<!DOCTYPE html>
<html>
<head>
<title>Inventário GS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="inventario-container">
<div class="item-principal">Espaço Principal</div>
<div class="slots-grid">
<div class="slot item-raro">Slot 1</div>
<div class="slot item-epico">Slot 2</div>
<div class="slot item-comum">Slot 3</div>
<div class="slot item-lendario">Slot 4</div>
<div class="slot">Slot 5</div>
<div class="slot">Slot 6</div>
<div class="slot">Slot 7</div>
<div class="slot">Slot 8</div>
</div>
</div>
</body>
</html>
/* NOVO: Ajuste para melhor controle */
* {
box-sizing: border-box; /* Garante que padding e border não aumentem a largura total */
}
/* No topo do seu arquivo inventario.css */
:root {
/* ... variáveis ... */
--cor-fundo-principal: #34495e;
--cor-slot-vazio: #2c3e50;
--cor-borda-destaque: #f39c12;
}
.inventario-container {
width: 500px;
margin: 50px auto;
background-color: var(--cor-fundo-principal);
padding: 20px;
border-radius: 10px;
}
.item-principal {
height: 100px;
border: 3px solid var(--cor-borda-destaque);
background-color: #2c3e50;
margin-bottom: 15px;
text-align: center;
line-height: 100px;
color: white;
}
.slots-grid {
display: grid;
/* Correção: Usa 1fr para que o Grid decida a altura das duas linhas */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
padding-top: 10px; /* Reduzi o padding para ficar mais compacto */
height: 180px; /* Adiciona uma altura para o Grid funcionar melhor com '1fr' */
}
.slot {
/* Não precisa mais de height fixo se o grid-template-rows usar '1fr' */
background-color: var(--cor-slot-vazio);
border: 2px solid var(--cor-fundo-principal);
border-radius: 5px;
text-align: center;
/* line-height 80px para o texto ficar no meio */
line-height: 80px;
color: white;
font-size: 12px;
transition: all 0.2s ease-out;
}
.item-raro {
--cor-slot-vazio: #8e44ad; /* Roxo Lendário */
border: 3px solid gold;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
.slot:hover {
/* Efeito de Seleção (Brilho + Transformação) */
/* 1. Faz o slot "pular" levemente */
transform: translateY(-2px) scale(1.03);
/* 2. Adiciona um brilho sutil para indicar o foco/seleção */
box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.4);
/* 3. Mudar a borda para a cor de destaque (Laranja GS) */
border: 2px solid var(--cor-borda-destaque);
/* IMPORTANTE: Use o cursor pointer para simular que é clicável */
cursor: pointer;
}
/* ITEM RARO: Sobrescrevendo o tema */
/* Adicione esta regra */
.item-principal:hover {
/* Simula uma borda mais grossa e um brilho levemente diferente */
border: 3px solid white;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
cursor: pointer;
transform: scale(1.01); /* Pula menos que os slots menores */
}
0 comentários:
Postar um comentário