Lumensum• 10
@Lumensum
Submitted
I know there are some small mistakes, but I do not know how to fix them. I have been teaching myself CSS for only about a month and constructive critique is very welcome.
Wayne Haworth
@WayneHaworth
All comments
- Wayne Haworth• 90
@WayneHaworth
Posted
Looks good to me :)
The image isn't quite reaching the bottom of the container. Play around with the height to fix this.
You might also consider using a background image instead of an image, as the picture isn't really part of the content on the page - I can see in your CSS that you have looked into trying a background image here, perhaps you had difficulty getting the overlay to work with a background image?
I solved this in another exercise by combining the background image with a gradient, like so:
background: linear-gradient(rgba(77, 150, 168, 0.9), rgba(77, 150, 168, 0.9)), url(../images/image-footer-tablet.jpg);
Maybe you could try this and see if you can get it working?
You have some good class naming habits built-in for only a month, great work! :)
1 - Franco A.• 200
@franco-a
Submitted
Hello! This is my first time making a landing page. I experimented a little bit with my scss and tried to automate my custom properties. I have more documentation in the github repo. Tell me what you think!
Wayne Haworth• 90@WayneHaworth
Posted
I think this is a good implementation. It's interesting how you managed the hero section with the faces. Starting as a flexbox for mobile then moving into a grid for wider screens - I will have to look into using something like this myself.
I guess the only design decision I would question would be using .hero-decoration-1 for the main faces image on mobile and then switching out the background image on wider screens for the left side faces image.
I am not saying there is anything wrong with it, but for me, I would probably have another div responsible for the mobile background image and hide the others on mobile. As looking at the structure, that one div is responsible for showing the left image AND the center image - so in my eyes, it makes sense that they should be different elements. But that's just me and this is probably all personal preference! :)
Also interesting that for the steps circle, you used a pseudo-element, I just used a div with a width of 1px. Wondering which is better - I tend to not like using pseudo-elements as they cause me loads of trouble!
Also thanks for introducing me to the 'ch' unit!
Good job mate, some stuff here I can learn from and use in my designs :)
1 - Khalis• 135
@khalisabrahman
Submitted
I need help with the Footer overlay section. It seems that the overlay covered the child elements only in the tablet and mobile layout, but not my desktop layout.
I played around with the Z-Index but I'm not able to figure it out. I need your help guys.
Wayne Haworth• 90@WayneHaworth
Posted
It is because you have "display: block;" on mobile/tablet sizes.
Change this to flex for all widths (and you'll probably have to switch the flex-direction to column too) to fix this.
Alternatively, you could not use a :before as an overlay. I generally stay away from :before and :after if possible as they can be tricky. If you check my solution: https://waynehaworth.github.io/FEM-Meet-Landing-Page/ I used a semi transparent background gradient over the top of a background image directly on the <footer>, like this:
background: linear-gradient(rgba(77, 150, 168, 0.9), rgba(77, 150, 168, 0.9)), url(../images/image-footer-tablet.jpg);
0
