Contenido

Tu Lugar Turístico

URI: http://tusitioenmadrid.000webhostapp.com/

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Tu Lugar Turístico</title>
  7. <link rel="stylesheet" href="css/styles.css">
  8. <link rel="stylesheet" href="css/bootstrap.min.css">
  9. </head>
  10. <body>
  11. <header class="p-3">
  12. <div class="container bg-white d-flex justify-content-between align-items-center">
  13. <h1 class="mb-0">Bienvenido a Madrid</h1>
  14. <nav>
  15. <ul class="nav ms-auto">
  16. <li class="nav-item"><a class="nav-link" href="#info">Información</a></li>
  17. <li class="nav-item"><a class="nav-link" href="#video">Video</a></li>
  18. <li class="nav-item"><a class="nav-link" href="#form">Enviar Postal</a></li>
  19. <li class="nav-item"><a class="nav-link" href="#gallery">Galería</a></li>
  20. </ul>
  21. </nav>
  22. </div>
  23. </header>
  24.  
  25. <main>
  26. <section id="info">
  27. <h2>Información sobre Madrid</h2>
  28. <p>Con su vibrante energía y su rica historia, Madrid se alza como un destino turístico incomparable que cautiva los sentidos y el espíritu de quienes la visitan. Esta metrópolis bulliciosa y cosmopolita, bañada por el sol y envuelta en un encanto histórico, ofrece a sus visitantes una experiencia única donde la modernidad se entrelaza armoniosamente con la tradición. Desde sus icónicos monumentos y majestuosos museos hasta sus animadas calles llenas de vida y su deliciosa gastronomía, Madrid invita a los viajeros a sumergirse en una ciudad llena de pasión, cultura y diversión sin fin</p>
  29. </section>
  30.  
  31. <section id="video">
  32. <h2>Video de Madrid</h2>
  33. <!-- Insertar video de YouTube -->
  34. <div class="video-container">
  35. <iframe title="videoSitio" width="560" height="315" src="https://www.youtube.com/embed/NWBtMK3GsV0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  36. </div>
  37. </section>
  38.  
  39. <section id="form">
  40. <h2>Enviar una Postal</h2>
  41. <form>
  42. <div class="mb-3">
  43. <label for="senderName" class="form-label">Tu Nombre:</label>
  44. <input type="text" class="form-control" id="senderName" name="senderName" required>
  45. </div>
  46.  
  47. <div class="mb-3">
  48. <label for="senderEmail" class="form-label">Tu Email:</label>
  49. <input type="email" class="form-control" id="senderEmail" name="senderEmail" required>
  50. </div>
  51.  
  52. <div class="mb-3">
  53. <label for="recipientName" class="form-label">Nombre del Destinatario:</label>
  54. <input type="text" class="form-control" id="recipientName" name="recipientName" required>
  55. </div>
  56.  
  57. <div class="mb-3">
  58. <label for="recipientAddress" class="form-label">Dirección del Destinatario:</label>
  59. <textarea class="form-control" id="recipientAddress" name="recipientAddress" rows="3" required></textarea>
  60. </div>
  61.  
  62. <div class="mb-3">
  63. <label for="postalMessage" class="form-label">Mensaje:</label>
  64. <textarea class="form-control" id="postalMessage" name="postalMessage" rows="5" required></textarea>
  65. </div>
  66.  
  67. <div class="mb-3">
  68. <label for="postalImage" class="form-label">Imagen Seleccionada:</label>
  69. <input type="text" class="form-control" id="postalImage" name="postalImage" value="Seleccione una imagen de la galería" readonly>
  70. </div>
  71. <button type="submit" class="btn btn-primary">Enviar Postal</button>
  72. </form>
  73. </section>
  74. <section id="gallery">
  75. <h2>Imágenes disponibles</h2>
  76. <div class="gallery">
  77. <img src="./img/cibeles.jpg" alt="Imagen 1" data-image="Cibeles" onclick="selectImage(this)">
  78. <img src="./img/plaza_españa.jpg" alt="Imagen 2" data-image="Plaza España" onclick="selectImage(this)">
  79. <img src="./img/puerta_alcala.jpg" alt="Imagen 3" data-image="Puerta de Alcalá" onclick="selectImage(this)">
  80. <img src="./img/gran_via.jpg" alt="Imagen 4" data-image="Gran Vía" onclick="selectImage(this)">
  81. </div>
  82. </section>
  83. </main>
  84.  
  85. <footer>
  86. <p>Este sitio cumple con las pautas de accesibilidad WCAG 2.2 Nivel AA.</p>
  87. </footer>
  88.  
  89. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  90. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"></script>
  91. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
  92. <script src="js/scripts.js"></script>
  93. <div style="text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;"><a title="Hosted on free web hosting 000webhost.com. Host your own website for FREE." target="_blank" href="https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website&utm_content=footer_img"><img src="https://www.000webhost.com/static/default.000webhost.com/images/powered-by-000webhost.png" alt="www.000webhost.com"></a></div><script>function getCookie(t){for(var e=t+"=",n=decodeURIComponent(document.cookie).split(";"),o=0;o<n.length;o++){for(var i=n[o];" "==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(e))return i.substring(e.length,i.length)}return""}getCookie("hostinger")&&(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0];if(null!=wordpressAdminBody&¬ification.length>0&&null!=mainContent && new Date().toISOString().slice(0, 10) > '2023-10-29' && new Date().toISOString().slice(0, 10) < '2023-11-27'){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; display: flex; justify-content: center; width: 100%; }} .web-hosting-90-off-image {max-width: 90%;} .content-wrapper {min-height: 454px; display: flex; flex-direction: column; justify-content: center; z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 4px 0 rgba(255, 69, 70, 0.2); max-width: 350px; border: 0; border-radius: 3px; background-color: #ff4546 !important; padding: 15px 55px !important; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: #d10303 !important;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp"),link.innerHTML='<button class="upgrade_button_red_sale">Claim deal</button>',(notification=notification[0]).setAttribute("style","padding-bottom: 0; padding-top: 5px; background-color: #040713; background-size: cover; background-repeat: no-repeat; color: #ffffff; border-left-color: #040713;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="The Biggest Ever <span style='color: #FF5C62;'>Black Friday</span> Sale<div style='font-size: 16px;line-height: 24px;font-weight: 400;margin-top: 12px;'><div style='display: flex;justify-content: flex-start;align-items: center;'><img src='https://www.000webhost.com/static/default.000webhost.com/images/generic/green-check-mark.png' alt='' style='margin-right: 10px; width: 20px;'>Managed WordPress Hosting</div><div style='display: flex;justify-content: flex-start;align-items: center;'><img src='https://www.000webhost.com/static/default.000webhost.com/images/generic/green-check-mark.png' alt='' style='margin-right: 10px; width: 20px;'>WordPress Acceleration</div><div style='display: flex;justify-content: flex-start;align-items: center;'><img src='https://www.000webhost.com/static/default.000webhost.com/images/generic/green-check-mark.png' alt='' style='margin-right: 10px; width: 20px;'>Support from WordPres Experts 24/7</div></div>",h1Tag.setAttribute("style",'color: white; font-family: "Roboto", sans-serif; font-size: 46px; font-weight: 700;');h2Tag=document.createElement("H2");h2Tag.innerHTML="<span style='font-size: 20px'>$</span>2.49<span style='font-size: 20px'>/mo</span>",h2Tag.setAttribute("style",'color: white; margin: 10px 0 0 0; font-family: "Roboto", sans-serif; font-size: 60px; font-weight: 700; line-height: 1;'),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="<span style='text-decoration:line-through; font-size: 14px; color:#727586'>$11.99.mo</span><br>+ 2 Months Free",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 20px; font-weight: 700; margin: 0 0 15px; 0');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='<div class="content-wrapper">'+mainContent.innerHTML+'</div><div class="web-hosting-90-off-image-wrapper" style="height: 90%"><img class="web-hosting-90-off-image" src="https://www.000webhost.com/static/default.000webhost.com/images/sales/bf2023/hero.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0]}else if(null!=wordpressAdminBody&¬ification.length>0&&null!=mainContent){var bulletPoints = mainContent.getElementsByTagName('li');var replacement=['Increased performance (up to 5x faster) - Thanks to Hostinger’s WordPress Acceleration and Caching solutions','WordPress AI tools - Creating a new website has never been easier','Weekly or daily backups - Your data will always be safe','Fast and dedicated 24/7 support - Ready to help you','Migration of your current WordPress sites to Hostinger is automatic and free!','Try Premium Web Hosting now - starting from $1.99/mo'];for (var i=0;i<bulletPoints.length;i++){bulletPoints[i].innerHTML = replacement[i];}}</script></body>
  94. </html>
  95.