Tabela de Propriedades CSS

Código HTML para Copiar e treinar

Código Perfil para Staff

<style>

    .team-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        max-width: 900px;
        padding: 20px;
    }

    .team-card {
        background: var(--cor-seleção-fundo);
        border-radius: 10px;
        box-shadow: 0 4px 8px var(--cor-borda-baixo-post-resumido);
        padding: 20px;
        text-align: center;
        width: 250px;
    }

    .team-card img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--cor-borda-baixo-post-resumido);
    }

    .team-card h3 {
        margin: 10px 0;
        font-size: 18px;
        color: var(--cor-borda-baixo-post-resumido);
    }

    .team-card p {
        font-size: 14px;
    }

    .team-card .social-links {
        margin-top: 10px;
    }

    .team-card .social-links a {
        text-decoration: none;
        color: var(--cor-borda-baixo-post-resumido);
        font-size: 16px;
        margin: 0 5px;
    }

</style>

<div class="team-container">

    <div class="team-card">
        <img src="imagem.png" alt="Avatar">
        <h3>Nigohyu</h3>
        <p>Capista</p>
        <div class="social-links">
            <a href="link.com">🔗 Spirit</a>
            <a href="link.com">🔗 Wattpad</a>
        </div>
    </div>

    <div class="team-card">
        <img src="https://via.placeholder.com/100" alt="Avatar">
        <h3>hyunigo</h3>
        <p>Assinatura</p>
        <div class="social-links">
            <a href="link.com">🔗 Spirit</a>
            <a href="link.com">🔗 Wattpad</a>
        </div>
    </div>

</div>

Código Áudio PLAYLIST

<div id="music-widget">
  <div class="icon">🎵</div>

  <div class="music-container">
    <audio id="audio-player">
      <source src="" type="audio/mp3" />
      Seu navegador não suporta áudio.
    </audio>

    <ul id="playlist">
      <li onclick="playTrack(0)">TEMA DO 11th doutor</li>
      <li onclick="playTrack(1)">TEMA 8th doutor (1996)</li>
      <li onclick="playTrack(2)">TEMA MARTHA te amo desgracaaaa</li>
    </ul>
  </div>
</div>

<style>
#music-widget {
  position: fixed;
  top: 150px;
  left: -180px;
  width: 220px;
  transition: left 0.3s ease;
  z-index: 9999;
}

#music-widget:hover {
  left: 0;
}

#music-widget .icon {
  position: absolute;
  top: 10px;
  right: -35px;
  background: #111;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  font-size: 18px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  cursor: pointer;
}

.music-container {
  background: #111;
  color: #fff;
  padding: 15px;
  width: 220px;
  border-radius: 0 10px 10px 0;
  font-family: 'Arial', sans-serif;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

#music-widget audio {
  width: 100%;
  margin-bottom: 10px;
  outline: none;
}

#playlist {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

#music-widget:hover #playlist {
  max-height: 300px;
}

#playlist li {
  cursor: pointer;
  padding: 6px;
  border-radius: 5px;
  transition: background 0.3s;
}

#playlist li:hover {
  background: #333;
}
</style>

<script>
  const tracks = [
    "https://dn720700.ca.archive.org/0/items/tvtunes_28819/Doctor%20Who%20-%20Series%205%20-%2001%20-%20Doctor%20Who%20XI.mp3",
    "https://files.catbox.moe/vfs3yd.mp3",
    "https://files.catbox.moe/93h3yh.mp3"
  ];

  let currentTrack = 0;
  const player = document.getElementById("audio-player");

  function playTrack(index) {
    currentTrack = index;
    player.src = tracks[currentTrack];
    player.play();
  }

  player.addEventListener("ended", () => {
    currentTrack = (currentTrack + 1) % tracks.length;
    playTrack(currentTrack);
  });

  const widget = document.getElementById("music-widget");
  let started = false;
  widget.addEventListener("mouseenter", () => {
    if (!started) {
      started = true;
      playTrack(0);
    }
  });
