<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Párrafo con imágenes</title>
<style type="text/css">
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:LightGray ;
	text-align:center;
	margin-bottom:0.8em;
	text-decoration:none;
	color:#00F;
}
a:hover {background-color:#CF3; }

body { font-family: Arial, Helvetica, sans-serif; }
h1 { font-size: 1.4em; background-color:#CFC; }
p {	background-color:none;}
em { color: orange; background-color: #E8E8E8; }
strong { color: red; background-color:#FF6; }
</style>
</head>

<body>
<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>
<p align="center"><img src="ingress.jpg" width="400" height="492" alt="Louis-Francois Bertin - Ingres"/></p>

<h1>Titular nivel 1</h1>
<p>En este párrafo hay rexto marcado 
como <em>importante</em> y otro texto 
marcado como <strong>muy importante.</strong></p>
<p>Este es el segundo párrafo.</p>
</body>
</html>
