At this point, you have been introduced to LESS variables, nesting, mixins, escaping, importing and more. This project incorporates a small amount of everything. You will need to be able to navigate the file structure and make the following updates:
- Import the variables.less into the index.less file - renamed to mixins.less
- Use 5 different mixins from the variables.less file in anyway you want throughout the site (Hint, google the CSS properties if you don't know what they do!).
- Use escaping to create 3 unique media queries using (max-width) with values of 400px, 768px, and 1100px. Use those media queries to change the background color of the web page at those pixel widths.
- Recreate the CTA button using your own custom mixin that takes values for width, height, and background color.
- Use a function to lower the opacity of the headings on the page.
Everything listed here can be completed by studying the documentation here: http://lesscss.org/3.x/#overview
Create unique buttons for each heading in the main-content section. (use your mixin!). Try out a fun mixin on hover for each button.
Namespace, button creator.