Bb Landing Page Elements

# Using the Elements

## 1. Start with the container DIV

```html
<div class="content" style="font-size: 17px; color: #1A1A1A; text-align: left; width: 85%; margin: 0 auto; padding: 1em 0 0; border: 0;" align="left"></div>
```
## 2.  Add in your headings

Choose from Heading 1 

<h1 style="font-size: 68px; line-height: 1em; font-family: sans-serif; font-weight: 400; color: #E31B23; margin: 0px 0px 0.37em; padding: 0px 10px; clear: both;">This is  Heading One</h1>

```html
<h1 style="font-size: 68px; line-height: 1em; font-family: sans-serif; font-weight: 400; color: #E31B23; margin: 0px 0px 0.37em; padding: 0px 10px; clear: both;">Change this Text</h1>
```

Or Heading 2

<h2 style="font-size: 42px; line-height: 1.2em; font-family: sans-serif; font-weight: normal; margin: 0px 0px 0.5em; padding: 0px 10px; border-color: #F47B20; border-style: solid; border-width: 0px 0px 2px; clear: both;">This is a Heading Two</h2>

```html
<h2 style="font-size: 42px; line-height: 1.2em; font-family: sans-serif; font-weight: normal; margin: 0px 0px 0.5em; padding: 0px 10px; border-color: #F47B20; border-style: solid; border-width: 0px 0px 2px; clear: both;">Heading Two</h2>
```

Or Heading 3

<h3 style="font-size: 28px; line-height: 1.4em; font-family: sans-serif; text-transform: uppercase; margin: 0px 0px 0.5em; padding: 0px 10px; clear: both;">This is a Heading Three</h3>

```html
<h3 style="font-size: 28px; line-height: 1.4em; font-family: sans-serif; text-transform: uppercase; margin: 0px 0px 0.5em; padding: 0px 10px; clear: both;">Heading Three</h3>
```

## 3. Breaking up content

To break up the page or create a new section use the Heading 4's

```html
<h4 style="font-family: sans-serif; text-transform: uppercase; font-weight: 600; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A plain fourth level heading</h4>
```
You can choose from a variety of colours including:

<h4 class="red" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #E31B23; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A Red fourth level heading</h4>

```html
<h4 class="red" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #E31B23; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A Red fourth level heading</h4>
```
Blue

<h4 class="blue" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #00AFD8; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A Blue fourth level heading</h4>

````html
<h4 class="blue" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #00AFD8; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A Blue fourth level heading</h4>
````
Green

<h4 class="green" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #7AB800; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A fourth level heading</h4>

````html
<h4 class="green" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #7AB800; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A fourth level heading</h4>
````
Grey

<h4 class="grey" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #666666; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A fourth level heading</h4>  

````html
<h4 class="grey" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #666666; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A fourth level heading</h4>  
````
Orange

<h4 class="orange" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #F47B20; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A fourth level heading</h4>

````html
<h4 class="orange" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #F47B20; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A fourth level heading</h4>
````
Purple

<h4 class="purple" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #6E267B; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A fourth level heading</h4>

````html
<h4 class="purple" style="font-family: sans-serif; color: #fff; text-transform: uppercase; font-weight: 600; background-color: #6E267B; margin: 12px 0px; padding: 0.5em 10px; clear: both;">A fourth level heading</h4>
````
Or use a Heading 5

<h5 style="font-size: 1.1em; font-family: sans-serif; font-style: normal; font-weight: 600; margin: 0px 0px 10px; padding: 0.5em 10px; clear: both;">A fifth level heading</h5>

````html
<h5 style="font-size: 1.1em; font-family: sans-serif; font-style: normal; font-weight: 600; margin: 0px 0px 10px; padding: 0.5em 10px; clear: both;">A fifth level heading</h5>
````

## 4. Text Types

The intro text is good for a lead content like an introductory paragraph of text 

````html
<p class="intro" style="font-family: sans-serif; color: word-wrap: break-word; font-size: 20px; line-height: 1.3em; margin: 0px 0px 1.5em; padding: 0 0 0.5em;">An introductory paragraph is a great way to summarise the content before the reader really digs into the detail of your story.</p>
````

The blockquote is perfect to highlight a small section of text - like a pull quote often used in magazines.

````html
<blockquote class="pull-quote" style="text-align: center; border-top-style: solid; border-bottom-style: solid; color: #F47B20; font-style: normal; font-variant: normal; font-weight: 400; font-size: 27px; line-height: 1.3em; font-family: serif; margin: 1.2em 0; padding: 1em; border-color: #CCCCCC; border-width: 1px 0;" align="center">There are dozens of simple, fascinating experiments that may be performed with this kind of electricity on Snow 22nd October 2014</blockquote>
````
You can also add in a byline or caption using this style.

````html
<p class="byline" style="font-family: sans-serif; color: #666666; text-align: center; word-wrap: break-word; font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.2em; font-family: serif; margin: 0px 0px 1.5em; padding: 0 0 0.5em; border: 0;" align="center">Developed by Christian Surname</p>
````

If you have a quote, highlight it with this style

````html
<p class="quote" style="color: #666666; text-align: left; border-left-style: solid; word-wrap: break-word; font-style: italic; font-weight: 400; font-size: 27px; line-height: 1.3em; font-family: serif; margin: 1.2em 0px; padding: 0.5em; border-color: #CCCCCC; border-width: 0 0 0 8px;" align="left">“You should be able to see, hear, and feel these sparks, especially when the air is dry and you are in a dark room.”</p>
````

There's also unordered lists that are "dot-points"

````html
<ul style="font-family: sans-serif; list-style-type: square; margin: 10px 20px; padding: 10px 20px;">
<li>The first item in an unordered list</li>
<li>Second item right here</li>
<li>This is the third item in the list</li>
</ul>
````
    
As well as ordered lists that appear as numbered lists

````html
<ol style="font-family: sans-serif; list-style-type: decimal; margin: 10px 20px; padding: 10px 20px;">
<li>Item number one of three</li>
<li>The second place item</li>
<li>Last but not least in an ordered list</li>
</ol>
````