Skip to content
OverviewSolutions
5
Comments
5
Jacek
@sab0tasz

All comments

  • Jacek•95
    @sab0taszPosted over 3 years ago

    Hi! Good job on the challenge, however couple things need polishing.

    1. I don't think you actually need .main container. I think that .main-container will be enough. You can then use display: grid and place-items: center; on it to place it in the middle. At least that's the way I do most often.
    2. You did not put border-radius on the container.
    3. I would suggest not defining heights and widths for the specific cards. Make it so the content of the card determines it's size. Use margins and padding. Only one thing I did in my challenge was setting max-width on the container so it does not stretch to far.

    I hope it will help you somehow. Feel free to ask other questions, maybe I will be able to answer :D

    Cheers!

    0
  • Justin•165
    @DeusMalsithSubmitted over 3 years ago

    This was a great challenge to learn CSS grid. It's simple enough to where all you need to focus on is how to construct your grid (simple 4x4).

    The only difficult thing was how to get my box-shadow to function properly. I had to look up blog post online to find the solution and that's where the pseudo-elements came in along with z-index.

    I've definitely learned a lot! Doing one last newbie challenge before moving on to more difficult ones.

    Designed using grid and also pseudo-elements for the box-shadows

    2
    Jacek•95
    @sab0taszPosted over 3 years ago

    Hi! Great job on this challenge.

    Could you send me the blog post about box-shadows? I was doing this challenge yesterday, had similar problem and couldn't find solution anywhere. I'd really appreciate the link.

    Speaking of your challenge. When the card becomes a column, I would suggest setting max-width on the whole container, now it looks too wide imo. Rest of the project is looking really well. Maybe I'd throw some hover effect on the button.

    Keep up the good work! ;)

    1
  • Jacek•95
    @sab0taszPosted over 3 years ago

    Hello, great job! As far as I can tell it's almost exactly the same as the original design. Tweaks I could suggest are increasing line height on the main text, so it does not look so squezed together. Also, I think font-weight should be different in few places. You also forgot about border-radius on the card.

    When it switches to column, there is no margin at the bottom, so I would make a change there too.

    Anyway it looks great, nice animations as well! ;)

    Peace! ;)

    0
  • Jacek•95
    @sab0taszSubmitted over 3 years ago

    Hi this is my solution of "social - proof" challenge. I had a problem with making background, if anyone can help me with that, I would appreciate it. I hope it looks okey. Any other feedback is also welcome! ;)

    Social-proof layout

    2
    Jacek•95
    @sab0taszPosted over 3 years ago

    Welp, that's a lot to improve, however I expected that since I got stuck a bit, now I now what requires some additional work. Thanks for your tips. I'll do better on my second try! ;)

    0
  • Jacek•95
    @sab0taszPosted over 3 years ago

    Nice job ! :) You can also add opacity that line to make it more transparent, just like in the design. I also think you forgot about rounding the corners with border-radius. And as @pikamart mentioned, background color is missing. But it still looks very decent!

    1