This is the spacing around H1 – and, hey! did you know that the actual H1, which is only allowed in the top box doesn’t even show up on the page? Fun, huh!

But that’s okay because now you’ve made H2 look like H1, right? And the reason we want the heading to only appear at the top of the page is because it is also what gets put on the tab in the browser so it has to be alterable and short.

Heading 1

this is to show the spacing around the headings. Okay… WHY do the Headings look different in here than out on the page? Why are they a different font? And a different size? -Because the CSS in the admin has no bearing on the CSS on the public side.

Heading 2

this is to show the spacing – or lack thereof around the headings

Heading 3

this is to show the spacing – or lack thereof around the headings.

Heading 4

this is to show the spacing – or lack thereof around the headings

Heading 5

this is to show the spacing – or lack thereof around the headings

Heading 6

Colours

Adding colours to an element is done using the following classes:

• black. class=”black”
• blu class=”blu”
• gold class=”gold”
• grey class=”grey”
• midnight class=”midnight”
• scarlet class=”scarlet”
• turquoise class=”turquoise”

Fonts

Forcing fonts is also handled using classes. The font classes are named font-<font name>-<style (optional)> … please give me an example. <p class=”font-floren-bold”>This is in Floren Bold</p>

• font-lato
• font-lato-bold
• font-lato-thin
• font-nunito
• font-nunito-bold
• font-nunito-italic
• font-alexbrush
• font-floren
• font-floren-bold
• font-floren-italic
• font-fair-play
• font-fair-play-italic
• font-fair-play-bold

Font Sizing Classes

• fs-1: Size 1rem
• fs-125: Size 1.25rem
• fs-15: Size 1.5rem
• fs-175: Size 1.75rem
• fs-2:Size 2Rem

Okay, so how do we create coloured blocks of text that run side to side. And how do we darken the basic font. It’s darker in lists than it is in paragraphs. I want it black. And it looks black here but it’s still grey in the Menu and on pct.com.

And how do we get images in the background behind text?

Proin mollis mollis nunc ut elementum. Vivamus tempus risus sit amet odio consectetur, a finibus mi dignissim. Cras sollicitudin erat sed diam tincidunt aliquam. Vestibulum lorem ex, tempus et fringilla ac, varius nec urna. Nullam sed dignissim sapien. Nullam a est semper ipsum malesuada ullamcorper. Fusce at urna quam. Praesent id consequat eros. Proin pharetra auctor mi sit amet imperdiet. Integer non ante vel dui maximus rutrum. Etiam fermentum id nulla sed volutpat. Sed malesuada efficitur nisl, in pellentesque est pulvinar nec.

• This is a standard list
• Fusce sed metus a nunc tincidunt eleifend et sit amet ipsum.
• Nulla posuere augue ut nunc condimentum, sed ultricies ipsum sagittis.
• Proin commodo purus sed diam egestas iaculis.

• This list has the gold triangles for bullets
• to get this switch to html and add
• class=”triangle-list” to the <ul> tag

• This list has the peacock “eyes” for bullets
• to get this switch to html and add
• class=”peacock-list” to the <ul> tag

1. Cras sit amet lectus ac magna eleifend ornare.
2. Duis fringilla mi in tempor lobortis.
3. Proin sit amet lorem euismod, ornare quam ac, mattis magna.

Donec mollis varius dictum. Nulla facilisi. Vestibulum quis justo quis quam hendrerit mollis. Mauris lacinia lacinia elit. Donec consequat a mi quis finibus. Sed ullamcorper nisi orci, ac volutpat turpis porta et. Nullam non mollis nulla. Maecenas id elit sed neque porta posuere. Nunc ac pretium sem. In sit amet molestie metus, sit amet molestie odio. Aenean posuere elit at maximus semper. Cras gravida hendrerit diam, quis cursus metus ornare lacinia.Lorem Ipsum

And down here we need an FAQ section where you click a little plus sign (or a golden down arrow) and the answer comes down. So, it looks like this:

Q: How is this course different from all the other courses that say they do the same thing? [down arrow or plus sign over on the right side –>]

A: this is in the drop down when you click the symbol- yup, let’s rotate the sideways golden triangle and use it as the drop-down symbol. hmmm… can we put a plus on it as well? Like this:

But there was also a double triangle picture that I want to use. How do I easily add it to text? How do you mean “add it to text”?

Apparently you can also do quotes. With a black bar. We have a gold bar, this is where it would go. Oh! But the black bar doesn’t show up on the page? I wonder why… (Admin CSS ≠ Theme CSS. Gold bar now present ~ Jordon)

Vanessa

And I’d also like to use the gradients to create ‘cards’ that run across the page. I’d like to be able to create 2 or 3 column layouts or, gosh, even 5 if they were nice and narrow just for small things like symbols. I imagine using this gradient:

or the blue gradient that is on the images right now but that we can play with and maybe turn vertical… or maybe not. Maybe it just needs to have the quote and photo removed because it does seem to have a vertical gradient already.

There’s also this pink that I’d love to use, once we get the quote off of it:

This is a cover block