Skip to content
OverviewSolutions
16
Comments
6
Michael Hatton
@mikehwebdev

All comments

  • Generalissimo•110
    @General4904Submitted over 1 year ago

    My only problem with the project was that I didn't know how to import fonts from the net. I'll be glad if anyone can help with that.

    QR Code Card

    2
    Michael Hatton•270
    @mikehwebdevPosted over 1 year ago

    Kevin Powell is always my go to guy for CSS topic if a video covering Google fonts would help. 👍

    Marked as helpful
    1
  • Michael Hatton•270
    @mikehwebdevPosted over 1 year ago

    This looks really good. The biggest differences I see are margin/padding on top of "Perfume", line-height on the "Gabrielle Essence Eau De Parfum" and padding on the button itself. This will bring the elements in the right hand column down a bit and more closely match the design I think. :)

    Marked as helpful
    0
  • Michael Hatton•270
    @mikehwebdevSubmitted over 1 year ago

    A good little project. I suspect I can refactor the code down a bit which I'll come back to but hopefully the code is straightforward to read. The JS was more complicated than I initially thought and took a bit of googling.

    Vanilla JS - Age calculator

    1
    Michael Hatton•270
    @mikehwebdevPosted over 1 year ago

    Had to correct my JavaScript as the currentDate variables weren't being reset which gave me lots of odd results.

    0
  • Michael Hatton•270
    @mikehwebdevPosted over 1 year ago

    This is really close to the design. I think the biggest issue you have is that the height and width would be better off set in rem.

    Kevin Powell is great at explaining this if you aren't familiar. :)

    CSS em and rem explained

    0
  • Michael Hatton•270
    @mikehwebdevPosted over 1 year ago

    This all looks good but I think there are some differences in element positions caused by the width being off on the "left" and "right" divs.

    I'd start by correcting that and then I'd double check the font sizes and any margins to adjust it all into position :)

    Good luck!

    Marked as helpful
    0
  • Michael Hatton•270
    @mikehwebdevPosted over 1 year ago

    There are a lot of ways to center a div but my favourite is:

    display: grid; align-items: center; justify-content: center; min-height: 100vh;

    Just another note looking at your design I think you've missed off the font family there buddy. It's listed in the style guide as:

    Font

    • Family: Outfit
    • Weights: 400, 700

    Good luck!

    0