Код:
<!--HTML--><div class="post-box" style= "margin-top: -65px; margin-left: -10px"> <div id="p7-content" class="post-content"> <div class="htmldemo"><center></div> <link href="http://fonts.googleapis.com/css?family=Josefin+Sans:100,700|Montserrat:400|Muli:400|Raleway:200,800,900" rel="stylesheet" type="text/css"> <style> .kart1 { position: relative; display:inline-block; padding: 1px 0px; line-height: 140%; } .kart1 span { display:none; } .kart1:hover span { position:absolute; padding:0px; margin-bottom:5px!important; border-radius: 10px; padding:6px 5px 3px 5px; display:inline-block; margin-top:-180px; z-index:100000; } .overlay1 {left: 200;display: none; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.65);} /* стили модального окна */ .popup1 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px; /* фиксированное позиционирование*/ padding: 100px; top:30px; /* внешняя тень */ -webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;} /* активируем модальный блок */ .overlay1:target+.popup1 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);} /* формируем кнопку закрытия */ .close1 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;} .close1:hover {color: #2d9c85; text-decoration: none; } .kart2 { position: relative; display:inline-block; padding: 1px 0px; line-height: 140%;} .kart2 span { display:none;} .kart2:hover span { position:absolute; padding:0px; margin-bottom:5px!important; border-radius: 10px; padding:6px 5px 3px 5px; display:inline-block; margin-top:-180px; z-index:100000;} .overlay2 {left: 100;display: none; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.65);} /* стили модального окна */ .popup2 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px; /* фиксированное позиционирование*/ padding: 100px; top:-320px; left: -95px; /* внешняя тень */ -webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;} /* активируем модальный блок */ .overlay2:target+.popup2 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);} /* формируем кнопку закрытия */ .close2 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;} .close2:hover {color: #2d9c85; text-decoration: none; } .kart3 { position: relative; display:inline-block; padding: 1px 0px; line-height: 140%;} .kart3 span { display:none;} .kart3:hover span { position:absolute; padding:0px; margin-bottom:5px!important; border-radius: 10px; padding:6px 5px 3px 5px; display:inline-block; margin-top:-180px; z-index:100000;} .overlay3 {left: 100;display: none; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.65);} /* стили модального окна */ .popup3 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px; /* фиксированное позиционирование*/ padding: 100px; top:-420px; left: -115px; /* внешняя тень */ -webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;} /* активируем модальный блок */ .overlay3:target+.popup3 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);} /* формируем кнопку закрытия */ .close3 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;} .close3:hover {color: #2d9c85; text-decoration: none; } .kart4 { position: relative; display:inline-block; padding: 1px 0px; line-height: 140%;} .kart4 span { display:none;} .kart4:hover span { position:absolute; padding:0px; margin-bottom:5px!important; border-radius: 10px; padding:6px 5px 3px 5px; display:inline-block; margin-top:-180px; z-index:100000;} .overlay4 {left: 100;display: none; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.65);} /* стили модального окна */ .popup4 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px; /* фиксированное позиционирование*/ padding: 100px; top:-820px; left: -20px; /* внешняя тень */ -webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;} /* активируем модальный блок */ .overlay4:target+.popup4 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);} /* формируем кнопку закрытия */ .close4 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;} .close4:hover {color: #2d9c85; text-decoration: none; } .kart5 { position: relative; display:inline-block; padding: 1px 0px; line-height: 140%;} .kart5 span { display:none;} .kart5:hover span { position:absolute; padding:0px; margin-bottom:5px!important; border-radius: 10px; padding:6px 5px 3px 5px; display:inline-block; margin-top:-180px; z-index:100000;} .overlay5 {left: 100;display: none; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.65);} /* стили модального окна */ .popup5 {font-size: 14px;z-index: 1;width: 370px;width: 225px; margin-top: 102px; /* фиксированное позиционирование*/ padding: 100px; top:-720px; left: -20px; /* внешняя тень */ -webkit-transform: translate(-50%, -500%);-ms-transform: translate(-50%, -500%);-o-transform: translate(-50%, -500%);transform: translate(-50%, -500%);-webkit-transition: -webkit-transform 0.6s ease-out;-moz-transition: -moz-transform 0.6s ease-out;-o-transition: -o-transform 0.6s ease-out;transition: transform 0.6s ease-out;} /* активируем модальный блок */ .overlay5:target+.popup5 {-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);} /* формируем кнопку закрытия */ .close5 {top: 10px;right: 50px; position: absolute;padding: 0; color: #000; font-size: 14px;font-weight: bold;} .close5:hover {color: #2d9c85; text-decoration: none; } </style> <div style="background-image:url(http://funkyimg.com/i/2nSUV.png); width:580px; height: 536px;"> <a href="#win1" style= "position: absolute; margin-top: 232px; margin-left: 506px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a> <a href="#x" class="overlay1" id="win1"></a> <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px"> <div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div> <div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;"> <span style="font-size: 9px; font-family: 'Roboto', sans-serif; color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div> <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div> <a href="#win1" style= "position: absolute; margin-top: 132px; margin-left: 506px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a> <a href="#x" class="overlay1" id="win2"></a> <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px"> <div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div> <div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;"> <span style="font-size: 9px; font-family: 'Roboto', sans-serif; color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div> <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div> <a href="#win1" style= "position: absolute; margin-top: -256px; margin-left: 536px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a> <a href="#x" class="overlay1" id="win2"></a> <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px"> <div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div> <div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;"> <span style="font-size: 9px; font-family: 'Roboto', sans-serif; color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div> <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div> <a href="#win1" style= "position: absolute; margin-top: -456px; margin-left: 336px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a> <a href="#x" class="overlay1" id="win2"></a> <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px"> <div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div> <div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;"> <span style="font-size: 9px; font-family: 'Roboto', sans-serif; color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div> <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div> <a href="#win1" style= "position: absolute; margin-top: -656px; margin-left: 386px;" ><img title="Millenium Park" src="http://funkyimg.com/i/2nQkp.png" /></a> <a href="#x" class="overlay1" id="win2"></a> <div class="popup1"style= "background: url(http://funkyimg.com/i/2nQrN.png) no-repeat; width: 370; height; 225px; position: relative;margin-top: 60px;margin-left: 380px"> <div class= "nazvanie1" style= "margin-top: -67px; margin-left: 35px;"> <span style= "font-size: 20px; font-family: 'bebas neue'; color: #fff">Millenium Park</span></div> <div class="opisanie1" style= "width: 300px; line-height: 0.9em; margin-top: 6px; margin-left: -70px;"> <span style="font-size: 9px; font-family: 'Roboto', sans-serif; color: #fff; ">Миллениум парк (Millenium Park) - общественный парк со свободным входом, расположенный в центре Чикаго. Миллениум парк является северо-западным участком громадного Грант парка (Grant Park) и вплотную примыкает к чикагским небоскребам. Такое выгодное расположение сделало парк одним из главных центров притяжения местных жителей и туристов.</span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 64px;"><img src="http://funkyimg.com/i/2nQQE.png"><span><img src="http://funkyimg.com/i/2nQQF.png" style="margin-left: -280px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 125px;"><img src="http://funkyimg.com/i/2nQTZ.png"><span><img src="http://funkyimg.com/i/2nQU1.png" style="margin-left: -340px; margin-top: 45px; border-radius: 10px;"></span></div> <div class="kart1" style= "position: absolute; margin-top: -10px; margin-left: 185px;"><img src="http://funkyimg.com/i/2nQUR.png"><span><img src="http://funkyimg.com/i/2nQUS.png" style="margin-left: -400px; margin-top: 45px; border-radius: 10px;"></span></div> <a class="close1" title="Закрыть" href="#close"><img title="" src="http://funkyimg.com/i/2nQva.png" /></a></div> </div> </div>