Skip to content
OverviewSolutions
16
Comments
10
Ali Mahmoud
@AliMahmoud21

All comments

  • Ali Mahmoud•390
    @AliMahmoud21Posted about 1 year ago

    Hi, candicoded, I'll give some tips to make your challenge better.

    • Reduce the padding between the rating number to make it fit the card
    • Make an active background color on the rating numbers so that when I click any of the colors appears. It's so simple just make an active class to the rating nums With the color then add it with js 'classList.add('active')'.
    • When I click submit it shows me the thank Container try to make a js code that avoids sending an empty rating. just let the submit button work only when any of the rating nums chosen.
    Marked as helpful
    0
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Shrouq,

    • I recommend you use the following code in your document file to center the card:

    • body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem; }

    • Also, you must use "max-width" with the image to make it fit the card content, as well you gotta do some edits on the heading and paragraph.

    Lastly, make sure you use the semantics of Html in your document file. I hope this helps you...

    Marked as helpful
    0
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Bezies, I suggest you use the next code to center the card instead of using the transform: body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 1.5rem; }

    Marked as helpful
    0
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Fatema, I'm going to give you some tips, maybe it'll help you and make your design looks better. you can apply "hr" after every news and use the hover effect on the headings it'll be as the design, also you can apply hover on the headings section in your format. also, you can use "max-width" with the news section or you can use the way you want to divide them into two sections. try to reduce the width of the images in the last section by applying "max-width" on the images. one last thing, there's an error in your code because of an "img" tag in the ul section, you must solve it. the design is too good and I like the responsive part. I hope this was helpful and accept from a newbie :)

    Marked as helpful
    1
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Onome, Apply a background color for the page and white background for the card it'll make it better. Good design, keep up the good work...

    1
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Aymen. I recommend you Applying "margin-top" for the heading section, also you can add "text-align:center", it'll make the design looks better. I hope this was helpful.

    Marked as helpful
    0
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Michael, I just want you to reduce the background color for the image because it's not good for the users' eyes, but anything else is too good, keep up the good work.

    Marked as helpful
    0
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Mahmoud, Try to fix the source code because there's a problem with it, till people can help you. And I think that there's a "justify-content: space-between", remove it to make your design looks better. Also, use hover over the heading it'll make the headings looks better for the user. I hope this was helpful...

    Marked as helpful
    0
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Omnia! I want to remind you that there's a problem with the "Preview Site". Try to fix it so people can help you improve your code...

    0
  • Ali Mahmoud•390
    @AliMahmoud21Posted almost 2 years ago

    Hi Michael! I have some tips for you, I suggest you put all your code inside a container and then give it "max-width", also, give the text the half "max-width" that you gave to the container so it looks like the original design. you can also use "grid-template-columns: repeat(3, 1fr)" it will divide them into three columns and give the same result as the original design. You can also remove or reduce the box shadow, I think the design will be much better without it, as well you can put and implement all the ideas you want in the design. I hope this was helpful.

    Marked as helpful
    0