248 lines
7.2 KiB
HTML
248 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>YOURE Projects</title>
|
|
<link rel="stylesheet" href="style/subpage-style.css">
|
|
<link rel="stylesheet" href="style/menu.css">
|
|
<link rel="icon" href="img/logos/brikk-rocks-white.png" type="image/png">
|
|
<!-- Matomo -->
|
|
<script>
|
|
var _paq = window._paq = window._paq || [];
|
|
_paq.push(['setVisitorCookieTimeout', 3600]); // Besucher-Cookie auf 1 Stunde begrenzen
|
|
_paq.push(['setSessionCookieTimeout', 1800]); // Sitzungscookie auf 30 Minuten begrenzen
|
|
_paq.push(['setReferralCookieTimeout', 3600]); // Referrer-Cookie auf 1 Stunde begrenzen
|
|
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(['setDocumentTitle', document.title]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//analytikks.brikk.rocks/";
|
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
_paq.push(['setSiteId', '2']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div id="logo" onclick="window.location.href='index.html';">BRIKK.ROCKS</div>
|
|
</header>
|
|
|
|
<h2>YOURE</h2>
|
|
|
|
|
|
<div class="partners">
|
|
<p>I worked closely together with:</p>
|
|
<ul>
|
|
<li>Christian Schön - CCO</li>
|
|
<li>Pourya Hosseini - Creative Strategist</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="text-box">
|
|
<h3>GAMESCOM 2024</h3>
|
|
<h4>08/2024 / COLOGNE</h4>
|
|
<p>Great people, good vibes! <br>Supervised a small film crew. 😎<br>Cut and animated the visual loop for our booth C061 - D070 in the Gamescom Business Area.
|
|
|
|
</p>
|
|
</div>
|
|
|
|
<div class="visual">
|
|
|
|
<video src="video/gamescom.mp4" autoplay controls muted loop></video>
|
|
<p class="subtitle">DOCUMENTARY</p>
|
|
</div>
|
|
|
|
<div class="visual">
|
|
|
|
<video src="video/youre/gamescom-loop_1.mp4" autoplay controls muted loop></video>
|
|
<p class="subtitle">BOOTH LOOP</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="text-box">
|
|
<h3>NEW LOOK<br>NEW STYLE</h3>
|
|
<p>YOURE's new face. </p>
|
|
</div>
|
|
|
|
<div class="visual-contain">
|
|
<img src="img/youre/space-ship.png" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="visual">
|
|
|
|
<img src="img/youre/arrangement_space_casino.jpg" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="visual">
|
|
|
|
<img src="img/youre/pixel-revolution_final.jpg" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="visual-contain">
|
|
|
|
<img src="img/youre/flame_sprite6.gif" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="visual">
|
|
|
|
<img src="img/youre/SaturnRakete.jpg" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="visual">
|
|
|
|
<img src="img/youre/aeroplane.jpg" alt="">
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="text-box">
|
|
<h3>YOURE X SCS<br>SPONSORING CAMPAIGN</h3>
|
|
<h4>05/2024 / KAISERSLAUTERN</h4>
|
|
<p>What a blast! 💥 ⚽<br>Cinematic shots combined with the colorful visual identity of YOURE.<br>Created the Gaming VFX and BTS material.<br>Was also involved in concept and storyboard from start on.</p>
|
|
</div>
|
|
|
|
<div class="visual">
|
|
|
|
<video src="video/youre/YOURExSCS_highres.mp4" autoplay controls muted loop></video>
|
|
<p class="subtitle">CAMPAIGN MOVIE</p>
|
|
|
|
</div>
|
|
<div class="visual">
|
|
|
|
<video src="video/youre/YOURExSCS_Making_Of_highres.mp4" autoplay controls muted loop></video>
|
|
<p class="subtitle">BEHIND THE SCENES</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="text-box">
|
|
<h3>PRODUCT<br>ANIMATIONS</h3>
|
|
<h4>12/2023 / COLOGNE</h4>
|
|
<p>Motion Design for various YOURE projects. Made in After Effects</p>
|
|
</div>
|
|
|
|
<div class="visual">
|
|
|
|
<video id="youre-id" src="video/youre/secondary-logo.mp4" autoplay muted loop></video>
|
|
<p class="subtitle">YOURE.ID LOGIN</p>
|
|
|
|
</div>
|
|
<div class="visual">
|
|
|
|
<video src="video/youre/youre-universe.mp4" autoplay muted loop></video>
|
|
<p class="subtitle">UNIVERSE IDLE</p>
|
|
|
|
</div>
|
|
<div class="visual">
|
|
|
|
<video src="video/youre/youre-bet.mp4" autoplay muted loop></video>
|
|
<p class="subtitle">BET OPENER</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<footer>
|
|
<a href="impressum.html">Imprint</a>
|
|
</footer>
|
|
|
|
<!-- Soundwave-Button für Fullscreen-Menü -->
|
|
<div id="soundwaveButton">
|
|
|
|
<div class="wave-line"></div>
|
|
<div class="wave-line"></div>
|
|
<div class="wave-line"></div>
|
|
|
|
</div>
|
|
|
|
<div id="menu">
|
|
|
|
|
|
<div class="menu-header">
|
|
|
|
<div class="first-block"></div>
|
|
<div class="logo"><img src="img/logos/brikk-rocks-black.png" alt=""></div>
|
|
<div class="second-block"></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="menu-center">
|
|
<div class="first-block"></div>
|
|
<nav>
|
|
<div class="sitelinks">
|
|
<a href="index.html">HOME</a>
|
|
<a href="index.html#spotlite">SPOTLITE</a>
|
|
<a href="index.html#me">MARK</a>
|
|
|
|
<a href="index.html#friends">FRIENDS</a>
|
|
</div>
|
|
|
|
|
|
<div class="webshop-container">
|
|
<p id="coming-soon">COMING SOON!</p>
|
|
<a id="webshop-link" href="">WEBSHOP</a>
|
|
<div class="logo-and-claim">
|
|
<p id="stoned-rocks-1">STONED<br>ROKKS</p>
|
|
<div class="sr-logo">
|
|
<img src="img/logos/stoned-rocks.png" alt="">
|
|
</div>
|
|
<p>ART THAT<br>HITS HARD</p>
|
|
</div>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
<div class="second-block"></div>
|
|
</div>
|
|
|
|
<div class="lower-part">
|
|
<div class="contact-links">
|
|
<div class="left">
|
|
<a href="https://www.linkedin.com/in/mark-hartmann-siegen/">LinkedIn</a>
|
|
<a href="https://www.instagram.com/markdemacco/">Instagram</a>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<a href="tel:+4916096558365">+49 160 965 58 365</a>
|
|
<a href="mailto:mark@brikk.rocks">mark@brikk.rocks</a>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="imprint">
|
|
<a href="imprint.html">Imprint</a>
|
|
</div>
|
|
|
|
<div class="menu-music-control">
|
|
<button id="menuPlayPause">Play/Pause</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="scripts/script.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |