Skip to content
OverviewSolutions
2
Comments
5
KiddAlexx
@KiddAlexx

All comments

  • KiddAlexx•150
    @KiddAlexxPosted over 1 year ago

    Hi! Looks great so far :)

    It seems that you are currently achieving the result using opacity, however, its possible that a blend mode may be what you are looking for to achieve the desired result...

    mdn web docs - mix-blend-mode

    I hope this maybe helps.

    Marked as helpful
    1
  • KiddAlexx•150
    @KiddAlexxPosted over 1 year ago

    Nice work. Looks good!

    A couple of things I noticed

    • Your class and ID names could be more descriptive. I was a bit confused when seeing item-a, item-b etc, as its hard to know what they actually relate to. This is something I need to work on a bit too!
    • The font of Inter is not being applied. I personally have only used the <link> method with external style sheets, so am not as familiar with the @import method, but from checking your code, you have not applied the font anywhere. You could try adding font-family: 'Inter', sans-serif; to the body to start with, bearing in mind that some elements such as buttons do not inherit the font property. For those you can set font-family: inherit;
    • I don't think the news links were meant to be collapsible based on the design, but it would definitely be a nice addition and something new to learn. Here is a link on collapsible elements: W3schools-How TO - Collapse
    • The hover states for news links are working nicely :) You just need to do the same for the other links in the menu, and then "top stories" at the bottom + the read more button should change color on hover too. Double check the design images again to see the exact active states.

    Hope this helps a little :)

    Marked as helpful
    0
  • Lesley Kimutai•565
    @LeskimSubmitted over 1 year ago

    Any feedback on majorly how I would have tackled the mobile navbar to have an overlay when open and no vertical scroll showing the rest of the page will be greatly welcomed.

    Thanks 🤜🏽

    News Homepage Solution (HTML, CSS, JS)

    1
    KiddAlexx•150
    @KiddAlexxPosted over 1 year ago

    Nice work! Looks really good!

    To lock vertical scroll when the menu is out you can create a class such as:

    .lock-scroll {
  overflow: hidden;
}

    and then toggling this class on the body.

    For mine I added a blur as opposed to the overlay shown in the design, but this could be achieved using something like the following: W3Schools-How TO - Overlay

    I hope that is of some help :)

    Marked as helpful
    0
  • Bala•50
    @balanambi88Submitted over 1 year ago

    I have a small Gap issue with a grid container in the mobile view. there was a ample space in between the last three images, which i am not able to reduce. Do advice if you have any solutions. Thanks in advance

    responsive home page with HTML CSS Javascript

    1
    KiddAlexx•150
    @KiddAlexxPosted over 1 year ago

    Nice work. I think your gap issue is due to the fact that you have the images set to be a height of 67% and this is relative to the grid container, meaning that there is going to be the remaining percentage of white space below them...

    Marked as helpful
    1
  • dia ♡•200
    @diaasaurSubmitted over 1 year ago

    Phew... that was not as simple as it looked like 😮‍💨

    What made this app a lil tricky for me:

    • form validation being interdependent for some errors
    • finding out the difference between two dates in days, months and years - not as easy as it seems, you need to be mindful of leap years, day light savings etc for a more precise calculation (now I understand why there are many popular libraries for managing dates 😩)

    Bonus: Added a nice little counter animation for years, months and days ✨

    Let me know below if you find any errors✌🏻

    It's been a long time since my last frontendmentor challenge, with this hope I stay more consistent :3

    Age Calculator [Semantic HTML, Vanilla JS]

    2
    KiddAlexx•150
    @KiddAlexxPosted over 1 year ago

    This looks great! Love the counter animation.I did notice that there is some error in the calculation. If I put in my date of birth it says I am exactly one year older than I am (which seems to be the case for most dates). However the date of birth 07 July 1983, which should give 39 years 8 months 30 days gives 39 years 15 months and 2 days....I am sorry that I cannot see exactly where this is going wrong, I hope that its not too tough to find the error....

    Marked as helpful
    1