Homepage background elements
About this component
To break up the page and insert school spirit, we chose to use various background elements. These elements aren’t part of the core content, but make the page more visually interesting and help to divide and contain the page’s topics.
Guidelines
Every other content section has a navy background. The “next steps” section is the only part of the page with a teal background. The rest of the page’s background is white. Any background color can have an icon element (the PCC diamond and Poppie the Panther pawprints).
Styling
The color backgrounds stretch the full width of the screen. Icon elements are dispersed around the page as part of the background. Content sections that have a navy or teal background use white headings and text.
Each section slides up into view as you scroll down the page.
Responsive behavior for Homepage background treatments
Background icon elements adjust in size and placement to work with the text and imagery around them.
How to use for Homepage background treatments
Editable in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Homepage background treatments
Stylesheet location:
/_source/styles/_general.scss
Edit the root-level index.html file and CSS.
- Use
<section class="navy">for navy sections and<section class="teal">for teal sections (“next steps” only). - The background icon elements are added as background images in the CSS.
- The animations are added using
<section class="fade-in">.
Example of Homepage background treatments
Navy sections
Teal section
PCC diamond
Pawprints
