<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pagina Personal de Douglas Roman</title>
<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Supermercado+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"><style type="text/css">


.vertical {

  padding:3px;

  border:1px solid black;

  background-color:Lavender;

  width:300px;

  height:400px;

}


.horizontal {

  border:1px solid white;

  background-color:DodgerBlue ;

  width:300px;

  height:196px;

}


@font-face {
    font-family: 'fira';
    src: url('FiraSansOT-Light.otf');
}
h2 {
	font-family: 'Merriweather', serif;
	font-size: large;
	text-align: center;
	color:indigo;
}
h5 {
        font-family: 'Roboto Mono', monospace;	
	font-size: normal;
	text-align: center;
	color: navy;
}

h1 {
        font-family: 'Supermercado One', cursive;
	font-size: xx-large;
	text-align: center;
	color: navy;

}
p {
	font-family: 'Caesar Dressing', cursive;
	text-align: center;
}
body, html {
/*	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;*/
   display: -webkit-flex;
   display: flex;
   flex-flow: column;

}
#main {
   height: 75%;
   display: -webkit-flex;
   display: flex;
   flex-flow: row;
}
#main #Izq {
	background: linear-gradient(to bottom, Lavender 0%, DodgerBlue 100%);
	flex: 1 6 20%;
	order: 1;
}

#main #Der {
	background: #CFC;
	flex: 3 1 80%;
	order: 2;
}

header {

	border-radius: 10px 10px 10px 10px;
	display: block;
	min-height: 10%;
	background: linear-gradient(to top, Lavender 0%, DodgerBlue 100%);
        border: 1px solid #30F;
}
footer {
	border-radius: 10px 10px 10px 10px;
	display: block;
	min-height: 10%;
	background: linear-gradient(to bottom, Lavender 0%, DodgerBlue 100%);
        border: 1px solid #30F;
	margin: 0px;
	padding: 1px;
   display: -webkit-flex;
   display: flex;
   flex-flow: row;
}
</style>
</head>
<body>
<header><h1>Página personal de Douglas Roman</h1></header>
<div id='main'>
  <div id='Izq'>
<object class="horizontal" type="image/svg+xml"  data="imagensvg.svg">
</object>
<h2>Luego de un largo paseo se encontraron algunos elementos del mar como las estrellas marinas</h2>
	
  </div>
  <div id='Der'>

	<p>Recuerdo de viaje a la playa donde encontramos algunas estrellas de mar</p>
    <video width="320" height="240" controls preload autoplay 	aling=center;>

      <source src="playa.mp4" type=video/mp4>

      <source src="playa.webm" type=video/webm>

    </video>
    <picture>
      <source 
        media="(min-width: 400px)"
        srcset="FILE0040-10.jpg">
      <source 
        media="(min-width: 200px)"
        srcset="FILE0038-20pct.jpg">
      <img 
        src="FILE0038-20pct.jpg"
        alt="Estrella de mar">
    </picture>
      <img 
        src="FILE0043-10.jpg"
        alt="Estrella de mar">

</div>
 </div>
<footer>
<h5>Página del ejercicio obligatorio del segundo modulo de curso MOOC Introducciόn al desarrollo en HTML5, CSS y JavaScript de Apps Web  </h5>
</footer>
</body>
</html>