Mark/brikk.rocks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migration (Netcup Export)

Browse Source 
Signed-off-by: Mark <m.hartmann@tuta.io>
This commit is contained in:
Mark
2026-08-02 01:13:11 +02:00
parent 4595016766
commit d115aedcca
127 changed files with 5256 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anims/Adobe After Effects Auto-Speichern/anims-workfiles Auto-Speichern 1.aep
BIN
View File
Binary file not shown.
anims/anims-workfiles.aep
BIN
View File
Binary file not shown.
anims/smil/soundwave-orange.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="1080" height="1080" viewBox="0 0 1080 1080" style="width:100%;height:100%"><defs><animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_2_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M-587.17 -163.3 C-587.17,-163.3 -328.27,-76.59 12.33,-180.01 C343.18,-279.38 611.83,-186.43 611.83,-186.43 " to="M-587.17 -163.3 C-587.17,-163.3 -328.05,-70.38 12.33,-180.01 C342.68,-285.47 611.83,-186.43 611.83,-186.43 " keyTimes="0;0.1333333;0.6333333;1" values="M-587.17 -163.3 C-587.17,-163.3 -328.27,-76.59 12.33,-180.01 C343.18,-279.38 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -336.02,-297.25 12.33,-180.01 C360.68,-62.78 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -328.05,-70.38 12.33,-180.01 C342.68,-285.47 611.83,-186.43 611.83,-186.43 " keySplines="0.167 0.167 0.594 1;0.371 0 0.594 1;0.167 0 0.833 0.833" calcMode="spline"/><animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_1_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M-587.17 -163.3 C-587.17,-163.3 -327.27,-48.1 12.33,-180.01 C340.92,-307.34 611.83,-186.43 611.83,-186.43 " to="M-587.17 -163.3 C-587.17,-163.3 -327.24,-47.19 12.33,-180.01 C340.84,-308.23 611.83,-186.43 611.83,-186.43 " keyTimes="0;0.0666667;0.5666667;1" values="M-587.17 -163.3 C-587.17,-163.3 -327.27,-48.1 12.33,-180.01 C340.92,-307.34 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -336.02,-297.25 12.33,-180.01 C360.68,-62.78 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -327.24,-47.19 12.33,-180.01 C340.84,-308.23 611.83,-186.43 611.83,-186.43 " keySplines="0.167 0.167 0.594 1;0.371 0 0.594 1;0.167 0 0.833 0.833" calcMode="spline"/><animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_0_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 " to="M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 " keyTimes="0;0.5;1" values="M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -336.02,-297.25 12.33,-180.01 C360.68,-62.78 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 " keySplines="0.371 0 0.594 1;0.483 0 0.594 1" calcMode="spline"/><animate attributeType="XML" attributeName="opacity" dur="3s" from="0" to="1" xlink:href="#time_group"/></defs><g id="_R_G"><g id="_R_G_L_2_G" transform=" translate(540, 918.81) scale(0.83, 1) translate(0, 0)"><path id="_R_G_L_2_G_D_0_P_0" stroke="#ff6700" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="35" stroke-opacity="1" d=" M-587.17 -163.3 C-587.17,-163.3 -328.27,-76.59 12.33,-180.01 C343.18,-279.38 611.83,-186.43 611.83,-186.43 "/></g><g id="_R_G_L_1_G" transform=" translate(540, 718.81) scale(0.83, 1) translate(0, 0)"><path id="_R_G_L_1_G_D_0_P_0" stroke="#ff6700" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="68" stroke-opacity="1" d=" M-587.17 -163.3 C-587.17,-163.3 -327.27,-48.1 12.33,-180.01 C340.92,-307.34 611.83,-186.43 611.83,-186.43 "/></g><g id="_R_G_L_0_G" transform=" translate(540, 518.81) scale(0.83, 1) translate(0, 0)"><path id="_R_G_L_0_G_D_0_P_0" stroke="#ff6700" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="35" stroke-opacity="1" d=" M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 "/></g></g><g id="time_group"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

anims/soundwave.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="1080" height="1080" viewBox="0 0 1080 1080" style="width:100%;height:100%"><defs><animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_2_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M-587.17 -163.3 C-587.17,-163.3 -328.27,-76.59 12.33,-180.01 C343.18,-279.38 611.83,-186.43 611.83,-186.43 " to="M-587.17 -163.3 C-587.17,-163.3 -328.05,-70.38 12.33,-180.01 C342.68,-285.47 611.83,-186.43 611.83,-186.43 " keyTimes="0;0.1333333;0.6333333;1" values="M-587.17 -163.3 C-587.17,-163.3 -328.27,-76.59 12.33,-180.01 C343.18,-279.38 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -336.02,-297.25 12.33,-180.01 C360.68,-62.78 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -328.05,-70.38 12.33,-180.01 C342.68,-285.47 611.83,-186.43 611.83,-186.43 " keySplines="0.167 0.167 0.594 1;0.371 0 0.594 1;0.167 0 0.833 0.833" calcMode="spline"/><animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_1_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M-587.17 -163.3 C-587.17,-163.3 -327.27,-48.1 12.33,-180.01 C340.92,-307.34 611.83,-186.43 611.83,-186.43 " to="M-587.17 -163.3 C-587.17,-163.3 -327.24,-47.19 12.33,-180.01 C340.84,-308.23 611.83,-186.43 611.83,-186.43 " keyTimes="0;0.0666667;0.5666667;1" values="M-587.17 -163.3 C-587.17,-163.3 -327.27,-48.1 12.33,-180.01 C340.92,-307.34 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -336.02,-297.25 12.33,-180.01 C360.68,-62.78 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -327.24,-47.19 12.33,-180.01 C340.84,-308.23 611.83,-186.43 611.83,-186.43 " keySplines="0.167 0.167 0.594 1;0.371 0 0.594 1;0.167 0 0.833 0.833" calcMode="spline"/><animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_0_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 " to="M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 " keyTimes="0;0.5;1" values="M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -336.02,-297.25 12.33,-180.01 C360.68,-62.78 611.83,-186.43 611.83,-186.43 ;M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 " keySplines="0.371 0 0.594 1;0.483 0 0.594 1" calcMode="spline"/><animate attributeType="XML" attributeName="opacity" dur="3s" from="0" to="1" xlink:href="#time_group"/></defs><g id="_R_G"><g id="_R_G_L_2_G" transform=" translate(540, 918.81) scale(0.83, 1) translate(0, 0)"><path id="_R_G_L_2_G_D_0_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="68" stroke-opacity="1" d=" M-587.17 -163.3 C-587.17,-163.3 -328.27,-76.59 12.33,-180.01 C343.18,-279.38 611.83,-186.43 611.83,-186.43 "/></g><g id="_R_G_L_1_G" transform=" translate(540, 718.81) scale(0.83, 1) translate(0, 0)"><path id="_R_G_L_1_G_D_0_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="68" stroke-opacity="1" d=" M-587.17 -163.3 C-587.17,-163.3 -327.27,-48.1 12.33,-180.01 C340.92,-307.34 611.83,-186.43 611.83,-186.43 "/></g><g id="_R_G_L_0_G" transform=" translate(540, 518.81) scale(0.83, 1) translate(0, 0)"><path id="_R_G_L_0_G_D_0_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="68" stroke-opacity="1" d=" M-587.17 -163.3 C-587.17,-163.3 -326.93,-38.61 12.33,-180.01 C340.16,-316.65 611.83,-186.43 611.83,-186.43 "/></g></g><g id="time_group"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

