Nosotros estamos juntos de nuevo - Index
am
Nosotros estamos juntos de nuevo - Index
HTML
Code:
<div class="epic_body">
<div class="epic_forumbit_info">
<nav>
<ul>
<li tabindex="0">
<b>KALENDER</b>
<div>
<img src="https://i.imgur.com/IVxsbW4.png">
<p></p>
</div>
</li>
<li tabindex="0">
<b>PLOT</b>
<div>
<h1>Reise nach Mordor</h1>
<p> Eine von <b>Tom Bombadil</b> angeführte Polonaise steuert auf Mount Doom zu. <i>Sauron</i> ist dank eines Besuches beim Optiker nicht auf die Party seines Lebens vorbereitet.</p>
</div>
</li>
<li tabindex="0">
<b>GERÜCHTE</b>
<div>
<h1>Gerüchteküche</h1>
<p>Die Nachbarn tuscheln, dass man <b>Thorin Oakenshield</b> angeblich im Haus des Hobbits <b>Bilbo Baggins</b> verschwinden, und erst <i>am nächsten Mittag</i> das Haus wieder verlassen sah.</p>
</div>
</li>
</ul>
<div>
<h1>Informationen</h1>
<p>om Kalender bis zur Gerüchteküche.<br>
Lass dich inspirieren.</p>
</div>
</nav>
</div>
<div class="epic_katheader">
<div class="epic_katheader_name">Mittelerde
</div>
</div>
<div class="epic_forumbit3">
<div class="epic_forumbit_bit3">
<div class="epic_forumbit_forumname"><a href="">Auenland</a></div>
<div class="epic_forumbit_lastpost2">
<div class="epic_forumlastpost_par">
<div class="epic_lastpost_effect">
<a href="">We do what Bilbo Baggins hates!</a>
<div class="epic_forumbit_lastpost2_line"></div>
01.01.2022, 15:39 Uhr
</div>
<div class="epic_lastpost_effectava">
<img src="https://weltenwanderer-rpg.de/bilderp/epic_ava.png" width="55%">
<a href="">Dwalin</a>
</div>
</div>
</div>
<div class="epic_forumbit_forumsub2">
<div class="epic_forumbit_sub" title="X Posts">?</div>
<div class="epic_forumbit_sub" title="X Threads (Pun intended)">?</div>
<div class="epic_forumbit_subforums2">Bilbos Haus | Petunias Wagen | +2</div>
</div>
<div class="epic_forumbit_forumdescrib2">
<img src="https://i.imgur.com/mYBjspL.png">
<div class="overlay">
<div class="text">Das Auenland ist die <i>Heimat der Hobbits</i>, die hier friedlich in kleinen Dörfern und vereinzelten Gehöften leben. Zu den bekanntesten Ansiedlungen zählen <b>Hobbingen</b>, <b>Wasserau</b> und <b>Michelbinge</b>. Dank des milden Klimas und der fruchtbaren Böden eignet sich die Gegend hervorragend zum Ackerbau. Im Laufe des Dritten Zeitalters hat sich das Auenland zu einem idyllischen Fleckchen Erde entwickelt, so dass vor dem Ringkrieg Berichte von Drachen, Trollen und Wölfen inmitten von Gemüsebeeten, Postämtern und säuberlich beschnittenen Gartenhecken fast wie Märchen geklungen haben.</div>
</div>
</div>
</div>
<div class="epic_forumbit_bit4">
<div class="epic_forumbit_forumname"><a href="">Gondor</a></div>
<div class="epic_forumbit_lastpost2">
<div class="epic_forumlastpost_par">
<div class="epic_lastpost_effect">
Nothing to see here!
<div class="epic_forumbit_lastpost2_line"></div>
nie
</div>
<div class="epic_lastpost_effectava">
<img src="https://i.imgur.com/Hx940Aj.png" width="55%">
Nobody
</div>
</div>
</div>
<div class="epic_forumbit_forumsub2">
<div class="epic_forumbit_sub" title="X Posts">?</div>
<div class="epic_forumbit_sub" title="X Threads (Pun intended)">?</div>
<div class="epic_forumbit_subforums2">Zitadelle | Schmiede | +5</div>
</div>
<div class="epic_forumbit_forumdescrib3">
<img src="https://i.imgur.com/LvTmme1.png">
<div class="overlay">
<div class="text">Die bevölkerungsreichsten Regionen Gondors waren, neben dem Gebiet um die Hauptstadt <b>Minas Tirith</b>, <b>Lossarnach</b>, <b>Lebennin</b>, und <b>Belfalas</b>.
Als Sitz der Könige und bevölkerungsreichste Siedlung war Osgiliath lange Zeit die <i>bedeutendste Stadt des Königreichs</i>. Trotz der Lage weit im Landesinneren war die Stadt auf Grund der Tiefe des Anduins auch für große seetüchtige Schiffe zu erreichen. Des weiteren war Osgiliath der einzige Ort, an dem eine Brücke über den Anduin führte.</div>
</div>
</div>
</div>
<div class="epic_forumbit_bit3">
<div class="epic_forumbit_forumname"><a href="">Düsterwald</a></div>
<div class="epic_forumbit_lastpost2">
<div class="epic_forumlastpost_par">
<div class="epic_lastpost_effect">
Hier ist der Kammerjäger noch zu Gange.
<div class="epic_forumbit_lastpost2_line"></div>
niemals
</div>
<div class="epic_lastpost_effectava">
<img src="https://i.imgur.com/Hx940Aj.png" width="55%">
Ein Geist
</div>
</div>
</div>
<div class="epic_forumbit_forumsub2">
<div class="epic_forumbit_sub" title="X Posts">?</div>
<div class="epic_forumbit_sub" title="X Threads (Pun intended)">?</div>
<div class="epic_forumbit_subforums2">Bäume | Noch mehr Bäume | +3</div>
</div>
<div class="epic_forumbit_forumdescrib2">
<img src="https://i.imgur.com/YAc8Bcj.png">
<div class="overlay">
<div class="text">Der Düsterwald ist ein großer Wald in <b>Rhovanion</b>, im Nordosten Mittelerdes. Er erstreckt sich vom Anduin bis zum Eilend und vom Grauen Gebirge bis zu den Braunen Landen. Im Norden fließt der Waldfluss durch den Wald, welcher im Grauen Gebirge entspringt und in den Langen See mündet. Der Waldfluss hat nur einen Nebenfluss, den Verzauberten Fluss, welchen Bilbo und die Zwerge auf dem Weg zum Erebor überqueren. Insgesamt führen zwei Straßen durch den Wald: Die <i>Alte Waldstraße (Men-i-Naugrim)</i> und die etwas weiter nördlich gelegene <i>Neue Waldstraße</i>. Dieser Pfad führt vom sogenannten Waldtor bis zu Thranduils Hallen im Osten.</div>
</div>
</div>
</div>
</div>
<div class="epic_forumbit_info">
<nav>
<ul>
<li tabindex="0">
<b>KNIGHTS</b>
<div>
<h1>MALE WANTED</h1>
<img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch1.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch2.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch3.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch4.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch5.png">
</div>
</li>
<li tabindex="0">
<b>LADIES</b>
<div>
<h1>FEMALE WANTED</h1>
<img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch6.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch7.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch8.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch9.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch10.png">
</div>
</li>
<li tabindex="0">
<b>GANGS</b>
<div>
<h1>GROUPS WANTED</h1>
<img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch11.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch12.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch13.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch14.png"> - <img src="https://weltenwanderer-rpg.de/bilderp/epic_gesuch15.png">
</div>
</li>
</ul>
<div>
<h1>GESUCHE UND PLOTPERSONEN</h1>
<p>Mittelerde vermisst Gesichter.<br>
Vielleicht bringst du ja jemanden mit!
</p>
</div>
</nav>
</div>
<div class="epic_katheader">
<div class="epic_katheader_name">Zum Tänzelnden Pony
</div>
</div>
<div class="epic_forumbit">
<div class="epic_forumbit_bit">
<div class="epic_forumbit_forumstatus_off"></div>
<div class="epic_forumbit_forum">
<div class="epic_forumbit_forumname">Gasthaus</div>
<div class="epic_forumbit_forumdescrib">
A <b>wonderful serenity</b> has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the <i>charm of existence</i> in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath
</div>
</div>
<div class="epic_forumbit_forumsub">
<div class="epic_forumbit_sub" title="X Posts">?</div>
<div class="epic_forumbit_sub" title="X Threads (Pun intended)">?</div>
</div>
<div class="epic_forumbit_lastpost">
<a href="">Platz für einen supermegaultrakreativen Titel</a>
<div class="epic_forumbit_lastpost2_line"></div>
vielleicht von dir
</div>
</div>
</div>
<div class="epic_forumbit2">
<div class="epic_forumbit_bit2">
<div class="epic_forumbit_forumstatus_on"></div>
<div class="epic_forumbit_forum">
<div class="epic_forumbit_forumdescrib">A <b>wonderful serenity</b> has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the <i>charm of existence</i> in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</div>
<div class="epic_forumbit_forumname">Archiv</div>
</div>
<div class="epic_forumbit_forumsub">
<div class="epic_forumbit_sub" title="X Posts">?</div>
<div class="epic_forumbit_sub" title="X Threads (Pun intended)">?</div>
</div>
<div class="epic_forumbit_lastpost">
<a href="">Gib mir die Hand, ich bau' dir ein Schloss aus Sand!</a>
<div class="epic_forumbit_lastpost2_line"></div>
irgendwie, irgendwo, irgendwann
</div>
</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Estonia&display=swap" rel="stylesheet">CSS
Code:
:root {
--epic_col1: #344248;
--epic_col2: #8E653F;
--epic_col3: rgba(23, 24, 25, 0.7);
--epic_col4: rgba(185, 167, 145, 0.7);
--epic_col5: #171819;
--epic_font1: 'Cinzel', serif;
--epic_font2: 'Estonia', cursive;
}
body {
background-image: url("https://images.pexels.com/photos/1743367/pexels-photo-1743367.jpeg");
background-attachment: scroll;
background-size: cover;
}
a {
color: var(--epic_col2);
text-decoration: underline;
}
a:hover {
color: var(--epic_col5);
}
b {
color: var(--epic_col4);
}
i {
color: var(--epic_col3)
}
.epic_body {
width: 1090px;
padding: 40px;
background: var(--epic_col3);
display: grid;
place-items: center;
justify-content: space-between;
margin: auto auto;
}
.epic_katheader {
width: 1100px;
height: 50px;
background: var(--epic_col4);
margin-bottom: 30px;
font-family: var(--epic_font2);
font-size: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
border-bottom-right-radius: 119px;
}
.epic_katheader_name {
color: var(--epic_col5);
padding-right: 50px;
padding-bottom: 5px;
}
.epic_forumbit_info {
width: 1100px;
height: 150px;
background: var(--epic_col1);
border-top-left-radius: 105px;
border-bottom-right-radius: 119px;
display: grid;
place-items: center;
}
.epic_forumbit {
width: 1050px;
height: 150px;
background: var(--epic_col1);
border-top-left-radius: 105px;
border-bottom-right-radius: 119px;
margin-bottom: 15px;
display: grid;
place-items: center;
}
.epic_forumbit2 {
width: 1050px;
height: 150px;
background: var(--epic_col1);
border-top-right-radius: 105px;
border-bottom-left-radius: 119px;
margin-bottom: 15px;
display: grid;
place-items: center;
}
.epic_forumbit_bit {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-end;
margin-left: -80px;
margin-bottom: 20px;
}
.epic_forumbit_bit2 {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-end;
margin-left: -80px;
margin-top: -40px;
}
.epic_forumbit_forumstatus_on {
width: 120px;
height: 100px;
background: var(--epic_col2);
margin-left: 60px;
margin-top: 30px;
}
.epic_forumbit_forumstatus_off {
width: 120px;
height: 100px;
background: var(--epic_col4);
margin-left: 60px;
margin-top: 30px;
}
.epic_forumbit_forum {
height: 100px;
padding-left: 20px;
margin-top: 25px;
display: flex;
flex-direction: column;
}
.epic_forumbit_forumname {
font-family: var(--epic_font1);
font-size: 25px;
color: var(--epic_col4)
}
.epic_forumbit_forumname a{
color: var(--epic_col4);
text-decoration: none;
}
.epic_forumbit_forumname a:hover{
color: var(--epic_col2);
text-decoration: none;
}
.epic_forumbit_forumdescrib {
width: 530px;
height: 70px;
background: var(--epic_col4);
color: var(--epic_col3);
font-size: 13px;
line-height: 1.2;
overflow: auto;
}
.epic_forumbit_forumsub {
height: 70px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin-left: 20px;
margin-bottom: -7px;
}
.epic_forumbit_sub {
width: 25px;
height: 25px;
background: var(--epic_col2);
display: grid;
align-items: center;
justify-content: center;
}
.epic_forumbit_lastpost {
width:160px;
height: 80px;
background: var(--epic_col4);
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 13px;
margin-top:-30px;
margin-left: 20px;
}
/* TABS */
nav {
position: relative;
overflow: hidden;
margin: 0 auto;
word-spacing: -5px;
width: 100%;
border-top-left-radius: 105px;
}
nav ul {
margin: 0 auto;
padding: 0;
display: inline-block;
}
nav li {
background: #4c5663;
word-spacing: 0;
width: 220px;
height: 8px;
list-style: none;
margin: 0 auto;
padding-left: 80px;
padding-bottom: 20px;
padding-top: 20px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-right: none;
border-bottom: none;
background: var(--epic_col1);
font-family: var(--epic_font1);
letter-spacing: 3px;
box-shadow: inset -50px 0 175px -50px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
nav li:hover {
box-shadow: inset -50px 0 175px -50px var(--epic_col4);
transition-delay: 0.2s;
transition-duration: 0.3s;
}
nav li:active {
background: rgba(255,170,118, .5);
}
nav li span {
float: right;
font-weight: bold;
display: none;
}
nav li:hover span {
display: block;
}
nav > div {
position: absolute;
top: 0;
right: 0;
width: 740px;
height: 110px;
padding: 25px;
background: var(--epic_col1);
font-family: var(--epic_font1);
word-spacing: 3px;
}
nav > div::before {
content: "";
position: absolute;
width: 900px;
height: 240px;
background: url('https://anniesullie.com/2018/08/middle-earth-leather-journal/images/middle-earth-map-engrave_hu437436d52ba05641cd990ab8fe61198c_37839078_600x0_resize_box_2.png');
opacity: 30%;
z-index: 0;
margin-top: -40px;
margin-left: 200px;
}
nav > div:hover::before {
background-color: var(--epic_col1);
opacity: 20%;
filter: blur(2px);
}
nav li > div {
display: none;
position: absolute;
top: 0;
right: 0;
width: 740px;
height: 110px;
padding: 25px;
background: var(--epic_col1);
font-family: var(--epic_font1);
letter-spacing: 1px;
z-index: 10;
}
h1 {
margin: 0 auto;
font-family: var(--epic_font1);
font-size: 25px;
color: var(--epic_col2);
}
nav li:focus {
outline: none;
background: var(--epic_col1);
box-shadow: none;
}
nav li:focus > div {
display: block;
}
/* OFFPLAY-BIT*/
.epic_forumbit3 {
width: 1050px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 25px;
}
.epic_forumbit_bit3 {
width: 260px;
height: 340px;
padding: 20px;
background: var(--epic_col1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-top-left-radius: 105px;
border-bottom-right-radius: 119px;
}
.epic_forumbit_bit4 {
width: 260px;
height: 340px;
padding: 20px;
background: var(--epic_col1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-top-right-radius: 105px;
border-bottom-left-radius: 119px;
}
.epic_forumbit_lastpost2 {
width: 240px;
height: 70px;
padding: 10px;
background: var(--epic_col4);
}
.epic_forumbit_lastpost2_line {
width: 80%;
height: 1px;
background: var(--epic_col2);
}
.epic_forumbit_forumsub2 {
width: 260px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.epic_forumbit_subforums2 {
width: 165px;
height: 10px;
padding: 10px;
background: var(--epic_col2);
align-items: center;
font-size: 11px;
text-colour: var(--epic_col3)
}
.epic_forumbit_forumdescrib2 {
/* width: 200px;
height: 120px;
padding: 10px;
background: var(--epic_col4);
color: var(--epic_col3);
font-size: 13px;
line-height: 1.2;
overflow: auto;
display: flex;
flex-direction: column;
margin-bottom: 10px;
margin-left: -40px; */
width: 220px;
height: 140px;
position: relative;
margin-bottom: 10px;
margin-left: -40px;
}
.epic_forumbit_forumdescrib3 {
/* width: 200px;
height: 120px;
padding: 10px;
background: var(--epic_col4);
color: var(--epic_col3);
font-size: 13px;
line-height: 1.2;
overflow: auto;
display: flex;
flex-direction: column;
margin-bottom: 10px;
margin-right: -40px; */
width: 220px;
height: 140px;
position: relative;
margin-bottom: 10px;
margin-right: -40px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: var(--epic_col4);
}
.epic_forumbit_forumdescrib3:hover .overlay {
opacity: 1;
}
.epic_forumbit_forumdescrib2:hover .overlay {
opacity: 1;
}
.text {
width: 220px;
height: 140px;
color: var(--epic_col3);
font-size: 12px;
overflow: auto;
margin-left: 115px;
margin-top: 70px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* width */
::-webkit-scrollbar {
width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
background: var(--epic_col4);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--epic_col1);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--epic_col2);
}
/*Last Post Effect*/
.epic_lastpost_effect {
display:inline-block;
width:240px;
height:70px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.epic_lastpost_effect:hover {
background: var(--epic_col1);
font-family: var(--epic_font1);
font-size: 14px;
display: grid;
place-items: center;
text-align: center;
color: var(--epic_col2);
padding: 10px;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
.epic_lastpost_effectava {
display:inline-block;
width:100px;
height:70px;
display: grid;
place-items: center;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.epic_lastpost_effectava:hover {
background: var(--epic_col1);
font-family: var(--epic_font1);
padding: 10px;
font-size: 12px;
color: var(--epic_col2);
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
.epic_forumlastpost_par{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}6. November 23:59 Uhr
9
