<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-primary">
<div class="container ">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
Especiales gracias
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pablo Dog</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Quiero agradecerme por creer en mí. Quiero agradecerme por hacer todo este gran trabajo. Quiero agradecerme por no tener días libres. Quiero agradecerme por nunca renunciar. Quiero agradecerme por siempre dar y tratar de dar más sin recibir. Quiero agradecerme por tratar de hacer el bien más que el mal. Quiero agradecerme por ser yo en todo momento”, dijo el rapero en su discurso de aceptación.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No estoy de acuerdo</button>
<button type="button" class="btn btn-primary">Estoy de acuerdo</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://pablomonteserin.com/res/bootstrap-5/ex/landing/img/cursos-pablo-monteserin.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://pablomonteserin.com/res/bootstrap-5/ex/landing/img/seo.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<h1>Conviértete en un experto en programación web sin pasar miles de horas de investigación
</h1>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 mt-5">
<div class="card">
<img class="card-img-top" src="https://pablomonteserin.com/res/bootstrap-5/ex/landing/img/html5.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p>
<a href="#" class="btn btn-outline-info">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-5">
<div class="card">
<img class="card-img-top" src="https://pablomonteserin.com/res/bootstrap-5/ex/landing/img/html5.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p>
<a href="#" class="btn btn-outline-info">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-5">
<div class="card">
<img class="card-img-top" src="https://pablomonteserin.com/res/bootstrap-5/ex/landing/img/Javascript.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p>
<a href="#" class="btn btn-outline-info">Go somewhere</a>
</div>
</div>
</div>
</div>
<div class="row mt-5 align-items-center">
<div class="col-12 col-md-9">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid enim cumque perspiciatis </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa ut incidunt nam numquam quo soluta
assumenda fugit nobis ducimus sint dicta libero, earum, ratione recusandae placeat necessitatibus?
Ea, vero accusantium.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa nemo nesciunt incidunt, ipsum
assumenda quo tenetur harum minus enim aliquam quasi quae laboriosam fuga inventore ea saepe
voluptas sed est.</p>
<div>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
</div>
<div class="col-12 col-md-3 mt-5 mt-md-0">
<img src="https://pablomonteserin.com/res/bootstrap-5/ex/landing/img/007.jpg" class="img-fluid rounded-top">
</div>
</div>
<div class="row justify-content-center mt-5 pb-5">
<div class="col-12 col-md-7">
<h2>Manda un mail
</h2>
<input type="text" class="form-control">
<input type="text" class="form-control">
<textarea name="" class="form-control"></textarea>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>