Skip to content
OverviewSolutions
7
Comments
8
Johannes
@Channeas

All comments

  • Johannes•180
    @ChanneasPosted over 4 years ago

    Looks good. It doesn't seem like you used the curve.svg image however, which should be placed in the bottom left

    Marked as helpful
    0
  • Johannes•180
    @ChanneasPosted over 4 years ago

    Looks awesome. I could be wrong about this, but I think the original design has some slight box-shadow applied to the cards. Also, I think that dark mode is selected by default in the design, which is the reason why the design comparison has different color schemes. Well done nonetheless!

    1
  • Rushabh Runwal•70
    @Rushabh-RunwalSubmitted over 4 years ago

    How to get that shadow effect in circles ..kinda 3D effect ? And even, please look at the code and give some suggestions, I am a new in designing and would love some feedback :)

    Vanila JavaScript , CSS , HTML

    1
    Johannes•180
    @ChanneasPosted over 4 years ago

    Looks good. You can create the shadow effect using a box-shadow the blur radius set to zero. I would also set the spread to something negative, otherwise the shadow is a bit too big in my opinion.

    Try adding this shadow to the yellow image: box-shadow: 0px 8px 0px -2px rgba(199,108,27,1);

    A great tool for generating box shadows is: https://www.cssmatic.com/box-shadow

    0
  • Johannes•180
    @ChanneasPosted over 4 years ago

    Looks awesome, well done. I really couldn't come up with any feedback except that you should fix the issues in the report (if you haven't already)

    1
  • Johannes•180
    @ChanneasPosted over 4 years ago

    Your solution looks good. You can fix the color issue by setting the border-top to solid ("solid 4px var(--red)") instead of inset

    1
  • Elisa B Lange•30
    @Elisa33Submitted over 4 years ago

    I would like to know how I can improve the way of inserting the images in different divs without adding another class for each one

    HTML and CSS with Flexbox

    3
    Johannes•180
    @ChanneasPosted over 4 years ago

    Your solution looks good. I personally would use .icon:nth-child(1) (then 2 and so on) to set the images, as that would mean there's no need to have the .one class on your card. The way dacokid mentioned also works

    0
  • Woody•30
    @kawoodySubmitted over 4 years ago

    The part that threw me the most is the left component (in desktop view). Even though I have a specific grid-gap between the three icons (and an empty 4th column) it would still sometimes stretch them out further than that. I think I could have put those icons in their own div and use flexbox with a flex-start and a margin-right. That probably would've solved that part.

    I also wasn't sure the best way to extend the negative space of that component. The empty area to the right of the icons. Mine is slightly narrower than the design.

    EDIT: I had a colon in the @import that was causing it to not import! Thanks @Channeas! ORIGINAL: I'm also not sure why the screenshot shows the "185" as lining figures. If you visit the live site it's using oldstyle figures.

    Data storage component using CSS Grid

    2
    Johannes•180
    @ChanneasPosted over 4 years ago

    The site looks good. It does however use lining figures for me. Do you perhaps have Raleway installed locally on your computer? Because I think there is some problem with your font import, but that it looks right for you due to the font already being on your machine

    0
  • Johannes•180
    @ChanneasPosted over 4 years ago

    The problem is that you have set a fixed with for the .pattern-bg div. Since the paragraph is set to display: inline-block; it takes up the remaining width after all the other elements have taken theirs.

    Out of the 697px of the .pattern-bg div, 487px goes to the image, and 34px goes to the icons. This only leaves 176px for the paragraph, which is where the problem lies. If I were you I would move the paragraph out of the .pattern-bg div, so that it is a direct child element of the .card div

    0