Submitted 6 months ago

Social Links

David Cardozo• 80

@cardozo309

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Da próxima vez quero me atentar a organizar mais o código.

What challenges did you encounter, and how did you overcome them?

Encontrei desafio em acertar a cor da letra verde, mas fui atrás de ferramentas que conseguem definir para mim.

What specific areas of your project would you like help with?

Gostaria do feedback geral onde posso melhorar.

Community feedback

David Cardozo• 80

@cardozo309

Posted 6 months ago

Não estou conseguindo compreender porque na minha solução parece está quebrado (os links estão saindo do card), mas quando abro o site do projeto esta normal.

Luis Vera• 170

@LuisVera1

Posted 6 months ago

Hi David!

The links were overflowing from the container because it had a fixed height:

.container{
    background-color: #1F1F1F;
    text-align: center;
    width: 330px;
    height: 450px;  /* <-- fixed height */ 
    border-radius: 8px;
}

but now, the container can grow with its content, still happens?, I haven't found this problem again.

Hope that's helpful, If it is, don't forget to mark it, thank you

Marked as helpful

David Cardozo• 80

@cardozo309

Posted 6 months ago

@LuisVera1 That was exactly it, thank you very much!

Luis Vera• 170

@LuisVera1

Posted 6 months ago

Hey David

Your solution looks great! To improve the semantics of your HTML, here are some suggestions

--- Use the appropriate HTML element

Use the <main> to wrap all the content instead a <div> element
Use <a> for the links, for example, replace

<div class="link">GitHub</div>

<a class="link">GitHub</a>

--- Css

To center the card you could use flexbox

  display: flex;
  justify-content: center;
  align-items: center;

You can center an element with margin, but only for the horizontal center. Finally, the green color is hsl(75, 94%, 57%), which you can find in the style-guide.md file.

Check out the following link: social-links

Hope that's helpful!

Keep the good work!

David Cardozo• 80

@cardozo309

Posted 6 months ago

@LuisVera1 This link you sent really surprised me, it's really good for testing and studying.

allexandre• 30

@sousalle

Posted 6 months ago

Boa noite cardozo, Como vai?

Bem na pasta que o front-end disponibiliza tem style-guild nele tem todas as informações que você precisa como as cores que você vai utilizar, fonts, tamanhos durante o projeto.

Pro código ficar melhor tente colocar um widht e um height para aumentar o fundo do projeto, pra você que está começando recomendo o curso de HTML5 e CSS3 do professor Gustavo Guanabara além de referencias bibliográficas como: MDN e W3school

David Cardozo• 80

@cardozo309

Posted 6 months ago

@Ale04-git, muito obrigado pela dica. Estou fazendo sim o Curso do mestre Guanabara, porém também estou fazendo o da OneBitCode, nele encontrei mais exercícios embora o do mestre Guanabara esta mais atualizado.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord