Standard Markdown Syntax
# Heading1## Heading2
### Heading3
#### Heading4
##### Heading5
*Italics*
**Bold**
***Bold Italics***
Bullet List
* item (single asterisk followed by a space)
Bullet List
- item (single dash followed by a space)
Note: To show an asterisk or dash in the text, use '\*' or '\-'
Images:
![image description ] (image location )
Link
[link name] (link url)
Image Link
[](link url )
Shortcodes
Image sizes and justification![image description ] (image location RIGHT )
![image description ] (image location LEFT )
![image description ] (image location LEFT SMALL )
Image sizes:
XSMALL: 100px, SMALL: 180px, MEDUIM: 300px, LARGE: 450px, XLARGE: 700px
Image with Caption:
%%This is a caption/%%
Quote
[QUOTE]Quoted text[ENDQUOTE]
Style
[STYLE](class name)Text to be styled [ENDSTYLE]
Color
[COLOR](Color code or name)Text to be colored[ENDCOLOR]
Break from left or right float
[BREAK]
Single blank line
[BLANKLINE]
Multiple blank lines
[BLANKLINES](number of blank lines)
2 Columns:
[2COL1]Text[2COL2]Text [ENDCOL]
3 Columns:
[3COL1]Text[3COL2]Text[3COL3]Text[ENDCOL]
2/3 Columns:
[23COL1]Text[3COL3] Text [ENDCOL]
[3COL1]Text[23COL2] Text [ENDCOL]
body {
font-family: "Arial", sans-serif;
text-align: center;
font-size: 1em;
margin: 0 auto;
}
h1, h3 {
text-align: center;
}
a {
text-decoration: none;
color: lightcoral;
}
a:hover {
color: aqua;
}
main {
text-align: left;
margin: auto;
background-color: white;
width: 1300px;
max-width: 100%;
padding: 20px;
}
blockquote {
border: 1px solid #bbb;
padding: 10px;
}
.half-column-1, .half-column-2, .full-column, .third-column-1, .third-column-2, .third-column-3, .two-thirds-column-1, .two-thirds-column-2 {
margin-top: 30px;
display: inline-block;
box-sizing: border-box;
background-color: white;
line-height: 170%;
vertical-align: top;
margin: 5px 0;
padding: 10px;
max-width: 100%;
}
.half-column-1, .half-column-2 {
width: 45%;
margin: 5px;
}
.third-column-1, .third-column-2, .third-column-3 {
width: 33%;
}
.two-thirds-column-1, .two-thirds-column-2 {
width: 66%;
}
.greybackground {
background-color: #eee;
padding: 20px;
}
img {
max-width: 95%;
margin: auto;
display: block;
width: 400px;
}
figure {
padding: 20px;
}
.image-center {
margin: 0 auto;
float: none;
}
.image-right {
float: right;
margin-left: 20px;
}
.image-left {
float: left;
margin-right: 20px;
}
.image-xsmall {
max-width: 140px;
}
.image-small {
max-width: 240px;
}
.image-medium {
max-width: 400px;
}
.image-large {
max-width: 600px;
}
.image-xlarge {
width: 700px;
}
/** BREAKPOINT */
@media only screen and (max-width: 750px) {
.half-column-1, .half-column-2, .full-column, .third-column-1, .third-column-2, .third-column-3, .two-thirds-column-1, .two-thirds-column-2 {
width: 100%;
margin: 0;
}
main {
padding: 0;
}
.image-right, .image-left {
float: none;
}
}