ikan Uploader :
Directory : /var/www/vhosts/omkar.com/httpdocs/application/views/
Upload File : |
| Current File : /var/www/vhosts/omkar.com/httpdocs/application/views/info_animated_1.php |
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $page_info->title;?></title>
<meta name="description" content="<?php echo $page_info->meta_description;?>" />
<meta name="keywords" content="<?php echo $page_info->meta_keywords;?>" />
<?php $this->load->view('header'); ?>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3BPP5W" height="0" width="0" style="display:none;visibility:hidden">
</iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- structured map data -->
<?php echo $page_info->structured_map_data;?>
<!-- structured map data -->
<div id="wrapper" class="aos-all">
<!-- <?php
$data1['act'] = $page_active;
$data1['project_list'] = $project_list;
$this->load->view('navigation', $data1); ?>
-->
<?php /*
<section class="infoListingBanner">
<div class="container">
<div class="row row-eq-height">
<div class="col-md-6 infobannertxt">
<h4 data-aos="fade-up">Lorem ipsum dolor sit amet</h4>
<p data-aos="fade-up" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-6">
<img src="<?php echo base_url(); ?>assets/images/bannerinfographic.jpg" alt="">
</div>
</div>
</div>
</section>
*/ ?>
<section class="infoDetailsWpr">
<div class="container">
<div class="infoDetailHeader" style="background: url('<?php echo base_url(); ?>assets/images/millennials-1.png');">
<a href="#" data-tab="1" class="tabhead tabhead1 active"><p>Population</p></a>
<a href="#" data-tab="2" class="tabhead tabhead2"><p>Digital Consumption</p></a>
<a href="#" data-tab="3" class="tabhead tabhead3"><p>Spending Pattern</p></a>
<a href="#" data-tab="4" class="tabhead tabhead4"><p>Millennial Profile</p></a>
</div>
<div class="tabWpr">
<div data-content="1" class="content active content-population">
<div class="populationWpr">
<div class="popGlobal">
<div class="popTitle scaleAnime ">
<div class="popImg"></div>
<p>Globally Millennials Population</p>
</div>
<div class="popCount scaleAnime ">
<h4>27%<br>of 7.7bn</h4><p>world population</p>
</div>
</div>
<div class="popIndian">
<div class="popTitle scaleAnime ">
<div class="popImg"></div>
<p>Indian Millennials Population</p>
</div>
<div class="popCount scaleAnime ">
<h4>65%</h4><p>Population<br>born after 1980</p>
</div>
<div class="popGrid">
<div class="popCount scaleAnime ">
<h4>56%</h4><p>use a Tablet Computer</p>
</div>
<div class="popCount scaleAnime ">
<h4>23%</h4><p>use a wearable device</p>
</div>
<div class="popCount scaleAnime ">
<h4>21%</h4><p>use a handheld game device</p>
</div>
<div class="popCount scaleAnime ">
<h4>21%</h4><p>use an e-reader</p>
</div>
</div>
</div>
</div>
</div>
<div data-content="2" class="content content-digital">
<div class="digitalWpr">
<div class="statBlock">
<div class="statTitle statTitle1 scaleAnime">
<h4>30%</h4>
<p>Entertainment ( Music & Videos)</p>
</div>
<div class="statTitle statTitle2 scaleAnime">
<h4>30%</h4>
<p>Transaction( Incl banking)</p>
</div>
<div class="statTitle statTitle3 scaleAnime">
<h4>22%</h4>
<p>Search</p>
</div>
<div class="statTitle statTitle4 scaleAnime">
<h4>37%</h4>
<p>Email / Socail Media</p>
</div>
<div class="statImg1 scaleAnime"></div>
</div>
<div class="statBlock midStat scaleAnime">
<div class="statImg2"></div>
<p>Millennials to Become More Than a Third of India's Population</p>
</div>
<div class="statBlock">
<div class="statTitle statTitle5 scaleAnime">
<h4>1%</h4>
<p>Tablet</p>
</div>
<div class="statTitle statTitle6 scaleAnime">
<h4>10%</h4>
<p>Desktop / Laptop</p>
</div>
<div class="statTitle statTitle7 scaleAnime">
<h4>89%</h4>
<p>Mobile</p>
</div>
<div class="statImg3 scaleAnime"></div>
</div>
</div>
</div>
<div data-content="3" class="content content-spending">
<div class="spendingWpr">
<div class="spendBlock">
<div class="spendInner scaleAnime">
<h4>spending 6%</h4>
<p>of their income on daily commute.</p>
<div class="spendImg1"></div>
</div>
<hr>
<div class="spendInner scaleAnime">
<p>They spend about</p>
<h4>30%</h4>
<p>on shopping</p>
<div class="spendImg2"></div>
</div>
</div>
<div class="spendBlock">
<div class="spendInner midSpend scaleAnime">
<h4>29%</h4>
<p>of the money is spent on<br>utility bill payments</p>
<div class="spendImg3"></div>
</div>
</div>
<div class="spendBlock">
<div class="spendInner scaleAnime">
<h4>27%</h4>
<p>on Food and Drinks</p>
<div class="spendImg4"></div>
</div>
<hr>
<div class="spendInner scaleAnime">
<h4>8%</h4>
<p>on their income / allowances<br>on grocery</p>
<div class="spendImg5"></div>
</div>
</div>
</div>
</div>
<div data-content="4" class="content content-millennial">Tab 4 Content</div>
</div>
</div>
</section>
<?php $this->load->view('sub_footer'); ?>
</div>
<?php $this->load->view('footer'); ?>
<script type="text/javascript">
(function(){
if($(".content").hasClass("active")) {
startAnim();
}
$('.infoDetailHeader [data-tab]').on('click', function (e) {
var daTaAttr = $(this).data('tab');
$(this).parent().css("background",'url(<?php echo base_url(); ?>assets/images/millennials-' +daTaAttr+ '.png)');
$(this).addClass('active').siblings('[data-tab]').removeClass('active')
$(this).parent().siblings().children('[data-content=' + $(this).data('tab') + ']').addClass('active').siblings('[data-content]').removeClass('active');
$('.scaleAnime').removeClass('animStart');
startAnim();
e.preventDefault();
});
})();
function startAnim(){
setTimeout(function(){
var b = 0;
$(".active .scaleAnime").each(function() {
$(this).css("transition-delay", b + "ms," + b + "ms"), b += 100
});
$('.scaleAnime').addClass('animStart');
});
}
</script>
</body>
</html>
........