It was a lot of fun doing this challenge, I'm very pleased with the result. now I don't know why the images are not appearing in the layout view here in the frontend mentor, it must be because I inserted the images via css.
Any suggestions on how I can improve are welcome!
It was a lot of fun doing this challenge, I'm very pleased with the result. now I don't know why the images are not appearing in the layout view here in the frontend mentor, it must be because I inserted the images via css.
Any suggestions on how I can improve are welcome!
For this exercice I did not learn much, but I builded some react muscle memory since I'm just a beginner in react.
I'm not really confident about my CSS skills yet, this is something that I want to improve in the future. I'm getting the hang of React, starting to get faster at writing components and I'm learning new things. I'm also learning new things about the frontend development process, like defining components and writing them.
e ai cara, o layout ficou bem parecido, muito legal. Aproveita esse desafio pra treinar o seu html e o css que é bem tranquilo. qualquer coisa da uma olhada na forma que eu fiz https://github.com/jpsmenezes/nft-preview-card-component-main qualquer feedback é só falar. vlw
Tive alguns problemas para a responsividade, devido não saber posicionar as imagens em diferentes telas, então acabei deixando delas fixas. Queria conhecer outras formas para ter melhor posicionamento.
fala ai Erick, bem legal a forma que vc fez sem usar js. Acho que seu código ficaria mais organizado e limpo separando o html do css. mas ficou bem legal. Se quiser da uma olhada na forma que eu fiz: https://jpsmenezes.github.io/faq-accordion-card-main/
se tiver algum feedback é só falar.
What best practices didn't I use?
could have used more semantic tags, for example: container could be a section instead of a div. The div creator could be a footer and the class name could be an address.
Try to learn Tailwind CSS with some Challenges her.
Had some problems with the JS-Part to find a better solution her and also the "Share-Button" flying around on the Desktop-Version :(
Would appreciate feedback.
Thanks in advance
hey dude, for the share not to float on the screen when resizing, try to place it with absolute position inside a container with relative position and fixed size.
I had a problem with that too, but I solved it that way.
take a look: https://github.com/jpsmenezes/article-preview-component-master
Hi guys! I learn alot from doing this challenge but i have some questions. I dont really know how to make the display for the desktop or the mobile version.Where should i learn that from? I dont know how how to make the image change when i hover the cursor onto it. I thought i need a background color with a lower opacity but i couldnt figure it out. If i did more things wrong please tell me, i know i have alot to learn! Thank you!!
my solution was...
section.container .img:hover:after{ content: url(../images/icon-view.svg); position: absolute; }
if you want, take a look at it on git :https://github.com/jpsmenezes/nft-preview-card-component-main
I was not able to add the view icon over the image. So, please help me if you know how to do that
I did like this
section.container .img:hover:after{
content: url(../images/icon-view.svg);
position: absolute;
}
if you want, take a look at it on git :https://github.com/jpsmenezes/nft-preview-card-component-main
