I made it with Mobile First design.
I had some difficult to make the curved section of my footer and I did it with HTML using the tag "img", but I tried to make it work with background-image in CSS and I failed it, if someone knows how to do that please tell me here so I can learn. Feedbacks are welcome!
Hej, your solution (I only viewed it on mobile yet) looks very good 👍 I wonder what’s your problem with background-image. Can you provide your code, which failed?
I didn’t use it before but what’s about masking or svg with paths? Best greetings🖖🏼
How can I make the transition from desktop to mobile better?
So i know this isnt the best solution this was my first time using CSS Grid, so one thing is how do i posistion the containers better, if you look at the challenge compared to my solution the bottom doesnt really align and i couldnt figure out how to expand my bottom row all the way across, so if someone could explain this or advise me on how to make it better i would really appreciate this.
i didnt use any frameworks or libaries because at the momemt i was just want foucs on getting my confidence up in the basics, loving this journey so far.
You should try to nest the css grids. For example an outer grid like:
display: grid;
grid-template-areas: bigPicture bigPicture asideContent’
‘title textWithButton asideContent’
‘bottomContent bottomContent bottomContent‘
then you can set the area to a css selector for example:
.myDiv { grid-area: buttonContent;}
you can now style the content inside this div for example like usual.
For the bottom content you can try:
display: flex;
flex-direction: row;
justify-content: space-around; (or just play around with the other “space-“values
align-items: center;
Always think about the properties of the parent. They can cause unexpected behavior of the childs!
Or you can nest another three column grid inside the bottomContent row.
See also the short but good documentation here on W3schools
I struggled with getting accurate ages when compared to many other sites that do age conversion. I would appreciate it if someone decided to check up on my code and see where I went wrong. But I had fun with this as I learnt to use and manipulate the date object which I knew about but never touched myself. I completed it it relatively quickly as things are starting to click but spent days trying to work out ways to make it more accurate
At first i struggled too on getting the right ages with the Date class. But i was not satisfied with all my tries :D Finally, I just subtracted the Date elements individually (day, month, year) because of the loose typing in js .In addition, I simply made queries that take care of the limit values (monthly and yearly transitions). I also calculated the months using a median. Please take a look at my code here on Github.
