@GSD3v08
Latest solutions
Order summary component challenge hub using Flexbox & GSAP
#gsap#accessibilitySubmitted over 3 years ago
Latest comments
- @Sagameister
Looks, fantastic! The only tiny improvement I can see is in the HTML mark up you can make it more accessible like so:
- Consider rewrite <main> to <main class="card"></main> and remove <div class="card">. You also save 2 lines. ;-)
- Consider changing <div class="text-container"> to <article class="text-container">...
By the way, I love the way you used the CSS variables. I need to do more of that.
Cheers. 😃
Marked as helpful - @Cooly-o-Cats
- @Gabriel-Leao@Sagameister
Looks awesome, mate! Love your solution for the hero image hover effect!
As for your aligning the icon try:
.card-icons { margin-bottom: 1vh; display: flex; justify-content: space-between; align-items: center ; }
Then inside the .card-icons div, create a new div and place the etherium icon and text inside it. And same with items on the right.
This should help align better. I hope this helps! :-)
Marked as helpful - @Rabie-Abdullah@Sagameister
Great Job! Also, I noticed how you can clean up a little code.
In your CSS for p: remove text-align: center; instead add it to your .qr_text class. This way your h1 and the p are centered within the container.
Cheers! :-)
Marked as helpful - @deepaksaroha@Sagameister
Awesome job!! The code looks great!
The only thing that can make you a tiny bit more efficient is adding a class for your main tag in the HTML. For example, <main class="outer">. And the layout could be much better looking using the google font specified in the readme doc.
Cheers.
Marked as helpful - @kunals741@Sagameister
Well done!!
