@Minhote
P
Kevin Davis
@webdev1kevAll comments
- P@webdev1kev
You can add some box-shadows to the Payment button and the Card with box-shadow property to make those elements stand out like in the design.
Maybe make it a little a bit smaller width size
Add the background image in the css file with background-image: url() that came in the challenge to have that nice wavy two-toned pattern in the back instead of just one color.
Alot of it is really just trying to get as close as you can to the design given.
Pretty good job! Keep it up and happy coding.
- @abolfazl-omidvarrP@webdev1kev
Love the animations wish I put more thought into animations in mine.
The navbar doesn't have the background blur effect like in the design. You can include it by using backdrop-filter: blur() in your css.
Also the navbar gets pretty scrunched together and the layout breaks in certain smaller screen sizes. May want to see how you can change up the CSS grid. I like to use a 12 column layout to define the grid on my page so things can be sized easier and moved around with grid-column at different media queries.
Also the paragraph text should just be regular 'Barlow' font may want to include that in the <link/> tag as well.
Hope this helps and happy coding.
Marked as helpful - @IshitaBisariaP@webdev1kev
There are a lot of different ways to approach the color overlay. If you don't want to mess with all those filter properties you could give the #right-div a background-color and change the opacity of the image to like 0.5. From there you can just mess with the background color until it matches close to the color of the design.
Hope this helps and keep up the good work!
Marked as helpful - @GColvilleP@webdev1kev
Yea this one was tricky for me as well!
For positioning elements I would definitely try to take advantage more of flexbox so you don't have to hard code a lot of margins, especially for the faq-container, since its more grid-like and uniform unlike the image, not sure how to effectively use flexbox on the image lol.
Also try to use more percentage or relative values in margins, padding, so that items can position themselves more dynamically when the screen size changes.
Other than that keep at it!
Marked as helpful
