1155 lines
31 KiB
HTML
1155 lines
31 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required meta tags -->
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="icon" type="image/x-icon" href="assets/img/love.svg">
|
||
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
|
||
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" />
|
||
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css" />
|
||
<link rel="stylesheet" href="assets/css/style.css" />
|
||
<link rel="stylesheet" href="assets/css/responsive.css" />
|
||
<title>Home</title>
|
||
<script src="assets/js/page_reveal.js"></script>
|
||
|
||
<style>
|
||
.services_module {
|
||
padding: 140px 0 140px;
|
||
background: #000;
|
||
overflow: hidden;
|
||
margin-top: -10px;
|
||
}
|
||
|
||
.services_module .container {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.services_module .wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.services_module .kakodelamo-title {
|
||
text-align: left !important;
|
||
margin-bottom: 80px !important;
|
||
}
|
||
|
||
.services_module .wrapper .single-service {
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.services_module .wrapper .single-service::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 5;
|
||
}
|
||
|
||
.services_module .wrapper .single-service .service-img,
|
||
.services_module .wrapper .single-service .service-video,
|
||
.services_module .wrapper .single-service .service-video-wrap {
|
||
position: absolute;
|
||
|
||
right: 0;
|
||
left: auto;
|
||
|
||
top: 50%;
|
||
|
||
width: 38vw;
|
||
max-width: 620px;
|
||
|
||
height: 28vw;
|
||
max-height: 420px;
|
||
|
||
border-radius: 0;
|
||
|
||
opacity: 0;
|
||
|
||
transform: translateY(-50%) scale(.98);
|
||
|
||
pointer-events: none;
|
||
|
||
transition:
|
||
opacity 300ms ease,
|
||
transform 500ms cubic-bezier(.22,1,.36,1);
|
||
|
||
z-index: 1;
|
||
|
||
overflow: hidden;
|
||
}
|
||
|
||
.services_module .wrapper .single-service .service-img,
|
||
.services_module .wrapper .single-service .service-video {
|
||
object-fit: cover;
|
||
}
|
||
|
||
.services_module .wrapper .single-service .service-video-wrap {
|
||
background: #000;
|
||
}
|
||
|
||
.services_module .wrapper .single-service .service-video-embed {
|
||
position: absolute;
|
||
|
||
top: 50%;
|
||
left: 50%;
|
||
|
||
width: 177.78%;
|
||
height: 100%;
|
||
|
||
min-width: 100%;
|
||
min-height: 100%;
|
||
|
||
border: 0;
|
||
display: block;
|
||
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.services_module .wrapper .single-service:nth-child(2) .service-img,
|
||
.services_module .wrapper .single-service:nth-child(2) .service-video,
|
||
.services_module .wrapper .single-service:nth-child(2) .service-video-wrap {
|
||
top: 60px;
|
||
transform: translateY(0) scale(.98);
|
||
}
|
||
|
||
.services_module .wrapper .single-service:nth-child(3) .service-img,
|
||
.services_module .wrapper .single-service:nth-child(3) .service-video,
|
||
.services_module .wrapper .single-service:nth-child(3) .service-video-wrap {
|
||
top: -20px;
|
||
transform: translateY(0) scale(.98);
|
||
}
|
||
|
||
.services_module .wrapper .single-service:nth-child(4) .service-img,
|
||
.services_module .wrapper .single-service:nth-child(4) .service-video,
|
||
.services_module .wrapper .single-service:nth-child(4) .service-video-wrap {
|
||
top: -100px;
|
||
transform: translateY(0) scale(.98);
|
||
}
|
||
|
||
.services_module .wrapper .single-service:nth-last-child(3) .service-img,
|
||
.services_module .wrapper .single-service:nth-last-child(3) .service-video,
|
||
.services_module .wrapper .single-service:nth-last-child(3) .service-video-wrap {
|
||
top: auto;
|
||
bottom: -140px;
|
||
transform: translateY(0) scale(.98);
|
||
}
|
||
|
||
.services_module .wrapper .single-service:nth-last-child(2) .service-img,
|
||
.services_module .wrapper .single-service:nth-last-child(2) .service-video,
|
||
.services_module .wrapper .single-service:nth-last-child(2) .service-video-wrap {
|
||
top: auto;
|
||
bottom: -70px;
|
||
transform: translateY(0) scale(.98);
|
||
}
|
||
|
||
.services_module .wrapper .single-service:nth-last-child(1) .service-img,
|
||
.services_module .wrapper .single-service:nth-last-child(1) .service-video,
|
||
.services_module .wrapper .single-service:nth-last-child(1) .service-video-wrap {
|
||
top: auto;
|
||
bottom: 0;
|
||
transform: translateY(0) scale(.98);
|
||
}
|
||
|
||
.services_module .wrapper .single-service .service-name {
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
display: block;
|
||
width: fit-content;
|
||
|
||
margin: 0;
|
||
|
||
padding-left: 0;
|
||
padding-right: 42vw;
|
||
|
||
font-family: 'Aktiv-Grotesk-Ex';
|
||
|
||
font-size: clamp(52px, 6.8vw, 150px);
|
||
|
||
line-height: 1;
|
||
|
||
color: #F5F5F5;
|
||
|
||
transition:
|
||
color 300ms ease,
|
||
transform 500ms cubic-bezier(.22,1,.36,1);
|
||
|
||
will-change: transform;
|
||
|
||
pointer-events: none;
|
||
}
|
||
|
||
.services_module .wrapper .single-service:hover .service-name {
|
||
color: #4050FF;
|
||
transform: translateX(70px);
|
||
}
|
||
|
||
.services_module .wrapper .single-service:hover .service-img,
|
||
.services_module .wrapper .single-service:hover .service-video,
|
||
.services_module .wrapper .single-service:hover .service-video-wrap {
|
||
opacity: 1;
|
||
transform: translateY(-50%) scale(1);
|
||
}
|
||
|
||
.services_module .wrapper .single-service:nth-child(2):hover .service-img,
|
||
.services_module .wrapper .single-service:nth-child(2):hover .service-video,
|
||
.services_module .wrapper .single-service:nth-child(2):hover .service-video-wrap,
|
||
.services_module .wrapper .single-service:nth-child(3):hover .service-img,
|
||
.services_module .wrapper .single-service:nth-child(3):hover .service-video,
|
||
.services_module .wrapper .single-service:nth-child(3):hover .service-video-wrap,
|
||
.services_module .wrapper .single-service:nth-child(4):hover .service-img,
|
||
.services_module .wrapper .single-service:nth-child(4):hover .service-video,
|
||
.services_module .wrapper .single-service:nth-child(4):hover .service-video-wrap,
|
||
.services_module .wrapper .single-service:nth-last-child(3):hover .service-img,
|
||
.services_module .wrapper .single-service:nth-last-child(3):hover .service-video,
|
||
.services_module .wrapper .single-service:nth-last-child(3):hover .service-video-wrap,
|
||
.services_module .wrapper .single-service:nth-last-child(2):hover .service-img,
|
||
.services_module .wrapper .single-service:nth-last-child(2):hover .service-video,
|
||
.services_module .wrapper .single-service:nth-last-child(2):hover .service-video-wrap,
|
||
.services_module .wrapper .single-service:nth-last-child(1):hover .service-img,
|
||
.services_module .wrapper .single-service:nth-last-child(1):hover .service-video,
|
||
.services_module .wrapper .single-service:nth-last-child(1):hover .service-video-wrap {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
|
||
.services_module {
|
||
padding: 40px 0 50px;
|
||
}
|
||
|
||
.services_module .container {
|
||
}
|
||
|
||
.services_module .wrapper {
|
||
position: static;
|
||
}
|
||
|
||
.services_module .kakodelamo-title {
|
||
margin-bottom: 40px !important;
|
||
}
|
||
|
||
.services_module .wrapper .single-service {
|
||
position: static;
|
||
}
|
||
|
||
.services_module .wrapper .single-service::before {
|
||
display: none;
|
||
}
|
||
|
||
.services_module .wrapper .single-service .service-name {
|
||
padding-right: 0;
|
||
|
||
font-size: clamp(42px, 11vw, 72px);
|
||
|
||
line-height: 1.05;
|
||
|
||
color: #F5F5F5;
|
||
|
||
transform: none !important;
|
||
}
|
||
|
||
.services_module .wrapper .single-service .service-img,
|
||
.services_module .wrapper .single-service .service-video,
|
||
.services_module .wrapper .single-service .service-video-wrap {
|
||
position: fixed;
|
||
|
||
right: 15px;
|
||
bottom: 24px !important;
|
||
|
||
left: auto;
|
||
top: auto !important;
|
||
|
||
width: 220px;
|
||
height: 170px;
|
||
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
|
||
transform: scale(.96) !important;
|
||
|
||
z-index: 40;
|
||
}
|
||
|
||
.services_module .wrapper .single-service.active .service-name {
|
||
color: #4050FF;
|
||
}
|
||
|
||
.services_module .wrapper .single-service.active .service-img,
|
||
.services_module .wrapper .single-service.active .service-video,
|
||
.services_module .wrapper .single-service.active .service-video-wrap {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
|
||
transform: scale(1) !important;
|
||
}
|
||
|
||
.services_module .wrapper .single-service:hover .service-name {
|
||
color: #F5F5F5;
|
||
transform: none;
|
||
}
|
||
|
||
.services_module .wrapper .single-service:hover .service-img,
|
||
.services_module .wrapper .single-service:hover .service-video,
|
||
.services_module .wrapper .single-service:hover .service-video-wrap {
|
||
opacity: 0;
|
||
}
|
||
|
||
.services_module .wrapper .single-service.active:hover .service-name {
|
||
color: #4050FF;
|
||
}
|
||
|
||
.services_module .wrapper .single-service.active:hover .service-img,
|
||
.services_module .wrapper .single-service.active:hover .service-video,
|
||
.services_module .wrapper .single-service.active:hover .service-video-wrap {
|
||
opacity: 1;
|
||
}
|
||
|
||
}
|
||
</style>
|
||
|
||
|
||
<script>
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
|
||
const sections = document.querySelectorAll(".services_module");
|
||
|
||
if (!sections.length) return;
|
||
|
||
document.querySelectorAll(".service-video-embed").forEach(function (iframe) {
|
||
|
||
const src = iframe.getAttribute("src");
|
||
|
||
if (!src) return;
|
||
|
||
const preconnect = document.createElement("link");
|
||
preconnect.rel = "preconnect";
|
||
preconnect.href = "https://iframe.mediadelivery.net";
|
||
|
||
document.head.appendChild(preconnect);
|
||
|
||
});
|
||
|
||
let lastScrollY = window.scrollY;
|
||
|
||
function isMobile() {
|
||
return window.innerWidth <= 768;
|
||
}
|
||
|
||
function playVideo(video) {
|
||
|
||
if (!video) return;
|
||
|
||
if (video.tagName.toLowerCase() === "iframe") return;
|
||
|
||
video.play().catch(function () {});
|
||
|
||
}
|
||
|
||
function stopVideo(video) {
|
||
|
||
if (!video) return;
|
||
|
||
if (video.tagName.toLowerCase() === "iframe") return;
|
||
|
||
video.pause();
|
||
|
||
try {
|
||
video.currentTime = 0;
|
||
} catch (e) {}
|
||
|
||
}
|
||
|
||
sections.forEach(function (section) {
|
||
|
||
const services = Array.from(
|
||
section.querySelectorAll(".single-service")
|
||
);
|
||
|
||
if (!services.length) return;
|
||
|
||
services.forEach(function (service) {
|
||
|
||
const video = service.querySelector(".service-video");
|
||
|
||
service.addEventListener("mouseenter", function () {
|
||
|
||
if (isMobile()) return;
|
||
|
||
playVideo(video);
|
||
|
||
});
|
||
|
||
service.addEventListener("mouseleave", function () {
|
||
|
||
if (isMobile()) return;
|
||
|
||
stopVideo(video);
|
||
|
||
});
|
||
|
||
service.addEventListener("click", function () {
|
||
|
||
const url = service.dataset.url;
|
||
|
||
if (!url) return;
|
||
|
||
window.location.href = url;
|
||
|
||
});
|
||
|
||
});
|
||
|
||
function clearActive() {
|
||
|
||
services.forEach(function (service) {
|
||
|
||
service.classList.remove("active");
|
||
|
||
stopVideo(
|
||
service.querySelector(".service-video")
|
||
);
|
||
|
||
});
|
||
|
||
}
|
||
|
||
function setActiveService() {
|
||
|
||
if (!isMobile()) {
|
||
|
||
clearActive();
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
const sectionRect =
|
||
section.getBoundingClientRect();
|
||
|
||
const viewportCenter =
|
||
window.innerHeight / 2;
|
||
|
||
const sectionCenter =
|
||
sectionRect.top + sectionRect.height / 2;
|
||
|
||
const distanceFromCenter =
|
||
Math.abs(sectionCenter - viewportCenter);
|
||
|
||
const activationDistance =
|
||
sectionRect.height * 0.5;
|
||
|
||
const sectionVisible =
|
||
distanceFromCenter < activationDistance;
|
||
|
||
if (!sectionVisible) {
|
||
|
||
clearActive();
|
||
|
||
return;
|
||
|
||
}
|
||
|
||
let activeService = null;
|
||
let closestDistance = Infinity;
|
||
|
||
const triggerPoint =
|
||
window.innerHeight * 0.45;
|
||
|
||
services.forEach(function (service) {
|
||
|
||
const rect =
|
||
service.getBoundingClientRect();
|
||
|
||
const serviceCenter =
|
||
rect.top + rect.height / 2;
|
||
|
||
const distance = Math.abs(
|
||
serviceCenter - triggerPoint
|
||
);
|
||
|
||
if (distance < closestDistance) {
|
||
|
||
closestDistance = distance;
|
||
activeService = service;
|
||
|
||
}
|
||
|
||
});
|
||
|
||
services.forEach(function (service) {
|
||
|
||
const shouldBeActive =
|
||
service === activeService;
|
||
|
||
if (
|
||
shouldBeActive &&
|
||
!service.classList.contains("active")
|
||
) {
|
||
|
||
clearActive();
|
||
|
||
service.classList.add("active");
|
||
|
||
playVideo(
|
||
service.querySelector(".service-video")
|
||
);
|
||
|
||
}
|
||
|
||
if (!shouldBeActive) {
|
||
|
||
service.classList.remove("active");
|
||
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
window.addEventListener(
|
||
"scroll",
|
||
setActiveService,
|
||
{ passive: true }
|
||
);
|
||
|
||
window.addEventListener(
|
||
"resize",
|
||
setActiveService
|
||
);
|
||
|
||
setActiveService();
|
||
|
||
});
|
||
|
||
window.addEventListener("scroll", function () {
|
||
|
||
const currentScrollY =
|
||
window.scrollY;
|
||
|
||
if (currentScrollY < lastScrollY) {
|
||
|
||
document.body.classList.add(
|
||
"scroll-up"
|
||
);
|
||
|
||
} else {
|
||
|
||
document.body.classList.remove(
|
||
"scroll-up"
|
||
);
|
||
|
||
}
|
||
|
||
lastScrollY = currentScrollY;
|
||
|
||
}, { passive: true });
|
||
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page-reveal"></div>
|
||
<!------ Header Area Start ----->
|
||
<header class="header">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<nav class="header-wrapper nav-desktop">
|
||
<a href="index.html">Home</a>
|
||
<a href="work.html">Work</a>
|
||
<div class="site-logo">
|
||
<a href="index.html"><img src="assets/img/logo.svg" alt=""></a>
|
||
</div>
|
||
<a href="about.html">About</a>
|
||
<a href="contact.html">Contact</a>
|
||
</nav>
|
||
|
||
<!-- Mobile Menu -->
|
||
<div class="mobile-nav">
|
||
<div class="love-sm">
|
||
<a href="#"><img src="assets/img/logo.svg" alt=""></a>
|
||
</div>
|
||
<div class="logo-sm">
|
||
<a href="index.html"><img src="assets/img/logo.svg" alt=""></a>
|
||
</div>
|
||
<div class="menu-trigger">
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
<!-- Mobile Menu -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!------ Header Area End ----->
|
||
|
||
|
||
|
||
<!------ Slide Mobile Menu Area Start ----->
|
||
<div class="slide-menu">
|
||
|
||
<div class="slide-menu-logo">
|
||
<a href="index.html">
|
||
<img src="assets/img/logo.svg" alt="">
|
||
</a>
|
||
</div>
|
||
|
||
<div class="menu-close">
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
<div class="menu_item">
|
||
<ul>
|
||
<li class="active"><a href="index.html">Home</a></li>
|
||
<li><a href="work.html">Portfolio</a></li>
|
||
<li><a href="about.html">Studio</a></li>
|
||
|
||
<li><a href="contact.html">Get in Touch</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="info-bottom">
|
||
<span>En</span>
|
||
<img src="assets/img/love.svg" alt="">
|
||
<span>Sl</span>
|
||
</div>
|
||
</div>
|
||
<!------ Slide Mobile Menu Area End ----->
|
||
|
||
|
||
<!------ Hero Area Start ----->
|
||
|
||
<!------ Hero Area End ----->
|
||
|
||
|
||
|
||
<section class="about-area_home">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12 text-center">
|
||
<div class="about-title-wrap5">
|
||
<h1>Strateško-kreativni studio za <span
|
||
class="pink-text2 hero-rotating-word-pink"
|
||
data-words="znamke,vizije la la,zgodbe,identitete">
|
||
</span>, ki ne želijo biti povprečne.</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!------ Showcase Area Start ----->
|
||
|
||
|
||
|
||
|
||
|
||
<section class="showcase-area">
|
||
|
||
<div class="portfolio-slider-wrap">
|
||
<div class="portfolio-slider">
|
||
|
||
<a href="#" class="portfolio-slide klasik-sirina">
|
||
<img src="assets/img/show-1.jpg" alt="">
|
||
<span class="portfolio-slide-link">Golden Drum 2025</span>
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide ozki-sirina">
|
||
<img src="assets/img/show-2.jpg" alt="">
|
||
<span class="portfolio-slide-link">Golden Drum 2025</span>
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide klasik-sirina">
|
||
|
||
<div class="portfolio-video-embed">
|
||
<iframe
|
||
tabindex="-1"
|
||
src="https://player.mediadelivery.net/embed/641915/946cd284-5122-47b9-8817-831463b78829?autoplay=true&loop=true&muted=true&preload=true&responsive=true&controls=false"
|
||
loading="lazy"
|
||
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
|
||
<span class="portfolio-slide-link">
|
||
Golden Drum 2025
|
||
</span>
|
||
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide ozki-sirina">
|
||
<img src="assets/img/show-4.jpg" alt="">
|
||
<span class="portfolio-slide-link">Golden Drum 2025</span>
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide klasik-sirina">
|
||
<img src="assets/img/show-5.jpg" alt="">
|
||
<span class="portfolio-slide-link">Golden Drum 2025</span>
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide klasik-sirina">
|
||
|
||
<div class="portfolio-video-embed">
|
||
<iframe
|
||
tabindex="-1"
|
||
src="https://player.mediadelivery.net/embed/641915/946cd284-5122-47b9-8817-831463b78829?autoplay=true&loop=true&muted=true&preload=true&responsive=true&controls=false"
|
||
loading="lazy"
|
||
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
|
||
<span class="portfolio-slide-link">
|
||
Golden Drum 2025
|
||
</span>
|
||
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide ozki-sirina">
|
||
<img src="assets/img/show-4.jpg" alt="">
|
||
<span class="portfolio-slide-link">Golden Drum 2025</span>
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide klasik-sirina">
|
||
<img src="assets/img/show-5.jpg" alt="">
|
||
<span class="portfolio-slide-link">Golden Drum 2025</span>
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide klasik-sirina">
|
||
|
||
<div class="portfolio-video-embed">
|
||
<iframe
|
||
tabindex="-1"
|
||
src="https://player.mediadelivery.net/embed/641915/946cd284-5122-47b9-8817-831463b78829?autoplay=true&loop=true&muted=true&preload=true&responsive=true&controls=false"
|
||
loading="lazy"
|
||
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
|
||
<span class="portfolio-slide-link">
|
||
Golden Drum 2025
|
||
</span>
|
||
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide ozki-sirina">
|
||
<img src="assets/img/show-4.jpg" alt="">
|
||
<span class="portfolio-slide-link">Golden Drum 2025</span>
|
||
</a>
|
||
|
||
<a href="#" class="portfolio-slide klasik-sirina">
|
||
<img src="assets/img/show-5.jpg" alt="">
|
||
<span class="portfolio-slide-link">Golden Drum 2025</span>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
<!------ Showcase Area End ----->
|
||
|
||
|
||
<!------ Opis storitev - new ----->
|
||
|
||
|
||
|
||
|
||
|
||
<section class="services_module" data-method="servicesScrollControl">
|
||
<div class="container">
|
||
<div class="wrapper">
|
||
|
||
<div class="kakodelamo-title">
|
||
Ne delamo vsega.<br>
|
||
Zato se lahko bolj poglobimo v tisto, kar delamo najbolje.
|
||
</div>
|
||
|
||
<div class="single-service non-video-parent" data-url="https://www.google.com">
|
||
<img class="service-img" src="assets/img/portfolio-1.jpg" alt="">
|
||
<h2 class="a4 service-name">Strategije</h2>
|
||
</div>
|
||
|
||
<div class="single-service non-video-parent" data-url="/znamcenje/">
|
||
|
||
<div class="service-video-wrap">
|
||
|
||
<iframe
|
||
class="service-video-embed"
|
||
src="https://player.mediadelivery.net/embed/641915/946cd284-5122-47b9-8817-831463b78829?autoplay=true&loop=true&muted=true&preload=true&responsive=true&controls=false"
|
||
loading="eager"
|
||
allow="autoplay; fullscreen"
|
||
allowfullscreen
|
||
></iframe>
|
||
|
||
</div>
|
||
|
||
<h2 class="a4 service-name">Znamčenje</h2>
|
||
|
||
</div>
|
||
|
||
<div class="single-service non-video-parent" data-url="/identitete/">
|
||
<img class="service-img" src="assets/img/portfolio-3.jpg" alt="">
|
||
<h2 class="a4 service-name">Identitete</h2>
|
||
</div>
|
||
|
||
<div class="single-service non-video-parent" data-url="/komunikacije/">
|
||
<img class="service-img" src="assets/img/portfolio-4.jpg" alt="">
|
||
<h2 class="a4 service-name">Komunikacije</h2>
|
||
</div>
|
||
|
||
<div class="single-service non-video-parent" data-url="/embalaze/">
|
||
<img class="service-img" src="assets/img/portfolio-5.jpg" alt="">
|
||
<h2 class="a4 service-name">Embalaže</h2>
|
||
</div>
|
||
|
||
<div class="single-service non-video-parent" data-url="/oblikovanje/">
|
||
<img class="service-img" src="assets/img/show-1.jpg" alt="">
|
||
<h2 class="a4 service-name">Oblikovanje</h2>
|
||
</div>
|
||
|
||
<div class="single-service non-video-parent" data-url="/digital/">
|
||
<img class="service-img" src="assets/img/show-2.jpg" alt="">
|
||
<h2 class="a4 service-name">Digital</h2>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
<!------ Opis storitev - END ----->
|
||
|
||
|
||
|
||
<!------ video ----->
|
||
<section class="hero-area">
|
||
<div class="video-hero">
|
||
<div class="hero-video">
|
||
<iframe
|
||
src="https://player.mediadelivery.net/embed/641915/946cd284-5122-47b9-8817-831463b78829?autoplay=true&loop=true&muted=true&preload=true&responsive=true&controls=false"
|
||
loading="eager"
|
||
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
|
||
allowfullscreen
|
||
tabindex="-1">
|
||
</iframe>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="lets-talk-btn">Let’s talk</a>
|
||
<div class="language-action">
|
||
<ul>
|
||
<li class="active">
|
||
<a href="https://google.com">EN</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://youtube.com">SL</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!------ kako delamo ----->
|
||
<section class="working-together-area4">
|
||
<div class="container">
|
||
<div class="row align-items-end">
|
||
<div class="kakodelamo-title">Kako delamo</div>
|
||
<div class="col-lg-12">
|
||
<div class="together-content together-content3">
|
||
<h2>Navdih brez temeljev hitro zbledi, temelji brez navdiha pa nič ne premaknejo. Zato vedno združimo oboje.</h2>
|
||
<div class="kakodelamo-opis kakodelamo-opis5"><a href="#" class="common-btn">Več o nas <span><img src="assets/img/arrow_white3.svg" alt=""></span></a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-12">
|
||
<div class="together-content2">
|
||
<h2>Navijamo za ambiciozne ekipe. Za tiste, ki čutijo, da njihova znamka zmore več.</h2>
|
||
<div class="kakodelamo-opis2 kakodelamo-opis5"><a href="#" class="common-btn">Pišite nam <span><img src="assets/img/arrow_white3.svg" alt=""></span></a></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<!------ Brand Slider Area Start MOBILE VERSION ----->
|
||
<section class="about-area2 heightfix">
|
||
<div class="awards-cursor-flair">
|
||
<img class="flair" src="assets/img/brand-2.png" alt="" style="translate: none; rotate: none; scale: none; transform: translate(-50%, -50%) translate3d(0px, 44.0962px, 0px) rotate(-360deg); top: 552px; left: 538px; opacity: 0;">
|
||
<img class="flair" src="assets/img/brand-2.png" alt="" style="translate: none; rotate: none; scale: none; transform: translate(-50%, -50%) translate3d(0px, 34.1137px, 0px) rotate(357.5794deg); top: 441px; left: 462px; opacity: 0;">
|
||
<img class="flair" src="assets/img/brand-2.png" alt="" style="translate: none; rotate: none; scale: none; transform: translate(-50%, -50%) translate3d(0px, 25.5799px, 0px) rotate(-350.0798deg); top: 334px; left: 426px; opacity: 0;">
|
||
<img class="flair" src="assets/img/brand-2.png" alt="" style="opacity: 0;">
|
||
<img class="flair" src="assets/img/brand-2.png" alt="" style="opacity: 0;">
|
||
<img class="flair" src="assets/img/brand-2.png" alt="" style="opacity: 0;">
|
||
<img class="flair" src="assets/img/brand-2.png" alt="" style="opacity: 0;">
|
||
<img class="flair" src="assets/img/brand-2.png" alt="" style="opacity: 0;">
|
||
</div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12 text-center">
|
||
<div class="brief-title">
|
||
<div class="blagovne-title nagrade-title">Nagrade niso naš cilj. So pa priznanje delu, v katerega smo vložili dušo in srce.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="awards-cloud">
|
||
|
||
<span class="award-item">SOF <sup>15</sup></span>
|
||
|
||
<span class="award-item">Outstanding <sup>5</sup></span>
|
||
|
||
<span class="award-item">Golden Drum <sup>1</sup></span>
|
||
|
||
<span class="award-item">Packaging of the world <sup>1</sup></span>
|
||
|
||
<span class="award-item">Sporto <sup>1</sup></span>
|
||
|
||
<span class="award-item blue">ADC*E <sup>1</sup></span>
|
||
|
||
<span class="award-item">White square <sup>1</sup></span>
|
||
|
||
<span class="award-item">Brumen <sup>5</sup></span>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</section>
|
||
<!------ Brand Slider Area End ----->
|
||
|
||
|
||
<!------ Brief Area Start ----->
|
||
<section class="brief-area3 light">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12 text-center">
|
||
<div class="brief-title3">
|
||
<h2>Začutite naš utrip.</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-slider">
|
||
<div class="team-track">
|
||
|
||
<div class="team-card">
|
||
<div class="card-thumb card-thumb-video">
|
||
<iframe
|
||
src="https://player.mediadelivery.net/embed/641915/946cd284-5122-47b9-8817-831463b78829?autoplay=true&loop=true&muted=true&preload=true&controls=false"
|
||
loading="eager"
|
||
allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
|
||
allowfullscreen
|
||
tabindex="-1">
|
||
</iframe>
|
||
</div>
|
||
<div class="team-info team-info-front">
|
||
<span>Beer tasting in Vienna on the street in front bla bla card</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="card-thumb">
|
||
<img src="assets/img/team-2.jpg" alt="">
|
||
</div>
|
||
<div class="team-info team-info-front">
|
||
<span>Beer tasting in Vienna on the street in front bla bla card</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="card-thumb">
|
||
<img src="assets/img/team-3.jpg" alt="">
|
||
</div>
|
||
<div class="team-info team-info-front">
|
||
<span>Beer tasting in Vienna on the street in front bla bla card</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="card-thumb">
|
||
<img src="assets/img/team-5.jpg" alt="">
|
||
</div>
|
||
<div class="team-info team-info-front">
|
||
<span>Beer tasting in Vienna on the street in front bla bla card</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="card-thumb">
|
||
<img src="assets/img/team-6.jpg" alt="">
|
||
</div>
|
||
<div class="team-info team-info-front">
|
||
<span>Beer tasting in Vienna on the street in front bla bla card</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-card">
|
||
<div class="card-thumb">
|
||
<img src="assets/img/team-7.jpg" alt="">
|
||
</div>
|
||
<div class="team-info team-info-front">
|
||
<span>Beer tasting in Vienna on the street in front bla bla card</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row veonas">
|
||
<div class="col-lg-12 text-center">
|
||
<div class="cta-btn">
|
||
<a href="#" class="common-btn">
|
||
Več o nas <span><img src="assets/img/arrow_black.svg" alt=""></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!------ Brief Area End ----->
|
||
|
||
|
||
|
||
<!------ CTA Area Start ----->
|
||
<section class="cta-area">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-8 col-md-8">
|
||
<div class="cta-content">
|
||
<h2>Če imate občutek, da lahko vaša znamka naredi več — imate prav.</h2>
|
||
<h3>Pišite nam, da se spoznamo. Morda nastane dober projekt. Morda samo dober pogovor.</h3>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-4">
|
||
<div class="cta-btn">
|
||
<a href="#" class="common-btn">Lets talk <span><img src="assets/img/arrow_white3.svg" alt=""></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</section>
|
||
<!------ CTA Area End ----->
|
||
|
||
|
||
<!------ Footer Area Start ----->
|
||
<footer class="footer">
|
||
<svg preserveAspectRatio="none" id="footer-img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2278 683">
|
||
<defs>
|
||
<linearGradient id="grad-1" x1="0" y1="0" x2="2278" y2="683" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.2" stop-color="#121212"></stop>
|
||
<stop offset="0.8" stop-color="#121212"></stop>
|
||
</linearGradient>
|
||
</defs>
|
||
<path class="footer-svg" id="bouncy-path" fill="url(#grad-1)" d="M0-0.3C0-0.3,464,156,1139,156S2278-0.3,2278-0.3V683H0V-0.3z"/>
|
||
</svg>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-6 col-lg-5 col-md-5">
|
||
<div class="social-links">
|
||
<h4>Follow us on</h4>
|
||
<ul>
|
||
<li><a href="#"><img src="assets/img/fb.svg" alt=""></a></li>
|
||
<li><a href="#"><img src="assets/img/Instagram.svg" alt=""></a></li>
|
||
<li><a href="#"><img src="assets/img/Behance.svg" alt=""></a></li>
|
||
<li><a href="#"><img src="assets/img/Linkedin.svg" alt=""></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6 col-lg-7 col-md-7">
|
||
<div class="row">
|
||
<h4>Contact us</h4>
|
||
<div class="col-lg-6 col-md-6">
|
||
<div class="widget-links">
|
||
<div class="footer-info">
|
||
<ul>
|
||
<li><a href="mailto:office@aritmija.si">office@aritmija.si</a></li>
|
||
<li><a href="tel:+38626209877">+386 2 620 98 77 </a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 col-md-6">
|
||
<div class="widget-links">
|
||
<div class="footer-info">
|
||
<p>Cesta XIV. divizije 20a </p>
|
||
<p>Maribor, Slovenija</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="footer-love">
|
||
<img src="assets/img/love.svg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="copyright-wrap">
|
||
|
||
<div class="copyright-left">
|
||
<p>aritmija d.o.o. All rights reserved.</p>
|
||
</div>
|
||
|
||
<div class="copyright-center">
|
||
<p>Dobra motnja povprečnosti.</p>
|
||
</div>
|
||
|
||
<div class="copyright-right">
|
||
<p>Cookies. Splošni pogoji.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!------ Footer Area End ----->
|
||
|
||
|
||
|
||
<!-- <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.13/dist/lenis.min.js"></script> Bootstrap Bundle with Popper -->
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||
<script src="assets/js/jquery.min.js"></script>
|
||
<script src="assets/js/Popper.js"></script>
|
||
<script src="assets/js/bootstrap.min.js"></script>
|
||
<script src="assets/js/owl.carousel.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/Draggable.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||
<script src="https://unpkg.com/gsap@3/dist/MorphSVGPlugin.min.js"></script>
|
||
<script src="assets/js/main.js"></script>
|
||
</body>
|
||
</html> |