Colors

Family Fonts

$font-family-primary: "Dosis", sans-serif;

$font-family-complementary: "PT Sans", sans-serif;

$font-family-serif: "PT Serif", serif;

Primary headings

Look at me, I'm the heading

Hey you, I'm a heading two

I'm pretty important too

<h1>Look at me, I'm the heading</h1>
<h2>Hey you, I'm a heading two</h2>
<h3>I'm pretty important too</h3>

Complementary headings

Soy un subtítulo que acompaño al h1

Heading 3

Heading 4

Heading 5

Heading 6

<p class="h2-complementary">Soy un subtítulo que acompaño al h1</p>
<h3 class="h3-complementary">Heading 3</h3>
<h4 class="h4-complementary">Heading 4</h4>
<h5 class="h5-complementary">Heading 5</h5>
<h6 class="h6-complementary">Heading 6</h6>

Paragraph & link text

Hello I'm a Paragraph. Maybe I seem not important but I actually am. It just that nobody reads me, but I look great between titles. The longer I am the less I got read. That's my sad true.

<p>Hello I'm a <a href="">Paragraph.</a> Maybe I seem not important but I actually am.It just that nobody reads me, but I look great between titles. The longer I am the less I got read. That's my sad true.</p>

Paragraph 2 & link text

Hello I'm a Paragraph. Maybe I seem not important but I actually am. It just that nobody reads me, but I look great between titles. The longer I am the less I got read. That's my sad true.

<p class="p-complementary">Hello I'm a <a href="">Paragraph.</a> Maybe I seem not important but I actually am.It just that nobody reads me, but I look great between titles. The longer I am the less I got read. That's my sad true.</p>

Blockquote

Go fun yourself!

<blockquote><p>Go fun yourself!</p></blockquote>

Tags

<p class="tag-musica"></p>
<p class="tag-arte"></p>
<p class="tag-teatro"></p>
<p class="tag-gastronomia"></p>
<p class="tag-humor"></p>
		

Buttons

Primary button Secondary button Link button

Large button Small button

<p>
<a href="#" class="btn btn-primary">Primary button</a>
<a  href="#" class="btn btn-secondary">Secondary button</a>
<a  href="#" class="btn btn-link">Link button</a>
</p>

<a href="#" class="btn btn-lg">Large button</a>
<a href="#" class="btn btn-sm">Small button</a>
		

Navigation