Forum - Ich stelle meine 2 Intros vor

<style>
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&display=swap');
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'EB Garamond', serif;
}
 
h1 {
    color: #000;
    font-size: 3em;
	font-weight: 600;
}
 
p {
    max-width: 600px;
    color: #000;
    font-size: 1.25em;
}
 

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
 
p {
  font-family: Montserrat, sans-serif;
  font-size: 2em;
}
</style>
 
<center><h1 data-splitting>Service Crew Loreth</h1><br>
<p data-splitting="words">Hallo und herzlich willkommen im Forum von Service Crew Loreth.<br> Ihr Hausmeisterservice in Dahme/Mark für die kleinen Arbeiten, für Heim und Hof.<br>Dieses Forum dient Ihnen als erste Informationsquelle zu unseren Leistungen, Angeboten, Kontaktdaten und bietet vieles mehr.<br>Da wir die Beziehung zu unseren Kunden als Vertrauensverhältnis verstehen, freuen wir uns immer über ein persönliches Beratungsgespräch.<br>
 Unser Hausmeisterservice bildet auch das Bindeglied zwischen Vermieter und Mieter.<br>Im Falle nötiger Reparaturarbeiten packen wir entweder selbst an oder organisieren die passenden Handwerker. <br>Wir halten Ihre Immobilie ordentlich und sauber, wobei wir stets versuchen, die Kosten zu minimieren.<br>In diesem Sinne wollen wir für unsere Geschäfts-, ebenso wie für unsere Privatkunden, ein optimales Preis-Leistungs-Verhältnis sicherstellen.<br>Ich wünsche Ihnen viel Spaß beim Stöbern.<br> Bei Fragen und Anregungen stehen wir Ihnen gerne zur Verfügung!<br>Mit freundlichen Grüßen<br>Ihr Christian Loreth<br></p></center>
 
<meta http-equiv='refresh' content='10;url=https://www.servicecrewloreth.de' />
  <title>Weiterleitung</title>
<p class="count">Weiterleitung </p>
 
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
 
<script>
// splitting.js
Splitting();
 
// gsap
var tl = gsap.timeline();
 
tl.from(".char", {
	x: "random(-100, 100)",
	y: "random(-100, 100)",
	rotate: "random(-90, 90)",
	filter: "blur(20px)",
	opacity: 0,
	ease: "power3.out",
	duration: 1.5,
	stagger: {
		amount: 2
	}
});
tl.from(
	"p .word",
	{
		x: "random(-100, 100)",
		y: "random(-100, 100)",
		rotate: "random(-90, 90)",
		filter: "blur(20px)",
		opacity: 0,
		ease: "power3.out",
		duration: 1.5,
		stagger: {
			amount: 3
		}
	},
	"-=1"
);
  
 
const count = document.querySelector(".count");
 
