I’ve tried to emulate the example and made this page. However, I’m unhappy with certain sections of CSS where I need to hard code to get things done and I believe that hardcoding is bad since it may not scale in/out in various browsers or devices. In my local machine the well gray color is coming but in code pen, it’s not visible.
Any feedback is appreciated and I’ll use that to retrospect and improve on the current and future projects.
Hi! So there are some things that I noticed could be improved. First, if I scale the window down, the caption under the picture goes behind the timeline, like this: https://i.imgur.com/sFFrpKH.png . I replaced the code inside your .capt with:
margin: 0 auto;
and it seems to do the trick!
Another thing is that the text above the timeline does this when window is resized: https://i.imgur.com/PMK3RVB.png
This is because of the 420px of padding-right you have in your .uldiv. Removing that sorts that issue, however this will make the text centered. You could look into using media tags to remove, or reduce the padding as the screen becomes smaller, although there is probably an easier solution.
Overall, good start, keep going!
Ok, a good start. Some observations, on top of what KritwanBlue has said:
Rather than create a class .h1a, why not change the h1 element directly?
I would do the same with the li and ul formatting.
And remember that the user story requires a link to get more information on the topic.