@ptrwilk
Submitted
Unfortunately to change ellipsis(three dots) color on hover I had to create a separate .svg file that contains fill:white. Is there a better way of change ellipsis color without the need of creating dedicated file ?
@JustANipple
@ptrwilk
Submitted
Unfortunately to change ellipsis(three dots) color on hover I had to create a separate .svg file that contains fill:white. Is there a better way of change ellipsis color without the need of creating dedicated file ?
@JustANipple
Posted
Hi PTRWILK, Good job for completing this challenge!
To make ellipsis white, you can just use the filter rule to make the image brigther.
filter: brigthness(value); - work with values until you've found what you need
That will cause the element to look "white"
I hope this helps
Marked as helpful
@giobooo
Submitted
I took the liberty to add a random data generator when you click the app logo.
Any feedback is appreciated.
@JustANipple
Posted
Complimenti per la challenge! L'idea aggiuntiva secondo me è molto bella e il blocco calza bene con il resto del design
@3eze3
Submitted
I really liked this project, and I also wanted to experiment with some perspective effect when displaying the letter, you know if you have any suggestions and how to improve my code you can tell me by commenting, happy coding.
@JustANipple
Posted
The backface animation is something i will steal from you. I didn't know that was possible until now.
For a smoother experience, you could give your buttons a transition, but it might be personal taste
Nice work!
@Akisheva
Submitted
@JustANipple
Posted
Hi Akisheva, you've done a very good job for this challenge!
To solve the accessibility reports, just change your qr-component element from "div" to "main" and trying always having everything in an header, nav, main or footer. This makes it simpler for screen reader users to go through your website.
It might be something you don't want in this challenge, but it will become useful in the future
Also, to center your div you can use a "display: grid" and "place-content: center" on the body element
I hope this helps! Keep on going!
@tanvirshaikatx
Submitted
@JustANipple
Posted
Hi Tanvir. This is awesome! Spacing between the text blocks are perfect. Where did you learn that spacing technique?
Hi guys,
I'am struggling with the mobile version quite a bit, especially with the container dimensions padding right is not working and the content is overflowing. Does anyone know how I can fix this problem? Thank You !
@JustANipple
Posted
Hi Chris! Your content is overflowing because you're setting a fixed width, so the content is not breaking until it gets to the border of that width, that is overflowing the mobile view. You could set a max-width and then the block will resize to keep the content visible. Delete the .card-right {width: 50%} and the block will be responsive Remove the "/" before the img link and it will show up live
@bociKond
Submitted
I didn't figure out how to get the time left to stay right, but now typing this I guess I could've used grid instead of flex
@JustANipple
Posted
Hi Bocikond, nice work! For your time, you have everything in place, you just need to add "justify-content: space-between" in your .price-time class. that will cause the two items to have as much space as possible between them, making time stick to the right
Marked as helpful