This page demonstrates the various style elements and calls-to-action as dictated by the current brand style guidelines of visualcontentcourse.com.
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
.batman
.violet
.stone
.knight
.darkness
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.
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:
Color modifications:
redd knight violet batman darkness stone
To create one of these sexy 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:
And you can use them for all sorts of wonderous things inside of posts!
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
This is a .testimonial used for pages that have quotes from those praising me. Of course I want them to look quite good. -small, applied to name
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 are the subtle divider lines used to break up sections of text. You can see them 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.