« Notre technicien était très compétent et efficace.
- joanne h
For use in the hero area of the page. Images can be taller but will only show the middle 1200px square of the image.
<h1>Header One Tag</h1>
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
<h1>Header Two Tag</h1>
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
<h1>Header Three Tag</h1>
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
<h1>Header Four Tag</h1>
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
<h1>Header Five Tag</h1>
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
<h1>Header Six Tag</h1>
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
<p>Paragraph Tag</p>
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
<strong>Bold Text</strong>
<u>Underline Text</u>
<em>Italic Text</em>
Bold Text
Underline Text
Italic Text
<i class="fa ICON_CLASS" aria-hidden="true"></i>
A complete list of available icons and the needed tags can be found here.
<h4 class="blue">Blue Text</h5>
<h5 class="dark-blue">Dark Blue Text</h5>
<h5 class="darker-blue">Darker Blue Text</h5>
<h5 class="green">Green Text</h5>
Add a background color to your div by adding a class to your custom content.
Syntax: bg-[ color of choice ]
NOTE: When using dark backgrounds, you can make your text white by adding the class invert
to your custom content.
<div class="bg-blue invert">bg-blue invert</div>
<div class="bg-dark-blue invert">bg-dark-blue invert</div>
<div class="bg-darker-blue invert">bg-darker-blue invert</div>
<div class="bg-green">bg-green</div>
<div class="w-30">...</div>
<div class="w-70">...</div>
<div class="w-100">...</div>
These show uniform padding around the content.
Definition: pa[ ] = padding all [amount of padding]
<div class="pa1">[Content Here]</div>
<div class="pa2">[Content Here]</div>
<div class="pa3">[Content Here]</div>
<div class="pa4">[Content Here]</div>
<div class="pa5">[Content Here]</div>
These show vertical padding above and below the content.
Definition: pv[ ] = padding vertical [amount of padding]
<div class="pv1">[Content Here]</div>
<div class="pv2">[Content Here]</div>
<div class="pv3">[Content Here]</div>
<div class="pv4">[Content Here]</div>
<div class="pv5">[Content Here]</div>
These show horizontal padding to the left and right of the content.
Definition: ph[ ] = padding horizontal [amount of padding]
<div class="ph1">[Content Here]</div>
<div class="ph2">[Content Here]</div>
<div class="ph3">[Content Here]</div>
<div class="ph4">[Content Here]</div>
<div class="ph5">[Content Here]</div>
These show the top, right, bottom, left padding options. The different padding scales shown above also apply to these.
pt[ ] = padding top [amount of padding]
pr[ ] = padding right [amount of padding]
pb[ ] = padding bottom [amount of padding]
pl[ ] = padding left [amount of padding]
Here are the available options to make the GRID and PADDING responsive to different devices.
Definitions:
[w-50 or pa4]-ns = the settings in the bracket will only apply to NOT-SMALL screens (tablet and desktop size)
[w-50 or pa4]-m = the settings in the bracket will only apply to MEDIUM screens (tablet size)
[w-50 or pa4]-l = the settings in the bracket will only apply to LARGE screens (desktop sizes)
<div class="w-third-l w-50-m w-100">[Content Here]</div>
- joanne h
- Vicki Hornbeck
- Marilyn Whitesell