This page demonstrates the various style elements and calls-to-action as dictated by the current brand style guidelines of TeachAtHome.school. This paragraph uses the intro
class
Color and its use throughout a website is a crucial part of the branding puzzle. Use the following colors, and the following colors only throughout this site.
.redd
.sky
.pencil
.night
.bluee
Brighter colors should only be used in moderation and when drawing attention to specific calls-to-action.
Typography is among the most important of elements in any web design. This is why the utmost of care must be taken when crafting the style of each typographic element.
Perhaps you’d like to see what an unordered list looks like?
- Unordered list item #1
- Unordered list item #2
- Unordered list item #3
Or you’d prefer to see what an ordered list looks like?
- Ordered list item #1
- Ordered list item #2
- Ordered list item #3
Heading 1: The quick brown fox
Heading 2: Jumps over the lazy dog
Heading 3: Two driven jocks help
Heading 4: Fax my big quiz
Heading 5: Pack my box with
Heading 6: Five dozen liquor jugs
Typical body text: The job requires extra pluck and zeal from every young wage earner.
Quoted text: Waltz, bad nymph, for quick jigs vex.
Calls to action are critical if you want to move people to action. Here’s the various kinds found on this site:
To create one of these nice calls to action it’s as easy as:
<a href="LINK" class="CLASSNAME">YOUR TEXT</a>
Special text blocks may be needed at times to draw extra attention to give specific notes or add typographic emphasis. Here are the various special text blocks:
This special text block is created with the class .card. This will be used on any sort of item you want to place is a small, flexible box.
Download
By “flexible” I mean that you can place multiple cards inside of a
.flex-wrapper
element and have multiple boxes fit automatically.Download
The boxes will intelligently fit to the area with a maximum number of 3 boxes per row. On mobile, it will automatically adjust so they’re never too narrow.
Download
And when you need to create one of these beautifully designed special blocks, this is all the code you need:
<div class="CLASSNAME">YOUR CONTENT GOES IN THIS AREA RIGHT HERE.</div>
Horizontal rule is the subtle divider line used to break up sections of text. You can see it used throughout this page to separate each section.
Simply place <hr />
between a paragraph and you’ve got yourself a beautiful divider line.
Below is a display of typographical elements in a more natural hierarchy.
The Quick Brown Foxs Jumps Over the Lazy Dog
Jaded zombies acted quaintly but kept driving their oxen forward.
The job requires extra pluck and zeal from every young wage earner. A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.