Where did you start learning this from? Some of the coding is very dated, you are using lots of “presentational” attributes in the html which are now obsolete and should be replaced by css.
Try putting the code in to the validator to see what I mean.
Also using tables as a layout tool is not the way it is done these days. Tables should only be used for displaying tabular data.
To be honest, this needs a re-write. but the good news is, it is not very content heavy and a design like this should be easily achievable using either flexbox or css tables if you need legacy browser support.
OK, well their methods a quite dated and these methods don’t make it any easier in the modern world responsive design.
Let’s see if we can come up with something better than this.
Just for a start, that one is easy, it’s the default margin on the body, reset it with body { margin: 0; }
To make it work well on re-size will require a code re-write.
I dont mind to learn something new i already checked flexbox, and i will try recreate my school project in more modern way when i will be done with that old school technology
Thank you!
because i wanna learn this by myself can you provide tutorial?
I did another version, I thought I had forked it, but did not, so that one is overwritten.
This time the images are images again (not backgrounds) so the hover works. But now I’m having trouble making them ‘cover’ the element.
either way that look more professional than mine, Thank You! now i just need to create other htmls and and think about design and layout
cookie for you
I had another go at this again, I was busy before.
It was a bit harder to do than I thought it would be. Getting the responsive layout was easy enough with flexbox. The difficulty I had was getting the hover effect to work while at the same time having the images cover the sections.
With the actual images, in the pen earlier, I tried to use object-fit: cover but that is quite finiky to get working and does not have great browser support anyway.
I reverted to what I tried first, removing the actual images and having them as backgrounds, which is probably more correct and background-size: cover works much better than the object-fit equivalent. But the trouble with background images is you cannot alter their opacity.
The workaround was to put the background on a pseudo element, then alter the opacity of that whole element. The problem I had initially with that was combining the :hover pseudo class with the pseudo element in the selector. With a little restructuring I got around that by separating the pseudo class and element to different elements in the selector.
Note I paired it with a focus for keyboard navigation.
If you are a student learning this, you will need to study it and try to figure out how it works. Admittedly, some of it is a little advanced for a beginner, so you may have questions. (I should add more comments to code).
Another thing I think you may learn from is something I mentioned earlier.
Have a go at validating your original code and see what you were doing wrong.