��<!DOCTYPE html> <html> <head> <style> html { overflow-y: scroll; } body {background-color: white;} h1 {color: black;} p {color: black;} /*Add some spacing*/ .faq-section{ /*margin: 40px 0;*/ position: relative; } /*Hide the paragraphs*/ .faq-section p{ display: none; } /*Hide the checkboxes */ .faq-section input{ position: absolute; z-index: 2; cursor: pointer; opacity: 0; display: none\9; /* IE8 and below */ margin: 0; width: 100%; height: 36px; } /*Show only the clipped intro */ .faq-section label+p{ display: block; color: #999; font-size: .7em; transition: all .15s ease-out; /* Clipping text */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*If the checkbox is checked, show all paragraphs*/ .faq-section input[type=checkbox]:checked~p{ display: block; color: #444; font-size: 0.6em; /* restore clipping defaults */ text-overflow: clip; white-space: normal; overflow: visible; } /*Style the label*/ .faq-section label{ font-size: 0.75em; background: #eee; display: block; position: relative; /*height: 20px;*/ padding: 7px 10px; font-weight: bold; border: 1px solid #ddd; border-left: 3px solid #888; text-shadow: 0 1px 0 rgba(255,255,255,.5); transition: all .15s ease-out; } /*Remove text selection when toggle-ing*/ .faq-section label::selection{ background: none; } .faq-section label:hover{ background: #4BDFE7; } /*If the checkbox is checked, style the label accordingly*/ .faq-section input[type=checkbox]:checked~label{ border-color: #25AAE1; background: #5CBFE9; background-image: linear-gradient(to bottom, #fff, #5CBFE9); box-shadow: 0 0 1px rgba(0,0,0,.4); } /*Label's arrow - default state */ .faq-section label::before{ content: ''; position: absolute; right: 4px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left-color: inherit; } /*Update the right arrow*/ .faq-section input[type=checkbox]:checked~label::before{ border: 6px solid transparent; border-top-color: inherit; margin-top: -3px; right: 10px; } </style> </head> <body> <img src="https://marvich.cl/wp-content/uploads/2020/12/images.jpg" alt="Preguntas Frecuentes" style="width:100%;"> <section class="faq-section"> <input type="checkbox" id="q2"> <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">La descarga de la aplicaci�n es gratuita?</label> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Si, la descarga de la aplicaci�n es gratuita,</p> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Nuestro objetivo es brindarles un mejor servicio y proporcionarles herramientas que nos ayuden en la soluci�n de problemas.</p> </section> <section class="faq-section"> <input type="checkbox" id="q2"> <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">La aplicaci�n requiere conexi�n a internet para su funcionamiento?</label> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Si, requiere de conexi�n a internet,</p> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Si no dispone de internet puede almacenar datos reportes temporales que ser�n enviadas una vez que se conecte a internet.</p> </section> <section class="faq-section"> <input type="checkbox" id="q2"> <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">Los reportes son p�blicos?</label> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Los reportes pueden ser vistos solo por los funcionarios autorizados,</p> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">sin embargo la informaci�n de qui�n registro el problema es privada.</p> </section> <section class="faq-section"> <input type="checkbox" id="q2"> <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">Que funci�n cumple la opci�n de otras notificaciones?</label> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Son todos los reportes enviados confirmados que estan en espera de soluci�n,</p> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Le mostrar� una lista de todos los reportes vigentes a la fecha.</p> </section> <section class="faq-section"> <input type="checkbox" id="q2"> <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">Recibir� alguna notificaci�n de mis reportes al ser solucionados?</label> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Si, el usuario recibe una notificaci�n,</p> <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Se le enviar� una notificaci�n cuando el trabajo sea asignado y concluido.</p> </section> </body> </html>