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" | |
} | |
} | |
} |