Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Olá boa noite! Dúvida sobre a borda!

Após realizar algumas mudanças no código, junto aos professores, a borda dos links de acesso as redes simplesmente sumiram, busquei na linha do tempo do VSCODE, para verificar se apaguei algo sem querer, mas até agora não consegui identificar o problema!

Segue abaixo como está o projeto até agora.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Agradeço a ajuda desde já! =]

*INDEX *:

          <div class="apresentacao__links">
                <h2 class="apresentcao_subtitulo">ACESSE MINHAS REDES</h2>
                <a  class="apresentacao__links__link" href="https://www.instagram.com/_gaberamoss_/">
                    Instagram
                    <img src="AULA/Assets-aula2-curso3-html-e-css-main/assets/instagramlink.png">
                   
                </a>
                 
                <a  class="apresentacao__links__link" href="https://github.com/guilhermeonrails?tab=packages">
                    GitHub
                    <img src="AULA/Assets-aula2-curso3-html-e-css-main/assets/githublink.png">

                </a>
        </div>
    </section>
        <img src="AULA/Assets-aula2-curso3-html-e-css-main/assets/ROCK2.png" alt="Foto da Joana Santos programando">
</main>
<footer></footer>

CSS:

 apresentacao__links {
 display: flex;
 gap: 32px;
 align-items: center;
 
 flex-direction: column;
 justify-content: space-between;
 }

.apresentacao__links_link {
/* background-color: #1af5e3; */
width: 280px;
text-align: center;
border-radius: 30px;
font-size: 32px;
padding: 21.5px 0;
text-decoration: none;
color: #1098c9;
font-family:'Poppins', sans-serif;
font-weight: 600;
border: 40px; solid #19b2d1;
 display: flex;
  gap: 16px;
  }

.letsrock { font-size: 30px; }

2 respostas

Olá Gabriel, tudo bem?

Lamento que a borda não está aparecendo como esperado. Vamos resolver essa questão.

Encontrei um detalhe importante na definição da borda dentro do seletor .apresentacao__links__link. Identifiquei um valor que pode estar causando a ausência da borda: border: 40px; solid #19b2d1;.

Para corrigir isso, vamos fazer um ajuste nessa linha de código. O correto é:

border: 40px solid #19b2d1;

Porém, gostaria de lembrar que com esses valores, a borda ficará bastante visível, o que pode não coincidir com a aparência desejada no projeto. Se você quiser manter o visual apresentado no curso, sugiro o uso dos seguintes valores:

border: 2px solid #22D4FD;

Espero ter conseguido ajudar, qualquer dúvida estou à disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
solução!

Muito obrigado pela ajuda! Eu parei para reparar também que o problema também estava no CSS, pois eu criei a classe ".apresentacao__links__link". Mas estava estilizando o: .apresentacao_links_link, ou seja, era isso que vc me falou e também a falta de um "_" Muito Obrigado! =]