<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>P2P Módulo 1</title>
	
	<!-- <link rel="stylesheet" type="text/css" href="css/css.css">     Para enlazarlo a un .css externo -->
	
	<style>
		body{
		font-family: sans-serif;
		}
		
		h1{
		color: #FFCCFF;
		text-shadow: 5px 5px 0 #666666;
		text-align: center;
		font-family: sans-serif; 
		}
		
		h2 {
		background-color: yellow;
		text-align: right;
		font:bolder;
		} 
		
		main {
		/*centrar el main*/
		width: 1000px;
		padding:auto;
		margin:auto;
		text-align:center;
		}
		
		
		figure {
			border-width: 10px;
			border-style: dashed;
		    padding: 15px;
		    text-align:center;
		    -webkit-border-image: url(imatges/border.png) 30 round; /* Safari 3.1-5 */
		    -o-border-image: url(imatges/border.png) 30 round; /* Opera 11-12.1 */
		    border-image: url(imatges/border.png) 30 round;
		    
		}
		
		}
		
		.borderimg{
			
			-webkit-border-image: url(imatges/border.png) 30 round; /* Safari 3.1-5 */
		    -o-border-image: url(imatges/border.png) 30 round; /* Opera 11-12.1 */
		    border-image: url(imatges/border.png) 30 round;
			
		}
		
		p {
		text-align: justify;
		}
		
		.multic {
			/*dividir text 3 columnes i es vegi en diferents
			 * navegadors*/
			 margin-top:50px;
			-webkit-column-count: 3;
			-moz-column-count: 3; 
			column-count: 3;
			column-rule: 10px dotted cyan;
			-moz-column-rule: 10px dotted cyan;
			-webkit-column-rule: 10px dotted cyan;
		}
		
		div.multic p {
			text-align: justify;
		}
		
		div.multic h3 {
			background-color: #0000FF;
			color: #FFF;
			text-align: right;
			font-style: italic;
			font-size:16px;
		}
		
		/* Estilos del menú */
		
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
			display:flex;
			flex-direction: column;
		}
		li { flex-grow: 1; }
		a {
			display:block;
			padding:1em;
			background-color:LightBlue ;
			text-align:center;
			margin-bottom:0.2em;
			text-decoration:none;
			color:blue;
		}
		a:hover {background-color:#FFCCFF; }
	</style>
</head>
	
<body>

	<header>
		<h1>Personaje 1</h1>
	</header>
	
	<nav>
	  <ul>
	    <li><a href="#">Opción 1</a></li>
	    <li><a href="#">Opción 2</a></li>
	    <li><a href="#">Opción 3</a></li>
	    <li><a href="#">Opción 4</a></li>
	  </ul>
	</nav>
	
	<main>
		<section>
		<h2>Biografía</h2>
		<figure>
			<img class="borderimg" src="imatges/platon.jpg" width=150 >
			<figcaption>Platón</figcaption>
		</figure>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit arcu at velit mattis iaculis. Donec sem felis, mattis sit amet massa ac, rhoncus bibendum nisi. Mauris faucibus elit augue, et facilisis nulla laoreet ac. Nam quis ultrices dolor. Curabitur vehicula elit ac quam tempor, a molestie lorem imperdiet. Suspendisse potenti. Morbi id diam eget mi semper imperdiet condimentum pellentesque ipsum. Aliquam est metus, placerat non aliquam sit amet, tincidunt nec dui. Donec tempus, nunc ut imperdiet elementum, sem erat lobortis enim, id tincidunt massa velit at dui. Nulla varius leo quis vestibulum porttitor. Suspendisse auctor pretium dui. Sed a nisi ut nunc malesuada varius. Etiam interdum eu tellus ut posuere. Pellentesque sodales laoreet varius. Aenean eleifend vehicula dui, non porta lacus luctus et.
		</p>
		</section>
		
		
		<section class="multic">
		<h2>Fragmento
		</h2>
		
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit arcu at velit mattis iaculis. Donec sem felis, mattis sit amet massa ac, rhoncus bibendum nisi. Mauris faucibus elit augue, et facilisis nulla laoreet ac. Nam quis ultrices dolor. Curabitur vehicula elit ac quam tempor, a molestie lorem imperdiet. Suspendisse potenti. Morbi id diam eget mi semper imperdiet condimentum pellentesque ipsum. Aliquam est metus, placerat non aliquam sit amet, tincidunt nec dui. Donec tempus, nunc ut imperdiet elementum, sem erat lobortis enim, id tincidunt massa velit at dui. Nulla varius leo quis vestibulum porttitor. Suspendisse auctor pretium dui. Sed a nisi ut nunc malesuada varius. Etiam interdum eu tellus ut posuere. Pellentesque sodales laoreet varius. Aenean eleifend vehicula dui, non porta lacus luctus et.
		</p>
		
		
		
		<blockquote>Integer luctus ipsum et quam bibendum sagittis. Vivamus lacinia vestibulum enim id sollicitudin. Suspendisse convallis eros ex, non interdum diam hendrerit non. Cras tempor tellus vitae nibh eleifend facilisis. Cras cursus sed justo ac scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean et elit et turpis dapibus consectetur. Sed et nunc non nulla vehicula mattis. Quisque cursus urna vel neque scelerisque, ac euismod neque pulvinar.</blockquote>
		
		
		
		<blockquote>Proin nunc velit, dapibus sit amet posuere id, dapibus id metus. Quisque orci velit, pharetra in enim et, semper vehicula mi. Ut lobortis ex eget nulla laoreet, quis fringilla justo gravida. Vestibulum viverra justo quis lacus dignissim bibendum. Suspendisse at vestibulum ante. Nam tincidunt facilisis finibus. Duis dapibus purus mi, id finibus ex posuere dictum. Pellentesque ex eros, tincidunt non sollicitudin quis, scelerisque ac urna. Nam sodales justo ac sodales ultrices. Cras cursus suscipit arcu et tincidunt. Sed a dolor mauris. Morbi eget euismod mauris, in lobortis diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultricies facilisis risus.
		</blockquote>
		
		
		</section>
	</main>
	
	<aside>
		<p>Publicidad</p>
    </aside>
	
	<footer>
		<h3>Fin</h3>
	</footer>

</body>
</html>
