File: /home/imensosw/www/imenso.co/demo/mbj/index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imenso Software</title>
<link rel="stylesheet" type="text/css" href="css/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/icon.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel='stylesheet prefetch' href='css/slider.css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--[if IE 8]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters hidden">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0,0" />
</filter>
</defs>
</svg>
<section id="huge-brand">
<div class="brand-slogan">
<div id="cd-logo"><img src="images/logo.png"></div>
<h1>Traditionally Modern Symbol of <br>timeless quality & style</h1>
<a href="mbjapp" class="btn-lined mt2 cd-btn">Discover</a>
</div>
<div class="slider slider1">
<div class="slides">
<div class="slide-item item1">
</div>
<div class="slide-item item2">
</div>
<div class="slide-item item3">
</div>
<div class="slide-item item4">
</div>
</div>
</div>
</section>
<div id="cd-intro-tagline"></div>
<div class="cd-secondary-nav">
<a href="#0" class="cd-secondary-nav-trigger">Menu<span></span></a> <!-- button visible on small devices -->
<nav>
<ul>
<li><a href="#theHouse"><b>The House</b></a></li>
<li><a href="#theLook"><b>The Look</b></a></li>
<li><a href="#theSpirit"><b>The Spirit</b></a></li>
<li><a href="#theRipples"><b>The Ripples</b></a></li>
<li><a href="#theCoverage"><b>The Coverage</b></a></li>
<li><a href="#theTales"><b>The Tales</b></a></li>
<li><a href="#theConnect"><b>The Connect</b></a></li>
</ul>
</nav>
</div> <!-- .cd-secondary-nav -->
<main class="cd-main-content">
<section id="theHouse" class="cd-section cd-container">
<div class="ui center aligned container">
<div class="masthead mt5">
<h2>The House</h2>
<div class="ui secondary centered compact pointing menu brand-tabs">
<a href="javascript:;" class="item active" data-tab="tab-name">Brand Story</a>
<a href="javascript:;" class="item" data-tab="tab-name2">Legacy</a>
<a href="javascript:;" class="item" data-tab="tab-name3">The Foundation</a>
<a href="javascript:;" class="item" data-tab="tab-name4">The Craft</a>
</div>
<div class="ui tab active" data-tab="tab-name">
<div class="mt5">
<h3>Brand Story</h3>
<img src="images/icon1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.</p>
</div>
</div>
<div class="ui tab" data-tab="tab-name2">
<div class="mt5">
<h3>Legacy</h3>
<img src="images/icon2.svg" width="200">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.</p>
</div>
</div>
<div class="ui tab" data-tab="tab-name3">
<div class="mt5">
<h3>The Foundation</h3>
<img src="images/icon3.svg" width="200">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.</p>
</div>
</div>
<div class="ui tab" data-tab="tab-name4">
<div class="mt5">
<h3>The Craft</h3>
<img src="images/icon4.svg" width="200">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.</p>
</div>
</div>
</div><!--/story-box-->
</div><!--/container-->
</section> <!-- /theHouse-->
<section id="theLook" class="cd-section cd-container">
<div class="look">
<figure class="effect-look clm-4">
<img src="images/img2.jpg" data-src="images/img2.jpg" alt="img11"/>
<figcaption>
<h2>Adara</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-look clm-8">
<img src="images/img1.jpg" data-src="images/img1.jpg" alt="img03"/>
<figcaption>
<h2>Diamond jewellery</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-look clm-4">
<img src="images/img3.jpg" data-src="images/img3.jpg" alt="img03"/>
<figcaption>
<h2>Raaya</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-look clm-4">
<img src="images/img4.jpg" data-src="images/img4.jpg" alt="img03"/>
<figcaption>
<h2>English Rose Mughal Garden</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<div class="look-no-effect clm-8">
<div class="look-marg">
<div class="padded-t-0">
<h2>The Look</h2>
<p>MBJ is well known for their specialization in designer Diamond jewellery, Rose Cut Antique, Kundan-Jadau, Polki and Gold jewellery.</p>
</div>
</div>
</div>
<figure class="effect-look clm-4">
<img src="images/img2.jpg" data-src="images/img2.jpg" alt="img03"/>
<figcaption>
<h2>Wedding Collection</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-look clm-4">
<img src="images/img3.jpg" data-src="images/img3.jpg" alt="img03"/>
<figcaption>
<h2>Light Jewellery Collection</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-look clm-4">
<img src="images/img2.jpg" data-src="images/img2.jpg" alt="img03"/>
<figcaption>
<h2>Gifting</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-look clm-4">
<img src="images/img1.jpg" data-src="images/look5.jpg" alt="img03"/>
<figcaption>
<h2>Men's Collection</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-look clm-4">
<img src="images/img3.jpg" data-src="images/img3.jpg" alt="img03"/>
<figcaption>
<h2>Miscellaneous</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
</section> <!-- /theLook -->
<section id="theSpirit" class="cd-section cd-container spirit">
<div class="ui container">
<div class="masthead">
<h2>The Spirit</h2>
</div>
<div class="ui grid gutter-xl mt10">
<div class="eight wide column">
<img src="images/spi1.jpg" data-src="images/spi1.jpg" width="400">
</div>
<div class="eight wide column">
<div class="pad30">
<h3>Design Inspiration</h3>
<p class="big-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="ui grid gutter-xl mt10">
<div class="eight wide column">
<div class="pad30">
<h3>Karigar Story</h3>
<p class="big-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="eight wide column">
<img src="images/spi2.jpg" data-src="images/spi2.jpg" width="400">
</div>
</div>
<div class="ui grid gutter-xl mt10">
<div class="eight wide column">
<img src="images/spi3.jpg" data-src="images/spi3.jpg" width="400">
</div>
<div class="eight wide column">
<div class="pad30">
<h3>Product Philosophy</h3>
<p class="big-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</section> <!-- /theSpirit -->
<section id="theRipples" class="cd-section cd-container">
<div class="masthead">
<h2>The Ripples</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="gallery mt5">
<ul class="gallery-pictures">
<li class="gallery-picture">
<img src="images/img1.jpg" alt="img01">
<div class="ripple-slogan">
<h3>Celebrate the majestic allure of</h3>
<h1>The Mughal Garden & English Rose</h1>
</div>
</li>
<li class="gallery-picture">
<div class="ripple-slogan">
<h3>Diwali Discounts</h3>
<h1>20% off on all wedding collections</h1>
</div>
<img src="images/img2.jpg" alt="img01">
</li>
<li class="gallery-picture">
<img src="images/img3.jpg" alt="img01">
<div class="ripple-slogan">
<h3>Celebrate the majestic allure of</h3>
<h1>The Mughal Garden & English Rose</h1>
</div>
</li>
<li class="gallery-picture">
<img src="images/img1.jpg" alt="img01">
<div class="ripple-slogan">
<h3>Diwali Discounts</h3>
<h1>20% off on all wedding collections</h1>
</div>
</li>
</ul>
<div class="gallery-pagination">
<button class="gallery-pagination-dot"></button>
<button class="gallery-pagination-dot"></button>
<button class="gallery-pagination-dot"></button>
<button class="gallery-pagination-dot"></button>
</div>
</div>
</section> <!-- /theRipples -->
<section id="theCoverage" class="cd-section cd-container media">
<div class="masthead">
<h2>The Coverage</h2>
</div>
<div class="ui container center aligned mt5">
<div class="ui three column grid">
<div class="column">
<img src="images/media1.png">
<h4>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet Lorem ipsum dolor." </h4>
</div>
<div class="column">
<img src="images/media2.png">
<h4>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor." </h4>
</div>
<div class="column">
<img src="images/media5.png">
<h4>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor." </h4>
</div>
</div>
<div class="ui six column grid mt5">
<div class="column">
<img src="images/media2.png">
</div>
<div class="column">
<img src="images/media3.png">
</div>
<div class="column">
<img src="images/media4.png">
</div>
<div class="column">
<img src="images/media2.png">
</div>
<div class="column">
<img src="images/media3.png">
</div>
<div class="column">
<img src="images/media4.png">
</div>
</div>
</div>
</section> <!-- /theCoverage -->
<section id="theTales" class="cd-section cd-container tales">
<div class="masthead">
<h2>The Tales</h2>
<p>Here are the recent blog posts</p>
</div>
<div class="ui container mt5">
<div class="ui three column grid">
<div class="column">
<img class="ui image" src="images/img1.jpg">
<h3>Gaga over geometry</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem... <a href="#" class="readmore">Read More</a></p>
</div>
<div class="column">
<img class="ui image" src="images/img2.jpg">
<h3>Gaga over geometry</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem... <a href="#" class="readmore">Read More</a></p>
</div>
<div class="column">
<img class="ui image" src="images/img3.jpg">
<h3>Gaga over geometry</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem... <a href="#" class="readmore">Read More</a></p>
</div>
</div>
</div>
<div class="gold-bg burger-xl mt10">
<div class="masthead testimonial">
<h2 class="white-text">"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam."</h2>
<p class="white-text opac">- John Doe</p>
</div>
</div>
</section> <!-- /theTales -->
<section id="theConnect" class="cd-section cd-container footer">
<div class="masthead">
<h2>The Connect</h2>
<p>Wish to see the collections? Request an invite!</p>
<div class="ui form invite">
<div class="ui grid">
<div class="eleven wide column">
<input placeholder="Please enter your email ID" type="text">
</div>
<div class="five wide column">
<div class="ui submit button grey">Invite Me</div>
</div>
</div>
</div>
</div>
<div class="ui container gutter-xl mt10">
<div class="ui two column gutter-xl grid">
<div class="column">
<p><a href="">- Consult</a></p>
<p><a href="">- Design consultaion</a></p>
<p><a href="">- Jewelry Upgradation</a></p>
<p><a href="">- Redesigning</a></p>
</div>
<div class="column">
<p><a href="">- Customization</a></p>
<p><a href="">- Jewelry Care</a></p>
<p><a href="">- Bridal Appointment</a></p>
</div>
</div>
</div>
<div class="masthead mt5 mb5">
<p class="sml-text">© The house of MBJ <a href="">Terms & Conditions</a></p>
</div>
</section> <!-- /theConnect -->
</main> <!-- .cd-main-content -->
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/gallery.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/main.js"></script>
<script src="js/semantic.min.js"></script>
<script src='https://cdn.jsdelivr.net/jquery.glide/1.0.6/jquery.glide.min.js'></script>
<script src="https://use.fontawesome.com/0d759b0699.js"></script>
<script>
$(document).ready(function(){
//var headrs=document.getElementById('header1').offsetHeight;
var wheight = screen.height-100;
wheight=wheight + "px";
document.getElementById('huge-brand').style.height=wheight;
});
$('.slider').glide({
autoplay: false,
arrowsWrapperClass: 'slider-arrows',
arrowRightText: '',
arrowLeftText: ''
});
$('.brand-tabs .item').tab();
$('.spirit img')
.visibility({
type : 'image',
transition : 'fade in',
duration : 3000
})
;
$('.effect-look img')
.visibility({
type : 'image',
transition : 'fade in',
duration : 1000
})
;
</script>
</body>
</html>