|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/rabbithabit.com/public_html/application/modules/blog/views/3/ |
Upload File : |
<?php
$static_banners = $this->db->select('*')->from('home_centerbanners')->where('id_home_centerbanners', 1)->get()->row();
?>
<div class="section-title-container" style="<?= $bg_section_color; ?> padding-top:30px; padding-bottom:30px;">
<!-- <div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title section-title--one text-center">
<h2 style="color:#2B286E">From our blog</h2>
</div>
</div>
</div>
</div> -->
</div>
<!--===== End of section title container ======-->
<!--=============================================
= blog post area =
=============================================-->
<div class="blog-post" style="<?= $bg_section_color; ?> padding-bottom:40px;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!--======= blog-post-wrapper =======-->
<div class="blog-post-wrapper">
<div class="row">
<?php
$alias_blog = base_url() . 'blog/' . strtolower($blog->alias);
?>
<!--======= single slider post =======-->
<div class="col-12 col-md-6 col-lg-3 mb-md-50 mb-sm-50 mb-xs-50 mb-xxs-50 mb-0 blog-cover">
<div class="single-slider-post">
<div class="single-slider-post__image mb-15" style="background: url('<?= base_url('uploads/blog/').$blog->image1; ?>');">
<a href="<?= base_url('blog/all'); ?>">
<img src="<?= base_url('uploads/blog/').$blog->image1; ?>" class="img-fluid" alt="">
</a>
</div>
<div class="single-slider-post__content">
<h4 class="post-title" style="line-height: 0px; text-align: center;">
<a href="<?= base_url('blog/all'); ?>">
Journal
</a>
</h4>
</div>
<!--======= End of content =======-->
</div>
</div>
<!--======= End of single slider post =======-->
<div class="col-12 col-md-6 col-lg-3 mb-md-50 mb-sm-50 mb-xs-50 mb-xxs-50 mb-0 blog-cover">
<div class="single-slider-post">
<!--======= image =======-->
<div class="single-slider-post__image mb-15" style="background: url('<?= base_url() . 'uploads/page/' .$static_banners->banner4_image; ?>');">
<a href="#" data-toggle="modal" data-target="#modal_blog_video">
<img src="<?= base_url() . 'uploads/page/' .$static_banners->banner4_image; ?>" class="img-fluid" alt="">
</a>
</div>
<?php if ($static_banners->banner4_link != null): ?>
<div class="modal fade bs-modal-lg" id="modal_blog_video" tabindex="-1" role="dialog" aria-labelledby="modal_blog_videoLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" style="border-radius: 0px;">
<div class="modal-body">
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto;">
<div class="scroller" style="overflow: hidden; width: auto;" data-always-visible="1" data-rail-visible1="1" data-initialized="1">
<div class="row">
<div class="youtube col-md-12" style="height: 600px;">
<iframe id="yutub" class="blog_img" src="https://www.youtube.com/embed/<?= $static_banners->banner4_link; ?>?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="button button--small" data-dismiss="modal" onclick="stop()">Close</button>
</div>
</div>
</div>
</div>
<?php endif; ?>
<!--======= End of image =======-->
<!--======= content =======-->
<div class="single-slider-post__content">
<h4 class="post-title" style="text-align: center;line-height: 0px;">
<a href="#" style="" data-toggle="modal" data-target="#modal_blog_video">
Video
</a>
</h4>
<!-- <p class="description"><?= $blog->short_description; ?></p> -->
</div>
<!--======= End of content =======-->
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-md-50 mb-sm-50 mb-xs-50 mb-xxs-50 mb-0 blog-cover">
<div class="single-slider-post">
<!--======= image =======-->
<div class="single-slider-post__image mb-15" style="">
<a target="_blank" href="https://www.instagram.com/rabbithabitofficial/">
<img src="https://www.rabbithabit.com/uploads/instagram.jpg" class="img-fluid" alt="">
</a>
<!-- <div class="instagram-carousel" id="instafeed" data-userid="<?= $static_banners->instagram_userid; ?>"
data-accesstoken="<?= $static_banners->instagram_accesstoken; ?>">
</div> -->
</div>
<!--======= End of image =======-->
<!--======= content =======-->
<div class="single-slider-post__content">
<h4 class="post-title" style="text-align: center;line-height: 0px;">
<a href="javascript:void(0);" style="">
Instagram
</a>
</h4>
<!-- <p class="description"><?= $blog->short_description; ?></p> -->
</div>
<!--======= End of content =======-->
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-md-50 mb-sm-50 mb-xs-50 mb-xxs-50 mb-0 blog-cover">
<div class="single-slider-post">
<!--======= image =======-->
<div class="single-slider-post__image mb-15" style="background: url('<?= base_url() . 'uploads/page/' .$static_banners->banner5_image; ?>');">
<a href="<?= $static_banners->banner5_link; ?>">
<img src="<?= base_url() . 'uploads/page/' .$static_banners->banner5_image; ?>" class="img-fluid" alt="">
</a>
</div>
<!--======= End of image =======-->
<!--======= content =======-->
<div class="single-slider-post__content">
<h4 class="post-title" style="text-align: center;line-height: 0px;">
<a href="<?= $static_banners->banner5_link; ?>" style="">
Shop
</a>
</h4>
<!-- <p class="description"><?= $blog->short_description; ?></p> -->
</div>
<!--======= End of content =======-->
</div>
</div>
<!--======= single slider post =======-->
<!-- <div class="col-12 col-md-6 col-lg-4 mb-md-50 mb-sm-50 mb-xs-50 mb-xxs-50 mb-0">
<div class="single-slider-post">
<div class="single-slider-post__image mb-15">
<a href="journal.php">
<img src="<?= base_url('themes/'.$theme.'/'); ?>assets/images/blog2.jpg" class="img-fluid" alt="">
</a>
</div>
<div class="single-slider-post__content">
<h4 class="post-title" style="line-height: 0px;"><a href="journal.php">Cosmetic Picking Guide</a></h4>
</div>
</div>
</div> -->
<!--======= End of single slider post =======-->
</div>
<!-- <div style="margin-top: 20px; text-align: right;" class="single-slider-post__content">
<a href="<?= base_url(); ?>blog/all" class="blog-readmore-btn">
VIEW ALL BLOGS
</a>
</div> -->
</div>
<!--======= End of blog-post-wrapper =======-->
</div>
</div>
</div>
</div>
<!--===== End of blog post area ======-->
<style>
.single-slider-post__content .post-title a{
text-transform: uppercase;
}
.single-slider-post__image a img{
/* min-height: 270px; */
}
#instafeed .col{
padding: 0px;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: hidden;
}
#modal_blog_video{
padding-right: 0px !important;
}
.instagram-carousel .slick-list{
margin-left: initial;
margin-right: initial;
}
@media (max-width: 450px) {
/*.blog-cover:nth-child(3){
display: none;
}*/
/*.blog-cover{
flex: 0 0 50%;
max-width: 50%;
}*/
.blog-cover .description{
display: none;
}
.blog-post .single-slider-post__image{
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
.single-slider-post__image a img{
/*height: 250px;*/
/* visibility: hidden; */
}
.single-slider-post__image #instafeed a img{
visibility: visible;
}
}
</style>
<script type="text/javascript">
function stop(){
$('#yutub')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}
$(".modal").on('hidden.bs.modal', function (e) {
$('#yutub')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
</script>