4
respostas

[Dúvida] Cores do desafio Mundo Pet

Não estou acertando a mão nas cores do desafio MUNDO PET!

Algum instrutor poderia, por gentileza, completar o root com as cores e me ajudar com isso?

 :root{
    --background-color:   ;
    --text-color:   ;
    --primary-color:   ;
    --secondary-color:   ;
    --tag-color:    ;
    --itens-background:    ;
    --font-family: "Prompt", sans-serif;
}

Pode parecer má vontade, mas a verdade é que eu já pelejei!

Se os projpeto é igual o do CodeConect era pra essas benditas variáveis "bater", mas num tá batendo.

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
4 respostas

Olá Rosemberg.
Vou preencher seu root com cores hexadecimais.
Agora quando abrir o codigo no editor vai aparecer uma caixinha com a cor.
Voce pode alterar a cor escolhendo em uma paleta.
Testa ai:

:root {
    --background-color: #F4F4F9;  /* Um tom claro, quase branco, para o fundo */
    --text-color: #333333;        /* Um cinza escuro para o texto, que garante boa leitura */
    --primary-color: #FF6F61;     /* Um tom de laranja avermelhado, perfeito para o destaque */
    --secondary-color: #3A9B8C;   /* Um verde água suave para contrastar com o laranja */
    --tag-color: #FFD166;         /* Um amarelo quente, ótimo para destacar tags ou ícones */
    --itens-background: #FFFFFF;  /* Branco para o fundo de itens, mantendo a estética limpa */
    --font-family: "Prompt", sans-serif;  /* Fonte já definida, que é ótima para leitura */
}

Lembrando que para consolidar nosso aprendizado não tem como fugir!
É mão na massa literalmente!
Bons estudos.

Sacanagem seria se eu não tivesse tentado. Ou você discorda, Ronaldo?

Não sei se você leu, mas fiz questão de ressaltar o quanto eu tentei.

Eu não deveria, mas vou te explicar o motivo pelo qual eu pedi ajuda, tá joia?

Estou fazendo confusão ao utilizar as cores no formato de variável, talvez por não ter ficado claro (para mim) onde se aplica cada uma. Feito essa ressalva, eu poderia muito bem criar as cores de acordo com meu gosto pessoal, usando hexadecimal como você fez. Entretanto, quero que fique mais fidedigno possível, além de entender o contexto das varáveis em questão. E isso se tornou impossível diante da confusão que eu estou fazendo.

De todo modo, obrigado por "quebrar meu galho"!

Bom dia Rosemberg.
Primeiramente queria pedir desculpas pela abordagem do post acima.
Fiz uma brincadeira mas acabei sendo mal interpretado.
Não temos essa intimidade. ^^´
Dei apenas um exemplo para ajudar.
Tem algumas extensões e apps feitos para facilitar nosso trabalho na escolha de cores.
Segue ai:

Ferramentas de Escolha de Cores

  • Coolors:
    Uma ferramenta muito popular para gerar paletas de cores harmoniosas. Você pode ajustar, salvar e até exportar a paleta para usar no seu código.
  • Adobe Color:
    Permite criar esquemas de cores baseados em diferentes regras (complementar, análoga, triádica, etc.). Também tem a opção de explorar esquemas de cores criados por outros usuários.
  • Paletton:
    Outra ferramenta útil para gerar esquemas de cores interativos, ideal para quando você quer experimentar diferentes combinações de cores.
  1. Ferramentas de Inspiração
  • Color Hunt:
    Oferece paletas de cores que são atualizadas constantemente, com designs modernos e populares.
  • UI Gradients:
    Focado em gradientes, essa ferramenta pode te ajudar a escolher gradientes modernos para o seu site.
  1. Extensões de Navegador
  • ColorZilla:
    Uma extensão para o Chrome (e Firefox) que permite capturar cores diretamente de qualquer página da web.
    Você pode facilmente pegar o código hexadecimal de uma cor ou até mesmo criar gradientes.
  • Eye Dropper:
    Uma extensão para Google Chrome que permite pegar qualquer cor diretamente de uma página web.
  1. Ferramentas de Acessibilidade
  • WebAIM Color Contrast Checker:
    Depois de escolher suas cores, você pode verificar a acessibilidade delas.
    Essa ferramenta verifica o contraste entre as cores para garantir que seu site seja acessível a pessoas com deficiências visuais.
  1. Ferramentas para Extração de Paleta de Imagens
  • Image Color Picker:
    Se você tem uma imagem e quer extrair as cores dela, essa ferramenta vai te ajudar a pegar os códigos das cores presentes na imagem.
  1. Editor de Cores para CSS
  • CSS Gradient Generator:
    Para trabalhar com gradientes diretamente no seu código CSS. Você escolhe as cores e a ferramenta gera o código para você.
  • Color Picker by W3Schools:
    Uma ferramenta simples para selecionar uma cor e obter os códigos para usá-la no seu site (HEX, RGB, HSL, etc).

Testa estas alternativas e confere qual mais lhe agrada.
Depois me envia um feedback.
Bons estudos e caso precisar só avisar.
Até...

Bom dia, Ronaldo!

Uma das maiores virtudes do ser humano, se não a maior, é reconhecer onde errou.

Obrigado pela ajuda! Agregou e continua agregando.

Vou verificar cada uma das ferramentas e te darei um feedback, tá joia.

Tamo junto.