Small animation of two birds coming together at the logo and then one sings.
A Pen by Jared Phillips on CodePen.
Small animation of two birds coming together at the logo and then one sings.
A Pen by Jared Phillips on CodePen.
| .sub-callout | |
| %ul.menu | |
| %li | |
| %a.page-link{ href: "#" } About | |
| %li | |
| %a.page-link{ href: "#" } Chili-for-Charity | |
| %li | |
| %a.page-link{ href: "#" } Artshow | |
| %li | |
| %a.page-link{ href: "#" } Menu |
| <header> | |
| <h1></h1> | |
| </header> | |
| <div class="main"> | |
| <!-- background img full bleed --> | |
| </div> | |
| <div class="sidebar"> | |
| <ul class="links"> | |
| <li class="link"><a href="#">Link</a></li> | |
| <li class="link"><a href="#">Link</a></li> |
| <p>Code Example for formatting and styling</p> |
| <h2 class="section-title">Colours</h2> | |
| <!-- Add your own colour swatches down here! --> | |
| <ul class="colours"> | |
| <li> | |
| <!-- We put our style just in line here --> | |
| <span class="swatch" style="background: #85D4E3;"></span> | |
| <!-- Here just a description and the hex code again (for copy/pasting in a pinch) --> | |
| <p class="label">blue | #85D4E3</p> | |
| </li> |
| <head> | |
| <!-- Somewhere in the head put this dude --> | |
| <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> | |
| <head> | |
| <!-- Inline style that font here --> | |
| <p style="font-family: 'Roboto', sans-serif;">Suddenly it was twenty-five years later. I was old, sitting in a | |
| red room. There was a midget in a red suit and a beautiful young woman who looked exactly like Laura Palmer. | |
| The little man told me my favorite gum was coming back in style and didn't his cousin look exactly | |
| like Laura Palmer?</p> |
| $blue: #85D4E3; | |
| $pink: #F4B5BD; | |
| $dark-green: #9C964A; | |
| $light-green: #CDC08C; | |
| $yellow: #FAD77B; | |
| $off-black: #2C3E50; | |
| $grey: #D3DDDC; | |
| $darker-grey: #95A5A6; | |
| h1, h2, h3, h4, h5, h6 { |
| <h2 class="section-title">Colours</h2> | |
| <!-- Add your own colour swatches down here! --> | |
| <ul class="colours"> | |
| <li> | |
| <!-- We put our style just in line here --> | |
| <span class="swatch" style="background: #85D4E3;"></span> | |
| <!-- Here just a description and the hex code again (for copy/pasting in a pinch) --> | |
| <p class="label">blue | #85D4E3</p> | |
| </li> |
| <h2>Colours</h2> | |
| <!-- Add your own colour swatches down here! --> | |
| <ul class="colours"> | |
| <li> | |
| <!-- We put our style just in line here --> | |
| <span class="swatch" style="background: #85D4E3;"></span> | |
| <!-- Here just a description and the hex code again (for copy/pasting in a pinch) --> | |
| <p class="label">blue | #85D4E3</p> | |
| </li> |
| // My custom emmet shortcuts | |
| { | |
| "snippets": { | |
| "file-type (eg html)": { | |
| "snippets": { | |
| "keys-typed": "your-shortcut" | |
| } | |
| } | |
| } |