Md Abid Hussain• 400
@md-abid-hussain
Submitted
KiddAlexx
@KiddAlexx
All comments
- KiddAlexx• 150
@KiddAlexx
Posted
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...
I hope this maybe helps.
Marked as helpful
1 - Oddisy• 40
@Oddisy
Submitted
Working on the responsiveness was a bit tough. I'm unsure if I needed to add functionalities to the News part of the page when you click on each item, it displays. Is there any best practice for using JavaScript for the News part of the page?
KiddAlexx• 150@KiddAlexx
Posted
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 setfont-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
@Leskim
Submitted
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 🤜🏽
KiddAlexx• 150@KiddAlexx
Posted
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
@balanambi88
Submitted
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
KiddAlexx• 150@KiddAlexx
Posted
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
@diaasaur
Submitted
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
KiddAlexx• 150@KiddAlexx
Posted
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
