Update
This commit is contained in:
258
aritmija_devTemplate/v2/work.html
Normal file
258
aritmija_devTemplate/v2/work.html
Normal file
@@ -0,0 +1,258 @@
|
||||
<!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/style.css" />
|
||||
<link rel="stylesheet" href="assets/css/responsive.css" />
|
||||
<title>Works</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<!------ Header Area Start ----->
|
||||
<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/love.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="menu-close">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="menu_item">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
<li class="active"><a href="work.html">Work</a></li>
|
||||
<li><a href="contact.html">Contact</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 ----->
|
||||
|
||||
|
||||
|
||||
<!------ Portfolio Project Area Start ----->
|
||||
<section class="portfolio-area">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
<div class="portfolio-title">
|
||||
<h2>We work with those who want more than just attention.</h2>
|
||||
<div class="description">
|
||||
<p>With those who seek ideas that move people, shape culture, leave a mark — and deliver results.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="portfolio-filter">
|
||||
<button class="active" data-filter="all">All</button>
|
||||
<button data-filter="branding">Branding</button>
|
||||
<button data-filter="motion">Motion</button>
|
||||
<button data-filter="packaging">Packaging</button>
|
||||
<button data-filter="uiux">UI/UX</button>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-projects">
|
||||
<!--- Card Single -->
|
||||
<div class="project-card motion uiux">
|
||||
<a href="project.html"><img src="assets/img/portfolio-1.jpg" alt=""></a>
|
||||
<div class="portfolio-info">
|
||||
<h4>Golden Drum 2025</h4>
|
||||
<span>Podoba festivala</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--- Card Single -->
|
||||
<div class="project-card packaging uiux">
|
||||
<a href="project.html"><img src="assets/img/portfolio-2.jpg" alt=""></a>
|
||||
<div class="portfolio-info">
|
||||
<h4>Golden Drum 2025</h4>
|
||||
<span>Podoba festivala</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--- Card Single -->
|
||||
<div class="project-card uiux motion">
|
||||
<a href="project.html"><img src="assets/img/portfolio-3.jpg" alt=""></a>
|
||||
<div class="portfolio-info">
|
||||
<h4>Golden Drum 2025</h4>
|
||||
<span>Podoba festivala</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--- Card Single -->
|
||||
<div class="project-card motion packaging">
|
||||
<a href="project.html"><img src="assets/img/portfolio-4.jpg" alt=""></a>
|
||||
<div class="portfolio-info">
|
||||
<h4>Golden Drum 2025</h4>
|
||||
<span>Podoba festivala</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--- Card Single -->
|
||||
<div class="project-card packaging uiux branding">
|
||||
<a href="project.html"> <img src="assets/img/portfolio-5.jpg" alt=""></a>
|
||||
<div class="portfolio-info">
|
||||
<h4>Golden Drum 2025</h4>
|
||||
<span>Podoba festivala</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--- Card Single -->
|
||||
<div class="project-card branding motion">
|
||||
<a href="project.html"><img src="assets/img/portfolio-6.jpg" alt=""></a>
|
||||
<div class="portfolio-info">
|
||||
<h4>Golden Drum 2025</h4>
|
||||
<span>Podoba festivala</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!------ Portfolio Project Area End ----->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!------ Footer Area Start ----->
|
||||
<footer>
|
||||
<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="tell: +386 2 620 98 77">+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 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">
|
||||
<p>aritmija d.o.o. All rights reserved.</p>
|
||||
<p>Cookies. Splošni pogoji.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!------ Footer Area End ----->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap Bundle with Popper -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/Popper.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
||||
<script src="assets/js/bootstrap.min.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
<script>
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
document.fonts.ready.then(() => {
|
||||
gsap.set(".portfolio-filter button", { opacity: 1 });
|
||||
|
||||
gsap.fromTo(
|
||||
".portfolio-filter button",
|
||||
{
|
||||
y: "-=50", // 50px above current CSS position
|
||||
opacity: 0,
|
||||
rotation: "random(-30,30)" // start with random tilt
|
||||
},
|
||||
{
|
||||
y: "0", // land at original CSS position
|
||||
opacity: 1,
|
||||
rotation: 0, // straighten rotation
|
||||
duration: 0.8,
|
||||
ease: "back.out(1.5)", // springy drop effect
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: ".portfolio-filter",
|
||||
start: "top 80%",
|
||||
toggleActions: "play none none none" // play once
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user