17.07.2022, 10:54
(Dieser Beitrag wurde zuletzt bearbeitet: 18.07.2022, 22:48 von Hugo.)
Es hagelt Nüsse
Und nuss XXX bitte 
HTML
Code: <div class="fehn_mushroom">
<div class="fehn_mushroomhead">
<div class="fehn_mushroompoint fehn_point1"></div>
<div class="fehn_mushroompoint fehn_point2"></div>
<div class="fehn_mushroompoint fehn_point3"></div>
</div><div class="fehn_mushroomfoot"></div>
</div>
CSS
Code: .fehn_mushroom {
margin:200px auto;
position:relative;
width:500px;
}
.fehn_mushroomhead {
width: 320px;
height: 150px;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
background: rgb(159,137,100);
margin:auto;
background: linear-gradient(0deg, rgba(159,137,100,1) 20%, rgba(255,249,230,1) 74%);
animation: flyroom 7s infinite;
}
.fehn_mushroomfoot {
width: 50px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 120px;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 190px solid #96825f;
margin:auto;
}
.fehn_mushroompoint {
width:20px;
height:20px;
background:#fff;
border-radius:50%;
position:relative;
opacity:0;
animation: flyroom2 7s infinite;
}
.fehn_point1 {
top:50px;
left:133px;
}
.fehn_point2 {
top:80px;
left:233px;
}
.fehn_point3 {
top:36px;
left:33px;
}
@keyframes flyroom {
from{ background: rgb(159,137,100);}
to {background:rgb(164,37,0);}
}
@keyframes flyroom2 {
20% {opacity:0}
80% {opacity:1}
}
2
1
1
18.07.2022, 21:18
(Dieser Beitrag wurde zuletzt bearbeitet: 18.07.2022, 22:48 von Hugo.)
Es hagelt Nüsse
Und eine XXX bitte 
HTML
Code: <div class="lexikon_container">
<div class="lexikon_head">Ghosts</div>
<div class="lexikon_body">
<div class="lexikon_menu">
<div class="lexikon_category">Introduction</div>
<div class="lexikon_menulink">Storyline</div>
<div class="lexikon_menulink">Welcome</div>
<div class="lexikon_menulink">Timeline</div>
<div class="lexikon_category">The People</div>
<div class="lexikon_menulink">The Academy</div>
<div class="lexikon_menulink">Knights</div>
<div class="lexikon_menulink">Magicians</div>
<div class="lexikon_category">Otherworld</div>
<div class="lexikon_menulink">Vampires</div>
<div class="lexikon_menulink">Shifters</div>
<div class="lexikon_category">Victorian London</div>
<div class="lexikon_menulink">Law and Order</div>
<div class="lexikon_menulink">London Life 1887</div>
<div class="lexikon_category">Around the World</div>
<div class="lexikon_menulink">Personae Dramatica</div>
<div class="lexikon_menulink">France</div>
</div>
<div class="lexikon_content">
<div class="lexikon_quote">"Du musst keine Angst vor ihnen haben. Ihre Anwesenheit zeigt, dass der Baum gesund ist. Wenn sie dich mögen, helfen sie dir vielleicht."</div>
<div class="lexikon_text">
<h1>Introduction</h1>
<div> Als Vampir im eigenen Grab wieder zu erwachen, ist nicht das einzige schreckliche Schicksal, das einer Person nach dem Tod widerfahren kann. Der ein oder andere ist noch nicht bereit, dieses Leben hinter sich zu lassen, hegt zu starke Gefühle oder hat noch diese eine wichtige Sache offen. Im schlimmsten Fall kann sogar ein Fluch Grund dafür sein. Egal, was es ist, das einen Verstorbenen in dieser Welt hält: Was er einst war, ist vergangen und was zurückbleibt, ist nur mehr ein Geist.
Für gewöhnlich sind Geister in einer Zwischenwelt gefangen. Sie können wahrnehmen, was um sie herum geschieht, doch in der Regel ist ihre Präsenz zu schwach, um die Lebenden zu erreichen. Wenn nicht mit Magie nachgeholfen wurde, muss der Geist erst genügend Kraft sammeln, um im Diesseits agieren zu können. Den meisten Geistern gelingt das nie. Sie sind nur durch ein Medium oder mit einem magischen Ritual zu erreichen. Auch manche Gestaltwandler mit stark ausgeprägten Sinnen können die Anwesenheit eines Geistes spüren, aber nicht mit ihm kommunizieren oder agieren.
Es gibt aber auch Geistwesen, die genügend Energie oder aufgestauten Groll haben, dass sie die Welt der Lebenden heimsuchen. Dann können auch Menschen das Gefühl bekommen, nicht allein zu sein oder eine unnatürliche Kälte spüren. Auch so mancher Gegenstand kann dem Zorn eines Geists zum Opfer fallen. Selten sind Geister mächtig genug, um sich als wahre Erscheinung zu manifestieren.
Nur wenige Geister sind den Lebenden noch wohlgesinnt. Sind sie stark genug, können sie die Menschen verletzen oder gar töten. Geister können nur durch ein magisches Ritual ausgetrieben werden. Meist führen dies Magier der Akademie aus. Unter Umständen sind auch Hexen mit einem intuitiven Zauber in der Lage, einen Geist zu vertreiben. Doch zumeist werden diese eher für eine Geisterbeschwörung oder ein Gespräch mit einem Verstorbenen konsultiert.
Um einer Heimsuchung vorzubeugen, können Menschen einen Magier engagieren, der das Haus mit einem Bann schützt. </div>
<h1>Banshee</h1>
<div> Nicht jeder Geist bringt selbst Unheil über die Lebenden. Manches Geisterwesen ist ein Teil der Anderswelt. Einer dieser Geister, dem niemand je begegnen will, ist die Banshee. Dieser Geist manifestiert sich als eine blasse Frauengestalt mit schwarzen Haar und in weiße Gewänder gehüllt. Sie gilt nicht einfach nur als schlechtes Omen, sondern mit ihrem Erscheinen kündigt die Banshee einen bevorstehenden und wahrscheinlichen Tod an.
Die Banshee hat kein bösartiges Gemüt. Sie ist Botin und Begleiterin in einem. Oftmals ist sie die Einzige an der Seite eines Sterbenden. Manche wollen sogar glauben, dass es ein Segen ist, in Anwesenheit einer Banshee zu sterben, da sie einem die Schmerzen nehmen könne. </div>
<h1>Naturgeister</h1>
<div>Die Anderswelt beherbergt noch andere Arten von Geistern, die sich von den Menschen abgewandt haben. Abseits der Städte, in der unberührten Natur verweilen die Naturgeister. Vor Menschen verstecken sie sich im Blätterdach der Bäume oder unterbrechen ihr Wasserspiel, um sich als Schatten unter der Wasseroberfläche zu verbergen. Naturgeister sind Wesen, die über eine ganz eigene Magie verfügen. Je älter und stärker der Wald ist, in dem ein Naturgeist lebt, umso mächtiger ist auch die Magie des Geisterwesens. Die einzigen Personen, mit denen sie in Kontakt treten, sind Hexen. Diesen helfen sie sogar gelegentlich mit der Verstärkung eines Zaubers oder Rituals. </div>
</div>
<div class="lexikon_text">
<h1>Reading Further</h2>
<h2>Canons</h2>
<h2>Auch Interessant</h2>
</div>
</div>
</div>
</div>
CSS
Code: .lexikon_container {width: 800px;
margin:auto;
background:url('https://abload.de/img/moroccan-flowerndjys.png');
font-family:var(--texting);
line-height:160%;
font-size:14px;
}
.lexikon_head {
background:#8F3D3D;
font-family:var(--heading);
font-size:33px;
color:var(--bg);
padding:20px;
text-align:right;
}
.lexikon_body {
display:flex;
justify-content:space-between;
}
.lexikon_menu {
flex: 0 0 20%;
}
.lexikon_category{
background:#D75151;
color:var(--bg);
padding:10px;
font-size:15px;
font-family:Var(--heading)
}
.lexikon_menulink {
background:var(--link);
color:var(--bg);
padding:10px;
}
.lexikon_content {
padding:50px;
text-align:justify;
}
.lexikon_quote {
font-family:var(--heading);
font-size: 18px;
margin:auto;
margin-bottom:50px;
background:var(--bg);
padding:20px;
width:90%;
box-sizing:border-box;
color:#8F3D3D;
}
.lexikon_content h1 {
}
.lexikon_content h1:before, .lexikon_content h1:after {
display:none;
}
.lexikon_text div {
width:80%;
margin:auto;
background:var(--bg);
padding:20px;
width:90%;
box-sizing:border-box;
}
1
19.07.2022, 21:24
(Dieser Beitrag wurde zuletzt bearbeitet: 20.07.2022, 00:35 von Hugo.)
Es hagelt Nüsse
und die letzte: Die XXX Bitte!
HTML
Code: <div class="footer_container">
<div class="footer_buttons">
<div class="footer_button"><a href="" title="read all"><i class="fa-solid fa-check-double"></i></a></div>
<div class="footer_button"><a href="" title="to top"><i class="fa-solid fa-caret-up"></i></a></div> <div class="footer_button"><a href="" title="cookies"><i class="fa-solid fa-cookie-bite"></i></a></div>
<div class="footer_button"><a href="" title="logout"><i class="fa-solid fa-power-off"></i></a></div>
</div>
<div class="footer_body">
<div class="footer_upper">
<div class="footer_upper1">
<div class="footer_anwesend">
<div class="footer_h">Anwesend</div>
<div class="footer_content">
<span>aktuell sind folgende Dinos anwesend</span><br> Donnersaurus Rektus; Arektus Patrosaurus; Betticall Sauril, Bubba
</div>
</div>
<div class="footer_neuster">Der neuste Dino ist <a href="">Donnersaurs Rektus</a></div>
</div>
<div class="footer_stats"> <div class="footer_h">Dinozahlen</div> <div class="footer_content">
<div class=stats_box>
<div>Frischfleisch</div>
<div> 8</div>
</div>
<div class=stats_box>
<div>Baumreich</div>
<div>12</div>
</div>
<div class=stats_box>
<div>Mamutfriedhof</div>
<div>11</div>
</div> <div class=stats_box>
<div>Der Tiefe See</div>
<div> 6</div>
</div>
</div>
</div>
</div>
<div class="footer_lower">
<div class="footer_abwesend"> <div class="footer_h">Abwesend</div><div class="footer_content">
<a href="">Bubba</a> 24.07.22
</div></div>
<div class="footer_24h"> <div class="footer_h">Der Tag der Dinos</div> <div class="footer_content">
<span>In den letzen 24 Stunden waren folgende Dinos in einem Land vor unserer Zeit</span>
Donnersaurus Rektus; Arektus Patrosaurus; Betticall Sauril, Bubba; Tricepterus; Stachelbuckel
</div></div>
</div>
</div>
</div>
CSS
Code: :root {
--main: #3E5952;
--boxes: #CAD2D0;
--text: #73b7a4;
--contrast: #5E9283;
--ub:'Gilda Display', serif;
--font: 'Jomolhari', serif;
}
a {
text-decoration:none;
color:var(--contrast);
opacity:0.95;
transition:0.3s ease-in;
}
a:hover {
color:var(--text);
}
.footer_container {
font-family:var(--font);
width: 1200px;
margin:auto;
line-height:160%;
background:var(--boxes);
border:5px solid var(--main);
display:flex;
color:var(--text);
}
.footer_lower, .footer_upper {
display:flex;
justify-content:space-between;
gap:20px;
}
.footer_buttons {
display:flex;
flex-direction:column;
justify-content:space-evenly;
margin:20px 39px;
}
.footer_button {
background:var(--main);
width:55px;
height:55px;
transform:rotate(45deg);
margin:20px 0px;
display:flex;
align-items:center;
justify-content:center;
}
.footer_button a:link, .footer_button a:visited {
color:var(--text);
transform:rotate(-45deg);
font-size:33px;
}
.footer_body{
height:100%;
margin:20px
}
.footer_content {
background:var(--main);
padding:20px;
color:var(--boxes);
}
.footer_anwesend {
flex: 0 1 33%;
}
.footer_content span {
color:var(--contrast);
}
.footer_neuster {
font-size:33px;
margin-top:30px;
color:var(--main)
}
.footer_stats .footer_content {
display:flex;
justify-content:space-around;
flex-wrap:wrap;
}
.stats_box {
flex: 0 1 40%;
text-align:center;
margin:20px;
}
.footer_stats {
flex: 1 0 55%;
}
.stats_box div:nth-child(odd) {
font-family:var(--ub);
color:var(--text);
font-size:23px;
}
.stats_box div:nth-child(even) {
color:var(--boxes);
font-size:18px;
font-weight:bold;
}
.footer_abwesend {
flex: 1 0 25%;
}
.footer_lower .footer_content {
min-height: 100px;
}
.footer_h {
font-family:var(--ub);
color:var(--main);
font-size:24px;
}
2
|
