All comments

Mark Matlock•20
@techmatlockSubmitted 6 months ago
What are you most proud of, and what would you do differently next time?
I'm proud of labeling all the classes to names that make sense. And using root selector with variable names that make sense.

I would try to make the footer stay at the bottom but center the content to be centered with the social profile flexbox. Also try to keep left and right margin of the black background in the body element which disappears when shrinking the content to mobile width.
What challenges did you encounter, and how did you overcome them?
I couldn't get the footer to stay at the bottom without using position fixed which I'm not sure is the best solution. The footer text was also not centered with the flexbox container containing the social profile.
What specific areas of your project would you like help with?
How to remove some of the space between the avatar image and the name of the developer. Best practices for all of the content and to make it responsive depending on size of page.

I also couldn't get the link font color to change to black upon hovering over the link with the hover pseudo selector.

I tried adding the color property but the black color is not working.
```
.social__link:hover {
  background-color: var(--clr-primary);
  color: var(--clr-neutral-black);
}
```
Responsive social profile using flexbox
1
Eduardo•150
@Edu-213Posted 6 months ago
To change the color of the link when hovering over it, you need to select the link directly. For example:

.social__link a:hover { color: var(--clr-neutral-black); };
1
Iago-luis•30
@Iago-luisSubmitted 6 months ago
What are you most proud of, and what would you do differently next time?
na proxima vez vou vazem um desaine melhor para o meu projeto
What challenges did you encounter, and how did you overcome them?
um desafio grande no css teve que ficar endo nas minhas anotações
What specific areas of your project would you like help with?
gostaria de receber um feedback, no que eu posso melhora no css
HTML E CSS
1
Eduardo•150
@Edu-213Posted 6 months ago
Para melhorar o CSS e torná-lo o mais próximo possível do design desejado, considere as seguintes alterações:

Aumentar o tamanho da imagem: Ajuste a largura e a altura da imagem utilizando a própria tag, exemplo:

img { width: 288px; height: 288px; }

Mudar as fontes: Utilize as fontes que foram disponibilizadas no arquivo style-guide.md, importando-as do Google Fonts e inserindo-as no index.html.

Alterar as cores dos textos: Utilize as cores que foram disponibilizadas no arquivo style-guide.md.

Adicionar margem: Insira margens ao redor dos elementos para espaçamento adequado. Use a propriedade margin para definir o espaço externo dos elementos.

Arredondar as bordas: Use a propriedade border-radius para arredondar as bordas tanto da classe filho quanto da imagem.

Centralizar os textos: Alinhe os textos ao centro usando a propriedade text-align: center
Marked as helpful
0
Pedro de Carvalho Godinho•60
@Evex12324Submitted 7 months ago
What are you most proud of, and what would you do differently next time?
Me orgulho de saber mexer com responsividade, com certeza, não faria nada de diferente! 😄
What challenges did you encounter, and how did you overcome them?
NO início, não sabia como iria fazer para mudar de uma imagem para outra apenas com CSS, mas depois de um bom tempo pensando, consegui resolver o problema!
What specific areas of your project would you like help with?
Nenhuma.
Responsivo de Imagens
2
Eduardo•150
@Edu-213Posted 7 months ago
Você poderia usar a tag <picture> juntamente com a tag <source> para fornecer várias versões de uma imagem com diferentes resoluções ou formatos, e assim não precisa usar o atributo display:none em nenhuma delas. Aqui está um exemplo:

' <picture> <source media="(max-width: 600px)" srcset="imagem-pequena.jpg"> <img src="imagem-grande.jpg" alt="Descrição da imagem"> </picture>'
0

Eduardo

All comments

Responsive social profile using flexbox

HTML E CSS

Responsivo de Imagens