@CarlHumm
Posted
To change your logo's colour you can use an inline svg instead of an img element and style that SVG using either CSS or inline with the fill attribute.
Here is a basic example of what I mean. In this example, I-
- Opened up logo.svg in new tab
- Inspected SVG code for logo.svg
- Replaced img element with copied code
- Removed fill: none attribute, and removed inline fill values on path elements.
- Added fill property for entire SVG using CSS selector (Could use class or id if you wanted)
Here are some useful resources on using SVG.
Other areas for improvement could include:
- Adjusting background-position and size for divider elements.
- Centering page content and adding margins using a container or grid.
- Avoiding distorting images by sizing with width
- As the structure for grow-container, flowing-container and user-container is the same, you should group the shared styles into their own class, and add stylistic differences using a new class, id, or other identifier.
- Add main element for accessibility. I see you've done well to use other elements like header, nav, section and footer.
- Correct responsiveness on mobile. You could add a media query to adjust flex-direction to column, and remove the large margin on your paragraph as it's squishing the text too much.
Other than these points, very good job. It is a large landing page with lots to consider. Good luck on your next project!
Marked as helpful