Fix stuff
This commit is contained in:
@@ -4,6 +4,8 @@
|
||||
|
||||
Mobile:
|
||||
|
||||
[ ] - Our work slider not working
|
||||
[X] - Our work slider not working
|
||||
[ ] - More precise menu button
|
||||
[ ] - Remove landing animation on mobile
|
||||
[X] - Remove landing animation on mobile
|
||||
[ ] - Use SVG logos
|
||||
[X] - Collapse borders on how we work
|
||||
|
||||
@@ -206,7 +206,7 @@ ul,p{
|
||||
}
|
||||
/*-----------------------------What we do-----------------------*/
|
||||
.what-we-do{
|
||||
padding: 230px 0;
|
||||
padding: 230px 0px 70px;
|
||||
position: relative;
|
||||
top: -80px;
|
||||
}
|
||||
@@ -730,7 +730,8 @@ footer .back-to-top{
|
||||
padding: 0;
|
||||
}
|
||||
.banner {
|
||||
background-attachment: fixed;
|
||||
/*background-attachment: fixed;*/
|
||||
background-attachment: scroll;
|
||||
}
|
||||
.say-hi {
|
||||
font-size: 26px;
|
||||
@@ -745,7 +746,7 @@ footer .back-to-top{
|
||||
font-size: 24px;
|
||||
text-shadow: none;
|
||||
opacity: 1;
|
||||
top: 86%;
|
||||
/*top: 86%;*/
|
||||
height: auto;
|
||||
}
|
||||
.carousel-control.left, .carousel-control.right {
|
||||
@@ -794,6 +795,7 @@ footer .back-to-top{
|
||||
}
|
||||
.border-box {
|
||||
min-height: auto;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.med-title {
|
||||
font-size: 23px;
|
||||
@@ -809,7 +811,7 @@ footer .back-to-top{
|
||||
}
|
||||
|
||||
.what-we-do {
|
||||
padding: 100px 0;
|
||||
padding: 100px 0px 0px;
|
||||
position: relative;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
27
index.html
27
index.html
@@ -40,17 +40,17 @@
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
<a class="navbar-brand animated" data-animation="fadeInLeft" data-animation-delay="0" href="#"><img src="img/logo.png" class="img-responsive hidden-xs" alt="logo"><img src="img/mob-logo.png" class="img-responsive visible-xs" alt="logo"></a>
|
||||
<a class="navbar-brand animated123" href="#"><img src="img/logo.png" class="img-responsive hidden-xs" alt="logo"><img src="img/mob-logo.png" class="img-responsive visible-xs" alt="logo"></a>
|
||||
</div>
|
||||
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<div class="align-navbar">
|
||||
<ul class="nav navbar-nav navbar-right animated" data-animation="fadeInRight" data-animation-delay="0" >
|
||||
<li><a href="#">ABOUT</a></li>
|
||||
<li><a href="#">WORK</a></li>
|
||||
<li><a href="#">TEAM</a></li>
|
||||
<ul class="nav navbar-nav navbar-right" >
|
||||
<li><a href="#second" class="nav-link">ABOUT</a></li>
|
||||
<li><a href="#work" class="nav-link">WORK</a></li>
|
||||
<li><a href="#team" class="nav-link">TEAM</a></li>
|
||||
<li class="hidden-xs"><a href="#"><i class="material-icons"></i></a></li>
|
||||
<li class="visible-xs"><a href="#">CONTACT</a></li>
|
||||
<li class="visible-xs"><a href="#contact" class="nav-link">CONTACT</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -64,7 +64,7 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12 header-wrap">
|
||||
<img src="img/suburly.png" class="img-responsive center-block visible-xs" alt="suburly">
|
||||
<h1 data-animation="pulse" data-animation-delay="0">WE DESIGN AND BUILD<br> SOFTWARE</h1>
|
||||
<h1>WE DESIGN AND BUILD<br> SOFTWARE</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -217,7 +217,7 @@
|
||||
<!-- End How we work -->
|
||||
|
||||
<!-- Start Our work -->
|
||||
<section class="our-work">
|
||||
<section class="our-work" id="work">
|
||||
<div class="container-fluid">
|
||||
<div class="row" >
|
||||
<div class="col-md-12" id="myCarousel" data-ride="carousel">
|
||||
@@ -348,12 +348,12 @@
|
||||
<p class="hint text-center">Mongo DB</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-3 space80">
|
||||
<!-- <div class="col-md-3 col-sm-3 space80">
|
||||
<div class="bg-color">
|
||||
<img src="img/tech12.png" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech12">
|
||||
<img src="img/mysql.png" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech12">
|
||||
<p class="hint text-center">My SQL</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-md-3 col-sm-3 space80">
|
||||
<div class="bg-color">
|
||||
<img src="img/tech12.png" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech12">
|
||||
@@ -393,7 +393,7 @@
|
||||
|
||||
|
||||
<!-- Start team -->
|
||||
<section class="team">
|
||||
<section class="team" id="team">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
@@ -465,7 +465,7 @@
|
||||
|
||||
|
||||
<!-- Start Form -->
|
||||
<section class="form-section">
|
||||
<section class="form-section" id="contact">
|
||||
<div class="form-caption">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@@ -528,6 +528,7 @@
|
||||
<script src="js/modernizr-2.5.3.min.js"></script>
|
||||
<script src="js/jquery.appear.js"></script>
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/jquery.bcSwipe.min.js"></script>
|
||||
<script src="js/custom.js"></script>
|
||||
|
||||
|
||||
|
||||
250
js/custom.js
250
js/custom.js
@@ -1,4 +1,29 @@
|
||||
// $('.navbar-collapse a').click(function(){
|
||||
|
||||
// $(".navbar-collapse").collapse('hide');
|
||||
// $('#nav-icon3').toggleClass('open');
|
||||
// });
|
||||
|
||||
$('a.nav-link').click(function(e) {
|
||||
var target = $($(this).attr("href"));
|
||||
// x = position.left + parseInt($element.css('marginLeft'), 10);
|
||||
var marginTop = parseInt(target.css('paddingTop'), 10);
|
||||
$('html, body').animate({
|
||||
// scrollTop: 700
|
||||
scrollTop: target.offset().top - marginTop
|
||||
}, 1000);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
|
||||
// scrollTop: $("#myDiv").offset().top
|
||||
});
|
||||
|
||||
if ($(window).width() < 767) {
|
||||
$('.navbar-collapse a').click(function(){
|
||||
$(".navbar-collapse").collapse('hide');
|
||||
$('#nav-icon3').toggleClass('open');
|
||||
});
|
||||
|
||||
$('.navbar-nav').removeClass('animated');
|
||||
$('.above_item').addClass('carousel-inner');
|
||||
$('#myCarousel').addClass('carousel slide');
|
||||
@@ -16,54 +41,57 @@ if ($(window).width() < 767) {
|
||||
|
||||
$('.navbar-brand').removeClass('animated').attr('data-animation', '');
|
||||
$(".go_there").prependTo($(".come_here"));
|
||||
$('.carousel').bcSwipe({ threshold: 50 });
|
||||
|
||||
$(document).scroll(function() {
|
||||
if (window.scrollY > 50) {
|
||||
$(".header-wrap").stop().animate({
|
||||
zoom: 0.5
|
||||
});
|
||||
$(".header-wrap").css("opacity", 1 - $(window).scrollTop() / 250);
|
||||
} else {
|
||||
$(".header-wrap").stop().animate({
|
||||
zoom: 1
|
||||
});
|
||||
$(".header-wrap").css("opacity", 1);
|
||||
}
|
||||
});
|
||||
|
||||
var myCarousel = $('#myCarousel');
|
||||
var itemFirst = myCarousel.find('.carousel-inner > .item:first-child');
|
||||
var itemLast = myCarousel.find('.carousel-inner > .item:last-child');
|
||||
var controlLeft = myCarousel.find('a.left.carousel-control');
|
||||
var controlRight = myCarousel.find('a.right.carousel-control');
|
||||
// $(document).scroll(function() {
|
||||
// TODO: revisit this
|
||||
// if (window.scrollY > 50) {
|
||||
// $(".header-wrap").stop().animate({
|
||||
// zoom: 0.5
|
||||
// });
|
||||
// $(".header-wrap").css("opacity", 1 - $(window).scrollTop() / 250);
|
||||
// } else {
|
||||
// $(".header-wrap").stop().animate({
|
||||
// zoom: 1
|
||||
// });
|
||||
// $(".header-wrap").css("opacity", 1);
|
||||
// }
|
||||
// });
|
||||
|
||||
hideControl();
|
||||
// var myCarousel = $('#myCarousel');
|
||||
// var itemFirst = myCarousel.find('.carousel-inner > .item:first-child');
|
||||
// var itemLast = myCarousel.find('.carousel-inner > .item:last-child');
|
||||
// var controlLeft = myCarousel.find('a.left.carousel-control');
|
||||
// var controlRight = myCarousel.find('a.right.carousel-control');
|
||||
|
||||
myCarousel.on('slid.bs.carousel', function() {
|
||||
hideControl();
|
||||
});
|
||||
myCarousel.on('slide.bs.carousel', function() {
|
||||
showControl();
|
||||
});
|
||||
// hideControl();
|
||||
|
||||
function hideControl() {
|
||||
if (itemFirst.hasClass('active')) {
|
||||
controlLeft.css('display', 'none');
|
||||
}
|
||||
if (itemLast.hasClass('active')) {
|
||||
controlRight.css('display', 'none');
|
||||
myCarousel.carousel('pause'); // stop from cycling through items
|
||||
}
|
||||
}
|
||||
// myCarousel.on('slid.bs.carousel', function() {
|
||||
// // hideControl();
|
||||
// });
|
||||
// myCarousel.on('slide.bs.carousel', function() {
|
||||
// // showControl();
|
||||
// });
|
||||
|
||||
function showControl() {
|
||||
if (itemFirst.hasClass('active')) {
|
||||
controlLeft.css('display', 'block');
|
||||
}
|
||||
if (itemLast.hasClass('active')) {
|
||||
controlRight.css('display', 'block');
|
||||
}
|
||||
}
|
||||
// function hideControl() {
|
||||
// if (itemFirst.hasClass('active')) {
|
||||
// controlLeft.css('display', 'none');
|
||||
// }
|
||||
// if (itemLast.hasClass('active')) {
|
||||
// controlRight.css('display', 'none');
|
||||
// myCarousel.carousel('pause'); // stop from cycling through items
|
||||
// }
|
||||
// }
|
||||
|
||||
// function showControl() {
|
||||
// if (itemFirst.hasClass('active')) {
|
||||
// controlLeft.css('display', 'block');
|
||||
// }
|
||||
// if (itemLast.hasClass('active')) {
|
||||
// controlRight.css('display', 'block');
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
@@ -132,7 +160,7 @@ $(document).ready(function() {
|
||||
[1400, 5],
|
||||
[1600, 5]
|
||||
],
|
||||
navigation: true, // Show next and prev buttons
|
||||
navigation: false, // Show next and prev buttons
|
||||
slideSpeed: 300,
|
||||
paginationSpeed: 400,
|
||||
dots: true,
|
||||
@@ -150,15 +178,15 @@ $(document).ready(function() {
|
||||
var bodyEl = $("body");
|
||||
$(window).on("scroll", function() {
|
||||
var scrollTop = $(this).scrollTop();
|
||||
$("section").each(function() {
|
||||
var el = $(this),
|
||||
|
||||
var el = $("#second"),
|
||||
className = el.attr("id");
|
||||
if (el.offset().top <= scrollTop) {
|
||||
bodyEl.addClass(className);
|
||||
} else {
|
||||
bodyEl.removeClass(className);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -276,84 +304,84 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
/*======================For Mobile Animation=======================*/
|
||||
if ($(window).width() < 767) {
|
||||
// if ($(window).width() < 767) {
|
||||
|
||||
$(document).ready(function() {
|
||||
var fadeStart_mob = 400;
|
||||
var fadeUntil_mob = 1000;
|
||||
// $(document).ready(function() {
|
||||
// var fadeStart_mob = 400;
|
||||
// var fadeUntil_mob = 1000;
|
||||
|
||||
$(window).scroll(function() {
|
||||
var offset_mob = $(document).scrollTop();
|
||||
// $(window).scroll(function() {
|
||||
// var offset_mob = $(document).scrollTop();
|
||||
|
||||
if (offset_mob < fadeStart_mob) {
|
||||
$(".brush").css('top', "57");
|
||||
$(".brush-shadow").css('top', "60");
|
||||
// if (offset_mob < fadeStart_mob) {
|
||||
// $(".brush").css('top', "57");
|
||||
// $(".brush-shadow").css('top', "60");
|
||||
|
||||
} else if (offset_mob >= fadeStart_mob && offset_mob <= fadeUntil_mob) {
|
||||
$(".brush").animate({
|
||||
top: "27",
|
||||
}, 5000, function() {});
|
||||
$(".brush-shadow").animate({
|
||||
top: "37",
|
||||
}, 6000, function() {});
|
||||
// } else if (offset_mob >= fadeStart_mob && offset_mob <= fadeUntil_mob) {
|
||||
// $(".brush").animate({
|
||||
// top: "27",
|
||||
// }, 5000, function() {});
|
||||
// $(".brush-shadow").animate({
|
||||
// top: "37",
|
||||
// }, 6000, function() {});
|
||||
|
||||
} else if (offset_mob > fadeUntil_mob) {
|
||||
$(".brush").css('top', "57");
|
||||
$(".brush-shadow").css('top', "60");
|
||||
// } else if (offset_mob > fadeUntil_mob) {
|
||||
// $(".brush").css('top', "57");
|
||||
// $(".brush-shadow").css('top', "60");
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
});
|
||||
});
|
||||
// });
|
||||
// });
|
||||
|
||||
$(document).ready(function() {
|
||||
var fadeStart_mob1 = 800;
|
||||
var fadeUntil_mob1 = 1300;
|
||||
$(window).scroll(function() {
|
||||
var offset_mob1 = $(document).scrollTop();
|
||||
if (offset_mob1 < fadeStart_mob1) {
|
||||
$(".box-img").css('top', "50");
|
||||
$(".box-img-shadow").css('top', "55");
|
||||
// $(document).ready(function() {
|
||||
// var fadeStart_mob1 = 800;
|
||||
// var fadeUntil_mob1 = 1300;
|
||||
// $(window).scroll(function() {
|
||||
// var offset_mob1 = $(document).scrollTop();
|
||||
// if (offset_mob1 < fadeStart_mob1) {
|
||||
// $(".box-img").css('top', "50");
|
||||
// $(".box-img-shadow").css('top', "55");
|
||||
|
||||
} else if (offset_mob1 >= fadeStart_mob1 && offset_mob1 <= fadeUntil_mob1) {
|
||||
$(".box-img").animate({
|
||||
top: "20",
|
||||
}, 5000, function() {});
|
||||
$(".box-img-shadow").animate({
|
||||
top: "30",
|
||||
}, 6000, function() {});
|
||||
} else if (offset_mob1 > fadeUntil_mob1) {
|
||||
$(".box-img").css('top', "50");
|
||||
$(".box-img-shadow").css('top', "55");
|
||||
}
|
||||
});
|
||||
});
|
||||
// } else if (offset_mob1 >= fadeStart_mob1 && offset_mob1 <= fadeUntil_mob1) {
|
||||
// $(".box-img").animate({
|
||||
// top: "20",
|
||||
// }, 5000, function() {});
|
||||
// $(".box-img-shadow").animate({
|
||||
// top: "30",
|
||||
// }, 6000, function() {});
|
||||
// } else if (offset_mob1 > fadeUntil_mob1) {
|
||||
// $(".box-img").css('top', "50");
|
||||
// $(".box-img-shadow").css('top', "55");
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
$(document).ready(function() {
|
||||
var fadeStart_mob2 = 1100;
|
||||
var fadeUntil_mob2 = 1700;
|
||||
$(window).scroll(function() {
|
||||
var offset_mob2 = $(document).scrollTop();
|
||||
if (offset_mob2 < fadeStart_mob2) {
|
||||
$(".hand").css('top', "60");
|
||||
$(".hand-shadow").css('top', "65");
|
||||
// $(document).ready(function() {
|
||||
// var fadeStart_mob2 = 1100;
|
||||
// var fadeUntil_mob2 = 1700;
|
||||
// $(window).scroll(function() {
|
||||
// var offset_mob2 = $(document).scrollTop();
|
||||
// if (offset_mob2 < fadeStart_mob2) {
|
||||
// $(".hand").css('top', "60");
|
||||
// $(".hand-shadow").css('top', "65");
|
||||
|
||||
} else if (offset_mob2 >= fadeStart_mob2 && offset_mob2 <= fadeUntil_mob2) {
|
||||
$(".hand").animate({
|
||||
top: "20",
|
||||
}, 5000, function() {});
|
||||
$(".hand-shadow").animate({
|
||||
top: "30",
|
||||
}, 6000, function() {});
|
||||
} else if (offset_mob2 > fadeUntil_mob2) {
|
||||
$(".hand").css('top', "60");
|
||||
$(".hand-shadow").css('top', "65");
|
||||
}
|
||||
});
|
||||
});
|
||||
// } else if (offset_mob2 >= fadeStart_mob2 && offset_mob2 <= fadeUntil_mob2) {
|
||||
// $(".hand").animate({
|
||||
// top: "20",
|
||||
// }, 5000, function() {});
|
||||
// $(".hand-shadow").animate({
|
||||
// top: "30",
|
||||
// }, 6000, function() {});
|
||||
// } else if (offset_mob2 > fadeUntil_mob2) {
|
||||
// $(".hand").css('top', "60");
|
||||
// $(".hand-shadow").css('top', "65");
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
/*
|
||||
|
||||
|
||||
2
js/jquery.bcSwipe.min.js
vendored
Normal file
2
js/jquery.bcSwipe.min.js
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/*! Bootstrap Carousel Swipe jQuery plugin v1.1 | https://github.com/maaaaark/bcSwipe | MIT License */
|
||||
!function(t){t.fn.bcSwipe=function(e){var n={threshold:50};return e&&t.extend(n,e),this.each(function(){function e(t){1==t.touches.length&&(u=t.touches[0].pageX,c=!0,this.addEventListener("touchmove",o,!1))}function o(e){if(c){var o=e.touches[0].pageX,i=u-o;Math.abs(i)>=n.threshold&&(h(),t(this).carousel(i>0?"next":"prev"))}}function h(){this.removeEventListener("touchmove",o),u=null,c=!1}var u,c=!1;"ontouchstart"in document.documentElement&&this.addEventListener("touchstart",e,!1)}),this}}(jQuery);
|
||||
Reference in New Issue
Block a user