<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
<li data-target="#bs-carousel" data-slide-to="3"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
</hgroup>
<img class="img-reponsive heading animated zoomIn" src="https://bufiles.blob.core.windows.net/co3620/slide/villa_logo.png" style="height: 300px; width: 50%; height: auto; top: 10%;" alt="" />
<p class="animated slideInUp" style="color: #fff; font-weight: 100; text-shadow: none; font-size: 20pt; text-transform: none;">Ռեստորնային համալիր</p>
</div>
</div>
<div class="item slides slider">
<div class="slide-2"></div>
<div class="hero">
<hgroup>
</hgroup>
<img class="img-reponsive heading animated slideInRight" src="https://bufiles.blob.core.windows.net/co3620/icons/yerevan_restaurant.png" style="width: 50%; height: auto; max-width: 20%;" alt="" />
<p class="animated slideInLeft" style="color: #fff; text-shadow: none; font-weight: 100; font-size: 20pt; text-transform: none;">Երևանյան լեգենդ</p>
<p class="animated slideInRight" style="color: #fff; text-shadow: none; font-weight: 100; font-size: 16pt; text-transform: none;">ռեստորանների ոլորտում</p>
</div>
</div>
<div class="item slides slides">
<div class="slide-3"></div>
<div class="hero">
<hgroup>
</hgroup>
<img class="img-reponsive heading animated slideInRight" src="https://bufiles.blob.core.windows.net/co3620/icons/kitchen_villa.png" style="width: 50%; height: auto; max-width: 10%;" alt="" />
<p class="animated slideInDown" style="color: #fff; font-weight: 100; font-size: 20pt; text-transform: none;">Ողջ կովկասյան և միջերկրական խոհանոցները</p>
<p class="animated slideInLeft" style="color: #fff; font-weight: 100; font-size: 16pt; text-transform: none;">ներկայացված են հայկական ոճով</p>
</div>
</div>
<div class="item slides">
<div class="slide-4"></div>
<div class="hero">
<hgroup>
</hgroup>
<p class="animated slideInLeft" style="color: #fff; font-weight: 100; font-size: 20pt; text-transform: none; top:60%;">Հաճելի միջավայր</p>
<p class="animated slideInLeft" style="color: #fff; font-weight: 100; font-size: 13pt; text-transform: none;">առանձնացեք քաղաքի աժոտաժից Ձեր մտերիմների հետ</p>
</div>
</div>
<a class="left carousel-control" href="#bs-carousel" role="button" data-slide="prev"><span class="fa fa-angle-left"></span></a>
<a class="right carousel-control" href="#bs-carousel" role="button" data-slide="next"><span class="fa fa-angle-right"></span></a>
</div>
</div>
ul.nav.navbar-nav.navbar-right .animate {
font-size: 11pt;
color: black !important;
}
ul.nav.navbar-nav.navbar-right .animate {
font-size: 11pt;
color: black !important;
text-align: center;
}
span.fa.fa-angle-left {
position: absolute;
top: 45%;
font-size: 3em;
left: 3%;
}
span.fa.fa-angle-right {
position: absolute;
top: 45%;
font-size: 3em;
left: 85%;
}
ul.carousel-indicators {
bottom: 3%;
}
p.animated.slideInDown {
}
p.animated.slideInUp {
}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
padding-top: -50px;
}
.fade-carousel .carousel-inner .item {
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #0000;
border-color: #000;
opacity: .7;
border-radius: 0px;
}
carousel-indicators {
bottom: 3%;
border-color: #fff;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
border: none;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #ffffff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100vh;
z-index: 2;
background-color: #000;
opacity: .9;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #000;
background-color: #da2929;
border-color: #da2929;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3,
.fade-carousel .slides .slide-4,
.fade-carousel .slides .slide-5 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}.fade-carousel .slides .slide-1 {
background: url("https://bufiles.blob.core.windows.net/co3620/slide/slide_2.jpg") center center no-repeat;
}
.fade-carousel .slides .slide-2 {
background: url("https://bufiles.blob.core.windows.net/co3620/slide/villa_pattern1x1.png") center center repeat, url("https://bufiles.blob.core.windows.net/co3620/slide/slide_4.jpg") center center no-repeat;
}
.fade-carousel .slides .slide-3 {
background: url("https://bufiles.blob.core.windows.net/co3620/slide/villa_pattern1x1.png") center center repeat, url("https://bufiles.blob.core.windows.net/co3620/slide/slide_3.jpg") center center no-repeat;
}
.fade-carousel .slides .slide-4 {
background: url("https://bufiles.blob.core.windows.net/co3620/slide/villa_pattern1x1.png") center center repeat, url("https://bufiles.blob.core.windows.net/co3620/slide/slide_5.jpg") center center no-repeat;
}
.fade-carousel .slides .slide-5 {
background: url("https://bufiles.blob.core.windows.net/co3620/slide/villa_pattern1x1.png") center center repeat, url("https://bufiles.blob.core.windows.net/co3620/slide/slide_1.jpg") center center no-repeat;
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
padding-top: -50px;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #000;
border-color: #000;
opacity: .7;
border-radius: 0px;
}
carousel-indicators {
bottom: 3%;
border-color: #000;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
border: none;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #0000;
text-align: center;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 4em;
font-weight: bold;
margin: 0;
padding: 0;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100vh;
z-index: 2;
background-color: #0000;
opacity: .9;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #ffffff;
background-color: #da2929;
border-color: #da2929;
outline: none;
margin: 20px auto;
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
(function(){
'use strict';
/*-----------------------------------------
BACKGROUND PARALLAX INIT
------------------------------------------*/
if( $('.parallax').length ){
$('body').imagesLoaded(function(){
$(window).stellar({horizontalOffset:0,horizontalScrolling:!1});
});
};
/*-----------------------------------------
MAIN NAV INIT
------------------------------------------*/
function navTrigger(){
var navTrigger = $('.main-nav-trigger').not('.mobile-nav-trigger'),
mainNavContainer = $('.main-nav-container'),
wrapper = $('.wrapper');
navTrigger.on('click', function(event) {
event.preventDefault();
mainNavContainer.toggleClass('slide-in');
$(this).toggleClass('slide-out');
});
wrapper.on('click', function(event) {
mainNavContainer.removeClass('slide-in');
navTrigger.removeClass('slide-out');
});
};
navTrigger();
/*-----------------------------------------
MOBILE NAV INIT
------------------------------------------*/
function mobileNav(){
var mobileNavContainer = $('.mobile-nav-container'),
mainNavContainer = $('.main-nav-container'),
navTrigger = $('.mobile-nav-trigger');
mainNavContainer.find('.logo-container').clone().appendTo(mobileNavContainer);
mainNavContainer.find('.main-nav').clone().appendTo(mobileNavContainer);
navTrigger.on('click', function(event) {
event.preventDefault();
$(this).siblings('.main-nav').slideToggle();
});
};
mobileNav();
/*-----------------------------------------
SCROLLTO INIT
------------------------------------------*/
$('.main-nav.onepage-nav').onePageNav();
/*-----------------------------------------
TEAM CAROUSEL
------------------------------------------*/
function teamCarousel(){
var memberInfo = $(".members-details-container"),
memberImage = $(".members-images-container");
memberInfo.owlCarousel({
items : 1,
singleItem : true,
loop: true,
nav: true,
mouseDrag: false,
animateIn: 'fadeIn',
animateOut: 'fadeOutRight',
navContainer: '.team-carousel-nav',
navText: ['<span></span>', '<span></span>']
});
memberImage.owlCarousel({
items : 1,
singleItem : true,
mouseDrag: false,
animateIn: 'fadeIn',
animateOut: 'fadeOutRight',
loop: true
});
memberInfo.on('change.owl.carousel', function(event) {
memberImage.trigger('to.owl.carousel', event.item.index - 1);
});
};
/*--- Team Carousel Init ---*/
if ( $('.team').length ) {
$('.team').imagesLoaded(function(){
teamCarousel();
});
};
/*-----------------------------------------
TWEETER FEED
------------------------------------------*/
if( $('.tweets-container').length ) {
$('.tweet').twittie({
// username: 'google',
dateFormat: '%B %d, %Y',
template: '<p>{{tweet}}<span>{{date}}</span></p>',
count: 1,
hideReplies: true,
apiPath: 'php/twitter-feed/tweet.php'
});
};
/*-----------------------------------------
GALLERY INIT
------------------------------------------*/
if ( $('.gallery').length ) {
$('.gallery-items-container').find('ul').mixItUp({
animation: {
duration: 100,
effects: 'fade stagger(20ms) translateZ(-300px)',
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
}
});
};
/*-----------------------------------------
POPUP INIT
------------------------------------------*/
if ( $('.popup-trigger').length ) {
$('.popup-trigger').magnificPopup({
type: 'image',
gallery: {
enabled: true
},
removalDelay: 500,
mainClass: 'mfp-fade'
});
};
/*-----------------------------------------
MENU CAROUSEL INIT
------------------------------------------*/
if ( $('.menus').length ) {
var menuCarousel = $('.menu-carousel').owlCarousel({
singleItem: true,
items: 1,
nav: true,
mouseDrag: false,
navSpeed: 1000,
animateIn: 'fadeIn',
animateOut: 'fadeOutDown',
navContainer: '.menu-carousel-nav',
navText: ['<span></span>', '<span></span>']
});
};
function menuMeals(){
var menuMeals = $('.menu-meals'),
menuMealsThumbnail = menuMeals.owlCarousel({
items: 1,
singleItem: true,
mouseDrag: false,
touchDrag: false
});
menuMeals.find('.owl-item').on('click', function(event) {
var $this = $(this);
$this.addClass('active').siblings().removeClass('active');
menuCarousel.trigger('to.owl.carousel', $this.index());
});
menuCarousel.on('changed.owl.carousel', function(event) {
var activeMenu = event.item.index;
console.log(activeMenu);
menuMeals.find('.owl-item:nth-child('+ (activeMenu + 1) + ')' ).addClass('active').siblings().removeClass('active')
});
};
if ( $('.menu-meals').length ) {
menuMeals();
};
/*-----------------------------------------
CONTACT FORM INIT
------------------------------------------*/
function contactForm() {
var form = $('#contact-form');
var formMessages = $('#form-messages');
$(formMessages).slideUp();
$(form).submit(function(event) {
event.preventDefault();
var formData = $(form).serialize();
if ( !$('#name').val() || !$('#email').val() || !$('#message').val() ) {
$('#form-messages').text('Please Complete All inputs');
} else {
$('#form-messages').text('Sending your message. Please wait...').slideDown();
};
$(formMessages).removeClass('error').removeClass('success');
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
$(formMessages).removeClass('error').delay(2000).slideUp();
$(formMessages).addClass('success').delay(2000).slideUp();
$(formMessages).text(response);
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success').delay(2000).slideUp();
$(formMessages).addClass('error').delay(2000).slideUp();
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
};
contactForm();
/*-----------------------------------------
HEADER BANNER FADE EFFECT
------------------------------------------*/
function headerBanner(){
var introSection = $('.top-banner-bg'),
topBanner = $('.top-banner'),
topImage = topBanner.find('.top-image'),
bottomImage = topBanner.find('.bottom-image'),
introSectionHeight = introSection.height(),
scaleSpeed = 0.3,
opacitySpeed = 1;
var MQ = 991;
triggerAnimation();
$(window).on('resize', function(){
triggerAnimation();
});
function triggerAnimation(){
if($(window).width()>= MQ) {
$(window).on('scroll', function(){
window.requestAnimationFrame(animateIntro);
});
} else {
$(window).off('scroll');
}
}
function animateIntro () {
var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5),
scaleValue = 1 - scrollPercentage*scaleSpeed;
if( $(window).scrollTop() < introSectionHeight) {
topBanner.css({
'opacity': 1 - scrollPercentage * 1.6
});
}
};
topBanner.imagesLoaded(function(){
topImage.addClass('animated fadeInDown')
bottomImage.addClass('animated fadeInDown')
});
};
/*--- Header Banner Fade Effect Init ---*/
if ( $('.top-banner-container').length ) {
headerBanner();
};
/*-----------------------------------------
MEMBERS CAROUSEL
------------------------------------------*/
function membersCarousel(){
var membersCarousel = $('.members-carousel');
membersCarousel.find('ul').owlCarousel({
items: 1,
loop: true,
center: true,
responsive : {
496: {
items: 2
},
767: {
items: 3
},
992 : {
items: 4
},
1199 : {
items: 5
}
}
});
};
if ( $('.members-carousel').length ) {
$('.members-carousel').imagesLoaded(function(){
membersCarousel();
});
};
/*-----------------------------------------
TESTIMONIALS CAROUSEL
------------------------------------------*/
function testimonialsCarousel(){
var testimonialsCarousel = $('.testimonial-carousel');
testimonialsCarousel.owlCarousel({
singleItem: true,
items: 1,
loop: true,
dots: true,
autoplay: true,
autoplayTimeout: 3500,
autoplayHoverPause: true,
animateIn: 'fadeInLeft',
animateOut: 'fadeOutRight',
dotsContainer: '.testimonial-carousel-nav'
});
};
if ( $('.testimonial-carousel').length ) {
testimonialsCarousel();
};
/*-----------------------------------------
CLIENTS CAROUSEL
------------------------------------------*/
function clientsCarousel(){
var clientsCarousel = $('.clients-carousel');
clientsCarousel.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 3500,
autoplayHoverPause: true,
responsive : {
496: {
items: 2
},
767: {
items: 3
},
992 : {
items: 4
},
1199 : {
items: 5
}
}
});
};
if ( $('.clients-carousel').length ) {
clientsCarousel();
};
/*-----------------------------------------
BLOG POST CATEGORY FILTER INIT
------------------------------------------*/
if ( $('.blog-category-filter').length ) {
$('.blog-post').mixItUp({
animation: {
duration: 550,
effects: 'fade stagger(20ms) translateZ(-300px)',
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
}
});
};
/*-----------------------------------------
STORE CATEGORY FILTER INIT
------------------------------------------*/
if ( $('.store-category-filter').length ) {
$('.store-items').mixItUp({
animation: {
duration: 550,
effects: 'fade stagger(20ms) translateZ(-300px)',
easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
}
});
};
/*-----------------------------------------
ITEM SLIDESHOW
------------------------------------------*/
function itemSlideshow(){
var itemSlideshow = $(".item-slideshow"),
mainImage = itemSlideshow.find('.main-image'),
thumbnails = itemSlideshow.find('.thumbnails');
mainImage.owlCarousel({
items : 1,
singleItem : true,
animateIn: 'fadeInLeft',
animateOut: 'fadeOutRight'
});
thumbnails.owlCarousel({
items : 2,
margin: 15,
responsive : {
768: {
items: 3
}
}
});
thumbnails.find('.owl-item').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
mainImage.trigger('to.owl.carousel', $(this).index());
});
};
/*--- Item Slideshow Init ---*/
if ( $('.item-slideshow').length ) {
$('.item-slideshow').imagesLoaded(function(){
itemSlideshow();
});
};
/*------------------------------------------
MEDIAELEMENTS INIT
------------------------------------------*/
if ( $('video').length ) {
var videoPlayer = new MediaElementPlayer('video');
};
if ( $('audio').length ) {
var audioPlayer = $('audio').mediaelementplayer();
};
/*------------------------------------------
PROMO VIDEO
------------------------------------------*/
if ( $('.promo-video').length ) {
$('.promo-video').find('video').on('play', function(){
$('.promo-video').find('.promo-contents').fadeOut('200');
});
$('.promo-video').find('video').on('pause', function(){
$('.promo-video').find('.promo-contents').fadeIn('200');
});
};
/*------------------------------------------
SCROLL REVEAL INIT
------------------------------------------*/
if ( $('.wow').length ) {
var wow = new WOW({mobile: false});
wow.init();
};
/*------------------------------------------
CART ITEM COUNT INIT
------------------------------------------*/
if ( $('.cart-item-count').length ) {
$('.cart-item-count').stepper();
};
/*------------------------------------------
MAIN NAV NICESCROLL INIT
------------------------------------------*/
function mainNavNicescroll(){
if ( $('.main-nav-container').length ) {
$('.main-nav-container').niceScroll({
cursoropacitymax: 0.3
});
};
};
mainNavNicescroll();
/*------------------------------------------
MOBILE NAV STICKY INIT
------------------------------------------*/
function mobileNavStickyInit(){
var mobileNavContainer = $('.mobile-nav-container'),
mobileNavHeight = mobileNavContainer.outerHeight(),
$window = $(window),
wrapper = $('.wrapper');
$('.main-header .logo-container').imagesLoaded(function(){
$window.on('scroll', function(){
//The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother
window.requestAnimationFrame(mobileNav);
});
});
function mobileNav(){
if ( $window.scrollTop() > mobileNavHeight && $window.width() <= 991 ) {
$('.mobile-nav-container').addClass('sticky animated fadeInDown');
wrapper.css('padding-top', mobileNavHeight);
} else {
$('.mobile-nav-container').removeClass('sticky animated fadeInDown');
wrapper.css('padding-top', 0);
};
};
};
mobileNavStickyInit();
/*------------------------------------------------------------
FUNCTIONS THAT NEED TO RUN WHEN WINDOW IS RESIZED
-------------------------------------------------------------*/
$(window).on('resize', function() {
mobileNavStickyInit();
});
})();