audio/bounce_launcher.mp3
BIN
View File
Binary file not shown.
audio/corrupted_filez.mp3
BIN
View File
Binary file not shown.
audio/creepy_old_textures.mp3
BIN
View File
Binary file not shown.
audio/usb_keylog_device.mp3
BIN
View File
Binary file not shown.
eyeye.html
+180
View File
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GC Universe 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
_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>eyeye Studio</h2>
<div class="partners">
<p>An evolving marketing agency specialized in generative AI. More to find at <a href="">eyeye.studio</a></p>
<br>
<p>I work closely together with:</p>
<ul>
<li>Christian Schön - CEO</li>
</ul>
</div>
<div class="row">
<div class="text-box">
<h5>eyeye SUMMER 2025</h5>
<h4>05/2025 / FFM</h4>
<p>Strong animated cases and concepts for the upcoming summer! &#9728;</p>
</div>
<div class="visual">
<video src="video/reel-eyeye-lowres.mp4" autoplay controls muted loop></video>
<p class="subtitle">REEL</p>
</div>
</div>
<div class="row">
<div class="text-box">
<h5>FOREVER</h5>
<h4>04/2025 / FFM</h4>
<p>Can an AI-generated film make you smell a fragrance? We did have a go at it.</p>
</div>
<div class="visual">
<video src="video/forever-lowres.mp4" autoplay controls muted loop></video>
<p class="subtitle">CAMPAIGN FILM</p>
</div>
</div>
<div class="row">
<div class="text-box">
<h5>Electric Root</h5>
<h4>04/2025 / FFM</h4>
<p>eyeye sowed seeds and harvested flowers.</p>
</div>
<div class="visual">
<video src="video/electric-root.mp4" autoplay controls muted loop></video>
<p class="subtitle">REEL</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>
<!-- Fullscreen-Menü -->
<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>
fonts/Geist-Black.ttf
BIN
View File
Binary file not shown.
fonts/Geist-Bold.ttf
BIN
View File
Binary file not shown.
fonts/Geist-Light.ttf
BIN
View File
Binary file not shown.
fonts/Geist-Medium.ttf
BIN
View File
Binary file not shown.
fonts/Geist-Regular.ttf
BIN
View File
Binary file not shown.
fonts/Geist-SemiBold.ttf
BIN
View File
Binary file not shown.
fonts/Geist-Thin.ttf
BIN
View File
Binary file not shown.
fonts/Geist-UltraBlack.ttf
BIN
View File
Binary file not shown.
fonts/Geist-UltraLight.ttf
BIN
View File
Binary file not shown.
fonts/Hermarkkita.ttf
BIN
View File
Binary file not shown.
gamescoin.html
+225
View File
@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gamescoin 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>GAMESCOIN</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>TOKEN GENERATION EVENT</h3>
<h4>11/2023 / DUBAI</h4>
<p>The long-awaited Gamescoin crypto token - launched and celebrated with a big bang party at Mandarin Oriental Dubai. &#10024;</p>
</div>
<div class="visual" id="tge-visual-box">
<video src="video/tge-documentary.mp4" autoplay controls muted loop></video>
<p class="subtitle">DOCUMENTARY</p>
</div>
</div>
<div class="row">
<div class="text-box">
<h5>KEYVISUAL</h5>
<p>Had the chance to play a central role in the development of the keyvisual. Made in Blender.</p>
</div>
<div class="visual">
<img id="tge-keyvisual" src="img/gamescoin/keyvisual.jpg" alt="">
</div>
</div>
<div class="row">
<div class="text-box">
<h5>"ROCKETLAUNCH"<br>PORTAL REVEAL</h5>
<p>The final launch.</p>
</div>
<div class="visual">
<video src="video/rocketlaunch.mp4" autoplay muted loop controls></video>
</div>
</div>
<div class="row">
<div class="text-box">
<h5>PRESSWALL</h5>
<p>Keyvisual with partner logos. Wall print.
</div>
<div class="visual">
<img src="img/gamescoin/presswall_tge.jpg" alt="">
</div>
</div>
<div class="row">
<div class="text-box">
<h5>EVENT CONCEPT</h5>
<p>Theme: "Space Disco".<br>Featuring keyvisual-shaped ice cubes and entertainment from another planet.</p></div>
<div class="visual" id="event-concept">
<div class="visual-row">
<video src="video/einhorn.mp4" loop autoplay muted></video>
<video src="video/dancer_girl.mp4" loop autoplay muted></video>
<video src="video/cookies.mp4" loop autoplay muted></video>
</div>
<div class="visual-row">
<img id="lobster" src="img/gamescoin/lobster.png" alt="">
<video src="video/drink_key.mp4" autoplay loop muted></video>
<div class="cad-models">
<img src="img/gamescoin/keymodel1.png" alt="">
<img src="img/gamescoin/keymodel2.png" alt="">
</div>
</div>
</div>
<div class="visual">
</div>
</div>
<div class="row">
<div class="text-box">
<h5>CORPORATE DESIGN<br>ANIMATION</h5>
<p>Animated design and style showcase.</p>
</div>
<div class="visual">
<video src="video/gamescoin-typo-anim.mp4" autoplay muted loop controls></video>
</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#spotlite">HOME</a>
<a href="index.html#spotlite">SPOTLITE</a>
<a href="index.html#me">ME</a>
<a href="index.html#sideprojects">MUSIC</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>
gc-universe.html
+238
View File
@@ -0,0 +1,238 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GC Universe 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
_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>GC UNIVERSE</h2>
<div class="partners">
<p>Digital Web 3.0 experience.</p>
<br>
<p>I worked closely together with:</p>
<ul>
<li>Christian Schön - CCO</li>
<li>Anahita Khosravi - Art Director</li>
<li>Pourya Hosseini - Creative Strategist</li>
</ul>
</div>
<div class="row">
<div class="text-box">
<h5>WEBSITE DESIGN</h5>
<h4>04/2024 / FFM</h4>
<p>Animated website showcase. Was involved in the concept, design and realisation from start to finish.</p>
</div>
<div class="visual" id="tge-visual-box">
<video src="video/gcu/website-tour.mp4" autoplay controls muted loop></video>
</div>
</div>
<div class="row">
<div class="text-box">
<h5>ELEMENTS</h5>
<p>Elements are the stakable foundation of the GC Universe. Made in Blender.</p>
</div>
<div class="visual">
<video src="video/gcu/elementfusion_cropped.mp4" autoplay muted loop></video>
</div>
</div>
<div class="row">
<div class="text-box">
<h5>STARS<br></h5>
<p>Digital NFT Products, serving as an exclusive early access to the G2G economy. <br>Made in Blender.</p>
</div>
<div class="visual-stars-range">
<img src="img/gcu/stars.png" alt="" id="stars-range">
</div>
</div>
<div class="row">
<div class="text-box">
<h5>ICONS</h5>
<p>Voxel icons</p>
</div>
<div class="double-visual">
<div class="dv-child">
<img src="img/gcu/gcu.png" alt="">
<p>Logo</p>
</div>
<div class="dv-child">
<img src="img/gcu/flavicon.png" alt="">
<p>Flavicon</p>
</div>
</div>
</div>
<div class="row">
<div class="text-box">
<h5>STAR MAP<br></h5>
<p>Graphics for interactive space adventures. &#128640;<br>Assisted the development of a playable prototype which was presented at Gamescom 2024.</p>
</div>
<div class="visual">
<img src="img/gcu/star-map/Desktop_01-2.jpg" alt="">
</div>
<div class="visual">
<video src="video/gcu/star-map-interface.mp4"autoplay controls muted loop></video>
<p class="subtitle">PROTOTYPE DEMO</p>
</div>
<div class="visual">
<img src="img/gcu/star-map/Desktop_01-1.jpg" alt="">
</div>
<div class="visual">
<img src="img/gcu/star-map/Desktop_01.jpg" alt="">
</div>
<div class="visual">
<img src="img/gcu/star-map/Desktop_Galaxy-1.jpg" alt="">
</div>
<div class="visual">
<img src="img/gcu/star-map/Desktop_Galaxy.jpg" alt="">
</div>
<div class="visual">
<img src="img/gcu/star-map/Galaxy_vs02.jpg" alt="">
</div>
<div class="visual">
<img src="img/gcu/star-map/My_Planet.jpg" alt="">
</div>
<div class="visual">
<img src="img/gcu/star-map/Solorsystem_Planet.jpg">
</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>
<!-- Fullscreen-Menü -->
<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>
img/bureau.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 MiB

