@Muhammad-Ali-bhatti
Latest solutions
Latest comments
- @annab6
Hello! Here are some things that you can improve:
- Border-radius on cards
- You are using the wrong font family for the paragraphs. It should be font-family: 'Lexend Deca', sans-serif; and font-family: 'Big Shoulders Display', cursive; for the headings
- Add text-transform: uppercase; on your headings;
- Change text color on buttons according to design
- Add more padding on buttons
- You can try to add hover effect on buttons button:hover{....} Happy Coding!
- @buriancl@annab6
A great solution for this challenge! It´s totally responsive and looks identical to the design. Just a small and not important thing - text color on the .order-plan
Marked as helpful - @juliponti@annab6
Hi! Your solution looks great! The only problem - it´s not completely responsive. Layout breaks on 579px and up. You could try to add more breakpoints. Happy coding!
- @carlosecosmesilva@annab6
Hi, nice solution! I think you are missing hover effect on questions. Also, on around 1000px and down your layout breaks. You can add more breakpoints. On mobile layout can be good idea to add scroll, as it´s impossible to see all questions when some are opened. overflow-y: auto; Happy coding!
Marked as helpful - @harryHerdiana@annab6
Hi Harry! You can read in this article how to cover the image with css: https://css-tricks.com/tinted-images-multiple-backgrounds/ You can also set up the height of the body to be able to center container vertically: body{ height:100vh; display: flex; justify-content: center; align-items: center; }
Marked as helpful - @R3XCran1um@annab6
Hi! I think you could add image through css, not as an image tag in HTML. That way you could switch between desktop and mobile images for different breakpoints.
