News
Javascript Variables Let Const
Javascript Funciones
Android vs iPhone: ¿Cuál es mejor para ti?
¿Qué es Ethereum y cómo funciona?
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">.hcb-clipboard{--wpr-bg-0c297f91-c758-4ce5-839d-a003079d7faa: url('https://josealberto.xyz/wp-content/plugins/highlighting-code-block/assets/img/clipboard-to-copy.svg');}.hcb-clipboard.-done{--wpr-bg-bfc9318c-a573-4e67-9654-79c9aedf5eaf: url('https://josealberto.xyz/wp-content/plugins/highlighting-code-block/assets/img/clipboard-copied.svg');}.welcome__wrap1{--wpr-bg-ebcffe56-e916-4953-8852-eb0d3ad5e908: url('https://josealberto.xyz/assets/img/bg/wlc-bg1.jpg');}.welcome__wrap2{--wpr-bg-d7d7a263-83cd-46ba-8e69-608d782890e4: url('https://josealberto.xyz/assets/img/bg/Header.png');}.about-shape:after{--wpr-bg-04769b3d-fadf-4bd7-91ff-43e7f7bbae86: url('https://josealberto.xyz/assets/img/about/about-bg-shape.png');}.about-area-primery .about-shape:after{--wpr-bg-973309a0-faf1-4f23-8cdf-e96c98b8fde3: url('https://josealberto.xyz/assets/img/about/about-bg-shape2.png');}.about-shape:before{--wpr-bg-b331b474-2483-4fcf-b027-b6906d7bef32: url('https://josealberto.xyz/assets/img/about/about-shape.svg');}.about-area-primery .about-shape:before{--wpr-bg-bce49917-da14-4e1b-9001-5e54fec8255a: url('https://josealberto.xyz/assets/img/about/about-shape2.svg');}.about-area-primery:after{--wpr-bg-f24f555b-76b0-4446-b4ab-5d8c1dd327a9: url('https://josealberto.xyz/assets/img/bg/about-bg.svg');}.primery-skill:after{--wpr-bg-b5f5b643-135e-40f9-86ef-12ac72cb7119: url('https://josealberto.xyz/assets/img/bg/skill-bg1.svg');}.service-primery:after{--wpr-bg-2d930a7e-ea45-4fab-b7b0-0ff61eaf49d0: url('https://josealberto.xyz/assets/img/bg/service-bg.svg');}.project-area{--wpr-bg-61faa4e8-9d20-41c6-8186-e272a2227b34: url('https://josealberto.xyz/assets/img/bg/project-bg.jpg');}.project-area-primery:after{--wpr-bg-32fdba9b-ed88-47e1-b786-791b1fbb758a: url('https://josealberto.xyz/assets/img/bg/portfolio-bg.svg');}.testimonials-area1{--wpr-bg-9c680f01-ef12-496a-b118-efd4e50f49bc: url('https://josealberto.xyz/assets/img/bg/testimonials-bg.png');}.about-area1{--wpr-bg-6f851c26-13a6-4e79-9391-ee9427bf772d: url('https://josealberto.xyz/assets/css/assets/img/bg/about-bg.png');}.about-img-section1{--wpr-bg-76f29195-bb26-4871-843f-d62ab04487b6: url('https://josealberto.xyz/assets/img/about/about1.png');}.pricing-area1{--wpr-bg-3a93ea63-d110-4b8f-b942-99ebe27bd142: url('https://josealberto.xyz/assets/img/bg/about-bg.png');}.cta-area1{--wpr-bg-a18f2058-924a-428d-96d2-672511d5253b: url('https://josealberto.xyz/assets/img/bg/map.png');}.footer-area1{--wpr-bg-72da40a4-9788-4199-a250-3f5ad991fbf1: url('https://josealberto.xyz/assets/img/bg/footer-bg.png');}.portfolio-bg-1{--wpr-bg-2afd8278-baed-47de-8111-e6da98611af1: url('https://josealberto.xyz/assets/img/project/portfolio1.jpg');}.portfolio-bg-2{--wpr-bg-2940b2ab-fd7e-4b97-a448-1ed6a1cb4d59: url('https://josealberto.xyz/assets/img/project/portfolio2.jpg');}.portfolio-bg-3{--wpr-bg-8cdc87e2-9bbc-4dca-8054-a448d87a1be5: url('https://josealberto.xyz/assets/img/project/portfolio3.jpg');}.portfolio-bg-4{--wpr-bg-e0064180-544a-4c14-b57c-18978991c99f: url('https://josealberto.xyz/assets/img/project/portfolio4.jpg');}.portfolio-bg-5{--wpr-bg-cb20bc7a-7d81-4453-bc27-38c5adf85548: url('https://josealberto.xyz/assets/img/project/portfolio5.jpg');}.portfolio-bg-6{--wpr-bg-f8cd4133-70a9-4d20-a1ed-1e0aa29f6852: url('https://josealberto.xyz/assets/img/project/portfolio6.jpg');}.portfolio-bg-7{--wpr-bg-f70d5b06-cd90-42bf-81e9-2f5ffa70aa05: url('https://josealberto.xyz/assets/img/project/01.jpg');}.portfolio-bg-8{--wpr-bg-4a1ba410-ca1f-42d0-a561-3b415ce5689b: url('https://josealberto.xyz/assets/img/project/02.jpg');}.portfolio-bg-9{--wpr-bg-a90c015b-5fa3-4788-8827-0463f908c222: url('https://josealberto.xyz/assets/img/project/03.jpg');}</style> </noscript> <script type="application/javascript">const rocket_pairs = [{"selector":".hcb-clipboard","style":".hcb-clipboard{--wpr-bg-0c297f91-c758-4ce5-839d-a003079d7faa: url('https:\/\/josealberto.xyz\/wp-content\/plugins\/highlighting-code-block\/assets\/img\/clipboard-to-copy.svg');}","hash":"0c297f91-c758-4ce5-839d-a003079d7faa","url":"https:\/\/josealberto.xyz\/wp-content\/plugins\/highlighting-code-block\/assets\/img\/clipboard-to-copy.svg"},{"selector":".hcb-clipboard.-done","style":".hcb-clipboard.-done{--wpr-bg-bfc9318c-a573-4e67-9654-79c9aedf5eaf: url('https:\/\/josealberto.xyz\/wp-content\/plugins\/highlighting-code-block\/assets\/img\/clipboard-copied.svg');}","hash":"bfc9318c-a573-4e67-9654-79c9aedf5eaf","url":"https:\/\/josealberto.xyz\/wp-content\/plugins\/highlighting-code-block\/assets\/img\/clipboard-copied.svg"},{"selector":".welcome__wrap1","style":".welcome__wrap1{--wpr-bg-ebcffe56-e916-4953-8852-eb0d3ad5e908: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/wlc-bg1.jpg');}","hash":"ebcffe56-e916-4953-8852-eb0d3ad5e908","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/wlc-bg1.jpg"},{"selector":".welcome__wrap2","style":".welcome__wrap2{--wpr-bg-d7d7a263-83cd-46ba-8e69-608d782890e4: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/Header.png');}","hash":"d7d7a263-83cd-46ba-8e69-608d782890e4","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/Header.png"},{"selector":".about-shape","style":".about-shape:after{--wpr-bg-04769b3d-fadf-4bd7-91ff-43e7f7bbae86: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape.png');}","hash":"04769b3d-fadf-4bd7-91ff-43e7f7bbae86","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-973309a0-faf1-4f23-8cdf-e96c98b8fde3: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape2.png');}","hash":"973309a0-faf1-4f23-8cdf-e96c98b8fde3","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-bg-shape2.png"},{"selector":".about-shape","style":".about-shape:before{--wpr-bg-b331b474-2483-4fcf-b027-b6906d7bef32: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape.svg');}","hash":"b331b474-2483-4fcf-b027-b6906d7bef32","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-bce49917-da14-4e1b-9001-5e54fec8255a: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape2.svg');}","hash":"bce49917-da14-4e1b-9001-5e54fec8255a","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about-shape2.svg"},{"selector":".about-area-primery","style":".about-area-primery:after{--wpr-bg-f24f555b-76b0-4446-b4ab-5d8c1dd327a9: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.svg');}","hash":"f24f555b-76b0-4446-b4ab-5d8c1dd327a9","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.svg"},{"selector":".primery-skill","style":".primery-skill:after{--wpr-bg-b5f5b643-135e-40f9-86ef-12ac72cb7119: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/skill-bg1.svg');}","hash":"b5f5b643-135e-40f9-86ef-12ac72cb7119","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/skill-bg1.svg"},{"selector":".service-primery","style":".service-primery:after{--wpr-bg-2d930a7e-ea45-4fab-b7b0-0ff61eaf49d0: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/service-bg.svg');}","hash":"2d930a7e-ea45-4fab-b7b0-0ff61eaf49d0","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/service-bg.svg"},{"selector":".project-area","style":".project-area{--wpr-bg-61faa4e8-9d20-41c6-8186-e272a2227b34: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/project-bg.jpg');}","hash":"61faa4e8-9d20-41c6-8186-e272a2227b34","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/project-bg.jpg"},{"selector":".project-area-primery","style":".project-area-primery:after{--wpr-bg-32fdba9b-ed88-47e1-b786-791b1fbb758a: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/portfolio-bg.svg');}","hash":"32fdba9b-ed88-47e1-b786-791b1fbb758a","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/portfolio-bg.svg"},{"selector":".testimonials-area1","style":".testimonials-area1{--wpr-bg-9c680f01-ef12-496a-b118-efd4e50f49bc: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/testimonials-bg.png');}","hash":"9c680f01-ef12-496a-b118-efd4e50f49bc","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/testimonials-bg.png"},{"selector":".about-area1","style":".about-area1{--wpr-bg-6f851c26-13a6-4e79-9391-ee9427bf772d: url('https:\/\/josealberto.xyz\/assets\/css\/assets\/img\/bg\/about-bg.png');}","hash":"6f851c26-13a6-4e79-9391-ee9427bf772d","url":"https:\/\/josealberto.xyz\/assets\/css\/assets\/img\/bg\/about-bg.png"},{"selector":".about-img-section1","style":".about-img-section1{--wpr-bg-76f29195-bb26-4871-843f-d62ab04487b6: url('https:\/\/josealberto.xyz\/assets\/img\/about\/about1.png');}","hash":"76f29195-bb26-4871-843f-d62ab04487b6","url":"https:\/\/josealberto.xyz\/assets\/img\/about\/about1.png"},{"selector":".pricing-area1","style":".pricing-area1{--wpr-bg-3a93ea63-d110-4b8f-b942-99ebe27bd142: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.png');}","hash":"3a93ea63-d110-4b8f-b942-99ebe27bd142","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/about-bg.png"},{"selector":".cta-area1","style":".cta-area1{--wpr-bg-a18f2058-924a-428d-96d2-672511d5253b: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/map.png');}","hash":"a18f2058-924a-428d-96d2-672511d5253b","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/map.png"},{"selector":".footer-area1","style":".footer-area1{--wpr-bg-72da40a4-9788-4199-a250-3f5ad991fbf1: url('https:\/\/josealberto.xyz\/assets\/img\/bg\/footer-bg.png');}","hash":"72da40a4-9788-4199-a250-3f5ad991fbf1","url":"https:\/\/josealberto.xyz\/assets\/img\/bg\/footer-bg.png"},{"selector":".portfolio-bg-1","style":".portfolio-bg-1{--wpr-bg-2afd8278-baed-47de-8111-e6da98611af1: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio1.jpg');}","hash":"2afd8278-baed-47de-8111-e6da98611af1","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio1.jpg"},{"selector":".portfolio-bg-2","style":".portfolio-bg-2{--wpr-bg-2940b2ab-fd7e-4b97-a448-1ed6a1cb4d59: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio2.jpg');}","hash":"2940b2ab-fd7e-4b97-a448-1ed6a1cb4d59","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio2.jpg"},{"selector":".portfolio-bg-3","style":".portfolio-bg-3{--wpr-bg-8cdc87e2-9bbc-4dca-8054-a448d87a1be5: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio3.jpg');}","hash":"8cdc87e2-9bbc-4dca-8054-a448d87a1be5","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio3.jpg"},{"selector":".portfolio-bg-4","style":".portfolio-bg-4{--wpr-bg-e0064180-544a-4c14-b57c-18978991c99f: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio4.jpg');}","hash":"e0064180-544a-4c14-b57c-18978991c99f","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio4.jpg"},{"selector":".portfolio-bg-5","style":".portfolio-bg-5{--wpr-bg-cb20bc7a-7d81-4453-bc27-38c5adf85548: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio5.jpg');}","hash":"cb20bc7a-7d81-4453-bc27-38c5adf85548","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio5.jpg"},{"selector":".portfolio-bg-6","style":".portfolio-bg-6{--wpr-bg-f8cd4133-70a9-4d20-a1ed-1e0aa29f6852: url('https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio6.jpg');}","hash":"f8cd4133-70a9-4d20-a1ed-1e0aa29f6852","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/portfolio6.jpg"},{"selector":".portfolio-bg-7","style":".portfolio-bg-7{--wpr-bg-f70d5b06-cd90-42bf-81e9-2f5ffa70aa05: url('https:\/\/josealberto.xyz\/assets\/img\/project\/01.jpg');}","hash":"f70d5b06-cd90-42bf-81e9-2f5ffa70aa05","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/01.jpg"},{"selector":".portfolio-bg-8","style":".portfolio-bg-8{--wpr-bg-4a1ba410-ca1f-42d0-a561-3b415ce5689b: url('https:\/\/josealberto.xyz\/assets\/img\/project\/02.jpg');}","hash":"4a1ba410-ca1f-42d0-a561-3b415ce5689b","url":"https:\/\/josealberto.xyz\/assets\/img\/project\/02.jpg"},{"selector":".portfolio-bg-9","style":".portfolio-bg-9{--wpr-bg-a90c015b-5fa3-4788-8827-0463f908c222: url('https:\/\/josealberto.xyz\/assets\/img\/project\/03.jpg');}","hash":"a90c015b-5fa3-4788-8827-0463f908c222","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
