@paulo-xavier
@thaisavieira
Submitted
Please, check out the read.me in [my repository] (https://github.com/thaisavieira/profile-card-componet) where you can find more about my process how I built this project, and what I learned.
Do you have any tips about how can I make it even better?
Could the way I defined the spacings be done more cleanly?
@paulo-xavier
Posted
Olá @thaisavieira 👏
Parabéns pela conclusão do desafio! Você fez um ótimo trabalho. 😀
Para solucionar sua dúvida com relação ao espaçamento entre os elementos do .account-info, existe uma regra CSS chamada column-gap que é responsável pelo espaçamento entre colunas dos elementos, geralmente utilizada em casos onde você usa Flexbox.
Para esse caso específico, você pode acessar a sua ul e aplicar o seguinte comando:
ul {
display: flex;
column-gap: 30px;
}
Você pode adaptar o valor do column-gap de acordo com sua preferência.
Espero ter ajudado! Qualquer dúvida estou a disposição. Bons códigos 😀
Paulo Xavier
@bdal90
Submitted
Dear All,
Here is my newest challenge which is a true milestone in my learning process. It was the very first time that I came up with the whole javascript solution all by myself (no extra help, no google, no cheating). It took me a long time to learn even how to use console.log and I finally managed to do that this time and I was simply following my instincts. Therefore, I would truly appreciate if someone could have a glimpse on my code and see if it is alright or total garbage. Really ANY kind of comment/advice is extremely helpful for me.
Thanks a lot in advance,
Cheers,
Dalma
P.S.: I've had issues with the colors, so they might not match the design perfectly, sorry about that... :/
@paulo-xavier
Posted
Hi @bdal90 👋
Congratulations for completing the challenge!
The solution is well-done and almost perfectly. Great job! 😁
Suggestion for the next challenges 📌
<img src="assets/images/avatar-rizky-hasanuddin.webp" alt="" class="avatar">
Do not forget to include alternative text for your images; it makes the content more accessible, especially for users relying on screen readers or if the image does not load. 🌟
You did a great job!
Best regards,
Paulo Xavier.
@moncadad
Submitted
Honestly, after numerous attempts to replicate the designs background I came to the realization that I simply do not know what to do. It should be css basics, nothing complicated, I'm probably over thinking it, but I'm still completely lost. I suppose it's important to know when to ask for help and this is one of those times.
So hey, I'd appreciate any guidance or resource links that will help enlighten me.
@paulo-xavier
Posted
Hi! I spent many hours in this background too. My strategy to solve this was adding the two images in a <img> tag and then I positioned them using the "position: relative" and the basic properties for top and left.
HTML
<img class="bg-top" src="./src/images/bg-pattern-top.svg" alt="Bubble background">
<img class="bg-bottom" src="./src/images/bg-pattern-top.svg" alt="Bubble background">
CSS
.bg-top {
position: relative;
max-width: 800px;
height: auto;
left: -490px;
top: 311px;
}
.bg-bottom {
position: relative;
max-width: 800px;
height: auto;
top: -177px;
right: -418px;
}
Probably not the best solution as possible, but it worked for me! 😀
Marked as helpful