<html> <head> <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <style> @media screen and (max-width: 992px) { .imagencasilla {width:100%;} .header img{max-width:100%;} /*.botonatras{top:-20px!important;}*/ } @media screen and (max-width: 1600px) { .imagencasilla{max-width:150px!important;} } @media screen and (max-width: 1100px) { .facultades .casilla{width:80%!important;} .main2,.main3{width:90%;} #bg{padding:0 0 0 0;} .header{width:100%!important;border-radius:0!important;text-align:center;padding:0!important;} .header h1{margin-left:0!important;max-width:100%!important;margin-top:10px;display:block!important;padding:0px!important;} .casilla{width:44%!important;} } .gris{filter: grayscale(100%);} h1{text-shadow: 2px 0px 2px #333;font-family:'Bebas Neue';font-size:34px!important;letter-spacing:2px;} h1 small{color:#B30033!important;font-size:24px;} .header h1{display:inline-block;padding-left:30px;font-size:24px;margin:0!important;} body{ margin:0; font-family: 'Open Sans', sans-serif; overflow-x:hidden; } #bg { width:100vw; min-height:100vh; border: 1px solid black; /*background-image:url('img/rectorado_principal_plano.jpg');*/ background-image:url('img/rectorado_frontal_plano.jpg'); /*background-image:url('PAN_2028-Pano_hdr2.jpg');*/ background-position: 0px 0px; background-size:cover; padding:0 1% 1% 0; background-attachment: fixed; } .header{ width:70%; /*min-width:400px;*/ /*background:rgba(230, 230, 230,0.4);*/ background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 100%); /*background:url('img/Transparencia_cabecera.png');*/ background-size:100%; border-radius:0 35px 120px 0; font-family: 'Archivo Narrow', 'Open Sans', sans-serif; color:#B30033; padding:1.2% 25px; /*text-shadow: 2px 2px 4px #404040;*/ } .main2{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; max-width:1100px; margin-top:40px; background:rgba(230, 230, 230,0.5); /*border-radius:20px;*/ } .main3{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; max-width:1100px; /*margin-top:40px;*/ padding:1% 2%!important; } .imagencasilla{ max-width:200px; box-shadow: -2px 2px grey; border-radius:10px; /*height:200px;*/ } .contenedorareas img{box-shadow:none!important;} .casilla{ margin:10px; text-align:center; width:31%; } .contenedor{ display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; } main{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; } /*.numeroseccion{ background:black; border-radius:30px; font-size:1.2em; color:white; padding:10px 18px; }*/ .titulo{ color:white; padding:10px 20px; border-radius:10px; background:#B30033; font-size:1.2em; display:inline-block; } /*.titulo small{color:black;}*/ .titulocasilla{ text-align:center; font-size:1.1em; color:#B30033; text-shadow:-1px -1px 2px white; } .titulocasilla img{margin-right:10px;} .casilla a{color:black;font-weight:bold;text-decoration:none!important;margin-left:10px;} .casilla a:hover{filter: brightness(55%);} .imagencasilla:hover{transform: scale(1.05);transition-duration:1s;} .gris:hover{transform:none!important;} .header small{color:black;} .ciudades .imagencasilla{max-width:200px;max-height:200px;/*padding:50px*/;box-shadow:none!important;} .ciudades .casilla{width:31%;} .centrado{text-align:center;max-width:400px;} .botonatras{background:white; //width:40px; //height:40px; float:right;color:#B30033; border-radius:50%; text-align:center; display:inline-block; top: 10px; right: 20px; position: relative; font-size:30px; margin-left:20px; padding:5px 15px; } .botonatras a{color:#B30033;text-decoration:none;} .mainheader{ width:100%; background:#B30033; } .facultades .casilla{width:46%;);padding:10px;} .facultades .bloque{ border-radius:10px;background:white;margin-bottom:10px; -webkit-box-shadow: 0px 0px 12px 3px #333333; box-shadow: 0px 0px 12px 3px #333333; } .facultades .grados{ background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(190,190,190,1) 100%); -webkit-box-shadow: 0px 0px 12px 3px #333333; box-shadow: 0px 0px 12px 3px #333333; margin-bottom:10px; border-radius:10px; padding:10px; /*width:50%;*/ } .grados,.bloque{text-align:left;padding-left:20px;} .grados h4{margin-top:0;margin-bottom:10px;color:#B30033;} .grados p{margin-top:5px;margin-bottom:5px;} .facultades h3{display:inline-block;} .linktour{margin-top:3px;padding:5px 10px;background:#B30033;color:white;font-size:1.1em;cursor: pointer;display:inline-block;float:right;position:relative;top:10px;right:10px;border-radius:5px;border:0px;} .facultades .contenedor{align-items:flex-start;} .titulogris{color:grey!important;} </style> <script> b = function () { $('#bg').animate({ 'background-position-x': '-1200' }, 30000, 'linear' , c ); } c = function () { $('#bg').animate({ 'background-position-x': '0' }, 30000, 'linear' , b ); } a = function () { $('#bg').css('background-position-x', 0); $('#bg').animate({ 'background-position-x': '2750' }, 60000, 'linear' , a ); } $(document).ready(function(){ b(); }); </script> </head> <body> <div id="bg"> <div class="header"> <img src='LOGOMARCA_UCLM_2021.png' style='height:73px;vertical-align:top;margin-top:7px;'> <h1 style='margin-top:8px!important;padding-left:40px;'>TOUR VIRTUAL<br><SMALL>Conoce tu universidad en 3 pasos</SMALL></h1> <a href='https://tour.web.uclm.es/info/index.html'> <img src='img/info.png' style='height:50px;margin-top:8px!important;padding-left:40px;'> </a> </div> <main> <div class="main2" style="max-width:900px"> <div class="mainheader"> <h2 class="titulo"><span class="numeroseccion">1</span> 驴Qu茅 es lo que me gusta? <small>- Selecciona un 谩rea de conocimiento:</small></h2> </div> <div class="main3"> <div class="contenedor contenedorareas"> <div class="casilla"> <a href='?area=artesyhumanidades'> <img src='img/areas/ARTE.png' class="imagencasilla"> <h3 class="titulocasilla">Artes y Humanidades</h3> </a> </div> <div class="casilla"> <a href='?area=ingenieriayarquitectura'> <img src='img/areas/INGEN.png' class="imagencasilla"> <h3 class="titulocasilla">Ingenier铆a y Arquitectura</h3> </a> </div> <div class="casilla"> <a href='?area=ciencias'> <img src='img/areas/CIENCIAS.png' class="imagencasilla"> <h3 class="titulocasilla">Ciencias</h3> </a> </div> <div class="casilla"> <a href='?area=cienciassalud'> <img src='img/areas/SALUD.png' class="imagencasilla"> <h3 class="titulocasilla">Ciencias de la Salud</h3> </a> </div> <div class="casilla"> <a href='?area=cienciasjuridicas'> <img src='img/areas/JURID.png' class="imagencasilla"> <h3 class="titulocasilla">Ciencias Jur铆dicas y Sociales</h3> </a> </div>  </div> </div> </div> </main> </bg> <body> </html>

CINXE.COM