Skip to content
OverviewSolutions
14
Comments
9
Ahmed Abdelgawad
@ahmedAgawad

All comments

  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Hello 👋, Amazing work on completing this challange 👏👏.

    • to make the overlay transparent i suggest that you place the image-equilibrium.jpg as img inside the picture div then add the overlay color using ::before pesudo element on the picture div
    • to fix the accessibility issues you have in the report i suggest you use main tag as the card container
    • make sure you add alternative text to images in the page to improve accessibility

    Have a good day, Happy Coding 😊😊 .

    Marked as helpful
  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Hello 👋, Amazing work.

    • there is a small problem in the thanks card svg and itsn't displayed correctly you can fix it by changing the relative path of the img tag as following src="./images/illustration-thank-you.svg"
    • you can make the app responsive just by changing the width property to max-width on the main tag

    Hope this helps.

    Marked as helpful
  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Hello 👋, Nice job on completing this challange.

    • To remove the space below the images you can use display: block on the image tag itself and if you want to learn more about why this happening you can read this article Removing White Space Below Image Elements
    • To fix the accessibility issues its better to use main tag instead of the div tag as the card container

    Hope this helps , Happy Coding 😊😊.

  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Amazing job 👏👏, i have a question how did you manage to get the final code looking so close to the design.

    if there are any tools you use to do this ? , can you please share it with me i will be very happy.

    i also have a small suggestion if you can make the buttons and rate numbers a cursor : pointer; to make it obvious that these are clickable elements.

    have a good day.

  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Hello David , Congratulations on this project , amazing work 👏 👏

    i have some suggestions which may improve your project to be more close to the design :

    1. decrease the padding on the bottom of the card
    2. add box-shadow arround the whole card

    i hope these suggestions help you , keep the good work good luck.

  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Nice job Babacar 👏👏 , but there is a problem in the the thanks card illustration image to fix it you should use relative path of the image as

    src="images/illustration-thank-you.svg"

    by just removing the forward slash. keep the good work

    Marked as helpful
  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Great job Aaron , i have small suggestion which is removing the arrows from the input fields using this code

    input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Great work ,

    but i think you should use a localStorage in javascript so the theme that the user enable it will be saved for the next time

  • Ahmed Abdelgawad•315
    @ahmedAgawad

    Nice work, You just need to increase the width of the card and wrap the music symbol image and the annual plan price inside the same div to make them look like the design