Skip to content
OverviewSolutions
16
Comments
9
Mohamed Hussein
@MohamedHussein05

All comments

  • Mohamed Hussein•305
    @MohamedHussein05Posted about 3 years ago

    Great Effort Tushar, Keep going.

    You should check this article to learn more about Gradients.

    0
  • Juveria Dalvi•1,375
    @Juveria-DalviSubmitted about 3 years ago

    Hello people's, how do you change the size of that svg-image? I tried doing it but was not able to resize it. Let me know if you have any idea how to resize the svg-image in this project. and feel free to suggest me how I can improve my mistakes so that I can update my solution.

    3-Column-preview-card-component using flexbox

    1
    Mohamed Hussein•305
    @MohamedHussein05Posted about 3 years ago

    SVGs are different than bitmap images such as PNG etc, so increasing the width of the img won't make the icons any taller if the height is restricted.

    You'll just end up with the img horizontally centred in a wider box, check this article to know How to Scale SVG.

    You also can use a tool like this one resize SVG as a quick solution.

    1
  • Mihir Shjah•15
    @Mojo11Submitted about 3 years ago

    I created my version of the order summary but there are still a lot of things that are not there. I wanted the box to be rounded and also the box shadow could have been there. Also the change link, I was not able to shift it next to the annual plan. Can anyone suggest how these things can be resolved ?

    Atom, CSS button creator, Google Fonts.

    3
    Mohamed Hussein•305
    @MohamedHussein05Posted about 3 years ago

    Well done I see that you did your best there, now about your questions:

    for rounded corners check this article : Rounded corners

    and this one for box shadows: How to add a shadow to an element

    finally in order to layout things you should learn layout tools like flexbox and CSS grid, check this list for Flexbox basics.

    hope this helps and if you need anything else don't hesitate to ask.

    0
  • Mohamed Hussein•305
    @MohamedHussein05Posted about 3 years ago

    Well done you did a good work, I'll only recommend using vh & grid in order to center the card, that will hide the scrollbar.

    1
  • AM46•290
    @amallen1Submitted about 3 years ago

    This used to be a challenging project for me when I was first learning web dev but I went back and finally finished it after studying a bit more :)

    Feedback on what could be improved is always welcome!

    3 Col component using CSS grid

    2
    Mohamed Hussein•305
    @MohamedHussein05Posted about 3 years ago

    You did a really good work, I also like the effect you added to the cards, You just need to add a hover effect on the buttons like in the design.

    Marked as helpful
    1
  • Mohamed Hussein•305
    @MohamedHussein05Posted over 3 years ago

    Great work on this one, I'll just Suggest few things to improve your work:

    1. The Card doesn't appear properly in the Landscape mode using body { (min-height: 100vh;) } instead of the current rule and removing #bottom-section { (height: 70%;) } will fix it.

    2. It's not recommended to set height on the card Use paddings & margins instead.

    3. The scrollbar isn't very nice, disabling it will give your page a better look.

    4. Try as hard as you can not to use height .. but If you must use min-height.

    Marked as helpful
    0
  • Mohamed Hussein•305
    @MohamedHussein05Posted over 3 years ago

    Well Done Keep going. but I've noticed in the landscape mode some parts of the card are hidden, my suggestion is to use (min-height: 100vh) in the section instead of the current rule that will fix it.

    0
  • Mohamed Hussein•305
    @MohamedHussein05Posted over 3 years ago

    Appreciate your effort! but I've noticed that the card in tablet is very wide so my suggestion is try to use (max-width) in the media query.

    0
  • Bibek Pant•85
    @pantbibek21Submitted over 3 years ago

    My github page is not rendering background image which is made is SVG. Other images such as illustration-hero.svg and icon-music.svg which are also in SVG are rendered. They all are in same image/ folder. I have specified all path correctly. What could be reason for that? Also please tell me how is my design. I have to boost my confidence. :) You are appreciated. Thank you so much !

    Layout with flexbox

    2
    Mohamed Hussein•305
    @MohamedHussein05Posted over 3 years ago

    The Path is Case Sensitive you wrote "Images" instead of "images", regardless of that you did great job keep going

    1