Workit Landing Page - Grid & Flexbox

Styling used

• Grid for displaying main sections and containers
• Flexbox used for positioning internal elements
• Experimenting with nth-of-child/nth-of-type pseudo elements Tools Used
• For positioning the hero image, I did consult ChatGPT for some assistance as it was not responsive enough for my purposes
• CSS, HTML5 with semantic markup
• VS Code Dimensions
• Mobile 375x810
• Tablet 768x1280
• Desktop 1920x1080 Areas of Opportunity I struggled mostly with positioning. I like to believe I have strong styling skills, in terms of being able to generate color schemes, create borders, etc., but struggle with positioning, especially when trying to create a responsive page. Javascript was not used as I am still at a very base level knowledge of Javascript, but I believe it may have actually been a more helpful idea to use for responsive positioning. As I am focused more on broad styling, I did not bother with the background pattern images, but if I am not mistaken the two within the hero section would be positioned absolutely with overflow hidden.

Please provide any feedback you can on both my styling and my actual code - I know it definitely needs refactoring, but I am not sure where to start.