@Muhammad-Ali-bhatti
Submitted
I have made this design using my knowledge i tried my best i am facing some promblems with responsiveness of the web page inshallah i will do my best
anna
@annab6
All comments
- anna• 340
@annab6
Posted
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!
0 @buriancl
Submitted
anna• 340@annab6
Posted
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
0- Julieta Pontino• 60
@juliponti
Submitted
anna• 340@annab6
Posted
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!
0 - Carlos Eduardo• 160
@carlosecosmesilva
Submitted
anna• 340@annab6
Posted
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
0 - Harry Herdiana• 35
@harryHerdiana
Submitted
Hi all, I need your help on changing the images to colored. I've using background and url now as an image. In my local machine, the image shown. but on live pages it doesn't show. Only the background color (filter) appear.
anna• 340@annab6
Posted
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
1 - Alessandro• 215
@alessandro-giuzio
Submitted
Hello there, please i need fedback
anna• 340@annab6
Posted
Hi Alessandro, I think you need to fix font family on your <p> You could set it up on the body, and then just use Big Shoulders Display for headings. Happy Coding!
Marked as helpful
1 - Prem M• 10
@prem225
Submitted
This is my first project in frontend mentor. Any feedback would be appreciated.
anna• 340@annab6
Posted
I think you have some things to fix:
- include google fonts
- take out border from the "change" button
- take out border and background from "cancel order"
- take out border from "proceed to payment" and center text
- add a hover effect to buttons
- and it´s not responsive at all, on 375px everything fails
0 - Senay• 150
@Senay-Fekadu2
Submitted
do you think the mobile version width is too big ? I was wondering and I just went with these tell me if it is not good in respective of UI design principle if I should avoid it for the future
anna• 340@annab6
Posted
Hello! I think you forgot about the hover effect on buttons see this https://developer.mozilla.org/en-US/docs/Web/CSS/:hover smth like this would be: .cta-btn: hover { color .... background-color... border... }
Marked as helpful
0 - Andrii• 25
@andriime
Submitted
I really don
t understand how to make websites both for desktop and for phones. Also I had a problem with 'Change'-link: position 'absolute' makes it really strange. But its the best I could makeanna• 340@annab6
Posted
Hi! I advise you to see this video of Colt about media queries, it helped me a lot with building a responsive layout https://www.youtube.com/watch?v=na-X_SM8vg0 Happy Coding!
Marked as helpful
1 @Daywison11
Submitted
anna• 340@annab6
Posted
I think you forgot about hover effects on links and buttons. .btazul:hover { background-color: hsl(245, 75%, 75%); }
Marked as helpful
1