</script>

Tabela de Propriedades CSS e Suas Funções

Confira mais sobre CSS no site: W3Schools.

Categoria	Propriedade	Função
📏 Tamanho e Dimensão	width / height	Define largura e altura do elemento. EX: 200(px, %, em)
	max-width / max-height	Define largura/altura máxima.
	min-width / min-height	Define largura/altura mínima.
🖼️ Espaçamentos	margin	Define a margem externa do elemento.
	padding	Define o preenchimento interno. EX: 2px;
	border	Define a borda do elemento. Ex: border: 2px solid red; onde: 2px é a largura da borda, solid o tipo de borda, red a cor. Tipos de borda: solid, dashed, dotted, double, groove, ridge, inset,outset
🎨 Cores e Fundo	color	Define a cor do texto.
	background-color	Define a cor de fundo. EX: #fff, white
	background-image	Define uma imagem de fundo. EX: url('imagem.png')
	background-size	Controla o tamanho da imagem de fundo.
	opacity	Define a transparência do elemento. EX: 0.2;
🔤 Texto e Fontes	font-size	Define o tamanho da fonte.
	font-family	Define a família de fontes. EX: font-family: 'Arial'
	font-weight	Define a espessura do texto (normal, bold etc.).
	text-align	Alinha o texto (esquerda, centro, direita todas em ingles*).
	text-transform	Transforma o texto (maiúsculas, minúsculas etc. em ingles*).
	a	personaliza link
	a:hover	personaliza link quando passa o mouse
📐 Posicionamento	position	Define o tipo de posicionamento (absolute, relative, fixed, sticky).
	top, bottom, left, right	Define o deslocamento do elemento posicionado.
	z-index	Controla a sobreposição dos elementos.(Ex: 9 (quanto maior, mais a frente de todos ele fica))
🏗️ Layout e Display	display	Define como o elemento é exibido (block, inline, flex etc.).
	visibility	Controla a visibilidade do elemento (visible, hidden).
	overflow	Controla o comportamento do conteúdo que excede o tamanho do elemento.
📌 Flexbox & Grid	display: flex	Ativa o layout flexível.
	justify-content	Alinha os itens no eixo principal do flexbox.
	align-items	Alinha os itens no eixo secundário.
	display: grid	Ativa o layout de grade (Grid CSS).
🎭 Efeitos Visuais	box-shadow	Adiciona sombra ao elemento.
	text-shadow e box-shadow	Adiciona sombra ao texto e caixa. EX: box-shadow: 10px 6px 5px 0px #cor; ou seja: 10px Move a sombra 10pixel vezes para a direita - 6px Move a sombra 6pixel para baixo - 5px Aplica um borrão de 5pixel - 1px altera o tamanho da sombra em 1 pixel - #cor da sombra
	transition	Adiciona transições suaves entre estados (apenas com hover).
	animation	Define animações CSS. (apenas com hover)
🚀 Outros	cursor	Define o tipo de cursor ao passar o mouse. Cursores padroes: default, pointer, text, wait. \| vc tbm pode aplicar uma imagem, ex: cursor: url('imagem.png'), auto;

Tabela de Fontes Padrão do HTML

Eu vou explicar como aplicar fontes de outros locias, sem ser as podrões, futuramente. porem você pode conferir o site do google fonts.google.com, é de lá pegamos as fontes diversas para aplicar no nosso código.

Fonte	Exemplo de Aplicação
Arial	font-family: Arial, sans-serif;
Verdana	font-family: Verdana, sans-serif;
Times New Roman	font-family: "Times New Roman", serif;
Courier New	font-family: "Courier New", monospace;
Georgia	font-family: Georgia, serif;
Tahoma	font-family: Tahoma, sans-serif;

Código HTML para Copiar e treinar

Código Perfil para Staff

Código Áudio PLAYLIST

Links:

sites de recusos css:

Tabela de Propriedades CSS e Suas Funções

Tabela de Fontes Padrão do HTML