Plantilla (h1)

Titular de nivel 2 (h2)

Titular de nivel 3 (h3)

Titular de nivel 4 (h4)

2013ko urriak 5

<div class="entradilla">
    Mauris pulvinar pulvinar...
</div>
<p class="fecha">2013ko urriak 5</p>
<hr>

Destacado lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer justo nisi, viverra sit amet ullamcorper non, posuere a felis. Curabitur in diam eget dui volutpat faucibus. Aliquam vitae sapien vel nisi tempor faucibus congue vel enim. In gravida varius accumsan. Nulla facilisi. Negrita donec ante massa, lacinia id viverra eu, venenatis et quam. Cursiva etiam fermentum, dui vel pellentesque accumsan, ipsum turpis fermentum purus, nec semper nulla odio a tellus. In egestas, augue iaculis aliquam eleifend, turpis nisl porta massa, at egestas est sapien eget ante. Phasellus consequat tristique tellus hendrerit eleifend. Integer tincidunt, enlace interno frente a enlace externo tincidunt, enim lectus gravida nibh, id vehicula neque nisi quis erat.

<span class="destacado">Destacado</span>

Separador

Nam fringilla nisi at augue varius et suscipit elit egestas. Cras a tellus at risus faucibus lobortis. Nam dictum nibh vel lacus eleifend nec commodo sem gravida. Vivamus accumsan porttitor justo posuere convallis. Pellentesque quis rhoncus risus. Vestibulum tristique eros eu mi eleifend vulputate. Vivamus quis metus mi. Pellentesque nec nisi mauris, eu malesuada felis. Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non.

Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.Nam fringilla nisi at augue varius et suscipit elit egestas. Cras a tellus at risus faucibus lobortis. Nam dictum nibh vel lacus eleifend nec commodo sem gravida. Vivamus accumsan porttitor justo posuere convallis. Pellentesque quis rhoncus risus. Vestibulum tristique eros eu mi eleifend vulputate. Vivamus quis metus mi. Pellentesque nec nisi mauris, eu malesuada felis.

<hr>

Imágenes

Imagen ancho completo (para páginas de una columna)

Imagen ancho completo (para páginas de dos columnas)

Imagen con pie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer justo nisi, viverra sit amet ullamcorper non, posuere a felis.

<p class="pie">
	<img alt="1090x560" src="http://placehold.it/1090x560">
	<span>Pie de página.</span>
</p>

Imagen flotando a la izquierda (se le añade el class="ezkerraldean" al contenedor -en este caso un parrafo-)

Nam fringilla nisi at augue varius et suscipit elit egestas. Cras a tellus at risus faucibus lobortis. Nam dictum nibh vel lacus eleifend nec commodo sem gravida. Vivamus accumsan porttitor justo posuere convallis. Pellentesque quis rhoncus risus. Vestibulum tristique eros eu mi eleifend vulputate. Vivamus quis metus mi. Pellentesque nec nisi mauris, eu malesuada felis. Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Cras a tellus at risus faucibus lobortis. Nam dictum nibh vel lacus eleifend nec commodo sem gravida. Vivamus accumsan porttitor justo posuere convallis. Pellentesque quis rhoncus risus. Vestibulum tristique eros eu mi eleifend vulputate. Vivamus quis metus mi. Pellentesque nec nisi mauris, eu malesuada felis. Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non.

<p class="ezkerraldean"><img alt="320x162" src="http://placehold.it/320x162"></p>
<p>Párrafo a la derecha</p>

Imagen flotando a la derecha (se le añade el class="eskuinaldean" -en este caso un parrafo-)

Nam fringilla nisi at augue varius et suscipit elit egestas. Cras a tellus at risus faucibus lobortis. Nam dictum nibh vel lacus eleifend nec commodo sem gravida. Vivamus accumsan porttitor justo posuere convallis. Pellentesque quis rhoncus risus. Vestibulum tristique eros eu mi eleifend vulputate. Vivamus quis metus mi. Pellentesque nec nisi mauris, eu malesuada felis. Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Cras a tellus at risus faucibus lobortis. Nam dictum nibh vel lacus eleifend nec commodo sem gravida. Vivamus accumsan porttitor justo posuere convallis. Pellentesque quis rhoncus risus. Vestibulum tristique eros eu mi eleifend vulputate. Vivamus quis metus mi. Pellentesque nec nisi mauris, eu malesuada felis. Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non.

<p class="eskuinaldean"><img alt="320x162" src="http://placehold.it/320x162"></p>
<p>Párrafo a la izquierda</p>

Columnas

Dos columnas

<div class="dos_columnas">
	<div class="columna_primera">
		<p>Columna primera</p>
	</div>
	<div class="columna_ultima">
		<p>columna última</p>
	</div>
</div>

Donec ante massa, lacinia id viverra eu, venenatis et quam. Etiam fermentum, dui vel pellentesque accumsan, ipsum turpis fermentum purus, nec semper nulla odio a tellus. In egestas, augue iaculis aliquam eleifend, turpis nisl porta massa, at egestas est sapien eget ante. Phasellus consequat tristique tellus hendrerit eleifend.

Donec ante massa, lacinia id viverra eu, venenatis et quam. Etiam fermentum, dui vel pellentesque accumsan, ipsum turpis fermentum purus, nec semper nulla odio a tellus. In egestas, augue iaculis aliquam eleifend, turpis nisl porta massa, at egestas est sapien eget ante. Phasellus consequat tristique tellus hendrerit eleifend.

<div class="dos_columnas">
	<div class="columna_primera">
		<p class="pie">
			<img alt="512x262" src="http://placehold.it/512x262">
			<span>Pie primera columna.</span>
		</p>
	</div>
	<div class="columna_ultima">
		<p class="pie">
			<img alt="512x262" src="http://placehold.it/512x262">
			<span>Pie segunda columna.</span>
		</p>
	</div>
</div>

Donec ante massa, lacinia id viverra eu, venenatis et quam. Etiam fermentum, dui vel pellentesque accumsan, ipsum turpis fermentum purus, nec semper nulla odio a tellus. In egestas, augue iaculis aliquam eleifend, turpis nisl porta massa, at egestas est sapien eget ante. Phasellus consequat tristique tellus hendrerit eleifend.

Tres columnas

<div class="tres_columnas">
	<div class="columna_primera">
		<p><img alt="320x162" src="http://placehold.it/320x162"></p>
	</div>
	<div class="columna_medio">
		<p><img alt="320x162" src="http://placehold.it/320x162"></p>
	</div>
	<div class="columna_ultima">
		<p><img alt="320x162" src="http://placehold.it/320x162"></p>
	</div>
</div>

Cuatro columnas

Sistema específico de 4 columnas.

<div class="cuatro_columnas">
	<div class="columna_primera">
		<p><img alt="320x162" src="http://placehold.it/320x162"></p>
	</div>
	<div class="columna_medio">
		<p><img alt="320x162" src="http://placehold.it/320x162"></p>
	</div>
	<div class="columna_medio">
		<p><img alt="320x162" src="http://placehold.it/320x162"></p>
	</div>
	<div class="columna_ultima">
		<p><img alt="320x162" src="http://placehold.it/320x162"></p>
	</div>
</div>

Sistema de dos columnas y en cada columna otro sistema de dos columnas.

<div class="dos_columnas">
	<div class="columna_primera">
		<div class="dos_columnas">
			<div class="columna_primera">
				<p><img alt="223x113" src="http://placehold.it/223x113"></p>
			</div>
			<div class="columna_ultima">
				<p><img alt="223x113" src="http://placehold.it/223x113"></p>
			</div>
		</div>
	</div>
	<div class="columna_ultima">
		<div class="dos_columnas">
			<div class="columna_primera">
				<p><img alt="223x113" src="http://placehold.it/223x113"></p>
			</div>
			<div class="columna_ultima">
				<p><img alt="223x113" src="http://placehold.it/223x113"></p>
			</div>
		</div>
	</div>
