You may customize styling anywhere through the document, adding, removing, modifying as you see fit. Remember that none of the functionality of the site is expected to be working - the code given is simply a prototype layout.

<aside> ‼️ This assignment consists of two walk-through documents, named "Content" and "Style". Before you begin, it may be beneficial to review both documents in detail. Strongly consider that the style instructions outlined in the "Style" document were written to match index.html in the form it was given. Therefor, structural changes you make to index.html, may affect the values defined as part of the instructions in the "Style" document.

</aside>

Styling Variables

Review the style guide you developed for Part 1 and bring the important values into CSS, by storing them as variables, to be used throughout the site.

• [ ] Create a rule for the entire html document, meant to store your variables

  • You may also use the :root selector here, as is common - they will achieve the same result

• [ ] Write an independent variable for each of your values, giving each an appropriate name that will be easy to reference throughout the styling of this page

  • Review Part 1 of this assignment to see which values should be store as variables (consider colours, fonts, etc)

  • An example naming convention:

    html {
    	--primary-col: #ff3366;    /* main colour */
    	--primary-alt: #ff6699;    /* variant */
    	--primary-on: #ffffff;     /* for text or icons */
    	--secondary-col: #3399ff;
    	--secondary-alt: #99ccff;
    	--secondary-on: #000000;
    	/* etc, etc... */
    }
    

• [ ] Add a variable named --pad-and-gap which will be used to store a "spacing" measurement to be used across the site for consistency

  • Try setting its value to 1em to start with, then revisit as you work through the layout, adjusting up and down until you find the right balance to match your aesthetic

General Styling

These styles represent adjustments that will likely be applied to all break-points, regardless of viewport size. For the most part, these are suggestions, so you may use your discretion to adjust these values as you see fit, to match your personal aesthetic.

• [ ] Assign defaults for site font properties, including line-height to a rule for the entire body
• [ ] Use the variables you defined to set a default background-color and color (for text) to a rule for the entire body
• [ ] .products, .page-header, .page-footer should have a padding on the left and right, set to your --pad-and-gap value
• [ ] .your-products should be a flex container
• [ ] Text align the entire .pagination container to the center
  • [ ] .pages should be a flex container, with its justify-content set to center
  • [ ] .pages > li can be given space between them using margin
    • Because margin doubles when combined horizontally, you can use half of your --pad-and-gap value on either side by applying a value of calc(var(--pad-and-gap) / 2)
• [ ] Have both .social, .legal be a flex container, with its justify-content set to flex-end and some margin or padding between them for space (consider the same half spacing as above)
• [ ] Text align the .copyright to the right

Your personal styling

Now that some of the core components are styled, it's time to apply your own custom stylings for colours, fonts and spacing. Consider the style guide you put together in Part 1 of this project and apply those values and images throughout the site until the layout satisfies your design aesthetic.

You may also consider interactions, like :hover for example, to give the site some pop. Using transition for those interactions will apply properties as an animation, given the site a smoother overall feel.

Smallest Viewport