senaduka/old-saburly-website2
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix stuff

Browse Source
This commit is contained in:
Edin Dazdarevic
2017-10-05 02:38:46 +02:00
parent b84bae2ba3
commit cfe769a5a6
5 changed files with 166 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -4,6 +4,8 @@
Mobile: Mobile:
[ ] - Our work slider not working [X] - Our work slider not working
[ ] - More precise menu button [ ] - 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

10
css/style.css
View File

@@ -206,7 +206,7 @@ ul,p{
} }
/*-----------------------------What we do-----------------------*/ /*-----------------------------What we do-----------------------*/
.what-we-do{ .what-we-do{
padding: 230px 0; padding: 230px 0px 70px;
position: relative; position: relative;
top: -80px; top: -80px;
} }
@@ -730,7 +730,8 @@ footer .back-to-top{
padding: 0; padding: 0;
} }
.banner { .banner {
background-attachment: fixed; /*background-attachment: fixed;*/
background-attachment: scroll;
} }
.say-hi { .say-hi {
font-size: 26px; font-size: 26px;
@@ -745,7 +746,7 @@ footer .back-to-top{
font-size: 24px; font-size: 24px;
text-shadow: none; text-shadow: none;
opacity: 1; opacity: 1;
top: 86%; /*top: 86%;*/
height: auto; height: auto;
} }
.carousel-control.left, .carousel-control.right { .carousel-control.left, .carousel-control.right {
@@ -794,6 +795,7 @@ footer .back-to-top{
} }
.border-box { .border-box {
min-height: auto; min-height: auto;
margin-bottom: -1px;
} }
.med-title { .med-title {
font-size: 23px; font-size: 23px;
@@ -809,7 +811,7 @@ footer .back-to-top{
} }
.what-we-do { .what-we-do {
padding: 100px 0; padding: 100px 0px 0px;
position: relative; position: relative;
top: -60px; top: -60px;
} }

27
index.html
View File

@@ -40,17 +40,17 @@
<span></span> <span></span>
</div> </div>
</button> </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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="align-navbar"> <div class="align-navbar">
<ul class="nav navbar-nav navbar-right animated" data-animation="fadeInRight" data-animation-delay="0" > <ul class="nav navbar-nav navbar-right" >
<li><a href="#">ABOUT</a></li> <li><a href="#second" class="nav-link">ABOUT</a></li>
<li><a href="#">WORK</a></li> <li><a href="#work" class="nav-link">WORK</a></li>
<li><a href="#">TEAM</a></li> <li><a href="#team" class="nav-link">TEAM</a></li>
<li class="hidden-xs"><a href="#"><i class="material-icons">&#xE0E1;</i></a></li> <li class="hidden-xs"><a href="#"><i class="material-icons">&#xE0E1;</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> </ul>
</div> </div>
</div> </div>
@@ -64,7 +64,7 @@
<div class="row"> <div class="row">
<div class="col-md-12 header-wrap"> <div class="col-md-12 header-wrap">
<img src="img/suburly.png" class="img-responsive center-block visible-xs" alt="suburly"> <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> </div>
</div> </div>
@@ -217,7 +217,7 @@
<!-- End How we work --> <!-- End How we work -->
<!-- Start Our work --> <!-- Start Our work -->
<section class="our-work"> <section class="our-work" id="work">
<div class="container-fluid"> <div class="container-fluid">
<div class="row" > <div class="row" >
<div class="col-md-12" id="myCarousel" data-ride="carousel"> <div class="col-md-12" id="myCarousel" data-ride="carousel">
@@ -348,12 +348,12 @@
<p class="hint text-center">Mongo DB</p> <p class="hint text-center">Mongo DB</p>
</div> </div>
</div> </div>
<div class="col-md-3 col-sm-3 space80"> <!-- <div class="col-md-3 col-sm-3 space80">
<div class="bg-color"> <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> <p class="hint text-center">My SQL</p>
</div> </div>
</div> </div> -->
<div class="col-md-3 col-sm-3 space80"> <div class="col-md-3 col-sm-3 space80">
<div class="bg-color"> <div class="bg-color">
<img src="img/tech12.png" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech12"> <img src="img/tech12.png" class="img-responsive center-block animated" data-animation="zoomIn" alt="tech12">
@@ -393,7 +393,7 @@
<!-- Start team --> <!-- Start team -->
<section class="team"> <section class="team" id="team">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
@@ -465,7 +465,7 @@
<!-- Start Form --> <!-- Start Form -->
<section class="form-section"> <section class="form-section" id="contact">
<div class="form-caption"> <div class="form-caption">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@@ -528,6 +528,7 @@
<script src="js/modernizr-2.5.3.min.js"></script> <script src="js/modernizr-2.5.3.min.js"></script>
<script src="js/jquery.appear.js"></script> <script src="js/jquery.appear.js"></script>
<script src="js/jquery.easing.min.js"></script> <script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.bcSwipe.min.js"></script>
<script src="js/custom.js"></script> <script src="js/custom.js"></script>

252
js/custom.js
View File

@@ -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) { if ($(window).width() < 767) {
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
$('#nav-icon3').toggleClass('open');
});
$('.navbar-nav').removeClass('animated'); $('.navbar-nav').removeClass('animated');
$('.above_item').addClass('carousel-inner'); $('.above_item').addClass('carousel-inner');
$('#myCarousel').addClass('carousel slide'); $('#myCarousel').addClass('carousel slide');
@@ -16,54 +41,57 @@ if ($(window).width() < 767) {
$('.navbar-brand').removeClass('animated').attr('data-animation', ''); $('.navbar-brand').removeClass('animated').attr('data-animation', '');
$(".go_there").prependTo($(".come_here")); $(".go_there").prependTo($(".come_here"));
$('.carousel').bcSwipe({ threshold: 50 });
$(document).scroll(function() { // $(document).scroll(function() {
if (window.scrollY > 50) { // TODO: revisit this
$(".header-wrap").stop().animate({ // if (window.scrollY > 50) {
zoom: 0.5 // $(".header-wrap").stop().animate({
}); // zoom: 0.5
$(".header-wrap").css("opacity", 1 - $(window).scrollTop() / 250); // });
} else { // $(".header-wrap").css("opacity", 1 - $(window).scrollTop() / 250);
$(".header-wrap").stop().animate({ // } else {
zoom: 1 // $(".header-wrap").stop().animate({
}); // zoom: 1
$(".header-wrap").css("opacity", 1); // });
} // $(".header-wrap").css("opacity", 1);
}); // }
// });
var myCarousel = $('#myCarousel'); // var myCarousel = $('#myCarousel');
var itemFirst = myCarousel.find('.carousel-inner > .item:first-child'); // var itemFirst = myCarousel.find('.carousel-inner > .item:first-child');
var itemLast = myCarousel.find('.carousel-inner > .item:last-child'); // var itemLast = myCarousel.find('.carousel-inner > .item:last-child');
var controlLeft = myCarousel.find('a.left.carousel-control'); // var controlLeft = myCarousel.find('a.left.carousel-control');
var controlRight = myCarousel.find('a.right.carousel-control'); // var controlRight = myCarousel.find('a.right.carousel-control');
hideControl(); // hideControl();
myCarousel.on('slid.bs.carousel', function() { // myCarousel.on('slid.bs.carousel', function() {
hideControl(); // // hideControl();
}); // });
myCarousel.on('slide.bs.carousel', function() { // myCarousel.on('slide.bs.carousel', function() {
showControl(); // // showControl();
}); // });
function hideControl() { // function hideControl() {
if (itemFirst.hasClass('active')) { // if (itemFirst.hasClass('active')) {
controlLeft.css('display', 'none'); // controlLeft.css('display', 'none');
} // }
if (itemLast.hasClass('active')) { // if (itemLast.hasClass('active')) {
controlRight.css('display', 'none'); // controlRight.css('display', 'none');
myCarousel.carousel('pause'); // stop from cycling through items // myCarousel.carousel('pause'); // stop from cycling through items
} // }
} // }
function showControl() { // function showControl() {
if (itemFirst.hasClass('active')) { // if (itemFirst.hasClass('active')) {
controlLeft.css('display', 'block'); // controlLeft.css('display', 'block');
} // }
if (itemLast.hasClass('active')) { // if (itemLast.hasClass('active')) {
controlRight.css('display', 'block'); // controlRight.css('display', 'block');
} // }
} // }
} }
@@ -132,7 +160,7 @@ $(document).ready(function() {
[1400, 5], [1400, 5],
[1600, 5] [1600, 5]
], ],
navigation: true, // Show next and prev buttons navigation: false, // Show next and prev buttons
slideSpeed: 300, slideSpeed: 300,
paginationSpeed: 400, paginationSpeed: 400,
dots: true, dots: true,
@@ -150,15 +178,15 @@ $(document).ready(function() {
var bodyEl = $("body"); var bodyEl = $("body");
$(window).on("scroll", function() { $(window).on("scroll", function() {
var scrollTop = $(this).scrollTop(); var scrollTop = $(this).scrollTop();
$("section").each(function() {
var el = $(this), var el = $("#second"),
className = el.attr("id"); className = el.attr("id");
if (el.offset().top <= scrollTop) { if (el.offset().top <= scrollTop) {
bodyEl.addClass(className); bodyEl.addClass(className);
} else { } else {
bodyEl.removeClass(className); bodyEl.removeClass(className);
} }
});
}); });
@@ -167,7 +195,7 @@ $(window).on("scroll", function() {
$(document).ready(function() { $(document).ready(function() {
var fadeStart = 900; var fadeStart = 900;
var fadeUntil = 1300; var fadeUntil = 1300;
$(window).scroll(function() { $(window).scroll(function() {
var offset = $(document).scrollTop(); var offset = $(document).scrollTop();
@@ -276,84 +304,84 @@ $(document).ready(function() {
}); });
/*======================For Mobile Animation=======================*/ /*======================For Mobile Animation=======================*/
if ($(window).width() < 767) { // if ($(window).width() < 767) {
$(document).ready(function() { // $(document).ready(function() {
var fadeStart_mob = 400; // var fadeStart_mob = 400;
var fadeUntil_mob = 1000; // var fadeUntil_mob = 1000;
$(window).scroll(function() { // $(window).scroll(function() {
var offset_mob = $(document).scrollTop(); // var offset_mob = $(document).scrollTop();
if (offset_mob < fadeStart_mob) { // if (offset_mob < fadeStart_mob) {
$(".brush").css('top', "57"); // $(".brush").css('top', "57");
$(".brush-shadow").css('top', "60"); // $(".brush-shadow").css('top', "60");
} else if (offset_mob >= fadeStart_mob && offset_mob <= fadeUntil_mob) { // } else if (offset_mob >= fadeStart_mob && offset_mob <= fadeUntil_mob) {
$(".brush").animate({ // $(".brush").animate({
top: "27", // top: "27",
}, 5000, function() {}); // }, 5000, function() {});
$(".brush-shadow").animate({ // $(".brush-shadow").animate({
top: "37", // top: "37",
}, 6000, function() {}); // }, 6000, function() {});
} else if (offset_mob > fadeUntil_mob) { // } else if (offset_mob > fadeUntil_mob) {
$(".brush").css('top', "57"); // $(".brush").css('top', "57");
$(".brush-shadow").css('top', "60"); // $(".brush-shadow").css('top', "60");
} // }
}); // });
}); // });
$(document).ready(function() { // $(document).ready(function() {
var fadeStart_mob1 = 800; // var fadeStart_mob1 = 800;
var fadeUntil_mob1 = 1300; // var fadeUntil_mob1 = 1300;
$(window).scroll(function() { // $(window).scroll(function() {
var offset_mob1 = $(document).scrollTop(); // var offset_mob1 = $(document).scrollTop();
if (offset_mob1 < fadeStart_mob1) { // if (offset_mob1 < fadeStart_mob1) {
$(".box-img").css('top', "50"); // $(".box-img").css('top', "50");
$(".box-img-shadow").css('top', "55"); // $(".box-img-shadow").css('top', "55");
} else if (offset_mob1 >= fadeStart_mob1 && offset_mob1 <= fadeUntil_mob1) { // } else if (offset_mob1 >= fadeStart_mob1 && offset_mob1 <= fadeUntil_mob1) {
$(".box-img").animate({ // $(".box-img").animate({
top: "20", // top: "20",
}, 5000, function() {}); // }, 5000, function() {});
$(".box-img-shadow").animate({ // $(".box-img-shadow").animate({
top: "30", // top: "30",
}, 6000, function() {}); // }, 6000, function() {});
} else if (offset_mob1 > fadeUntil_mob1) { // } else if (offset_mob1 > fadeUntil_mob1) {
$(".box-img").css('top', "50"); // $(".box-img").css('top', "50");
$(".box-img-shadow").css('top', "55"); // $(".box-img-shadow").css('top', "55");
} // }
}); // });
}); // });
$(document).ready(function() { // $(document).ready(function() {
var fadeStart_mob2 = 1100; // var fadeStart_mob2 = 1100;
var fadeUntil_mob2 = 1700; // var fadeUntil_mob2 = 1700;
$(window).scroll(function() { // $(window).scroll(function() {
var offset_mob2 = $(document).scrollTop(); // var offset_mob2 = $(document).scrollTop();
if (offset_mob2 < fadeStart_mob2) { // if (offset_mob2 < fadeStart_mob2) {
$(".hand").css('top', "60"); // $(".hand").css('top', "60");
$(".hand-shadow").css('top', "65"); // $(".hand-shadow").css('top', "65");
} else if (offset_mob2 >= fadeStart_mob2 && offset_mob2 <= fadeUntil_mob2) { // } else if (offset_mob2 >= fadeStart_mob2 && offset_mob2 <= fadeUntil_mob2) {
$(".hand").animate({ // $(".hand").animate({
top: "20", // top: "20",
}, 5000, function() {}); // }, 5000, function() {});
$(".hand-shadow").animate({ // $(".hand-shadow").animate({
top: "30", // top: "30",
}, 6000, function() {}); // }, 6000, function() {});
} else if (offset_mob2 > fadeUntil_mob2) { // } else if (offset_mob2 > fadeUntil_mob2) {
$(".hand").css('top', "60"); // $(".hand").css('top', "60");
$(".hand-shadow").css('top', "65"); // $(".hand-shadow").css('top', "65");
} // }
}); // });
}); // });
} // }
/* /*

2
js/jquery.bcSwipe.min.js vendored Normal file
View 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);