</div>

Listas

Lista básica

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

• Lista sin enlace
• Lorem ipsum
• Lista con enlace
• Dolor sit amet
• Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odiolorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio
• Lorem ipsum
• Dolor sit amet

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

Lista básica anidada

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

• Lorem ipsum
• Dolor sit amet
• Lorem ipsum
  • Lorem ipsum
  • Dolor sit amet
• Dolor sit amet

<ul>
	<li>Lorem ipsum</li>
	<li>Dolor sit amet</li>
	<li>Lorem ipsum
		<ul>
			<li>Lorem ipsum</li>
			<li>Dolor sit amet</li>
		</ul>
	</li>
	<li>Dolor sit amet</li>
</ul>

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

Lista destacada

• Lista sin enlace
• Lorem ipsum
• Lista con enlace
• Dolor sit amet
• Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odiolorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio
• Lorem ipsum
• Dolor sit amet

<ul class="destacado">
	<li>Lista sin enlace</li>
	<li>Lorem ipsum</li>
	<li><a href="#">Lista con enlace</a></li>
	<li>Dolor sit amet</li>
	<li>Nullam scelerisque consectetur.....
</li>
	<li>Lorem ipsum</li>
	<li>Dolor sit amet</li>
	</ul>

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

Lista ordenada

1. Lista sin enlace
2. Lorem ipsum
3. Lista con enlace
4. Dolor sit amet
5. Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odiolorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio
6. Lorem ipsum
7. Dolor sit amet

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

Lista ordenada anidada

1. Lorem ipsum
2. Dolor sit amet
3. Lorem ipsum
   1. Lorem ipsum
   2. Dolor sit amet
4. Dolor sit amet

<ol>
	<li>Lorem ipsum</li>
	<li>Dolor sit amet</li>
	<li>Lorem ipsum
		<ol>
			<li>Lorem ipsum</li>
			<li>Dolor sit amet</li>
		</ol>
	</li>
	<li>Dolor sit amet</li>
</ol>

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

Lista ordenada destacada

1. Lista sin enlace
2. Lorem ipsum
3. Lista con enlace
4. Dolor sit amet
5. Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odiolorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio
6. Lorem ipsum
7. Dolor sit amet

<ol class="destacado">
	<li>Lista sin enlace</li>
	<li>Lorem ipsum</li>
	<li><a href="#">Lista con enlace</a></li>
	<li>Dolor sit amet</li>
	<li>Nullam scelerisque consectetur.....
</li>
	<li>Lorem ipsum</li>
	<li>Dolor sit amet</li>
	</ol>

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

Listas mixtas

• Lorem ipsum
• Dolor sit amet
• Lorem ipsum
  1. Lorem ipsum
  2. Dolor sit amet
• Dolor sit amet

<ul>
	<li>Lorem ipsum</li>
	<li>Dolor sit amet</li>
	<li>Lorem ipsum
		<ol>
			<li>Lorem ipsum</li>
			<li>Dolor sit amet</li>
		</ol>
	</li>
	<li>Dolor sit amet</li>
</ul>

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.

1. Lorem ipsum
2. Dolor sit amet
3. Lorem ipsum
   • Lorem ipsum
   • Dolor sit amet
4. Dolor sit amet

<ol>
	<li>Lorem ipsum</li>
	<li>Dolor sit amet</li>
	<li>Lorem ipsum
		<ul>
			<li>Lorem ipsum</li>
			<li>Dolor sit amet</li>
		</ul>
	</li>
	<li>Dolor sit amet</li>
</ol>

Nullam scelerisque, lorem nec aliquet consectetur, metus odio vestibulum magna, a suscipit velit diam nec odio. Nulla condimentum congue mi, id sagittis tortor feugiat non. Quisque mi arcu, congue et interdum eget, fringilla ac justo. Nam lorem quam, ullamcorper vitae lobortis quis, vehicula vel odio.