<div id="responsivewrapper" class="responsivewrapper">
<section class="display">
<div class="mobile">
<div class="trim">
<iframe class="RS" id="mobile" src="http://www.linkthuthuat.com/">
</iframe>
</div>
</div>
<div class="tablet">
<div class="trim">
<iframe class="RS" id="tablet" src="http://www.linkthuthuat.com/">
</iframe>
</div>
</div>
<div class="laptop">
<div class="trim">
<iframe class="RS" id="laptop" src="http://www.linkthuthuat.com/">
</iframe>
</div>
</div>
<div class="desktop">
<div class="trim">
<iframe class="RS" id="desktop" src="http://www.linkthuthuat.com/">
</iframe>
</div>
</div>
</section>
</div>
<form id="rwdform" name="rwdform">
<input id="url" name="url" placeholder="http://www.linkthuthuat.com/" type="url" value="http://www.linkthuthuat.com/" />
</form>
<a href="javascript:void(0);" id="testRS">TEST</a>
<style>
#rwdform input{width:50%!important;display: block;margin: 10px 0;padding: 0 10px;float: left;height: 40px; font-family: Roboto}
#testRS{background: #f50;color:#fff;padding:0;display:block;float:right;width:47%;margin:10px 0;height:44px;text-align: center;line-height: 44px;}
.trim{max-height:100%}
.display{position:relative;left:0;height:600px}
.url{float:left;background-color:#cc4e46;width:100%;margin:0 auto;box-shadow:0 -2px 5px #333}
.responsivewrapper{width:100%;max-width:1200px;margin:0 auto;background-color:#fff;background-image:url(https://3.bp.blogspot.com/-R1JkQieIFiw/WOsu76b8FzI/AAAAAAAAZyk/TGvjyp5sYOgbP6H8OX-8_IHzkPklEjl3ACLcB/s1600/background.jpg);background-size:100%;background-size:cover;margin-top:20px;margin:0;padding:0}
iframe.RS{transform:scale(0.219);-webkit-transform:scale(0.219);-o-transform:scale(0.219);-ms-transform:scale(0.219);-moz-transform:scale(0.219);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left;margin:0;padding:0;position:relative;background-color:#fff;border-color:#000}
.mobile{background-image:url(https://1.bp.blogspot.com/-ZomsyswvBpI/WOsqrPv240I/AAAAAAAAZyM/5LCuuPNhvws4wvGyrmPLwz12Ijg_DefeQCLcB/s1600/iphone-optimised.png);position:absolute;width:95px;height:196px;top:375px;left:300px;z-index:5}
.mobile iframe.RS{width:320px;height:480px;top:32px;left:11px;overflow-y:hidden}
.tablet{background-image:url(https://3.bp.blogspot.com/-4ciCGF0jDKM/WOsq1igXzFI/AAAAAAAAZyQ/wa792M1UDaAq75RY4KvmA6v6JjpJMlbeACLcB/s1600/ipad-optimised.png);background-repeat:no-repeat!important;width:246px;height:420px;z-index:3;position:absolute;left:120px;top:230px}
.tablet iframe.RS{width:800px;height:1080px;top:36px;left:41px;overflow-y:hidden!important}
.laptop{background-image:url(https://1.bp.blogspot.com/-Yzrqhz948YA/WOsrACxrkxI/AAAAAAAAZyU/mF0RrhFITOoPJMVOKUhVBYl_CTRQhQC1QCLcB/s1600/laptop-screen-optimised.png);width:477px;height:307px;top:264px;left:560px;position:absolute;z-index:2}
.laptop iframe.RS{width:1280px;height:802px;top:26px;left:60px;transform:scale(0.277);-webkit-transform:scale(0.277);-o-transform:scale(0.277);-ms-transform:scale(0.277);-moz-transform:scale(0.277);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}
.desktop{position:absolute;width:566px;height:538px;background-image:url(https://1.bp.blogspot.com/-j8a2M2d4F5Y/WOsrRBRA8vI/AAAAAAAAZyY/3gGckkMZE2oQVTs46JdwdR2IZS6B054JQCLcB/s1600/large-screen-optimised.png);top:0;left:220px;z-index:1}
.desktop iframe.RS{left:28px;top:38px;width:1600px;height:992px;transform:scale(0.3181);-webkit-transform:scale(0.3181);-o-transform:scale(0.3181);-ms-transform:scale(0.3181);-moz-transform:scale(0.3181);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}
@media (max-width: 1160px) {
.display{width:95%;height:550px;transform:scale(0.81);-webkit-transform:scale(0.81);-o-transform:scale(0.81);-ms-transform:scale(0.81);-moz-transform:scale(0.81)}
.desktop{left:180px}
.laptop{left:520px}
.tablet{left:80px}
.mobile{left:260px}
}
@media (max-width: 1070px) {
.display{left:-50px}
}
@media (max-width: 1000px) {
.display{height:500px;transform:scale(0.71);-webkit-transform:scale(0.71);-o-transform:scale(0.71);-ms-transform:scale(0.71);-moz-transform:scale(0.71);top:-40px}
.desktop{left:140px}
.laptop{left:480px}
.tablet{left:40px}
.mobile{left:220px}
}
@media (max-width: 850px) {
.display{height:500px;transform:scale(0.65);-webkit-transform:scale(0.65);-o-transform:scale(0.65);-ms-transform:scale(0.65);-moz-transform:scale(0.65)}
.desktop{left:100px}
.laptop{left:440px}
.tablet{left:0}
.mobile{left:180px}
}
@media (max-width: 768px) {
.display{height:450px;transform:scale(0.55);-webkit-transform:scale(0.55);-o-transform:scale(0.55);-ms-transform:scale(0.55);-moz-transform:scale(0.55)}
a.button{font-size:1.6em;line-height:1.75em;margin-top:.5em;width:100%}
}
@media (max-width: 670px) {
.display{height:400px;left:-70px;transform:scale(0.45);-webkit-transform:scale(0.45);-o-transform:scale(0.45);-ms-transform:scale(0.45);-moz-transform:scale(0.45)}
}
@media (max-width: 560px) {
.display{height:270px;top:-65px;transform:scale(0.37);-webkit-transform:scale(0.37);-o-transform:scale(0.37);-ms-transform:scale(0.37);-moz-transform:scale(0.37)}
}
@media (max-width: 440px) {
.display{left:-17px;top:-65px;width:70px;transform:scale(0.35);-webkit-transform:scale(0.35);-o-transform:scale(0.35);-ms-transform:scale(0.35);-moz-transform:scale(0.35)}
}
@media (max-width: 380px) {
.display{height:235px;left:-17px;top:-65px;width:70px;transform:scale(0.27);-webkit-transform:scale(0.27);-o-transform:scale(0.27);-ms-transform:scale(0.27);-moz-transform:scale(0.27)}
.desktop{left:100px}
.laptop{left:515px}
.tablet{left:0}
.mobile{left:180px}
}
</style>
<script src='http://ami.responsivedesign.is/js/jquery-1.11.2.min.js'></script>
<script src='//code.jquery.com/ui/1.10.0/jquery-ui.js'></script>
<script src='https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js'></script>
<script>
/* <![CDATA[ */
jQuery(document).ready(function(){jQuery("#testRS").click(function(a){alert(jQuery("#url").val()),jQuery("iframe.RS").attr("src",jQuery("#url").val())}),jQuery(".display div").click(function(){jQuery(this).addClass("top").removeClass("bottom"),jQuery(this).siblings().removeClass("top").addClass("bottom"),jQuery(this).css("z-index",a++)})});
/* ]]> */
</script>

--

URL: http://notepad.linkthuthuat.com/