Skip to content
OverviewSolutions
17
Comments
44
Fury
@ashiqfury

All comments

  • Fury•945
    @ashiqfuryPosted almost 3 years ago

    Great work 👍

    • You forgot the hover animation in image, you can achieve this using pseudo-element selectors: learn more
    • Use some transition for text and images to look hovering animations more pleasent

    I hope my suggestions will help your to improve your code. Thank you.

    Marked as helpful
    0
  • Fury•945
    @ashiqfuryPosted almost 3 years ago

    Great work 👍

    • After importing fonts, you should use that in body like:
    body {
     font-family: 'Red Hat Display', sans-serif;
}
    • Don't specify the height property in .card, the content will overflow according to screen sizes. Alternately, you can use min-height: 525px
    • In design, there is some background image. You can achieve this by using:
    body {
     background: url(./images/pattern-background-desktop.svg) hsl(225, 100%, 94%) no-repeat;
}

    I hope my suggestions will help to improve your future projects. Thank you.

    Marked as helpful
    0
  • MajidiyM•20
    @MajidiyMSubmitted almost 3 years ago

    Hello everyone, I've made this solution by using SCC. Please check my code and feel free to write a feedback

    Created solutions using sass

    3
    Fury•945
    @ashiqfuryPosted almost 3 years ago

    Fantastic work.

    • I noticed some color issues in corners of the .comp_img when hovering, you can fix this by reducing the border-radius: 8px. Reduce 2px from the parent container
    • You forget the double box-shadow effect in the .component

    I hope my suggestions will help to improve your code. Thank you. 🙌

    Marked as helpful
    0
  • Juan Herrera•130
    @Juan13052001Submitted almost 3 years ago

    Any comment is accepted in order to improve my design, unfortunately I still do not understand well the flexbox and grid, the question is: what would you recommend me to use, now, what framework do you recommend? And about the position, how would you use it in this situation?

    QR code component usign HTML and CSS

    3
    Fury•945
    @ashiqfuryPosted almost 3 years ago

    Great work. Welcome to the frontend mentor, I cant believe this is your first project.

    • Dont use height in the main div container.
    • Use relative values like % for your img and div instead of absolute values.
    • You can use flexbox to code your more clean and responsive like:
    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
}
.container {
      margin: 0;
}

    I hope my suggestions will work for your future projects. Thank you.

    Marked as helpful
    0
  • Fury•945
    @ashiqfuryPosted almost 3 years ago

    Fantastic work..👌

    • When I first type India it does not show up, I thought there is some bugs on your code.
    • I reviewed your code, I noticed you compared the country name and region. It really a good thing.
    • Then I changed region to Asia and tried again, worked.
    • I really learned so much things on your code.

    I write a simple and clean code.. I liked that.

    • Reduce the transform effect, subtle scaling animation will look pleasent.
    • Use lazy loading, to improve performance, because there some many images to load at a time.

    I hope my suggestions will help to improve your future projects.

    Thank you.

    Marked as helpful
    1
  • Fury•945
    @ashiqfuryPosted almost 3 years ago

    Fantastic work.

    I can't believe this is your first project. Your solution exactly looks like the design.

    • Make sure your text width is lesser than image width. Put the h1 and h3 in separate div container, so that you can code different width for text and image.
    • Remove margin in body tag. By doing this, you can fix the extra height in your site.
    • In body tag, font-size should had relative values like rem, em, %. Using absolute value will reset the tag's default font sizes.
    • Try using shorthand property as much as possible.

    I hope my suggestions will help to improve your code. Thank you. 🙌

    Marked as helpful
    1
  • Fury•945
    @ashiqfuryPosted almost 3 years ago

    Good Job 😘

    • Use some transition in parent elements, it looks the hovering animations pleasent.
    • Images must have some width and height properties. It prevents the shrink effect when responsiveness.
    • Use font api links in HTML page instead of importing in css page, it improves your site performance.

    Build some projects like this in future. I am eagerly waiting for your projects. I hope my suggestions will help you.

    Thank you so much.

    Pakoda vera level pandra pooo... 🔥😍 (Only this user can understand this 😁)

    Marked as helpful
    1
  • Fury•945
    @ashiqfuryPosted almost 3 years ago

    Hi there.. 👋 You done a great work. This solution looks so clean and it looks perfectly like a design.

    One point I noticed :

    • When I add different items in cart, the cart displays always first item and only one is displayed.
    • And reducing the alpha value in border on .header-inner container make it more pleasant.

    Thank you.

    Marked as helpful
    1
  • Fury•945
    @ashiqfuryPosted almost 3 years ago

    Great work.

    • Use some transition to make it more pleasant
    • Have a look on font-weight to highlight the most important texts.
    0
  • hidayahmsabah•160
    @hidayahmsabahSubmitted about 3 years ago

    I have trouble with getting the clicking events working on iOS, works fine on desktop and Android. Tried solutions from stackoverflow to switch from div to anchor, making sure the cursor: pointer on the clickable elements, but nothing works.

    Any other solution is very much appreciated!

    To do list with sorting ability and switch from light to dark theme

    1
    Fury•945
    @ashiqfuryPosted about 3 years ago

    Great work..

    • You need to fix that, it adds the list with only whitespace. A list with no characters are not considered as a list.
    • all, active and completed buttons in the bottom are also behaves like a dragable element, you need to fix this also.
    • Store theme value in browser local storage, so that selected theme never change when reloading the page.
    • Using some animations make this app even cool. (especially when toggling theme)

    Thank you

    Marked as helpful
    0
  • Fury•945
    @ashiqfuryPosted about 3 years ago

    Great work..

    • Using some animations make this app looks cool.
    • Your total value showing wrong output, it should be tip amount + bill amount for a person

    Thank you..

    0
  • Fury•945
    @ashiqfuryPosted about 3 years ago

    Great work..

    • You need to fix the background, you can fix this easily by using image in psuedo elements.
    • Set height: auto in card container, so that it can extend based on the content inside.
    • Instead of using margin: auto in .plans, .button and .cancel, use margin: 10px auto. It gives your element more space and align it horizontally also..

    Thank you.

    0