landing-page

☑️ Tasks:

1. Initialize project

   • Create assets directory
   • Touch files:
     • index.html
     • styles.css
   • Apply HTML boilerplate
   • Add title placeholder to index.html

2. Create Colors and Fonts in styles.css

   • body font
   • header-bg and footer-bg
   • main-text
   • secondary-text
   • logo-text
   • blue-button, cta
   • header-text
   • quote-background
   • quote-text
   • flex-row
   • flex-col

3. Structure webpage in index.html

   • header
     • header-logo
     • header-links
   • content
     • main-section
     • information-section
     • quote-section
   • footer

4. Apply properties on flex containers and flex items in the header

   • flex-flow
   • justify-content
   • align-items
   • gap

5. Apply properties on flex containers and flex items in main-section

   • flex-flow
   • justify-content
   • align-items
   • flex
   • gap

6. Apply properties on flex containers and flex items in info-section

   • flex-flow
   • justify-content
   • align-items
   • flex
   • gap

7. Apply properties on flex containers and flex items in quote-section

   • flex-flow
   • justify-content
   • align-items
   • flex

8. Apply properties on flex containers and flex items in CTA

   • flex-flow
   • justify-content
   • align-items
   • flex
   • gap

9. Apply styling properties to footer

   • flex-container properties
   • font styling
   • sizing and positioning

10. Fix header stretching to the ends when zooming out