<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
nav{
background-color: #0ff72d;
color:black !important;
}
nav .navbar-nav .nav-item .nav-link {
color:black ;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<a href="#" data-placement="right" data-toggle="tooltip" title="Hola">Hover over me</a>
<a href="#" data-toggle="popover" title="El título es la cabecera" data-content="Contenido del popover">Toggle popover</a>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<figure>
<img data-placement="right" data-toggle="tooltip" title="Hola" class="img-thumbnail" src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Gatos</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Perros</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Otras alimañas</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3">Contacto</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">
<div class="card" style="width:200px">
<img class="card-img-top" src="img/gato.jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Gatito</h4>
<p class="card-text">Un precioso gatito que puede ser tuyo visitando nuestra tienda</p>
<a href="#" class="btn btn-primary">Detalles</a>
</div>
</div>
</div>
<div class="tab-pane container fade" id="menu1">
<figure class="shadow-lg">
<img class="img-thumbnail" src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
</div>
<div class="tab-pane container fade" id="menu2">
<p>La palabra alimaña es una deformación metastética de la palabra animalia que es un plural del vocablo latino1 singular animal. Fue usado por los naturalistas para englobar a aquellas especies cuyos rasgos son confusos, raros o difíciles de describir y que con el tiempo se ha usado para identificar a aquellas especies de animales perjudiciales, repulsivos o dañinos que conviven con el medio humano.</p>
<p> Otras derivaciones homofónicas hoy ya sin uso del vocablo Alimaña proviene del español antiguo que identificaba a Alemania como Alimaña, quedando registrada esta acepción tanto en la fonética de préstamo hispano en el lenguaje aymará (Bolivia) y en las literaturas españolas2 del siglo XVIII y que no tienen ninguna relación con la actual acepción de la palabra.</p>
</div>
<div class="tab-pane container fade" id="menu3">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
