News
Acerca
Proyectos
Blurry loading effect
slide show – javascript
Redes sociales
Play
HTML JS Y CSS
<style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .quiniela-container { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 90%; max-width: 600px; } .quiniela-header { text-align: center; margin-bottom: 20px; } .quiniela-header h2 { margin: 0; color: #333; } .quiniela-match { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; } .quiniela-team { flex: 1; text-align: center; margin-bottom: 10px; } .quiniela-team img { width: 80px; height: auto; margin-bottom: 10px; } .quiniela-team p { margin: 0; font-size: 14px; color: #666; } .quiniela-vs { font-size: 24px; color: #333; margin-bottom: 10px; flex: 1; text-align: center; } .quiniela-options { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; gap: 10px; } .quiniela-options li { flex: 1; text-align: center; } .quiniela-options input[type="radio"] { display: none; } .quiniela-options label { display: block; padding: 10px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, transform 0.2s; color: #fff; font-weight: bold; background-color: #3498db; } .quiniela-options label:hover { background-color: #2980b9; } .quiniela-options input[type="radio"]:checked + label { background-color: #58ba83; transform: scale(1.05); } .quiniela-options input[type="radio"]:not(:checked) + label { background-color: #3498db; } .quiniela-submit { text-align: center; margin-top: 20px; } .quiniela-submit button { padding: 10px 20px; border: none; border-radius: 5px; background-color: #3498db; color: #fff; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } .quiniela-submit button:hover { background-color: #2980b9; transform: scale(1.05); } @media (max-width: 600px) { .quiniela-match { flex-direction: column; } .quiniela-vs { margin: 20px 0; } } </style> <script type="rocketlazyloadscript"> document.addEventListener("DOMContentLoaded", function() { const radios = document.querySelectorAll('.quiniela-options input[type="radio"]'); radios.forEach(radio => { radio.addEventListener('click', function() { if (this.previousChecked) { this.checked = false; this.previousChecked = false; } else { radios.forEach(r => r.previousChecked = false); this.previousChecked = true; } }); }); }); </script> <style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style> <noscript> <style id="wpr-lazyload-bg-nostyle">.welcome__wrap1{--wpr-bg-4e5fc6fd-99ca-48af-972d-142b1d85b202: url('https://josealberto.xyz/assets/img/bg/wlc-bg1.jpg');}.welcome__wrap2{--wpr-bg-34803f89-8952-47ab-9695-89d3a5f68bb4: url('https://josealberto.xyz/assets/img/bg/Header.png');}.about-shape:after{--wpr-bg-9fa14f73-2339-450c-935d-e241465c7c0a: url('https://josealberto.xyz/assets/img/about/about-bg-shape.png');}.about-area-primery .about-shape:after{--wpr-bg-fa07eaf8-643e-4517-97d2-bf0a5ff521ee: url('https://josealberto.xyz/assets/img/about/about-bg-shape2.png');}.about-shape:before{--wpr-bg-4b18784a-5c25-4fb2-8e2b-c3a298633500: url('https://josealberto.xyz/assets/img/about/about-shape.svg');}.about-area-primery .about-shape:before{--wpr-bg-6c960b46-e8e1-41f6-8d13-90691ee659ee: url('https://josealberto.xyz/assets/img/about/about-shape2.svg');}.about-area-primery:after{--wpr-bg-424510fc-dce1-48cd-9c45-6627d15e1c0b: url('https://josealberto.xyz/assets/img/bg/about-bg.svg');}.primery-skill:after{--wpr-bg-0b3732b4-5b9a-4cdc-b708-0e3c9ebec03e: url('https://josealberto.xyz/assets/img/bg/skill-bg1.svg');}.service-primery:after{--wpr-bg-dfd954ce-af11-42ba-977d-4b4721d86afe: url('https://josealberto.xyz/assets/img/bg/service-bg.svg');}.project-area{--wpr-bg-efb95d13-5ec1-4eca-9f15-0efe7b6abc0a: url('https://josealberto.xyz/assets/img/bg/project-bg.jpg');}.project-area-primery:after{--wpr-bg-36a6aabe-67e4-4987-9bae-c0dc3b31c7b1: url('https://josealberto.xyz/assets/img/bg/portfolio-bg.svg');}.testimonials-area1{--wpr-bg-82ce7139-2193-4bd9-ac30-7e6023252ca5: url('https://josealberto.xyz/assets/img/bg/testimonials-bg.png');}.about-area1{--wpr-bg-320191fb-fda1-4f94-bfc9-1a08de4cc4d2: url('https://josealberto.xyz/assets/css/assets/img/bg/about-bg.png');}.about-img-section1{--wpr-bg-e25e5fa2-7ec2-4caa-8f7e-6656cd8882c4: url('https://josealberto.xyz/assets/img/about/about1.png');}.pricing-area1{--wpr-bg-9cad19bf-8fda-4629-8dca-2b2044bce6bc: url('https://josealberto.xyz/assets/img/bg/about-bg.png');}.cta-area1{--wpr-bg-89dfb1e5-e675-43b2-b7e4-0ea69a3a4039: url('https://josealberto.xyz/assets/img/bg/map.png');}.footer-area1{--wpr-bg-8395cc4f-bcad-49b7-bd26-cb168767d0d4: url('https://josealberto.xyz/assets/img/bg/footer-bg.png');}.portfolio-bg-1{--wpr-bg-df0ceec0-391d-4ff6-8a41-b710e28f59de: url('https://josealberto.xyz/assets/img/project/portfolio1.jpg');}.portfolio-bg-2{--wpr-bg-ac072320-f94f-4e7d-b535-ccf45ed645d8: url('https://josealberto.xyz/assets/img/project/portfolio2.jpg');}.portfolio-bg-3{--wpr-bg-8f011e75-22ba-4022-a8a4-8789a69b2153: url('https://josealberto.xyz/assets/img/project/portfolio3.jpg');}.portfolio-bg-4{--wpr-bg-88ef4ed5-637f-4316-83e6-1a5a88f23dc4: url('https://josealberto.xyz/assets/img/project/portfolio4.jpg');}.portfolio-bg-5{--wpr-bg-30b6a2a2-9b78-4e5b-b322-e3a5f18ca3ff: url('https://josealberto.xyz/assets/img/project/portfolio5.jpg');}.portfolio-bg-6{--wpr-bg-a72eff24-a29c-43c2-968e-52d282942669: url('https://josealberto.xyz/assets/img/project/portfolio6.jpg');}.portfolio-bg-7{--wpr-bg-52ecb78c-c466-4049-81e8-817705711c15: url('https://josealberto.xyz/assets/img/project/01.jpg');}.portfolio-bg-8{--wpr-bg-3f23f954-c370-4fcf-accd-9f08386a7c69: url('https://josealberto.xyz/assets/img/project/02.jpg');}.portfolio-bg-9{--wpr-bg-93e45fe2-4aa9-4f0d-9205-63614719d9d6: url('https://josealberto.xyz/assets/img/project/03.jpg');}</style> </noscript> <script type="application/javascript">const rocket_pairs = [{"selector":".welcome__wrap1","style":".welcome__wrap1{--wpr-bg-4e5fc6fd-99ca-48af-972d-142b1d85b202: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/wlc-bg1.jpg');}","hash":"4e5fc6fd-99ca-48af-972d-142b1d85b202","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/wlc-bg1.jpg"},{"selector":".welcome__wrap2","style":".welcome__wrap2{--wpr-bg-34803f89-8952-47ab-9695-89d3a5f68bb4: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/Header.png');}","hash":"34803f89-8952-47ab-9695-89d3a5f68bb4","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/Header.png"},{"selector":".about-shape","style":".about-shape:after{--wpr-bg-9fa14f73-2339-450c-935d-e241465c7c0a: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape.png');}","hash":"9fa14f73-2339-450c-935d-e241465c7c0a","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape.png"},{"selector":".about-area-primery .about-shape","style":".about-area-primery .about-shape:after{--wpr-bg-fa07eaf8-643e-4517-97d2-bf0a5ff521ee: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape2.png');}","hash":"fa07eaf8-643e-4517-97d2-bf0a5ff521ee","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape2.png"},{"selector":".about-shape","style":".about-shape:before{--wpr-bg-4b18784a-5c25-4fb2-8e2b-c3a298633500: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape.svg');}","hash":"4b18784a-5c25-4fb2-8e2b-c3a298633500","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape.svg"},{"selector":".about-area-primery .about-shape","style":".about-area-primery .about-shape:before{--wpr-bg-6c960b46-e8e1-41f6-8d13-90691ee659ee: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape2.svg');}","hash":"6c960b46-e8e1-41f6-8d13-90691ee659ee","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape2.svg"},{"selector":".about-area-primery","style":".about-area-primery:after{--wpr-bg-424510fc-dce1-48cd-9c45-6627d15e1c0b: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.svg');}","hash":"424510fc-dce1-48cd-9c45-6627d15e1c0b","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.svg"},{"selector":".primery-skill","style":".primery-skill:after{--wpr-bg-0b3732b4-5b9a-4cdc-b708-0e3c9ebec03e: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/skill-bg1.svg');}","hash":"0b3732b4-5b9a-4cdc-b708-0e3c9ebec03e","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/skill-bg1.svg"},{"selector":".service-primery","style":".service-primery:after{--wpr-bg-dfd954ce-af11-42ba-977d-4b4721d86afe: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/service-bg.svg');}","hash":"dfd954ce-af11-42ba-977d-4b4721d86afe","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/service-bg.svg"},{"selector":".project-area","style":".project-area{--wpr-bg-efb95d13-5ec1-4eca-9f15-0efe7b6abc0a: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/project-bg.jpg');}","hash":"efb95d13-5ec1-4eca-9f15-0efe7b6abc0a","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/project-bg.jpg"},{"selector":".project-area-primery","style":".project-area-primery:after{--wpr-bg-36a6aabe-67e4-4987-9bae-c0dc3b31c7b1: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/portfolio-bg.svg');}","hash":"36a6aabe-67e4-4987-9bae-c0dc3b31c7b1","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/portfolio-bg.svg"},{"selector":".testimonials-area1","style":".testimonials-area1{--wpr-bg-82ce7139-2193-4bd9-ac30-7e6023252ca5: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/testimonials-bg.png');}","hash":"82ce7139-2193-4bd9-ac30-7e6023252ca5","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/testimonials-bg.png"},{"selector":".about-area1","style":".about-area1{--wpr-bg-320191fb-fda1-4f94-bfc9-1a08de4cc4d2: url('https:\/\/josealberto.xyz\/assets\/css\/assets\/img\/bg\/about-bg.png');}","hash":"320191fb-fda1-4f94-bfc9-1a08de4cc4d2","url":"https:\/\/josealberto.xyz\/assets\/css\/assets\/img\/bg\/about-bg.png"},{"selector":".about-img-section1","style":".about-img-section1{--wpr-bg-e25e5fa2-7ec2-4caa-8f7e-6656cd8882c4: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about1.png');}","hash":"e25e5fa2-7ec2-4caa-8f7e-6656cd8882c4","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about1.png"},{"selector":".pricing-area1","style":".pricing-area1{--wpr-bg-9cad19bf-8fda-4629-8dca-2b2044bce6bc: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.png');}","hash":"9cad19bf-8fda-4629-8dca-2b2044bce6bc","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.png"},{"selector":".cta-area1","style":".cta-area1{--wpr-bg-89dfb1e5-e675-43b2-b7e4-0ea69a3a4039: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/map.png');}","hash":"89dfb1e5-e675-43b2-b7e4-0ea69a3a4039","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/map.png"},{"selector":".footer-area1","style":".footer-area1{--wpr-bg-8395cc4f-bcad-49b7-bd26-cb168767d0d4: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/footer-bg.png');}","hash":"8395cc4f-bcad-49b7-bd26-cb168767d0d4","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/footer-bg.png"},{"selector":".portfolio-bg-1","style":".portfolio-bg-1{--wpr-bg-df0ceec0-391d-4ff6-8a41-b710e28f59de: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio1.jpg');}","hash":"df0ceec0-391d-4ff6-8a41-b710e28f59de","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio1.jpg"},{"selector":".portfolio-bg-2","style":".portfolio-bg-2{--wpr-bg-ac072320-f94f-4e7d-b535-ccf45ed645d8: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio2.jpg');}","hash":"ac072320-f94f-4e7d-b535-ccf45ed645d8","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio2.jpg"},{"selector":".portfolio-bg-3","style":".portfolio-bg-3{--wpr-bg-8f011e75-22ba-4022-a8a4-8789a69b2153: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio3.jpg');}","hash":"8f011e75-22ba-4022-a8a4-8789a69b2153","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio3.jpg"},{"selector":".portfolio-bg-4","style":".portfolio-bg-4{--wpr-bg-88ef4ed5-637f-4316-83e6-1a5a88f23dc4: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio4.jpg');}","hash":"88ef4ed5-637f-4316-83e6-1a5a88f23dc4","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio4.jpg"},{"selector":".portfolio-bg-5","style":".portfolio-bg-5{--wpr-bg-30b6a2a2-9b78-4e5b-b322-e3a5f18ca3ff: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio5.jpg');}","hash":"30b6a2a2-9b78-4e5b-b322-e3a5f18ca3ff","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio5.jpg"},{"selector":".portfolio-bg-6","style":".portfolio-bg-6{--wpr-bg-a72eff24-a29c-43c2-968e-52d282942669: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio6.jpg');}","hash":"a72eff24-a29c-43c2-968e-52d282942669","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio6.jpg"},{"selector":".portfolio-bg-7","style":".portfolio-bg-7{--wpr-bg-52ecb78c-c466-4049-81e8-817705711c15: url('https:\/\/josealberto.xyz\/assets\/img\/project\/01.jpg');}","hash":"52ecb78c-c466-4049-81e8-817705711c15","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/01.jpg"},{"selector":".portfolio-bg-8","style":".portfolio-bg-8{--wpr-bg-3f23f954-c370-4fcf-accd-9f08386a7c69: url('https:\/\/josealberto.xyz\/assets\/img\/project\/02.jpg');}","hash":"3f23f954-c370-4fcf-accd-9f08386a7c69","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/02.jpg"},{"selector":".portfolio-bg-9","style":".portfolio-bg-9{--wpr-bg-93e45fe2-4aa9-4f0d-9205-63614719d9d6: url('https:\/\/josealberto.xyz\/assets\/img\/project\/03.jpg');}","hash":"93e45fe2-4aa9-4f0d-9205-63614719d9d6","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/03.jpg"}]; const rocket_excluded_pairs = [];</script></head> <body> <form action="" method="post"> <div class="quiniela-container"> <div class="quiniela-header"> <h2>Elige tu Resultado</h2> </div> <!-- Partido 1 --> <div class="quiniela-match"> <div class="quiniela-team"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Local" data-lazy-src="https://247apuestas.com/wp-content/uploads/2024/07/ATLAS.png"><noscript><img src="https://247apuestas.com/wp-content/uploads/2024/07/ATLAS.png" alt="Local"></noscript> <p>Equipo Local</p> </div> <div class="quiniela-vs">VS</div> <div class="quiniela-team"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Visitante" data-lazy-src="https://247apuestas.com/wp-content/uploads/2024/07/PUMAS.png"><noscript><img src="https://247apuestas.com/wp-content/uploads/2024/07/PUMAS.png" alt="Visitante"></noscript> <p>Equipo Visitante</p> </div> </div> <ul class="quiniela-options"> <li> <input type="radio" name="vs1" id="local1" value="local"> <label class="local" for="local1">LOCAL</label> </li> <li> <input type="radio" name="vs1" id="empate1" value="empate"> <label class="empate" for="empate1">EMPATE</label> </li> <li> <input type="radio" name="vs1" id="visitante1" value="visitante"> <label class="visitante" for="visitante1">VISITANTE</label> </li> </ul> <!-- Partido 2 --> <div class="quiniela-match"> <div class="quiniela-team"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Local" data-lazy-src="https://247apuestas.com/wp-content/uploads/2024/07/GUADALAJARA.png"><noscript><img src="https://247apuestas.com/wp-content/uploads/2024/07/GUADALAJARA.png" alt="Local"></noscript> <p>Equipo Local</p> </div> <div class="quiniela-vs">VS</div> <div class="quiniela-team"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Visitante" data-lazy-src="https://247apuestas.com/wp-content/uploads/2024/07/AMERICA.png"><noscript><img src="https://247apuestas.com/wp-content/uploads/2024/07/AMERICA.png" alt="Visitante"></noscript> <p>Equipo Visitante</p> </div> </div> <ul class="quiniela-options"> <li> <input type="radio" name="vs2" id="local2" value="local"> <label class="local" for="local2">LOCAL</label> </li> <li> <input type="radio" name="vs2" id="empate2" value="empate"> <label class="empate" for="empate2">EMPATE</label> </li> <li> <input type="radio" name="vs2" id="visitante2" value="visitante"> <label class="visitante" for="visitante2">VISITANTE</label> </li> </ul> <div class="quiniela-submit"> <button type="submit">ENVIAR MI QUINIELA</button> </div> </div> </form>
RESULTADO
