Skip to content

Instantly share code, notes, and snippets.

@thanhansoft

thanhansoft/bbrqvk.markdown

Created March 15, 2019 09:48
Show Gist options
  • Save thanhansoft/aa6d259dd7adb5e1beb1e48d41197155 to your computer and use it in GitHub Desktop.
Save thanhansoft/aa6d259dd7adb5e1beb1e48d41197155 to your computer and use it in GitHub Desktop.
Download ZIP
BbrQvK
Raw
index.html
<body class="default-screen" style="">
<div class="nav-head">
<div class="mar-top">
<div class="logo non-active-mobile">
<a href="">
<img src="http://laziweb.com/public/uploads/images/hinh-he-thong/laziweb-demo.png" title="laziweb theme" alt="laziweb theme">
</a>
</div>
<div class="non-active-tablet">
<a class="device-icon device1" data-device="default-screen">
<span class="text-devide1">Desktop</span>
</a>
<a class="device-icon device2" data-device="default-tablet-766">
<span class="text-devide2">Tablet</span>
</a>
<a class="device-icon device4" data-device="default-smart-phone-318">
<span class="text-devide4">Mobile</span>
</a>
</div>
<div class="mobile-center">
<a href="#theme_popup_3" class="fancybox su-button btn-checkin">Chọn mẫu / yêu cầu tư vấn</a>
</div>
</div>
</div>
<div id="demo">
<div class="content" style="max-height: 919px;"> <iframe src="http://theme.laziweb.com/petvet/" style="height: 919px;"></iframe> </div>
</div>
</body>
Raw
script.js
(function ($) {
$(document).ready(function () {
$('.select-screen').change(function () {
dv = $(this).val();
$('body').attr('class', dv);
$('.device-icon').removeClass('active');
$('.device-icon[data-device="' + dv + '"]').addClass('active');
jQuery('.content,.content iframe').removeAttr('style');
if (dv == 'default-screen')
set_height();
});
$('.device-icon').unbind('click').bind('click', function () {
dv = $(this).data('device');
$('.device-icon').removeClass('active');
$(this).addClass('active');
$('body').attr('class', dv);
$('.select-screen').val(dv);
jQuery('.content,.content iframe').removeAttr('style');
if (dv == 'default-screen')
set_height();
});
set_height();
});
})(jQuery);
function set_height() {
maxheight = jQuery(window).height() - 50;
jQuery('.content').css('max-height', maxheight + 'px');
jQuery('.content iframe').css('height', maxheight + 'px');
}
Raw
scripts
<script src="http://laziweb.com/template/frontend/public/template/template/public/lib/jquery-2.1.4.min.js"></script>
<script src="http://laziweb.com/template/frontend/public/template/template/public/lib/bootstrap/js/bootstrap.min.js"></script>
Raw
style.css
body {
font-family: 'Open Sans',sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
margin: 0;
padding: 50px 0 0 0;
background-color: #696969;
}
.nav-head {
position: fixed;
top: 0px;
background: #30373b;
color: #f7f7f7;
padding: 10px 0;
left: 0;
width: 100%;
text-align: center;
font-size: 15px;
line-height: 30px;
z-index: 9;
height: auto;
}
.mar-top {
height: 30px;
}
.logo {
left: 10px;
padding: 0;
}
.btn-checkin, .logo {
position: absolute;
}
.nav-head a {
color: white;
font-weight: normal;
}
img {
height: auto;
max-width: 100%;
}
.device-icon.device1 {
width: 30px;
height: 26px;
background-position: 0 0;
margin-right: 80px;
}
.device-icon {
background-image: url(http://laziweb.com/template/frontend/public/template/demo_template/images/icon-device.png);
background-repeat: no-repeat;
display: inline-block;
margin-right: 0px;
opacity: 0.5;
cursor: pointer;
}
.text-devide1 {
position: relative;
left: 40px;
top: -4px;
}
.device-icon.device2 {
width: 18px;
height: 22px;
background-position: -33px 0;
margin-right: 72px;
}
.text-devide2 {
position: relative;
left: 30px;
top: -4px;
}
.device-icon.device4 {
width: 12px;
height: 20px;
background-position: -79px 0;
}
.text-devide4 {
position: relative;
left: 25px;
top: -4px;
}
.nav-head .btn-checkin {
height: 30px;
right: 10px;
top: 10px;
background-color: #127cc0 !important;
border: 1px solid #106da8;
padding: 0 10px !important;
line-height: 30px !important;
text-decoration: none;
border-radius: 5px;
}
#demo {
width: 100%;
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
}
.default-screen .content {
background: white;
width: 100%;
height: 650px;
left: 0;
top: -5px;
}
.default-smart-phone-318 .content {
background: url(http://laziweb.com/template/frontend/public/template/demo_template/device/default-smart-phone-318.png) no-repeat;
width: 374px;
height: 711px;
padding: 106px 19px 110px 20px;
}
.default-tablet-766 .content {
background: url(http://laziweb.com/template/frontend/public/template/demo_template/device/default-tablet-766.png) no-repeat;
width: 870px;
height: 1250px;
padding: 106px 44px;
}
.default-tablet-766 iframe {
width: 782px;
height: 1038px;
top: 0;
}
.content {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-position: center;
background-size: contain;
position: relative;
}
.default-screen>#demo iframe {
width: 100%;
height: 650px;
}
.default-smart-phone-318 iframe {
width: 335px;
height: 495px;
top: 0;
}
iframe {
display: block !important;
}
iframe {
margin: 0;
padding: 0;
border: 0;
}
.device-icon:hover, .device-icon.active {
opacity: 1;
}
#breadcrumbs a, .box-video i, .btn.bg-66:hover, .menu a:hover, .page-ft a:hover, a:hover {
text-decoration: none;
}
@media (max-width: 1024px){
.non-active-tablet {
display: none;
}
}
@media (max-width: 480px){
.non-active-mobile {
display: none;
}
.mobile-center a {
left: 10px !important;
}
}
Raw
styles
<link href="http://laziweb.com/template/frontend/public/template/template/public/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment