We Keep Coding

how to animated swiper.js slider like modern slider

This slider has 3 slides per view and also has a full-width background image. Whenever the slider changes, the background image will change according to the slider index. I tried animating it like the site https://stinna-it.nl/alle-projecten. Not only did I try to animate it, I tried to create exactly this slider using Swiper.js. For the animation, I used GSAP but I can only use autoAlpha for now; if I try to use other things like scale(0) to scale(1), it gets messed up.
const imgs = document.querySelectorAll(".prjctbg");
var swiper = new Swiper(".swiper-container", {
pagination: {
el: ".swiper-pagination",
clickable: true,
},
spaceBetween: 1,
slidesPerView: 2.5,
centeredSlides: true,
roundLengths: true,
loop: true,
loopAdditionalSlides: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChangeTransitionStart: function () {
// Get the current slide index
var slideIndex = this.realIndex;
// console.log(slideIndex);
imgs.forEach((img) => {
const index = img.getAttribute("data-index");
if (index == slideIndex) {
img.classList.add("activeBG");
} else {
img.classList.remove("activeBG");
}
});
gsap.fromTo(
".activeBG",
1,
{
autoAlpha: 0,
scale: 1.2,
},
{
autoAlpha: 1,
scale: 1,
}
);
},
},
breakpoints: {
768: {
slidesPerView: 1,
},
},
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,400;0,500;0,600;1,200&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body a {
text-decoration: none;
color: #ffffff;
}
.projectSlider {
width: 100vw;
height: 100vh;
position: relative;
}
.projectSlider .swiper-pagination-fraction,
.projectSlider .swiper-pagination-custom,
.projectSlider .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 26px;
}
.projectSlider .swiper-slide.swiper-slide-prev {
display: flex;
justify-content: flex-end;
}
.projectSlider .swiper-slide.swiper-slide-next {
display: flex;
justify-content: flex-start;
}
.projectSlider .swiper-button-prev,
.projectSlider .swiper-container-rtl .swiper-button-next {
background-image: url("../images/icons/prev.svg");
left: inherit;
right: 100px;
}
.projectSlider .swiper-button-next,
.projectSlider .swiper-container-rtl .swiper-button-prev {
background-image: url("../images/icons/next.svg");
right: 35px;
left: auto;
}
.projectSlider .swiper-button-prev,
.projectSlider .swiper-button-next {
top: 94%;
width: 50px;
height: 50px;
background-size: contain;
background-position: center;
}
.projectSlider .container {
width: 100%;
height: 100%;
}
.projectSlider .prjctbg {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
filter: blur(8px);
-webkit-filter: blur(8px);
}
.projectSlider .prjctbg.activeBG {
z-index: 1;
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}
.swiper-container {
position: relative;
width: 100%;
height: 100%;
}
.swiper-slide {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
transform: scale(0.8);
text-align: center;
}
.swiper-slide p {
overflow: hidden;
color: #fff;
font-size: 1em;
}
.swiper-slide p span {
transform: translateY(100px);
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
display: block;
}
.swiper-slide h1 {
color: #fff;
font-size: 3.8em;
line-height: 100%;
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
margin: 0px 0px 30px 0px;
transform: scale(0.5);
font-weight: 600;
}
.swiper-slide.swiper-slide-active {
transform: scale(1);
}
.swiper-slide.swiper-slide-active p {
opacity: 1;
transition-delay: 0.5s;
}
.swiper-slide.swiper-slide-active p span {
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
transform: translateY(0px);
display: block;
}
.swiper-slide.swiper-slide-active h1 {
transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
transition-delay: 0.15s;
transform: scale(1);
}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css"
/>
<!-- slider section section -->
<div class="projectSlider">
<img
src="https://i.im.ge/2022/12/16/dHOzYJ.windows-FV6Pma5U-98-unsplash.jpg"
data-index="0"
alt=""
class="prjctbg"
/>
<img
src="https://i.im.ge/2022/12/16/dH2dSz.jenny-ueberberg-BaSeK7rwc1A-unsplash.jpg"
data-index="1"
alt=""
class="prjctbg"
/>
<img
src="https://i.im.ge/2022/12/16/dHOzYJ.windows-FV6Pma5U-98-unsplash.jpg"
data-index="2"
alt=""
class="prjctbg"
/>
<img
src="https://i.im.ge/2022/12/16/dH2dSz.jenny-ueberberg-BaSeK7rwc1A-unsplash.jpg"
data-index="3"
alt=""
class="prjctbg"
/>
<img
src="https://i.im.ge/2022/12/16/dHOzYJ.windows-FV6Pma5U-98-unsplash.jpg"
data-index="4"
alt=""
class="prjctbg"
/>
<img
src="https://i.im.ge/2022/12/16/dH2dSz.jenny-ueberberg-BaSeK7rwc1A-unsplash.jpg"
data-index="5"
alt=""
class="prjctbg"
/>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide-container">
<a href="#" class="details">
<h1 class="elmt">
Audiovisual <br />
Design
</h1>
<p class="elmt">
<span> Video Installation</span>
</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">
<a href="#" class="details">
<h1 class="elmt">
Exhibition <br />
Design
</h1>
<p class="elmt">
<span> Multimedia Exhibition</span>
</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">
<a href="#" class="details">
<h1 class="elmt">
Texts and <br />
Images
</h1>
<p class="elmt">
<span> website + Print Magazine </span>
</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">
<a href="#" class="details">
<h1 class="elmt">
Material and <br />
Light
</h1>
<p class="elmt">
<span> Short Video</span>
</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">
<a href="./projectDetails.html" class="details">
<h1 class="elmt">
Dimension <br />
Design
</h1>
<p class="elmt">
<span> Rendered Image </span>
</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">
<a href="./projectDetails.html" class="details">
<h1 class="elmt">
App <br />
Design
</h1>
<p class="elmt">
<span> Sustainability App</span>
</p>
</a>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

Why preloader is showing header section

I am currently working on a website cloning project in order to practice HTML5 and become a better front end developer, so I created a preload animation using CSS. It works fine, but the header section, which includes the navigation and logo, is not hidden. How can I fix this? Is there anything wrong with my code?
$(window).on("load", function() {
$('.spinner').fadeOut(300);
$("body").addClass("pageloaded");
});
:root {
--primary-color:#0071ce;
--secondary-color:#ffffff;
}
body{
min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
font-family: 'ProximaNova-Semibold', Courier, monospace;
text-transform: uppercase;
color: var(--primary-color);
display: block;
font-size: 1.2rem;
}
.navbar-custom{
padding: 25px;
padding-left: 25px;
}
.navbar-custom a:hover{
text-decoration: underline;
color: var(--primary-color);
}
#nav-icons {
width: 35px;
height: 45px;
position: relative;
margin: 6px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
cursor: pointer;
}
#nav-icons span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: blue;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
top: 0px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(2) {
top: 11px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(3) {
top: 21px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
left: 2px;
}
#nav-icons.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icons.open span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 10px;
left: 4px;
}
#media (max-width: 767.98px) {
.navbar-custom{
padding: 0px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-collapse{
display: block;
position: absolute;
width: 150vw;
height: 150vh;
left: 0;
top: 0;
background: rgba(255, 232, 73, 0.95);
z-index: 2;
}
#nav-icons{
z-index: 3;
}
.navbar-collapse .navbar-nav{
padding-top: 120px;
padding-left: 30px;
}
.navbar-collapse .navbar-nav {
-webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
.navbar-collapse .navbar-nav li:nth-child(1) {
animation-delay: 0.1s;
}
.navbar-collapse .navbar-nav li:nth-child(2) {
animation-delay: 0.2s;
}
.navbar-collapse .navbar-nav li:nth-child(3) {
animation-delay: 0.3s;
}
}
/* top section */
.topsec{
position: relative;
padding-top: 165px;
}
.topsec h1{
font-family: ProximaNova-Extrabld;
font-size: 3rem;
text-transform: uppercase;
color: var(--primary-color);
line-height: 1;
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
/* restaurants */
.restaurants-section{
background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
background-size: cover;
background-position: top center;
padding: 10rem 0;
display: block;
width: 100%;
}
.restaurants-text{
padding-top: 100px;
}
.restaurants h3{
font-size: 40px;
font-family: "ProximaNova-Semibold",sans-serif;
color: #fff;
}
.restaurants p{
font-size: 1rem;
margin: 0rem 0 1rem;
line-height: 150%;
color: white;
}
.restaurants a{
display: inline-block;
padding: 5px 25px;
background: #0071ce;
color: #ffe800;
font-size: 20px;
font-family: "ProximaNova-Bold",sans-serif;
transition: all 0.3s;
text-decoration: none;
}
.restaurants a:hover{
background: #ffe800;
color: #0071ce;
transition: all 0.3s;
text-decoration: underline;
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sk-three-bounce {
margin: 40px auto;
width: 10rem;
text-align: center;
margin-top: 48vh;
}
.sk-three-bounce .sk-child {
width: 1.5rem;
height: 1.5rem;
background-color: #0071ce;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce4 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
background-color: #0071ce;
}
.section-spinner {
position: fixed;
height: 100%;
width: 100%;
background: #FFFFFF;
top: 0;
left: 0;
z-index: 999;
}
.section-spinner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
<title>|Welcome to my website </title>
<link rel="stylesheet" href="./css/style.css">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="section-spinner spinner">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
<div class="sk-child sk-bounce4"></div>
<div class="sk-child sk-bounce5"></div>
</div>
</section>
<header>
<nav class="navbar navbar-expand-md navbar-custom fixed-top">
<div class="container-fluid py-3">
<a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div id="nav-icons">
<span></span><span></span><span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">I'm Interested</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pb-4">
<section class="topsec"> <h1>lorem, <br> lorem</h1>
</section>
</div>
<section class="restaurants-section px-5">
<div class="container-fluid">
<div class="row justify-content-between restaurants">
<div class="col-md-6 col-lg-6 restaurants-text">
<h3>lorem</h3>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="read-more" href="#">learn more</a>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>

The easiest fix would be to add some css to hide the navbar until the .pageloaded class is added to the body.
.navbar {
visibility: hidden;
}
.pageloaded .navbar {
visibility: visible;
}

Before answering to the question "why the header is showing", let's see why the rest of the body is not showing for the first 300ms.
It is because there is a element .spinner. Its width and height take up 100% of the page. Its position is set to fixed means the element is fixed at top 0 and left 0 (the upper-left corner) according to the CSS. More importantly is fixed position element break the normal document flow. Normally element are rendered top-to-bottom, left-to-right. .spinner being removed from document flow means the spinner was taken out and stick to the top left. Therefore the .spinner with 100% size take up the whole screen and showing the spinning bubble. There is another effect, the place originally occupied for .spinner will be remove and the main body it will be brought up. That means .spinner and the main body is not displayed one after one, but they are stacked together. .spinner being on top and cover the rest is because it has a z-index applied to it, which the value is 999.
Now back to the question, why header is showing. Because of bootstrap, .fixed-top has z-index: 1030, which greater than .spinner's 999. That's why it is on top of the spinner.
The solution you need is, to set the .spinner z-index any value greater than bootstrap's default.
.section-spinner {
/* ... */
z-index: 1050;
}
Example below.
$(window).on("load", function() {
$('.spinner').fadeOut(300);
$("body").addClass("pageloaded");
});
:root {
--primary-color:#0071ce;
--secondary-color:#ffffff;
}
body{
min-height: 100vh;
}
/* Navbar */
.navbar-custom .nav-link{
font-family: 'ProximaNova-Semibold', Courier, monospace;
text-transform: uppercase;
color: var(--primary-color);
display: block;
font-size: 1.2rem;
}
.navbar-custom{
padding: 25px;
padding-left: 25px;
}
.navbar-custom a:hover{
text-decoration: underline;
color: var(--primary-color);
}
#nav-icons {
width: 35px;
height: 45px;
position: relative;
margin: 6px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
cursor: pointer;
}
#nav-icons span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: blue;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
top: 0px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(2) {
top: 11px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons span:nth-child(3) {
top: 21px;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 10px;
left: 2px;
}
#nav-icons.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icons.open span:nth-child(3) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 10px;
left: 4px;
}
#media (max-width: 767.98px) {
.navbar-custom{
padding: 0px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-collapse{
display: block;
position: absolute;
width: 150vw;
height: 150vh;
left: 0;
top: 0;
background: rgba(255, 232, 73, 0.95);
z-index: 2;
}
#nav-icons{
z-index: 3;
}
.navbar-collapse .navbar-nav{
padding-top: 120px;
padding-left: 30px;
}
.navbar-collapse .navbar-nav {
-webkit-animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
animation: slide-in-top 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}
.navbar-collapse .navbar-nav li:nth-child(1) {
animation-delay: 0.1s;
}
.navbar-collapse .navbar-nav li:nth-child(2) {
animation-delay: 0.2s;
}
.navbar-collapse .navbar-nav li:nth-child(3) {
animation-delay: 0.3s;
}
}
/* top section */
.topsec{
position: relative;
padding-top: 165px;
}
.topsec h1{
font-family: ProximaNova-Extrabld;
font-size: 3rem;
text-transform: uppercase;
color: var(--primary-color);
line-height: 1;
max-width: 60rem;
margin: 0 auto;
text-align: left;
}
/* restaurants */
.restaurants-section{
background: url(https://www.eighty6.shop/themes/ristora/images/banner3.jpg) no-repeat;
background-size: cover;
background-position: top center;
padding: 10rem 0;
display: block;
width: 100%;
}
.restaurants-text{
padding-top: 100px;
}
.restaurants h3{
font-size: 40px;
font-family: "ProximaNova-Semibold",sans-serif;
color: #fff;
}
.restaurants p{
font-size: 1rem;
margin: 0rem 0 1rem;
line-height: 150%;
color: white;
}
.restaurants a{
display: inline-block;
padding: 5px 25px;
background: #0071ce;
color: #ffe800;
font-size: 20px;
font-family: "ProximaNova-Bold",sans-serif;
transition: all 0.3s;
text-decoration: none;
}
.restaurants a:hover{
background: #ffe800;
color: #0071ce;
transition: all 0.3s;
text-decoration: underline;
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes sk-three-bounce {
0%,
100%,
80% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sk-three-bounce {
margin: 40px auto;
width: 10rem;
text-align: center;
margin-top: 48vh;
}
.sk-three-bounce .sk-child {
width: 1.5rem;
height: 1.5rem;
background-color: #0071ce;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.24s;
animation-delay: -0.24s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
background-color: #0071ce;
}
.sk-three-bounce .sk-bounce4 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
background-color: #0071ce;
}
.section-spinner {
position: fixed;
height: 100%;
width: 100%;
background: #FFFFFF;
top: 0;
left: 0;
z-index: 1050;
}
.section-spinner * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/social and icons/favicon.ico" type="image/x-icon">
<title>|Welcome to my website </title>
<link rel="stylesheet" href="./css/style.css">
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="section-spinner spinner">
<div class="sk-three-bounce">
<div class="sk-child sk-bounce1"></div>
<div class="sk-child sk-bounce2"></div>
<div class="sk-child sk-bounce3"></div>
<div class="sk-child sk-bounce4"></div>
<div class="sk-child sk-bounce5"></div>
</div>
</section>
<header>
<nav class="navbar navbar-expand-md navbar-custom fixed-top">
<div class="container-fluid py-3">
<a class="navbar-brand" href="#"><img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/150_Google_logo_logos-512.png" width="78" height="100" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div id="nav-icons">
<span></span><span></span><span></span>
</div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">I'm Interested</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid pb-4">
<section class="topsec"> <h1>lorem, <br> lorem</h1>
</section>
</div>
<section class="restaurants-section px-5">
<div class="container-fluid">
<div class="row justify-content-between restaurants">
<div class="col-md-6 col-lg-6 restaurants-text">
<h3>lorem</h3>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="read-more" href="#">learn more</a>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="./js/script.js"></script>
</body>
</html>

My social media Icons aren't working when you click on them, even though they links

i'm trying to get clickable icons and they work but when I added some stuff they stopped working. When I click on them they do not do anything like they used too
I've tried switching up the CSS and HTML and rearranging it as well as removing some CSS but the icons still wont work when clicked.
HTML
<div id="star" class="video mask overlay"><canvas class="cover"></canvas></div>
<section id="home" class="home">
<script src="zzz/js/jquery.js"></script>
<script src="zzz/js/bootstrap.min.js"></script>
<script src="zzz/js/modernizr.custom.js"></script>
<script src="zzz/js/plugins.min.js"></script>
<script src="zzz/js/main.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
<body>
<div class="textglitch">
<a class="textglitch-link"><span>Elf</span></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="function.js"></script>
<div class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<a href="https://www.byron-bay.com/" target="_blank">
<img src="twitter.png" alt="aim" class="gg">
<div>
</a>
</body>
CSS
* {
margin:0;
padding:0;
outline:none;
list-style:none;
text-decoration:none;
box-sizing:border-box;
color:#000;
background: transparent;
border:none;
}
html, body {
height: 100%;
width: 100%;
margin-top: 10%;
}
body {
background: #111;
font-family: 'Roboto', sans-serif;
}
.textglitch {
position: relative;
text-align: center;
margin: 0 auto;
cursor: pointer;
z-index: 1;
font-size: 5vw;
font-weight: 700;
margin: 50px 0;
}
.textglitch .textglitch-link {
position: relative;
display: inline-block;
}
.textglitch-link span {
position: relative;
z-index: 2;
color: #fff;
}
.blur {
filter: blur(1px);
-webkit-filter: blur(1px);
}
.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
position: absolute;
top: 0px;
left: 0px;
content: attr(data-content);
visibility: hidden;
}
.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
visibility: visible;
}
.textglitch .textglitch-link:before {
color: rgba(255, 0, 188, 0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}
.textglitch .textglitch-link:after {
color: rgba(0,255,255,0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}
#keyframes textglitch {
0% {
-webkit-transform: translate(0);
transform: translate(0)
}
20% {
-webkit-transform: translate(-3px, 3px);
transform: translate(-3px, 3px)
}
40% {
-webkit-transform: translate(-3px, -3px);
transform: translate(-3px, -3px)
}
60% {
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px)
}
80% {
-webkit-transform: translate(3px, -3px);
transform: translate(3px, -3px)
}
to {
-webkit-transform: translate(0);
transform: translate(0)
}
}
.gg {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
div.gg {
margin: 0 auto;
width: 120em;
}
.cover{
background:none !important;
}
.cover,
.image,
.video,
.video-fallback {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I wanted it to be when I clicked it it would open a new tab and go to the page.
The added
I've added the But it is still unclickable.
doesn't work

You need to do this:
<img src="source"/>
Basically you need to enclose the image within the tags!

bootstrap gallery modal not working

I am having trouble with this basic image gallery and bootstrap, I thought I did the modal correctly, but nothing happens when I click and I want it to toggle in and out with touch or click.
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/564203131a.js"></script>
</head>
<body>
<div class="container gal-container">
<div class="col-md-8 col-sm-12 co-xs-12 gal-item">
<div class="box">
<a href="#modalID" data-toggle="modal">
<img src="https://www.aussiespecialist.com/content/asp/en_gb/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg">
</a>
<div class="modal fade" id="1" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-body">
<img src="https://www.aussiespecialist.com/content/asp/en_gb/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg">
</div>
<div class="col-md-12 description">
<h4>This is the first image in my Gallery</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
and my css
.gal-container{padding: 12px;}
.gal-item{overflow: hidden; padding: 3px;}
.gal-item .box{height: 350px; overflow: hidden;}
.box img{height: 100%; width: 100%; object-fit:cover; -o-object fit:cover;}
.gal-item a:focus{outline: none;}
.gal-item a:after{content:"\e003"; font-family: 'Glyphicons Halflings'; opacity: 0; background-color: rgba(0, 0, 0, 0.75); position: absolute; right: 3px; left: 3px; top: 3px; bottom: 3px; text-align: center; line-height: 350px; font-size: 30px; color: #fff; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;}
.gal-item a:hover:after{opacity: 1;}
.modal-open .gal-container .modal{ background-color: rgba(0,0,0,0.4);}
.modal-open .gal-item .modal-body{padding: 0px;}
.modal-open .gal-item button.close{position: absolute; width: 25px; height: 25px; background-color: #000; opacity: 1; color: #fff; z-index: 999; right: -12px; top: -12px; border-radius: 50%; font-size: 15px; border: 2px solid #fff; line-height: 25px; -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.35); box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);}
.modal-open .gal-item button.close:focus{outline: none;}
.modal-open .gal-item button.close span{ position: relative; top: -3px; font-weight: lighter; text-shadow:none;}
.gal-container .modal-dialogue{width: 80%;}
.gal-container .description{ position: relative; height: 40px; top: -40px; padding: 10px 25px; background-color: rgba(0,0,0,0.5); color: #fff; text-align: left;}
.gal-container .description h4{ margin:0px; font-size: 15px; font-weight: 300; line-height: 20px;}
.gal-container .modal.fade .modal-dialog { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); top: 100px; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.gal-container .modal.fade.in .modal-dialog { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); opacity: 1;}
I haven't any JS for it, since I have been trying and trying but still nothing is making it toggle to a modal window and back

In your above code,
There is no Id like #modalID,
Please use this fiddle
<div class="modal fade" id="modalID" tabindex="-1" role="dialog">
Your code missing closing > in that script tag also.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
Please check.

Mysterious gap/padding in OwlCarousel grid gallery

I am trying to figure out why there is a strange gap/margin at the bottom of each row section in this portfolio grid gallery running in OwlCarousel, see example at http://www.samnorris.net/pfwip2/index.html
I have damn near pulled my hair out already trying to debug the problem in developer tools, and been over the relevant CSS thoroughly but have been unable to figure out what is causing this unwanted padding/margin. Would really appreciate any assistance anyone might be able to offer to help me fix this. :)
I believe it my be something to do with #work .item .rollover, but I am not sure what exactly....
Here is all relevant (as far as I know) code:
///////////////////////////////////////////////////////////////////////////
// Work slider
///////////////////////////////////////////////////////////////////////////
var $workslider = $("#workslider");
if($workslider.length){
$workslider.owlCarousel({
loop : true,
autoplay: true,
autoplayTimeout: 4000,
nav : false,
dots : false,
items : 11,
transitionStyle : "fade"
});
}
/* ==========================================================================
WORK
========================================================================== */
#work.paddingstandard {
padding-bottom: 0px !important;
}
/* ---- isotope grid---- */
#portfoliogrid .item {
width: 20%;
float: left;
cursor: pointer;
overflow: hidden;
padding-bottom: 0px !important;
}
#portfoliogrid .item.width2 {
width: 40%;
}
#portfoliogrid img {
width: 100%
}
/* Item rollover */
#work .item .rollover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 15px;
text-align: center;
}
#work .item .rollover:before {
content: "";
position: absolute;
height: 50%;
width: 50%;
left: 25%;
top: 26%;
opacity: 0;
margin-top: 40px;
transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
transform: rotateZ(-45deg);
-webkit-transition: all 0.3s 0.5s, opacity 0.3s 0.8s, margin-top 0.3s 0.8s;
-webkit-transform: rotateZ(-45deg);
}
#work .item.width2 .rollover:before {
width: 25%;
left: 38%;
}
#work .item .rollover .centerContainer {
opacity: 0;
height: 100%;
transition: all 0.3s 0.1s;
transform: rotateZ(-5deg);
-webkit-transition: all 0.3s 0.1s;
-webkit-transform: rotateZ(-5deg);
}
#work .item .rollover .centerContainer a {
font-family: "Montserrat";
font-size: 1.250rem;
font-weight: bold;
letter-spacing: -2px;
color: #FFFFFF;
display: block;
text-transform: uppercase;
text-decoration: none !important;
}
#work .item .rollover .centerContainer .title {
font-size: 2.8rem;
line-height: 2.8rem;
margin-bottom: 15px;
}
#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before {
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
opacity: 1;
margin-top: 0px;
transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
transform: rotateZ(0deg);
-webkit-transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
-webkit-transform: rotateZ(0deg);
}
#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer {
opacity: 1;
transition: all 0.3s 0.6s;
transform: rotateZ(0deg);
-webkit-transition: all 0.3s 0.6s;
-webkit-transform: rotateZ(0deg);
}
/* WORK OPEN ANIMATION */
#keyframes turn {
0% {
transform: rotate(45deg);
}
15% {
transform: rotate(135deg);
}
25% {
transform: rotate(135deg);
}
40% {
transform: rotate(225deg);
}
50% {
transform: rotate(225deg);
}
65% {
transform: rotate(315deg);
}
75% {
transform: rotate(315deg);
}
90% {
transform: rotate(405deg);
}
100% {
transform: rotate(405deg);
}
}
#workLoader {
position: absolute;
z-index: 10000;
-webkit-transition: all 0.8s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
#workLoader .iconloader {
position: relative;
z-index: 20;
display: block;
margin: 0 auto;
width: 30px;
height: 100%;
width: 100%;
}
#workLoader .iconloader:after {
content: "";
width: 50%;
height: 50%;
position: absolute;
top: 25%;
left: 25%;
border: 4px solid #FFFFFF;
transform: rotateZ(45deg);
animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
-webkit-transform: rotateZ(45deg);
-webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
-ms-transform: rotate(45deg);
}
#workLoader.width2 .iconloader:after {
width: 25%;
left: 38%;
}
#workLoader .front, #workLoader .back {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#workLoader .front {
text-align: center;
}
#workLoader .front img {
width: 100%;
opacity: 0.2;
}
#workLoader .back {
background-color: rgba(20, 20, 20, .95);
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
#workLoader .back #wrkclosebtn {
position: fixed;
top: 10px;
right: 20px;
}
#workLoader .back .fa-times {
font-size: 2rem;
cursor: pointer;
color: #5f5f5f
}
#workLoader .back .fa-times:hover {
color: #FFFFFF
}
.scale100 {
width: 100% !important;
height: 100% !important;
left: 0 !important;
transform: perspective(1000px) rotateX(-180deg);
-webkit-transform: perspective(1000px) rotateX(-180deg);
}
#workdetailcontainer.darkBackground {
padding-top: 40px;
}
/* FIX IE 9/10/11 */
.IE #workLoader {
transition: all .8s !important;
transform: none;
}
.IE #workLoader .front, .IE #workLoader .back {
transition: all .8s !important;
}
.IE #workLoader .back {
transform: perspective(1000px) rotateX(180deg) !important;
}
.IE #wrkclosebtn {
display: none;
}
.IE .scale100 #wrkclosebtn {
display: inline;
}
.IE .scale100 {
transition: none !important;
transform: rotateX(0deg) !important;
}
.IE #workLoader.scale100 .back {
transform: perspective(1000px) rotateX(0deg) !important;
z-index: 10;
}
.IE #workLoader.scale100 .front {
transform: perspective(1000px) rotateX(-180deg) !important;
}
.IE9 #workLoader {
background-color: green;
opacity: 0;
}
/* ==========================================================================
WORK DETAILS
========================================================================== */
#workdetail {
padding: 40px 0;
}
#workdetail h1 {
color: #FFFFFF;
line-height: 4rem;
margin-bottom: 35px;
margin-top: 0px;
font-size: 4rem;
text-align: left;
}
#workdetail #detailImg img {
width: 100%;
}
#workdetail .workDouble #detailImg {
margin-bottom: 35px;
}
#workdetail p, #workdetail #details span {
color: #FFFFFF;
}
#workdetail #details {
margin-bottom: 35px;
font-size: 0.9rem;
}
#workdetail #details span {
font-family: 'Montserrat';
}
#workdetail #details li {
color: #CCC;
margin-bottom: 5px;
}
#workdetail .button.tint:hover {
color: #141414;
background-color: #FFFFFF;
}
/* ==========================================================================
ISOTOPE FILTERS GENERAL
========================================================================== */
.isotopeFilter {
margin-bottom: 30px;
}
.isotopeFilter a {
font-size: 1.250rem;
}
.isotopeFilter .is-checked {
color: red;
}
<!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
Work section
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<section id="work" class="paddingstandard">
<div class="container">
<h2 class="appear" data-animation="translatefrombottom">WORK</h2>
<!-- Description -->
<p class="aligncenter appear">Pellentesque erat velit, pretium vitae dui tempor, scelerisque posuere mi. Etiam fringilla scelerisque nulla volutpat vehicula. Donec tempus ut diam ac pharetra. Quisque quis odio convallis, imperdiet purus dignissim, tempor urna. Curabitur ut nisl nec orci scelerisque vehicula vitae eu nunc.</p>
<!-- Isotope Filter -->
<nav id="portfolionav" class="isotopeFilter aligncenter appear">
ALL
<a href="#" data-filter-value=".graphic" >GRAPHIC</a>
IMAGE SLIDERS
VIDEO
</nav>
</div>
<div id="portfoliogrid">
<!-- Begin item -->
<div class="item width2 graphic">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-1.html">CREATIVITY SPLASH</a>
VIEW DETAILS
</div>
</div>
</div>
<!-- Item Image -->
<img src="img/work/work-double-1.jpg" alt="Portfolio" />
</div>
<!-- End item -->
<div class="item manager" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-2.html">IRRIGATE YOUR MIND</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-1.jpg" alt="Portfolio" />
</div>
<div class="item graphic" data-url="article.html">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-3.html">DOMOTIC</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-2.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-4.html">JOURNEY TO THE LAND OF TEA</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-3.jpg" alt="Portfolio" />
</div>
<div class="item graphic" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-5.html">FUTURE OF COMMERCE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-4.jpg" alt="Portfolio" />
</div>
<div class="item manager" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-6.html">CORPORATE DESIGN</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-5.jpg" alt="Portfolio" />
</div>
<div class="item graphic" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-7.html">PHOTO STUDIO</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-6.jpg" alt="Portfolio" />
</div>
<div class="item width2 slider" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-8.html">LOOKING FOR AWESOME IDEAS</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-double-2.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-9.html">APP MARKET</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-7.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-10.html">DATA STORAGE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-8.jpg" alt="Portfolio" />
</div>
<div class="item width2 video">
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-11.html">VIDEO TIMELAPSE</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-double-3.jpg" alt="Portfolio" />
</div>
<div class="item developer" >
<div class="rollover">
<div class="centerContainer hidden-xs">
<div>
<a class="title" href="work-detail-12.html">CLEAN DESIGN</a>
VIEW DETAILS
</div>
</div>
</div>
<img src="img/work/work-single-9.jpg" alt="Portfolio" />
</div>
</div><!-- end "portfoliogrid"-->
</section>

That space is caused by white-space in your html code. You can remove it by applying either...
display:block;
... or...
float:left;
height: auto;
to #portfoliogrid img declaration, on style.css:4218.
I personally prefer the second solution.
As a side-note, you should take a quick look at your console. A library/plugin called glitch seems to output a few errors. I've tested in Chrome and Firefox.

All the DIVs with class .item are absolutely positioned and have a fixed top position which causes this offset.
But all those styles are inline - inside their DIV tags. Apparently (since it's responsive) these settings are assigned dynamically by a script. At smaller widths it works, but on a large screen there's a flaw in the script which causes these few pixels offset. (i.e. seems like there is a little bug in that script)