Arreglos de wallpapers e inicio de correción

This commit is contained in:
duncan
2024-11-21 15:08:10 -06:00
parent 05c067abb9
commit 2a3c7c6bbf
4 changed files with 602 additions and 551 deletions
+47 -19
View File
@@ -83,6 +83,7 @@ section .section-h h2:after {
text-decoration: none;
color: #1e3c70;
font-size: 22px;
border-radius: 5px;
}
.home .cont-prin .content-home .description a:hover {
color: #bb8800;
@@ -140,61 +141,88 @@ section .section-h h2:after {
width: 650px;
}
}
.home .cont-prin .div-flex .nav-item a {
.home .cont-prin .row .div-flex .nav-item a {
color: #1e3c70;
}
.home .cont-prin .div-flex .nav .active {
.home .cont-prin .row .div-flex .nav .active {
color: #bb8800 !important;
border-bottom: solid 2px #1e3c70;
}
.home .cont-prin .div-flex .description {
.home .cont-prin .row .div-flex .description {
border-top: solid 2px #bb8800;
}
.home .cont-prin .div-flex .description p {
.home .cont-prin .row .div-flex .description p {
border-bottom: solid 2px #1e3c70;
width: auto;
}
.home .cont-prin .row .div-flex .description a {
background-color: #bb8800;
padding: 2px 10px;
color: white !important;
}
.home .cont-prin .row .div-flex .description a:hover {
color: #bb8800 !important;
background-color: white;
border: solid 1px #1e3c70;
}
@media (max-width: 992px) {
.home .cont-prin .div-flex {
.home .cont-prin .row .div-flex {
display: block;
}
.home .cont-prin .div-flex .nav .active {
.home .cont-prin .row .div-flex .nav .active {
border-bottom: 2px solid #1e3c70;
}
.home .cont-prin .div-flex .boxx {
.home .cont-prin .row .div-flex .boxx {
margin-bottom: 20px;
}
}
@media (min-width: 993px) {
.home .cont-prin .div-flex {
.home .cont-prin .row .div-flex {
display: flex;
}
.home .cont-prin .div-flex .boxx nav .nav-item {
.home .cont-prin .row .div-flex .boxx nav .nav-item {
margin-bottom: 10px;
}
.home .cont-prin .div-flex .boxx .nav {
.home .cont-prin .row .div-flex .boxx .nav {
width: 170px;
}
}
.home .cont-prin .d-flex .flex-column img {
width: 140px;
width: 200px;
padding-bottom: 5px;
border-radius: 3px;
}
.home .cont-prin .d-flex .modal-body .bg-phone {
margin: 10px 55px;
padding: 0px;
width: 96px;
border-radius: 13px;
.home .cont-prin .d-flex .flex-column button {
border: solid 1px #1e3c70;
}
.home .cont-prin .d-flex .modal-body img {
width: 100px !important;
.home .cont-prin .d-flex .flex-column button:hover {
color: #bb8800;
}
@media (max-width: 576px) {
.home .cont-prin .d-flex .modal-body .bg-phone {
margin: 10px 55px;
padding: 0px;
border-radius: 13px;
}
}
@media (min-width: 577px) {
.home .cont-prin .d-flex .modal-body .bg-phone {
margin: 10px 55px;
padding: 0px;
border-radius: 13px;
}
}
.home .cont-prin .d-flex .modal-body a {
text-decoration: none;
border-radius: 5px;
background-color: #bb8800;
color: #1e3c70;
padding: 6px 30px;
color: white;
border: 1px solid #1e3c70;
}
.home .cont-prin .d-flex .modal-body a:hover {
color: #bb8800;
background-color: white;
}
/* Globales */
.nav-g a {
+66 -35
View File
@@ -90,6 +90,8 @@ section {
text-decoration: none;
color: #1e3c70;
font-size: 22px;
border-radius: 5px;
&:hover {
color: #bb8800;
}
@@ -153,64 +155,93 @@ section {
}
}
}
.div-flex {
.nav-item a {
color: #1e3c70;
}
.nav .active {
color: #bb8800 !important;
border-bottom: solid 2px #1e3c70;
}
.description {
border-top: solid 2px #bb8800;
p {
border-bottom: solid 2px #1e3c70;
width: auto;
.row {
.div-flex {
.nav-item a {
color: #1e3c70;
}
}
@media (max-width: 992px) {
display: block;
.nav .active {
border-bottom: 2px solid #1e3c70;
color: #bb8800 !important;
border-bottom: solid 2px #1e3c70;
}
.boxx {
margin-bottom: 20px;
.description {
border-top: solid 2px #bb8800;
p {
border-bottom: solid 2px #1e3c70;
width: auto;
}
a {
background-color: #bb8800;
padding: 2px 10px;
color:white !important;
&:hover {
color:#bb8800 !important;
background-color: white;
border: solid 1px #1e3c70;
}
}
}
}
@media (min-width: 993px) {
display: flex;
.boxx nav .nav-item {
margin-bottom: 10px;
@media (max-width: 992px) {
display: block;
.nav .active {
border-bottom: 2px solid #1e3c70;
}
.boxx {
margin-bottom: 20px;
}
}
.boxx .nav {
width: 170px;
@media (min-width: 993px) {
display: flex;
.boxx nav .nav-item {
margin-bottom: 10px;
}
.boxx .nav {
width: 170px;
}
}
}
}
.d-flex {
.flex-column {
img {
width: 140px;
width: 200px;
padding-bottom: 5px;
border-radius: 3px;
}
button {
border: solid 1px #1e3c70;
&:hover {
color: #bb8800;
}
}
}
.modal-body {
.bg-phone {
margin: 10px 55px;
padding: 0px;
width: 96px;
border-radius: 13px;
@media (max-width: 576px) {
.bg-phone {
margin: 10px 55px;
padding: 0px;
border-radius: 13px;
}
}
img {
width: 100px !important;
@media (min-width: 577px) {
.bg-phone {
margin: 10px 55px;
padding: 0px;
border-radius: 13px;
}
}
a {
text-decoration: none;
border-radius: 5px;
background-color: #bb8800;
color: #1e3c70;
padding: 6px 30px;
color: white;
border: 1px solid #1e3c70;
&:hover {
color: #bb8800;
background-color: white;
}
}
}
}
+283 -281
View File
@@ -57,11 +57,7 @@
</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link ative"
aria-current="page"
>
<a href="#" class="nav-link ative" aria-current="page">
Logotipos
</a>
</li>
@@ -155,312 +151,318 @@
Logotipos
</h2>
</div>
<!-- tab de logotipos -->
<div class="div-flex flex-nowrap">
<div class="col-md-4 boxx w-100">
<ul class="nav justify-content-center" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="logotipos-tab"
data-bs-toggle="tab"
href="#logotipos"
role="tab"
aria-controls="logotipos"
aria-selected="true"
>Logotipos</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="escudos-tab"
data-bs-toggle="tab"
href="#escudos"
role="tab"
aria-controls="escudos"
aria-selected="false"
>Escudos</a
>
</li>
</ul>
</div>
<div class="col-12 col-md-8">
<div class="tab-content" id="myTabContent">
<!-- Contenido de la pestaña Inicio -->
<div
class="tab-pane fade show active"
id="logotipos"
role="tabpanel"
aria-labelledby="home-tab"
<div class="row">
<!-- tab de logotipos -->
<div class="div-flex flex-nowrap">
<div class="col-12 col-md-3 boxx">
<ul
class="nav justify-content-center"
id="myTab"
role="tablist"
>
<div class="row">
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-azul.jpg"
alt=""
/>
<div class="description justify-content-around">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-azul.jpg"
download="logo-azul.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-azul.png"
download="logo-azul.png"
>PNG</a
>
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="logotipos-tab"
data-bs-toggle="tab"
href="#logotipos"
role="tab"
aria-controls="logotipos"
aria-selected="true"
>Logotipos</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="escudos-tab"
data-bs-toggle="tab"
href="#escudos"
role="tab"
aria-controls="escudos"
aria-selected="false"
>Escudos</a
>
</li>
</ul>
</div>
<div class="col-12 col-md-8">
<div class="tab-content" id="myTabContent">
<!-- Contenido de la pestaña Inicio -->
<div
class="tab-pane fade show active"
id="logotipos"
role="tabpanel"
aria-labelledby="home-tab"
>
<div class="row">
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-azul.jpg"
alt=""
/>
<div class="description justify-content-around">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-azul.jpg"
download="logo-azul.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-azul.png"
download="logo-azul.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-azulBis.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-azulBis.jpg"
download="logo-azulBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-azulBis.png"
download="logo-azulBis.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-azulBis.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-azulBis.jpg"
download="logo-azulBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-azulBis.png"
download="logo-azulBis.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-blanco.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-blanco.jpg"
download="logo-blanco.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-blanco.png"
download="logo-blanco.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-blanco.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-blanco.jpg"
download="logo-blanco.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-blanco.png"
download="logo-blanco.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-blancoBis.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-blancoBis.jpg"
download="logo-blancoBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-blancoBis.png"
download="logo-blancoBis.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-blancoBis.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-blancoBis.jpg"
download="logo-blancoBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-blancoBis.png"
download="logo-blancoBis.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-dorado.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-dorado.jpg"
download="logo-dorado.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-dorado.png"
download="logo-dorado.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-dorado.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-dorado.jpg"
download="logo-dorado.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-dorado.png"
download="logo-dorado.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-doradoBis.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-doradoBis.jpg"
download="logo-doradoBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-doradoBis.png"
download="logo-doradoBis.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-doradoBis.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-doradoBis.jpg"
download="logo-doradoBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-doradoBis.png"
download="logo-doradoBis.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-negro.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-negro.jpg"
download="logo-negro.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-negro.png"
download="logo-negro.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-negro.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-negro.jpg"
download="logo-negro.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-negro.png"
download="logo-negro.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-negroBis.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-negroBis.jpg"
download="logo-negroBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-negroBis.png"
download="logo-negroBis.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Logotipo/logo-negroBis.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Logotipo/logo-negroBis.jpg"
download="logo-negroBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Logotipo/logo-negroBis.png"
download="logo-negroBis.png"
>PNG</a
>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fin del contenido de logotipos -->
<!-- Contenido de la pestaña escudos -->
<div
class="tab-pane fade"
id="escudos"
role="tabpanel"
aria-labelledby="profile-tab"
>
<div class="row">
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Escudo/escudo-a.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Escudo/escudo-a.jpg"
download="logo-azul.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Escudo/escudo-a.png"
download="logo-azul.png"
>PNG</a
>
<!-- Fin del contenido de logotipos -->
<!-- Contenido de la pestaña escudos -->
<div
class="tab-pane fade"
id="escudos"
role="tabpanel"
aria-labelledby="profile-tab"
>
<div class="row">
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Escudo/escudo-a.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Escudo/escudo-a.jpg"
download="logo-azul.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Escudo/escudo-a.png"
download="logo-azul.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Escudo/escudo-b.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Escudo/escudo-b.jpg"
download="logo-azulBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Escudo/escudo-b.jpg"
download="logo-azulBis.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Escudo/escudo-b.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Escudo/escudo-b.jpg"
download="logo-azulBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Escudo/escudo-b.jpg"
download="logo-azulBis.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Escudo/escudo-b2.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Escudo/escudo-b2.jpg"
download="logo-blanco.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Escudo/escudo-b2.png"
download="logo-blanco.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Escudo/escudo-b2.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Escudo/escudo-b2.jpg"
download="logo-blanco.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Escudo/escudo-b2.png"
download="logo-blanco.png"
>PNG</a
>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Escudo/escudo-d.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Escudo/escudo-d.jpg"
download="logo-blancoBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Escudo/escudo-d.png"
download="logo-blancoBis.png"
>PNG</a
>
<div class="col-12 col-md-4 pt-5">
<div class="content-home">
<img
src="/assets/img/esc-log/Escudo/escudo-d.jpg"
alt=""
/>
<div class="description">
<p>Descargar</p>
<a
href="assets/img/esc-log/Escudo/escudo-d.jpg"
download="logo-blancoBis.jpg"
>JPG</a
>
<a
href="assets/img/esc-log/Escudo/escudo-d.png"
download="logo-blancoBis.png"
>PNG</a
>
</div>
</div>
</div>
</div>
</div>
<!-- Fin de la pestaña de escudos -->
</div>
<!-- Fin de la pestaña de escudos -->
</div>
</div>
</div>
+206 -216
View File
@@ -152,291 +152,281 @@
Wallpapers
</h2>
</div>
<div class="d-flex gap-2">
<div class="flex-column">
<img src="assets/img/wallpappers/wp-1.png" alt="">
<div class="d-flex flex-wrap gap-2 justify-content-center">
<div class="d-flex flex-column">
<img src="assets/img/wallpappers/wp-1.png" alt="" />
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
class="btn"
data-bs-toggle="modal"
data-bs-target="#wp1"
>
Provar estilo 1
Ver wallpaper
</button>
</div>
<!-- Modal -->
<div
class="modal fade"
id="wp1"
tabindex="-1"
aria-labelledby="wp1Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp1Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div
class="col-12 d-flex flex-column align-items-center"
<!-- Modal -->
<div
class="modal fade"
id="wp1"
tabindex="-1"
aria-labelledby="wp1Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp1Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 d-flex flex-column align-items-center">
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-1.png);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-1.png"
download="wp-1.png"
>Descargar</a
>
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-1.png);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-1.png"
download="wp-1.png"
>Descargar</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-column">
<img src="assets/img/wallpappers/wp-2.jpg" alt="">
<div class="d-flex flex-column">
<img src="assets/img/wallpappers/wp-2.jpg" alt="" />
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
class="btn"
data-bs-toggle="modal"
data-bs-target="#wp2"
>
Provar estilo 2
Ver wallpaper
</button>
</div>
<!-- Modal -->
<div
class="modal fade"
id="wp2"
tabindex="-1"
aria-labelledby="wp2Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp2Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div
class="col-12 d-flex flex-column align-items-center"
<!-- Modal -->
<div
class="modal fade"
id="wp2"
tabindex="-1"
aria-labelledby="wp2Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp2Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 d-flex flex-column align-items-center">
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-2.jpg);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-2.jpg"
download="wp-2.jpg"
>Descargar</a
>
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-2.jpg);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-2.jpg"
download="wp-2.jpg"
>Descargar</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-column">
<img src="assets/img/wallpappers/wp-3.jpg" alt="">
<div class="d-flex flex-column">
<img src="assets/img/wallpappers/wp-3.jpg" alt="" />
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
class="btn"
data-bs-toggle="modal"
data-bs-target="#wp4"
>
Provar estilo 3
Ver wallpaper
</button>
</div>
<!-- Modal -->
<div
class="modal fade"
id="wp4"
tabindex="-1"
aria-labelledby="wp4Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp4Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div
class="col-12 d-flex flex-column align-items-center"
<!-- Modal -->
<div
class="modal fade"
id="wp4"
tabindex="-1"
aria-labelledby="wp4Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp4Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 d-flex flex-column align-items-center">
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-3.jpg);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-3.jpg"
download="wp-3.jpg"
>Descargar</a
>
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-3.jpg);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-3.jpg"
download="wp-3.jpg"
>Descargar</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-column">
<img src="assets/img/wallpappers/wp-4.jpg" alt="">
<div class="d-flex flex-column">
<img src="assets/img/wallpappers/wp-4.jpg" alt="" />
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
class="btn"
data-bs-toggle="modal"
data-bs-target="#wp5"
>
Provar estilo 4
Ver wallpaper
</button>
</div>
<!-- Modal -->
<div
class="modal fade"
id="wp5"
tabindex="-1"
aria-labelledby="wp5Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp5Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div
class="col-12 d-flex flex-column align-items-center"
<!-- Modal -->
<div
class="modal fade"
id="wp5"
tabindex="-1"
aria-labelledby="wp5Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp5Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 d-flex flex-column align-items-center">
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-4.jpg);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-4.jpg"
download="wp-4.jpg"
>Descargar</a
>
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-4.jpg);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-4.jpg"
download="wp-4.jpg"
>Descargar</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex-column">
<img src="assets/img/wallpappers/wp-5.jpg" alt="">
<div class="d-flex flex-column">
<img src="assets/img/wallpappers/wp-5.jpg" alt="" />
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
class="btn"
data-bs-toggle="modal"
data-bs-target="#wp3"
>
Provar estilo 5
Ver wallpaper
</button>
</div>
<!-- Modal -->
<div
class="modal fade"
id="wp3"
tabindex="-1"
aria-labelledby="wp3Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp3Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div
class="col-12 d-flex flex-column align-items-center"
<!-- Modal -->
<div
class="modal fade"
id="wp3"
tabindex="-1"
aria-labelledby="wp3Label"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="wp3Label">Wallpapers</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 d-flex flex-column align-items-center">
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-5.jpg);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-5.jpg"
download="wp-5.jpg"
>Descargar</a
>
<img
src="assets/img/bg/phone.png"
alt=""
class="bg-phone"
style="
background-image: url(assets/img/wallpappers/wp-5.jpg);
background-position: center center;
background-size: cover;
"
/>
<a
href="assets/img/wallpappers/wp-5.jpg"
download="wp-5.jpg"
>Descargar</a
>
</div>
</div>
</div>
</div>