setInterval(function () {
  count.innerHTML = count.innerHTML.replace(/\&#9654;&#65039;/g, "&#9726;&#65039;");
  count.innerHTML += "&#9654;&#65039; ";
}, 1000);
 
</script>
 

<style>
 

 

*,
*:before,
*:after {
	box-sizing: border-box;
}
 
.container_1 {
	display: flex;
	justify-content: center;
	align-items: center;
}
 
h1 {
	font-size: 8vh;
	opacity: 0;
	text-align: center;
	color: #fff;
	animation: fade 9s linear forwards;
	animation-delay: 1s;
	line-height: 1.2;
}
 
h1,
.author {
	font-family: "Merriweather", serif;
}
 
.author {
	font-size: 1rem;
	text-transform: uppercase;
}
 
span_6 {
	display: block;
	font-size: 0.5em;
}
 
h1.scene2 {
	font-family: "Hausmeisterservice in Dahme/Mark", serif;
	font-size: 6rem;
	text-align: left;
	line-height: 0.9;
	letter-spacing: 3px;
}
 
.scene2-container_1 {
	display: none;
}
 
.drop {
	position: relative;
	width: 20px;
	height: 20px;
	top: -20px;
	left: calc(-50% + 20px);
	opacity: 0;
	margin: 0 auto;
	background: blue;
	transform: rotate(138deg);
	border-radius: 200px 200px 200px 0px;
	border: 8px none #000000;
	animation-name: drop;
	animation-timing-function: cubic-bezier(1, 0, 0.75, 0.44);
	animation-duration: 4s;
	animation-iteration-count: forwards;
	animation-delay: 1s;
}
 
.scene2 div::first-letter {
	color: #dc281e;
	background: #dc281e;
	background: linear-gradient(to right, blue, blue);
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
 
@keyframes drop {
	20% {
		opacity: 0.7;
	}
	100% {
		top: 100%;
	}
}
 
@keyframes fade {
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
  
 
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
 
p {
  font-family: Montserrat, sans-serif;
  font-size: 2em;
}
</style>  
 

<div class="container_1 scene1-container_1">
	<h1 class="scene1">
		<img src="https://i.ibb.co/5K1tt7G/servicecrewloreth1.png" alt="scene1"><br>
		<span>Presentiert</span>
	</h1>
</div>
<div class="container_1 scene2-container_1"> 
	<h1 class="scene2">
		<span class="author">
			Ihr
		</span>
		<div>Hausmeisterservice in Dahme/Mark</div>
	</h1>
	<div class="drop"></div>
</div>
 

<meta http-equiv='refresh' content='20;url=https://www.servicecrewloreth.de/forum.php' />
  <title>Weiterleitung</title>
<p class="count">Weiterleitung </p>
 
<script>
setTimeout(() => {
	document.querySelector(".scene1-container_1").style.display = "none";
	document.querySelector(".scene2-container_1").style.display = "block";
}, 10000);
  
 
const count = document.querySelector(".count");
 
setInterval(function () {
  count.innerHTML = count.innerHTML.replace(/\&#9654;&#65039;/g, "&#9726;&#65039;");
  count.innerHTML += "&#9654;&#65039; ";
}, 2000);
 
</script>
 

<style>
  
 @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
 
p {
  font-family: Montserrat, sans-serif;
  font-size: 2em;
}
 
</style>
 
  <meta http-equiv='refresh' content='10;url=https://www.servicecrewloreth.de/forum.php' />
  <title>Weiterleitung</title>
 

 
  <p class="count">Weiterleitung </p>
 
<script>
 
const count = document.querySelector(".count");
 
setInterval(function () {
  count.innerHTML = count.innerHTML.replace(/\&#9654;&#65039;/g, "&#9726;&#65039;");
  count.innerHTML += "&#9654;&#65039; ";
}, 1000);
 
</script>
 

<style>
*,::before,::after{
  box-sizing:border-box;
}
/* body{
  background-image:linear-gradient(to right, #7f4829,#cd9564);
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
} */
.switch{
  height:30px;
  width:20px;
  position:absolute;
  background-image:linear-gradient(to right,#aaa, #fff);
  right:30%;
  border-radius:5px;
  box-shadow:2px 1px 5px #444,inset 2px 0px 5px #555;
  cursor:pointer;
}
 
.switch::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  height:10px;
  width:10px;
  background-image:linear-gradient(to right,yellow,yellowgreen);
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow:2px 1px 5px #555;
}
 
.switch::after{
  content:"Klingeln Sie, um die Tür zu öffnen";
  color:#fff;
  position:absolute;
  width:100px;
  height:50px;
  left:200%;
}
 
.frame{
  perspective:1000px;
  border-radius:5px ;
  position:relative;
  width:250px;
  height:450px;
  border:20px solid #333;
}
 
.front{
  transform-style: preserve-3d;
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-image:linear-gradient(to right, #36409d, #3379de);
  padding:100px 20px;
  text-align:center;
  color:#fff;
  font-size:20px;
  backface-visibility:hidden;
}
 
.back{
  position:absolute;
  z-index:-2;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-image:linear-gradient(to right, #36409d, #3379de);
}
 
.tuere{
  position:relative;
  background-image: url(https://files.homepagemodules.de/b920350/a_20_83d717fc.png);
  width:100%;
  height:100%;
  transform-origin:left center;
  transform:rotate3d(0,1,0,0deg);
  box-shadow:10px 1px 3px #364050;
  transition:0.8s all ease;
}
 
.knauf{
  position:absolute;
  z-index:3;
  top:50%;
  left:80%;
  background-color:yellowgreen;
  width:30px;
  height:30px;
  border-radius:50%;
  box-shadow:inset 3px 1px 10px #000; 
}
 
.link{
  width:200px;
  height:150px;
  position:absolute;
}
.text{
  width:200px;
  height:350px;
  position:absolute;
  transform:translate(-50%.-50%);
  color:white;
  font-size:20px;
}
 
.img{
  width:200px;
  height:100px;
  position:absolute;
  transform:translate(-40%.-40%);
  color:white;
  font-size:20px;
}
  
</style>
 
<div class="switch"></div>
<div class="text">Dienstleistungen für Ältere Menschen. &#128578;.</div>
<div class="link"><a title="Das Forum Service Crew Loreth" href="https://www.hilfe-tricks-tipps.de" target="_blank">
<img src="//files.homepagemodules.de/b920350/a_20_83d717fc.png" border=0 alt="Das Forum Service Crew Loreth"></a></div>
<div class="img">
<img src="//files.homepagemodules.de/b920350/a_30_5bc2a289.png" border=0 alt="Das Forum Service Crew Loreth"></div>
<div class="frame">
  <div class="tuere">
    <div class="front"></div>
    <div class="back"></div>
    <div class="knauf"></div>
  </div>
</div>
 
<script>
document.addEventListener('DOMContentLoaded', function() {
  let switcher = document.querySelector('.switch');
  let door = document.querySelector('.tuere');
 
  switcher.addEventListener('click', function() {
    if (door.style.transform === "rotate3d(0, 1, 0, 0deg)") {
      door.style.transform = "rotate3d(0, 1, 0, -130deg)";
    } else {
      door.style.transform = "rotate3d(0, 1, 0, 0deg)";
    }
  });
});
  
</script>
 

<style>
#klingelButton
{
	border: none;
	padding: 0;
	background: transparent;
	cursor: pointer;
}
 
#klingelButton::-moz-focus-inner
{
	margin: 0;
	border-width: 0;
	padding: 0;
}
 
#klingelButton:focus
{
	outline: 3px solid orange;
}
 
#klingelButton img
{
	display: block;
}
 
footer
{
	font-family: sans-serif;
}
 
@supports (writing-mode: vertical-rl) or (-webkit-writing-mode: vertical-rl)
{
	footer
	{
		display: inline-block;
		height: 213px;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}
}  
</style>
 
<button id="klingelButton">
	<img src="//files.homepagemodules.de/b920350/a_34_e0056ca5.png" alt="Daishi, test klingel"/>
</button>
<footer>
	<small>Daishi, test klingel</small>
</footer>
 
<script>
var klingelSound = new Audio('https://files.homepagemodules.de/b920350/secure/ZlU5ZjdRMzM1Q3RyMXI2UnBVNmYzUTgzN0MwcjZyNlJuVTJmX1FpM2VDbHJGcnRSalVUZmZR.ogg/661479dfc275bda92eca3bec5edebc37/664f6b84/893854.ogg');
 
var klingelButtonElement = document.querySelector('#klingelButton');
 
klingelButtonElement.addEventListener('click', function () { 
	klingelSound.play();
});  
</script>