img/electronicz-for-kidz/cover.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

img/friends/adem-yildirmaz.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

img/friends/fynn-boettcher.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

img/friends/justus-jonas.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

img/friends/kollektiv+icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

img/friends/paul-reh.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

img/gamescoin/keymodel1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

img/gamescoin/keymodel2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

img/gamescoin/keyvisual variants/blue_on_white.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

img/gamescoin/keyvisual variants/keyvisual.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 MiB

img/gamescoin/keyvisual variants/weiß_auf_glitter.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

img/gamescoin/keyvisual variants/white.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 MiB

img/gamescoin/keyvisual variants/white_on_blue.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 MiB

img/gamescoin/keyvisual.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

img/gamescoin/lobster.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 446 KiB

img/gamescoin/presswall_tge.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 427 KiB

img/gcu/flavicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

img/gcu/gcu.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

img/gcu/star-map/Desktop_01-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

img/gcu/star-map/Desktop_01-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

img/gcu/star-map/Desktop_01-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

img/gcu/star-map/Desktop_01-2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

img/gcu/star-map/Desktop_01.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

img/gcu/star-map/Desktop_01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

img/gcu/star-map/Desktop_Galaxy-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

img/gcu/star-map/Desktop_Galaxy-1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 417 KiB

img/gcu/star-map/Desktop_Galaxy.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

img/gcu/star-map/Desktop_Galaxy.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

img/gcu/star-map/Galaxy_vs02.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

img/gcu/star-map/Galaxy_vs02.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

img/gcu/star-map/My_Planet.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

img/gcu/star-map/My_Planet.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

img/gcu/star-map/Solorsystem_Planet.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 386 KiB

img/gcu/star-map/Solorsystem_Planet.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

img/gcu/stars.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

img/icons/pause.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 439 B

img/icons/play.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

img/logos/YOURE-secondary.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

img/logos/brikk-rocks-black.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

img/logos/brikk-rocks-white.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

img/logos/eyeye.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

img/logos/gamescoin.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

img/logos/gcu.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

img/logos/stoned-rocks.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 907 B

img/logos/youre.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

img/me/me-header-unc.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

img/me/me-header.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 481 KiB

img/me/me.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

img/me/me.mp4
BIN
View File
Binary file not shown.
img/sketches/bureau.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 887 KiB

img/sketches/chain.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 549 KiB

img/sketches/swissknife.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

img/sketches/torch.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

img/thumbnails/gc universe items/crystal.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

img/thumbnails/gc universe items/helium2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

img/thumbnails/gc universe items/helium3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

img/thumbnails/gc universe items/helium4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

img/thumbnails/gc universe items/hydrogen1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

img/thumbnails/gc universe items/hydrogen2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

img/thumbnails/unverse.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 KiB

img/youre/11.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 MiB

img/youre/11.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 MiB

img/youre/SaturnRakete.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 KiB

img/youre/aeroplane.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 KiB

img/youre/arrangement_space_casino.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 290 KiB

img/youre/flame_sprite5.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

img/youre/flame_sprite6.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

img/youre/pixel-revolution_final.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 KiB

img/youre/space-ship.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

img/youre/space_skating_iss_groß.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 MiB

