| @ -1,11 +1,155 @@ | |||||
| <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> | <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> | ||||
| <html lang="es" | <html lang="es" | ||||
| xmlns="http://www.w3.org/1999/xhtml" | xmlns="http://www.w3.org/1999/xhtml" | ||||
| xmlns:th="http://www.thymeleaf.org"> | |||||
| xmlns:th="http://www.thymeleaf.org" | |||||
| xmlns:sec="http://www.thymeleaf.org/extras/spring-security"> | |||||
| <head th:replace="head/head :: mihead"></head> | <head th:replace="head/head :: mihead"></head> | ||||
| <body> | <body> | ||||
| Hola mundo | |||||
| <img src="img/que-significa-sonar-que-muerde-perro_98.avif"> | |||||
| <header th:replace="~{menu/m1 :: usuarios}"></header> | |||||
| <div id="espaciado"> | |||||
| </div> | |||||
| <main class="my-4"> | |||||
| <div class="container"> | |||||
| <!--Section: Content--> | |||||
| <section class="text-center"> | |||||
| <h4 class="mb-4"><strong>Pricing</strong></h4> | |||||
| <div class="btn-group mb-4" role="group" aria-label="Basic example"> | |||||
| <button type="button" class="btn btn-primary active">Monthly billing</button> | |||||
| <button type="button" class="btn btn-primary"> | |||||
| Annual billign <small>(2 months FREE)</small> | |||||
| </button> | |||||
| </div> | |||||
| <div class="row"> | |||||
| <!--Grid column--> | |||||
| <div class="col-lg-3 col-md-6 mb-4"> | |||||
| <!-- Card --> | |||||
| <div class="card"> | |||||
| <div class="card-header bg-white py-3"> | |||||
| <p class="text-uppercase small mb-2"><strong>Free</strong></p> | |||||
| <h5 class="mb-0">Free</h5> | |||||
| </div> | |||||
| <div class="card-body"> | |||||
| <ul class="list-group list-group-flush"> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| </ul> | |||||
| </div> | |||||
| <div class="card-footer bg-white py-3"> | |||||
| <button type="button" class="btn btn-success btn-sm">Get it</button> | |||||
| </div> | |||||
| </div> | |||||
| <!-- Card --> | |||||
| </div> | |||||
| <!--Grid column--> | |||||
| <!--Grid column--> | |||||
| <div class="col-lg-3 col-md-6 mb-4"> | |||||
| <!-- Card --> | |||||
| <div class="card border border-primary"> | |||||
| <div class="card-header bg-white py-3"> | |||||
| <p class="text-uppercase small mb-2"><strong>Essential</strong></p> | |||||
| <h5 class="mb-0">$19/month</h5> | |||||
| </div> | |||||
| <div class="card-body"> | |||||
| <ul class="list-group list-group-flush"> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| </ul> | |||||
| </div> | |||||
| <div class="card-footer bg-white py-3"> | |||||
| <button type="button" class="btn btn-primary btn-sm">Buy now</button> | |||||
| </div> | |||||
| </div> | |||||
| <!-- Card --> | |||||
| </div> | |||||
| <!--Grid column--> | |||||
| <!--Grid column--> | |||||
| <div class="col-lg-3 col-md-6 mb-4"> | |||||
| <!-- Card --> | |||||
| <div class="card"> | |||||
| <div class="card-header bg-white py-3"> | |||||
| <p class="text-uppercase small mb-2"><strong>Advanced</strong></p> | |||||
| <h5 class="mb-0">$49/month</h5> | |||||
| </div> | |||||
| <div class="card-body"> | |||||
| <ul class="list-group list-group-flush"> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| </ul> | |||||
| </div> | |||||
| <div class="card-footer bg-white py-3"> | |||||
| <button type="button" class="btn btn-info btn-sm">Buy now</button> | |||||
| </div> | |||||
| </div> | |||||
| <!-- Card --> | |||||
| </div> | |||||
| <!--Grid column--> | |||||
| <!--Grid column--> | |||||
| <div class="col-lg-3 col-md-6 mb-4"> | |||||
| <!-- Card --> | |||||
| <div class="card"> | |||||
| <div class="card-header bg-white py-3"> | |||||
| <p class="text-uppercase small mb-2"><strong>Enterprise</strong></p> | |||||
| <h5 class="mb-0">$189/month</h5> | |||||
| </div> | |||||
| <div class="card-body"> | |||||
| <ul class="list-group list-group-flush"> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| <li class="list-group-item">Feature</li> | |||||
| </ul> | |||||
| </div> | |||||
| <div class="card-footer bg-white py-3"> | |||||
| <button type="button" class="btn btn-info btn-sm">Buy now</button> | |||||
| </div> | |||||
| </div> | |||||
| <!-- Card --> | |||||
| </div> | |||||
| <!--Grid column--> | |||||
| </div> | |||||
| </section> | |||||
| <!--Section: Content--> | |||||
| </div> | |||||
| </main> | |||||
| <footer th:replace="foot/pie :: pie"></footer> | <footer th:replace="foot/pie :: pie"></footer> | ||||
| </body> | </body> | ||||
| </html> | </html> | ||||