initial commit
This commit is contained in:
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Background</title>
|
||||
<meta name="description" content="Animated Triplet Element Background, Colors: Dark Gray, Red">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div id="background-dark">
|
||||
<div class="bg bg-element-dark-1"></div>
|
||||
<div class="bg bg-element-dark-2"></div>
|
||||
<div class="bg bg-element-dark-3"></div>
|
||||
</div>
|
||||
<style>
|
||||
#background-dark {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 120vw;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(rgba(0,0,0), rgba(50,50,50));
|
||||
display: block;
|
||||
z-index: -10000;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
width: 200vw;
|
||||
height: 100vh;
|
||||
left: -50%;
|
||||
transform-origin: bottom center;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.bg-element-dark-1 {
|
||||
background-image: linear-gradient(rgba(150,0,0), rgba(150,100,0,0.3));
|
||||
animation-name: moveUpDown1;
|
||||
z-index: -10;
|
||||
animation-duration: 3.1s;
|
||||
}
|
||||
.bg-element-dark-2 {
|
||||
background-image: linear-gradient(rgba(100,0,0), rgba(150,100,0,0.3));
|
||||
animation-name: moveUpDown2;
|
||||
z-index: -20;
|
||||
animation-duration: 3.3s;
|
||||
}
|
||||
.bg-element-dark-3 {
|
||||
background-image: linear-gradient(rgba(50,0,0), rgba(150,100,0,0.3));
|
||||
animation-name: moveUpDown3;
|
||||
z-index: -30;
|
||||
animation-duration: 3.0s;
|
||||
}
|
||||
@keyframes moveUpDown1 {
|
||||
0%, 100% {
|
||||
transform: translateY(65vh) rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(75vh) rotate(10deg);
|
||||
}
|
||||
}
|
||||
@keyframes moveUpDown2 {
|
||||
0%, 100% {
|
||||
transform: translateY(55vh) rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(70vh) rotate(10deg);
|
||||
}
|
||||
}
|
||||
@keyframes moveUpDown3 {
|
||||
0%, 100% {
|
||||
transform: translateY(40vh) rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(55vh) rotate(10deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+18
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/components/footer.css">
|
||||
</head>
|
||||
<body>
|
||||
<footer>
|
||||
<img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/favicon.png" class="footerLogoLeft">
|
||||
<nav>
|
||||
<a href="/projects/demos/portfolio-v1/lang/de/pages/legal/impress.php">Impressum</a>
|
||||
<a href="/projects/demos/portfolio-v1/lang/de/pages/legal/sources.php">Quellenangaben (WIP)</a>
|
||||
<a href="/projects/demos/portfolio-v1/lang/de/pages/legal/faq.php">FAQ (WIP)</a>
|
||||
<p class="copyright">© 2024 Andreas Reimann</p>
|
||||
</nav>
|
||||
<img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/favicon.png" class="footerLogoRight">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+18
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/components/footer.css">
|
||||
</head>
|
||||
<body>
|
||||
<footer>
|
||||
<img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/favicon.png" class="footerLogoLeft">
|
||||
<nav>
|
||||
<a href="/projects/demos/portfolio-v1/lang/en/pages/legal/impress.php">Impress</a>
|
||||
<a href="/projects/demos/portfolio-v1/lang/en/pages/legal/sources.php">Sources (WIP)</a>
|
||||
<a href="/projects/demos/portfolio-v1/lang/en/pages/legal/faq.php">FAQ (WIP)</a>
|
||||
<p class="copyright">© 2024 Andreas Reimann</p>
|
||||
</nav>
|
||||
<img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/favicon.png" class="footerLogoRight">
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+52
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/main.css">
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/components/header.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="navbutton_mobile" onclick="toggleMenu()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<p class="seperator1">|</p>
|
||||
<nav id="desktop_nav">
|
||||
<ul id="desktop_nav_main">
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de">Startseite</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de/pages/cv.php">Lebenslauf</a></li>
|
||||
<li><a href="#" target="_blank">Projekte (WIP)</a></li>
|
||||
<li><a href="https://instant-gaming.com/?igr=apixoffiziell" target="_blank">Partner</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de/pages/links.php">Linksammlung</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="mobile_nav">
|
||||
<ul id="mobile_nav_main">
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de">Startseite</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de/pages/cv.php">Lebenslauf</a></li>
|
||||
<li><a href="#" target="_blank">Projekte (WIP)</a></li>
|
||||
<li><a href="https://instant-gaming.com/?igr=apixoffiziell" target="_blank">Partner</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/de/pages/links.php">Linksammlung</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<img class="logofile" src="/projects/demos/portfolio-v1/assets/img/logofiles/complete_logo.png" alt="Dieses Bild kann nicht angezeigt werden">
|
||||
<p class="seperator2">|</p>
|
||||
<div class="sidebarsocialicons">
|
||||
<a href="https://youtube.com/@apixoffiziell" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/youtube.png"></a>
|
||||
<a href="https://tiktok.com/@apixoffiziell" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/tiktok.png"></a>
|
||||
<a href="https://t.me/lupinexmedia" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/telegram.png"></a>
|
||||
<a href="https://open.spotify.com/playlist/4UisGb0W9zBTLvcvkR9W2B?si=7b2cf2683f734388" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/spotify.png"></a>
|
||||
</div>
|
||||
<p class="seperator3">|</p>
|
||||
<img id="lang" src="/projects/demos/portfolio-v1/assets/img/flags/de.png">
|
||||
</header>
|
||||
|
||||
<script src="/projects/demos/portfolio-v1/assets/scripts/components/header.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+52
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/main.css">
|
||||
<link rel="stylesheet" href="/projects/demos/portfolio-v1/assets/stylesheets/components/header.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="navbutton_mobile" onclick="toggleMenu()">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<p class="seperator1">|</p>
|
||||
<nav id="desktop_nav">
|
||||
<ul id="desktop_nav_main">
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en">Homepage</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en/pages/cv.php">Personal Resume</a></li>
|
||||
<li><a href="#" target="_blank">Projects (WIP)</a></li>
|
||||
<li><a href="https://instant-gaming.com/?igr=apixoffiziell" target="_blank">Partner</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en/pages/links.php">Linktree</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="mobile_nav">
|
||||
<ul id="mobile_nav_main">
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en">Homepage</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en/pages/cv.php">Personal Resume</a></li>
|
||||
<li><a href="#" target="_blank">Projects (WIP)</a></li>
|
||||
<li><a href="https://instant-gaming.com/?igr=apixoffiziell" target="_blank">Partner</a></li>
|
||||
<li><a href="/projects/demos/portfolio-v1/lang/en/pages/links.php">Linktree</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<img class="logofile" src="/projects/demos/portfolio-v1/assets/img/logofiles/complete_logo.png" alt="Dieses Bild kann nicht angezeigt werden">
|
||||
<p class="seperator2">|</p>
|
||||
<div class="sidebarsocialicons">
|
||||
<a href="https://youtube.com/@apixoffiziell" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/youtube.png"></a>
|
||||
<a href="https://tiktok.com/@apixoffiziell" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/tiktok.png"></a>
|
||||
<a href="https://t.me/lupinexmedia" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/telegram.png"></a>
|
||||
<a href="https://open.spotify.com/playlist/4UisGb0W9zBTLvcvkR9W2B?si=7b2cf2683f734388" target="_blank"><img alt="Nicht verfügbar" src="/projects/demos/portfolio-v1/assets/img/icons/socials/spotify.png"></a>
|
||||
</div>
|
||||
<p class="seperator3">|</p>
|
||||
<img id="lang" src="/projects/demos/portfolio-v1/assets/img/flags/en.png" alt="Language Switch">
|
||||
</header>
|
||||
|
||||
<script src="/projects/demos/portfolio-v1/assets/scripts/components/header.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user