imprint.html
+122
View File
@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imprint</title>
<link rel="stylesheet" href="style/imprint-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 || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_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
_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>
<div class="imprint">
<h2>Impressum / Legal Notice</h2>
<h3>Angaben gemäß § 5 TMG / Information pursuant to § 5 TMG</h3>
<p class="big">Mark Hartmann</p>
<p class="big">Rensbachstr. 3f / 57080 Siegen<br>mark@brikk.rocks</p>
<h4>Haftungsausschluss / Disclaimer</h4>
<div class="text">
<p>Diese Seite dient ausschließlich der Präsentation persönlicher Projekte. Sie verfolgt keine kommerziellen Zwecke.</p>
<p>This website is solely for showcasing personal projects. It has no commercial intent.</p></div>
<a id="back-home" href="index.html">BACK TO MAIN PAGE</a>
</div>
<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>
index.html
+466
View File
@@ -0,0 +1,466 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="3D/Motion/Graphics">
<title>MARK HARTMANN | 3D/MOTION/GRAPHICS</title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/menu.css">
<link rel="icon" href="img/logos/brikk-rocks-white.png" type="image/png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- 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>
<!-- Topleiste -->
<header>
<div id="logo" onclick="location.reload();">BRIKK.ROCKS</div>
</header>
<section id="hero">
<div class="logo">
<img src="img/logos/brikk-rocks-white.png" alt="">
</div>
<div class="name-and-profession">
<h1>MARK HARTMANN</h1>
<h2>3D/Motion/Graphics</h2>
</div>
</section>
<!-- Intro Bereich mit Play-Button -->
<!-- Spotlite Bereich (Projekte) -->
<section id="spotlite">
<div class="torchlight-container">
<img src="img/sketches/torch.png" alt="">
</div>
<a class="spotlite-item" href="eyeye.html">
<div class="image-container">
<video src="video/reel-eyeye-lowres.mp4" autoplay muted loop alt="">
</div>
<div class="bottomline">
<div class="logo"><img src="img/logos/eyeye.png" alt=""></div>
<div class="projektname"><p>SUMMER<br>2025</p></div>
</div>
</a>
<a class="spotlite-item" href="gc-universe.html">
<div class="image-container">
<div class="foreground-items">
<img src="img/thumbnails/gc universe items/crystal.png" alt="" id="crystal">
<img src="img/thumbnails/gc universe items/helium2.png" alt="" id="he1">
<img src="img/thumbnails/gc universe items/helium3.png" alt="" id="he2">
<img src="img/thumbnails/gc universe items/helium4.png" alt="" id="he3">
<img src="img/thumbnails/gc universe items/hydrogen1.png" alt="" id="hy1">
<img src="img/thumbnails/gc universe items/hydrogen2.png" alt="" id="hy2">
</div>
<img src="img/thumbnails/unverse.png" alt="">
</div>
<div class="bottomline">
<div class="logo"><img src="img/logos/gcu.png" alt=""></div>
<div class="projektname"><p>GC<br>UNIVERSE <br>DESIGNS</p></div>
</div>
</a>
</div>
<a class="spotlite-item" href="youre.html">
<div class="image-container">
<video src="video/gamescom.mp4" autoplay muted loop alt="">
</div>
<div class="bottomline">
<div class="logo"><img src="img/logos/YOURE-secondary.png" alt=""></div>
<div class="projektname"><p>GAMESCOM<br>DOCUMENTATION<br>2024</p></div>
</div>
</a>
</div>
<a class="spotlite-item" href="gamescoin.html">
<div class="image-container">
<video src="video/play-create-own.mp4" autoplay muted loop alt="">
</div>
<div class="bottomline">
<div class="logo"><img src="img/logos/gamescoin.png" alt=""></div>
<div class="projektname"><p>TOKEN <br>GENERATION <br>EVENT</p></div>
</div>
</a>
</section>
<!-- Projekte aus The YOURE Cosmos -->
<section id="cosmos">
<h3>MORE PROJECTS:</h3>
<div class="cosmos-item-box">
<a class="cosmos-item" href="eyeye.html"><img src="img/logos/eyeye.png" alt=""></a>
<a class="cosmos-item" href="youre.html"><img src="img/logos/youre.png" alt=""></a>
<a class="cosmos-item" href="gamescoin.html"><img src="img/logos/gamescoin.png" alt=""></a>
<a class="cosmos-item" href="gc-universe.html"><img src="img/logos/gcu.png" alt=""></a>
</div>
</section>
<!-- Me Bereich -->
<section id="me">
<div class="opener">
<p>ALSO KNOWN AS</p>
<div class="names">
<h3>MARK <br>HARTMANN</h3>
<div class="brikk-container">
<h4>BRIKK</h4>
</div>
</div>
</div>
<div class="title-and-picture">
<div class="left">
<h5>MEDIA<br>DESIGNER<br><span>@YOURE<br>GAMES</span></h5>
</div>
<div class="right"><video autoplay loop muted src="img/me/me.mp4"></video></div>
</div>
<div class="description">
<p>I work on crazy, unseen projects with creative professionals since 2020.</p>
<p>Continuously learning and adapting to ensure
state of art quality,
integrity and zeitgeist.</p>
</div>
</section>
<div class="me-links-box">
<div class="me-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:+491609658365">+49 160 965 58 365</a>
<a href="mailto:mark@brikk.rocks">mark@brikk.rocks</a>
</div>
</div>
</div>
<div class="skillset">
<div class="left">
<h5>SWISS KNIFE <br>SKILLSET</h5>
<p>3D/Motion/Graphics</p>
<div class="breaker"></div>
<p>Definitely NOT an expert in: </p>
<ul>
<li>AFTER EFFECTS</li>
<li>BLENDER</li>
<br>
<li>UNREAL ENGINE</li>
<li>UNITY</li>
<br>
<li>ILLUSTRATOR</li>
<li>PHOTOSHOP</li>
<li>INDESIGN</li>
<li>LIGHTROOM</li>
<br>
<li>FIGMA</li>
</ul>
</div>
<div class="right"><img src="img/sketches/swissknife.png" alt=""></div>
</div>
<section>
<div class="timeline">
<div class="table">
<div class="row-orange">
<div class="cell company"><span>Scriptflow</span>
</div>
<div class="cell position"><span>Werkstudent Digital Design</span></div>
<div class="cell tasks"><span>Social Media<br>Motion Design<br>3D Art<br>Web Design<br>Content</span></div>
<div class="cell date"><span>Nov 2025 - NOW</span></div>
</div>
<div class="row">
<div class="cell company">eyeye Studio</div>
<div class="cell position">AI Video Producer</div>
<div class="cell tasks">Generative AI<br>Motion Design<br>Videography<br>Social Media</div>
<div class="cell date">Apr 2025 - Jun 2025</div>
</div>
<div class="row">
<div class="cell company">YOURE Games
<p class="subdivisions">MASSIVE LINX / LOOTBOY / GAMESCOIN <br>GC UNIVERSE / AIGHT</p>
</div>
<div class="cell position">Media Designer</div>
<div class="cell tasks">Branding<br>Motion Design<br>3D Art<br>Videography<br>Web Design<br>Concept</div>
<div class="cell date">Sep 2023 - Jun 2025</div>
</div>
<div class="row">
<div class="cell company">Kollektiv+</div>
<div class="cell position">Web Designer</div>
<div class="cell tasks">UI/UX-Design<br>Wordpress</div>
<div class="cell date">Nov 2024 - Feb 2025</div>
</div>
<div class="row">
<div class="cell company">Studioline<br>Photography</div>
<div class="cell position">Photographer</div>
<div class="cell tasks">Photography<br>Lighting Setup<br>Print Technology<br>Studio Management</div>
<div class="cell date">Jun 2023 - Aug 2023</div>
</div>
<div class="row">
<div class="cell company">Invers GmbH</div>
<div class="cell position">Media Designer</div>
<div class="cell tasks">Motion Design<br>3D Art<br>Videography<br>Concept</div>
<div class="cell date">Oct 2022 - Feb 2023</div>
</div>
<div class="row">
<div class="cell company">hype.media <br>Marketing Gruppe</div>
<div class="cell position">Media Designer</div>
<div class="cell tasks">Google Ads<br>Motion Design<br>3D Art<br>Videography<br>Web Design<br>Concept</div>
<div class="cell date">Aug 2020 - Aug 2022</div>
</div>
</div>
<h3>QUALIFICATIONS</h3>
<ul>
<li>Media Designer Digital / Print</li>
<li>Gestaltungstechnischer Assistent</li>
</ul>
</div>
</section>
<div class="mindset">
<div class="top">
<h2><span>THE ART OF<br></span>REMAINING<br>BALANCE<span> .. </span>
</h2>
<p>Ratios<span>.</span><br>Blank Space<span>.</span><br>Timing<span>.</span><br>
</p>
</div>
<div class="bottom">
<p>Identity<span>.</span><br>Boldness<span>.</span><br>Money<span>.</span><br><br>
</p>
<h2> <span> .. WHILE<br></span>BREAKING
<br> <span> THE </span>RULES<span>.</span></h3>
</div>
</div>
<!-- Friends of BRIKK -->
<section id="friends">
<h3>Friends of BRIKK</h3>
<p>Explore my network of great creatives.</p>
<div class="friend-list">
<a class="friend" href="https://www.linkedin.com/in/fynn-böttcher-426880236/" target="_blank" >
<div class="profile-picture">
<img src="img/friends/fynn-boettcher.jpg" alt="">
</div>
<div class="details">
<p class="name">FYNN BOETTCHER</p>
<p class="job">Photography / E-Commerce</p>
</div>
</a>
<a class="friend" href="https://www.linkedin.com/in/bryan-reinsch-175569203/" target="_blank">
<div class="profile-picture">
</div>
<div class="details">
<p class="name">BRYAN REINSCH</p>
<p class="job">Art Director / Photography / Cinema</p>
</div>
</a>
<a class="friend" href="https://www.kollektiv-plus.de/" target="_blank">
<div class="profile-picture">
<img src="img/friends/kollektiv+icon.png" alt="">
</div>
<div class="details">
<p class="name">KOLLEKTIV +</p>
<p class="job">Art Collective</p>
</div>
</a>
<a class="friend" href="https://www.instagram.com/fetteschelle/" target="_blank">
<div class="profile-picture">
<img src="img/friends/justus-jonas.jpg" alt="">
</div>
<div class="details">
<p class="name">JUSTUS PECH</p>
<p class="job">Branding / Visual Communication</p>
</div>
</a>
<a class="friend" target="_blank">
<div class="profile-picture">
<img src="img/friends/paul-reh.jpg" alt="">
</div>
<div class="details">
<p class="name">PAUL REH</p>
<p class="job">Cinema / Design / Animation</p>
</div>
</a>
<a class="friend" target="_blank" href="https://www.kollektiv-plus.de/artist/adem-yildirmaz/">
<div class="profile-picture">
<img src="img/friends/adem-yildirmaz.jpg" alt="">
</div>
<div class="details">
<p class="name">ADEM YILDIRMAZ</p>
<p class="job">Creative Activist / Painting / Sculpting</p>
</div>
</a>
</div>
</section>
<!-- Footer -->
<footer>
<a href="imprint.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>
<!-- Fullscreen-Menü -->
<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>
</div>
<script src="scripts/script.js"></script>
</body>
</html>
scripts/script.js
+228
View File
@@ -0,0 +1,228 @@
console.log("script.js wurde geladen!");
document.addEventListener("DOMContentLoaded", () => {
let audioPlayer = document.getElementById("audioPlayer");
// Falls das Audio-Element nicht existiert (z. B. auf Unterseiten), erstelle es dynamisch
if (!audioPlayer) {
audioPlayer = document.createElement("audio");
audioPlayer.id = "audioPlayer";
document.body.appendChild(audioPlayer);
}
const playMusicButton = document.getElementById("playMusic");
const menuPlayPauseButton = document.getElementById("menuPlayPause");
const soundwaveButton = document.getElementById("soundwaveButton");
const menu = document.getElementById("menu");
const progressSlider = document.getElementById("progressSlider");
const trackButtons = document.querySelectorAll(".track");
const playPauseButton = document.querySelector(".play-pause");
const prevButton = document.querySelector(".prev");
const nextButton = document.querySelector(".next");
const header = document.querySelector("header");
let currentIndex = 0;
let dotInterval;
/** 🎵 MUSIK SPEICHERN & WIEDERHERSTELLEN **/
if (sessionStorage.getItem("audioSrc")) {
audioPlayer.src = sessionStorage.getItem("audioSrc");
audioPlayer.currentTime = parseFloat(sessionStorage.getItem("audioTime")) || 0;
if (sessionStorage.getItem("audioPlaying") === "true") {
audioPlayer.play();
}
} else if (!audioPlayer.src) {
audioPlayer.src = "audio/bounce_launcher.mp3"; // Standard-Track nur setzen, wenn kein Track gespeichert ist
}
audioPlayer.addEventListener("timeupdate", () => {
sessionStorage.setItem("audioTime", audioPlayer.currentTime);
});
audioPlayer.addEventListener("play", () => {
sessionStorage.setItem("audioSrc", audioPlayer.src);
sessionStorage.setItem("audioPlaying", "true");
});
audioPlayer.addEventListener("pause", () => {
sessionStorage.setItem("audioPlaying", "false");
});
/** 🎚️ Fortschrittsleiste **/
if (progressSlider) {
audioPlayer.addEventListener("timeupdate", () => {
if (audioPlayer.duration) {
let progressPercent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
progressSlider.value = progressPercent;
progressSlider.style.background = `linear-gradient(to right, var(--secondary-color) ${progressPercent}%, #555 ${progressPercent}%)`;
}
});
progressSlider.addEventListener("input", () => {
let seekTime = (progressSlider.value / 100) * audioPlayer.duration;
audioPlayer.currentTime = seekTime;
});
}
/** 🎛️ Play/Pause-Icons aktualisieren **/
function updatePlayPauseIcon() {
let playIcon = "img/icons/play.png";
let pauseIcon = "img/icons/pause.png";
let playImg = `<img src="${playIcon}" alt="Play">`;
let pauseImg = `<img src="${pauseIcon}" alt="Pause">`;
if (!audioPlayer) return;
if (audioPlayer.paused) {
if (playPauseButton) playPauseButton.innerHTML = '<i class="fas fa-play"></i>';
if (menuPlayPauseButton) menuPlayPauseButton.innerHTML = playImg;
if (playMusicButton) playMusicButton.innerHTML = playImg;
if (soundwaveButton) soundwaveButton.classList.remove("playing");
} else {
if (playPauseButton) playPauseButton.innerHTML = '<i class="fas fa-pause"></i>';
if (menuPlayPauseButton) menuPlayPauseButton.innerHTML = pauseImg;
if (playMusicButton) playMusicButton.innerHTML = pauseImg;
if (soundwaveButton) soundwaveButton.classList.add("playing");
}
}
updatePlayPauseIcon();
if (audioPlayer && !audioPlayer.paused) {
if (soundwaveButton) soundwaveButton.classList.add("playing");
}
/** ▶️ / ⏸️ Play/Pause Funktion **/
function playPauseToggle() {
if (audioPlayer.paused) {
audioPlayer.play();
sessionStorage.setItem("audioPlaying", "true");
} else {
audioPlayer.pause();
sessionStorage.setItem("audioPlaying", "false");
}
updatePlayPauseIcon();
}
/** 🖱️ EventListener für Play/Pause **/
if (playPauseButton) playPauseButton.addEventListener("click", playPauseToggle);
if (menuPlayPauseButton) menuPlayPauseButton.addEventListener("click", playPauseToggle);
if (playMusicButton) playMusicButton.addEventListener("click", playPauseToggle);
/** 📜 Menü öffnen & schließen **/
function toggleMenu() {
if (!menu) return;
menu.classList.toggle("active");
updateHeaderState(); // Header-Zustand sofort anpassen
}
document.querySelectorAll("#menu nav a").forEach(link => {
link.addEventListener("click", () => {
closeMenu(); // Menü schließen, wenn ein Link geklickt wird
});
});
function updateHeaderState() {
if (menu && menu.classList.contains("active")) {
// Menü ist geöffnet → Schrift schwarz, transparenter Hintergrund, kein Blur
header.classList.add("menu-open");
} else {
// Menü ist geschlossen → Schrift weiß, dunkler transparenter Hintergrund mit Blur
header.classList.remove("menu-open");
}
}
function closeMenu() {
if (!menu) return;
menu.classList.remove("active");
updateHeaderState();
}
if (soundwaveButton) soundwaveButton.addEventListener("click", toggleMenu);
if (menu) {
menu.addEventListener("click", (e) => {
if (e.target === menu) closeMenu();
});
}
/** 🔥 Markiert den aktuellen Track **/
function updateTrackHighlight(activeButton) {
trackButtons.forEach(btn => {
btn.classList.remove("playing");
btn.querySelector(".track-dots").innerText = "";
});
activeButton.classList.add("playing");
animateDots();
}
/** 💡 Punkt-Animation **/
function animateDots() {
clearInterval(dotInterval);
let playingTrack = document.querySelector(".track.playing .track-dots");
if (!playingTrack) return;
let dots = [".", "..", "...", ".....", "........"];
let dotIndex = 0;
dotInterval = setInterval(() => {
if (!document.querySelector(".track.playing") || audioPlayer.paused) {
clearInterval(dotInterval);
if (playingTrack) playingTrack.innerText = "";
return;
}
playingTrack.innerText = dots[dotIndex];
dotIndex = (dotIndex + 1) % dots.length;
}, 50);
}
/** 🎵 EventListener für Track-Klick **/
trackButtons.forEach(button => button.addEventListener("click", (event) => {
let clickedButton = event.currentTarget;
let trackSrc = clickedButton.dataset.src;
if (audioPlayer.src !== trackSrc) {
audioPlayer.src = trackSrc;
audioPlayer.play();
updateTrackHighlight(clickedButton);
} else {
playPauseToggle();
}
updatePlayPauseIcon();
}));
/** ⏩ Nächster Track **/
function playNextTrack() {
currentIndex = (currentIndex + 1) % trackButtons.length;
let nextTrack = trackButtons[currentIndex];
audioPlayer.src = nextTrack.dataset.src;
audioPlayer.play();
updateTrackHighlight(nextTrack);
updatePlayPauseIcon();
}
/** ⏪ Vorheriger Track **/
function playPreviousTrack() {
currentIndex = (currentIndex - 1 + trackButtons.length) % trackButtons.length;
let prevTrack = trackButtons[currentIndex];
audioPlayer.src = prevTrack.dataset.src;
audioPlayer.play();
updateTrackHighlight(prevTrack);
updatePlayPauseIcon();
}
/** 🖱️ EventListener für Prev/Nächster Button **/
if (nextButton) nextButton.addEventListener("click", playNextTrack);
if (prevButton) prevButton.addEventListener("click", playPreviousTrack);
audioPlayer.addEventListener("ended", () => {
playNextTrack();
updateTrackHighlight(trackButtons[currentIndex]); // Markierung für den neuen Track setzen
});
});
sitemap.xml
+39
View File
@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://brikk.rocks/</loc>
<lastmod>2024-03-06</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://brikk.rocks/spotlite</loc>
<lastmod>2024-03-06</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://brikk.rocks/about</loc>
<lastmod>2024-03-06</lastmod>
<changefreq>yearly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://brikk.rocks/music</loc>
<lastmod>2024-03-06</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://brikk.rocks/friends</loc>
<lastmod>2024-03-06</lastmod>
<changefreq>yearly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://brikk.rocks/impressum</loc>
<lastmod>2024-03-06</lastmod>
<changefreq>yearly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
style/imprint-style.css
+77
View File
@@ -0,0 +1,77 @@
:root {
--secondary-color: #ff6700 /* Rot */
}
@font-face {
font-family: Geist-Bold;
src: url(/fonts/Geist-Bold.ttf);
}
@font-face {
font-family: Geist-Medium;
src: url(/fonts/Geist-Medium.ttf);
}
*{
margin: 0;
padding: 0;
font-family: Geist-Bold;
font-weight: 100;
color: white;
}
::selection {
background: transparent;
color: #8D19FF;
text-shadow: none !important;
animation: none !important;
transition: none !important;
}
body{
background-color: black;
}
.imprint{
width: 94%;
max-width: 1500px;
margin: auto;
margin-top: 20vh;
height: 100%;
}
.imprint p.big{
font-size: 1.5em;
}
h2{
font-size: 3em;
line-height: 83%;
padding-bottom: 1%;
}
h3{
padding-bottom: 5%;
}
h4{
padding-top: 5%;
font-size: 2em;
padding-bottom: 1%;
}
.text{
padding-bottom: 20%;
}
a#back-home{
font-size: 2em;
text-decoration: none;
}
style/menu.css
+424
View File
@@ -0,0 +1,424 @@
/* Fullscreen-Menü */
:root {
--secondary-color: #ff6700 /* Rot */
}
@font-face {
font-family: Geist-Bold;
src: url(/fonts/Geist-Bold.ttf);
}
@font-face {
font-family: Geist-Medium;
src: url(/fonts/Geist-Medium.ttf);
}
html.menu-open, body.menu-open {
overflow: hidden;
height: 100dvh;
position: fixed;
width: 100%;
touch-action: none;
}
#menu {
display: flex; /* Stelle sicher, dass es nicht 'none' ist */
flex-direction: column;
visibility: hidden;
opacity: 0;
transform: translateY(-100%);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
height: 100%;
width: 100%;
position: fixed; /* Setzt das Menü über den gesamten Bildschirm */
top: 0;
left: 0;
background-color: #00000090;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
justify-content: flex-end;
align-items: space-between;
gap: 10px;
z-index: 10; /* Stellt sicher, dass es über allem liegt */
}
#menu.active {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
#menu .menu-header .logo{
position: absolute;
width: 100%;
height: 17dvh;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 3dvh;
}
#menu .menu-header .logo img{
height: 40%;
}
#menu .menu-header{
display: flex;
justify-content: space-between;
flex-direction: row;
height: 20dvh;
width: 100%;
gap: 10px;
}
#menu .menu-header .first-block{
width: 97%;
height: 100%;
background-color: var(--secondary-color);
}
#menu .menu-header .second-block{
width: 3%;
height: 100%;
background-color: var(--secondary-color);
}
#menu .menu-center{
display: flex;
justify-content: space-between;
flex-direction: row;
height: 50dvh;
width: 100%;
gap: 10px;
}
#menu .menu-center .first-block{
width: 3%;
height: 100%;
background-color: var(--secondary-color);
}
#menu .menu-center .second-block{
width: 97%;
height: 100%;
background-color: var(--secondary-color);
}
#menu nav {
width: 94%;
height: 44dvh;
position: absolute;
right: 0;
display: flex;
justify-content: center;
gap: 1.5%;
align-items: flex-end;
flex-direction: column;
padding: 3%;
}
#menu a {
color: black;
text-decoration: none;
font-size: clamp(1.2rem, 7.5dvh, 14dvw);
line-height: 83%;
text-align: right;
cursor: pointer;
}
#menu nav .sitelinks{
display: flex;
flex-direction: column;
width: 100%;
}
#menu nav .webshop-container{
width: min-content;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#menu nav .webshop-container a{
color: white;
}
#coming-soon{
color: #8D19FF;
position: absolute;
align-self: center;
rotate: -30deg;
font-size: clamp(1rem, 5vh, 5vw);
font-weight: bold;
}
#menu .webshop-container .logo-and-claim{
width: min-content;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
#menu .webshop-container .logo-and-claim .sr-logo{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 1%;
margin-right: 1%;
}
#menu .webshop-container .logo-and-claim .sr-logo img{
width: auto;
height: clamp(1rem, 7vh, 7vw);
}
#menu .webshop-container .logo-and-claim p{
text-align: right;
color: white;
font-size: clamp(1.5rem, 3vh, 3vw);
line-height: 83%;
white-space: nowrap;
}
#menu .webshop-container .logo-and-claim #stoned-rocks-1{
text-align: left;
}
#menu .imprint{
display: flex;
justify-content: flex-end;
padding-right: 3%;
}
#menu .imprint a{
color: white;
font-family: Geist-Medium;
font-weight: 100;
font-size: clamp(1rem, 2vh, 2vw);
}
#menu .lower-part{
height: 30vh;
}
#menu .contact-links{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 3%;
}
#menu .contact-links a{
line-height: 100%;
color: white;
font-size: clamp(1.4rem, 3vh, 3vw);
font-family: Geist-Medium;
font-weight: 100;
}
#menu .contact-links .left{
height: 6vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
#menu .contact-links .right{
display: flex;
justify-content: space-between;
height: 6vh;
flex-direction: column;
align-items: flex-end;
}
#menuPlayPause {
background: none;
border: none;
}
#menuPlayPause img {
background:none;
border: none; /* Entfernt den grauen Hintergrund */
width: 40px; /* Passe die Größe an */
height: auto;
display: block;
}
.menu-music-control{
width: 100%;
display: flex;
justify-content: center;
padding-top: 5vh;
padding-bottom: 5vh;
}
/* Soundwave-Button */
#soundwaveButton {
position: fixed;
bottom: 20px;
right: 20px;
width: 70px;
height: 70px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 30;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0px 0px 20px 0px rgba(255,255,255,1);
border-radius: 50%;
}
.wave-line {
width: 45px;
height: 5px;
background-color: white;
transition: all 0.3s ease-in-out;
}
/* Weichere, harmonische Wellenbewegung */
@keyframes waveMotion {
0%, 100% { transform: translateY(0) scaleY(1); }
25% { transform: translateY(-4px) scaleY(1.15); }
50% { transform: translateY(3px) scaleY(0.95); }
75% { transform: translateY(-2px) scaleY(1.1); }
}
/* Linien bewegen sich leicht zeitversetzt */
#soundwaveButton.playing .wave-line:nth-child(1) {
animation: waveMotion 1.2s infinite ease-in-out alternate;
}
#soundwaveButton.playing .wave-line:nth-child(2) {
animation: waveMotion 1.2s infinite ease-in-out alternate;
animation-delay: 0.2s;
}
#soundwaveButton.playing .wave-line:nth-child(3) {
animation: waveMotion 1.2s infinite ease-in-out alternate;
animation-delay: 0.4s;
}
@media (min-width: 1000px){
#menu nav{
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
width: 94vw;
padding: 0;
padding-right: 3%;
padding-left: 3%;
height: 49vh;
}
#menu nav .sitelinks{
width: 50%;
}
#menu nav .webshop-container{
margin-left: 6%;
width: 35%;
align-items: center;
}
#menu nav .webshop-container a{
font-size: clamp(2rem, 8vh, 8vw);
}
#menu .webshop-container .logo-and-claim{
justify-content: center;
}
#menu a{
font-size: clamp(2rem, 10vh, 10vw);
}
#menu a:hover{
color: white;
}
#menu #imprint{
text-align: right;
}
#menu #webshop-link:hover{
color: yellow;
}
#menu .contact-links a:hover{
color: var(--secondary-color);
}
}
style/style copy.css
+1179
View File
File diff suppressed because it is too large Load Diff
style/style.css
+1364
View File
File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More