<!DOCTYPE html>
<html lang="es">
<head>
<title>Bootstrap 3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="jumbotron mt-3">
<div class="container text-center">
<h1>Página de mis viajes</h1>
<p>Quiero mostrar los viajes que he realizado</p>
</div>
</div>
<div class="container-fluid text-center">
<div class="row">
<div class="col-3">
<p><button type="button" class="btn btn-secondary">
<a href="#">I love to travel</a>
<span class="fas fa-cloud"></span></button></p>
</div>
<div class="col-3">
<button type="button" class="btn btn-warning">
<span class="fas fa-search"></span>Busca viajes
</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary disabled">Contrata viaje</button>
</div>
<div class="col-3">
<div class="btn-group">
<button type="button" class="btn btn-primary">Patrimonios cercanos</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sagrada Familia</a></li>
<li><a href="#">Obras de Antoni Gaudí</a></li>
<li><a href="#">Monasterio de Poblet</a></li>
<li><a href="#">Conjunto arqueológico de Tarraco</a></li>
</ul>
</div>
</div>
</div>
</div><br>
<div class="container-fluid text-center">
<h3>Banderas de los países que he visitado</h3><br>
<div class="row">
<div class="col-3">
<p>Bolivia</p>
<img src="fotos/bolivia.gif" class="rounded" alt="bolivia" width="200px" height="150px">
</div>
<div class="col-3">
<p>India</p>
<img src="fotos/india.png" class="rounded" alt="india" width="200px" height="150px">
</div>
<div class="col-3">
<p>Marruecos</p>
<img src="fotos/marruecos.jpg" class="rounded" alt="marruecos" width="200px" height="150px">
</div>
<div class="col-3">
<p>Mongolia</p>
<img src="fotos/mongolia.png" class="rounded" alt="mongolia" width="200px" height="150px">
</div>
</div>
</div><br><br>
<div class="container-fluid text-center">
<div class="row">
<div class="col-3">
<p>Kazajstan</p>
<img src="fotos/kazajstan.png" class="rounded-circle" alt="kazajstan" width="200px" height="150px">
</div>
<div class="col-3">
<p>Letonia</p>
<img src="fotos/letonia.png" class="rounded-circle" alt="letonia" width="200px" height="150px">
</div>
<div class="col-3">
<p>Vaticano</p>
<img src="fotos/vaticano.png" class="rounded-circle" alt="vaticano" width="200px" height="150px">
</div>
<div class="col-3">
<p>Singapur</p>
<img src="fotos/singapur.gif" class="rounded-circle" alt="singapur" width="200px" height="150px">
</div>
</div>
</div><br>
<footer class="text-center">
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Genial!</strong> Has pasado el examen, puedes pasar a la siguiente fase.
</div>
<p>Soy el footer... bien!!!</p>
</footer>
</div>
</body>
</html>
<html lang="es">
<head>
<title>Bootstrap 3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="jumbotron mt-3">
<div class="container text-center">
<h1>Página de mis viajes</h1>
<p>Quiero mostrar los viajes que he realizado</p>
</div>
</div>
<div class="container-fluid text-center">
<div class="row">
<div class="col-3">
<p><button type="button" class="btn btn-secondary">
<a href="#">I love to travel</a>
<span class="fas fa-cloud"></span></button></p>
</div>
<div class="col-3">
<button type="button" class="btn btn-warning">
<span class="fas fa-search"></span>Busca viajes
</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary disabled">Contrata viaje</button>
</div>
<div class="col-3">
<div class="btn-group">
<button type="button" class="btn btn-primary">Patrimonios cercanos</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sagrada Familia</a></li>
<li><a href="#">Obras de Antoni Gaudí</a></li>
<li><a href="#">Monasterio de Poblet</a></li>
<li><a href="#">Conjunto arqueológico de Tarraco</a></li>
</ul>
</div>
</div>
</div>
</div><br>
<div class="container-fluid text-center">
<h3>Banderas de los países que he visitado</h3><br>
<div class="row">
<div class="col-3">
<p>Bolivia</p>
<img src="fotos/bolivia.gif" class="rounded" alt="bolivia" width="200px" height="150px">
</div>
<div class="col-3">
<p>India</p>
<img src="fotos/india.png" class="rounded" alt="india" width="200px" height="150px">
</div>
<div class="col-3">
<p>Marruecos</p>
<img src="fotos/marruecos.jpg" class="rounded" alt="marruecos" width="200px" height="150px">
</div>
<div class="col-3">
<p>Mongolia</p>
<img src="fotos/mongolia.png" class="rounded" alt="mongolia" width="200px" height="150px">
</div>
</div>
</div><br><br>
<div class="container-fluid text-center">
<div class="row">
<div class="col-3">
<p>Kazajstan</p>
<img src="fotos/kazajstan.png" class="rounded-circle" alt="kazajstan" width="200px" height="150px">
</div>
<div class="col-3">
<p>Letonia</p>
<img src="fotos/letonia.png" class="rounded-circle" alt="letonia" width="200px" height="150px">
</div>
<div class="col-3">
<p>Vaticano</p>
<img src="fotos/vaticano.png" class="rounded-circle" alt="vaticano" width="200px" height="150px">
</div>
<div class="col-3">
<p>Singapur</p>
<img src="fotos/singapur.gif" class="rounded-circle" alt="singapur" width="200px" height="150px">
</div>
</div>
</div><br>
<footer class="text-center">
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Genial!</strong> Has pasado el examen, puedes pasar a la siguiente fase.
</div>
<p>Soy el footer... bien!!!</p>
</footer>
</div>
</body>
</html>