Nosotros estamos juntos de nuevo - Postbit
am
Nosotros estamos juntos de nuevo - Postbit
Wir haben fertig! *Mic drop*
Screenshot & Link
brought to you by @darkest night @Skytilla @wolfanddragon @White_Rabbit
HTML
Code:
<div class="epic-postbit">
<div class="epic-postbit_body">
<div class="epic-postbit_body-header">
<div class="epic-postbit_body-header-left">
<div class="epic-postbit_body-username">Ivras Erelin</div>
<div class="epic-postbit_body-quote">"We could have been spared several ends of the world if just one damn soul would listen to me for once!"</div>
</div>
<div class="epic-postbit_body-header-right">
<img src="https://i.imgur.com/NaZnZEL.png">
</div>
</div>
<div class="epic-postbit_body-main">
<div class="epic-postbit_body-navigation">
<div class="epic-postbit_body-navigation-menu">
<div class="epic-postbit_body-navigation-menu-items tablinks" onclick="openNav(event, 'avatar')">Avatar</div>
<div class="epic-postbit_body-navigation-menu-items tablinks" onclick="openNav(event, 'stats')">Statistiken</div>
<div class="epic-postbit_body-navigation-menu-items tablinks" onclick="openNav(event, 'information')">Informationen</div>
</div>
<div class="epic-postbit_body-navigation-content">
<div id="avatar" class="tabcontent">
<div class="epic-postbit_avatar"></div>
<div class="epic-postbit_body-navigation-content-blocks">
<div class="epic-postbit_body-navigation-content-blocks-block" title="Geschlecht - männlich"><i class="fa-sharp fa-solid fa-mars"></i></div>
<div class="epic-postbit_body-navigation-content-blocks-block" title="Gesinnung - genervt"><i class="fa-sharp fa-solid fa-face-unamused"></i></div>
<div class="epic-postbit_body-navigation-content-blocks-block" title="Beziehungsstatus - verheiratet"><i class="fa-sharp fa-solid fa-rings-wedding"></i></div>
<div class="epic-postbit_body-navigation-content-blocks-block" title="Partei - Greifenkönig"><i class="fa-sharp fa-solid fa-heart"></i></div>
<div class="epic-postbit_body-navigation-content-blocks-block" title="Rasse - Elf"><i class="fa-sharp fa-solid fa-hood-cloak"></i></div>
</div>
</div>
<div id="stats" class="tabcontent epic-postbit_body-navigation-tabcontent">
<div class="epic-postbit_sword">
<i class="fa-solid fa-shield"></i>
<div class="epic-postbit_sword-title"> Gesundheit</div>
</div>
<div class="epic-post_skills">
<div class="epic-post_skill">
<div class="epic-post_skills_name">STÄRKE</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 30%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Mut</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 40%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Weisheit</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 90%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Intelligenz</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 20%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Ausdauer</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 60%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Sarkasmus</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 90%;"></div>
</div>
</div>
</div>
<div class="epic-post_talents">
<div class="epic-post_talent cando" title="Kann schwimmen"><i class="fa-sharp fa-solid fa-person-swimming"></i></div>
<div class="epic-post_talent" title="Kann nicht lesen"><i class="fa-sharp fa-solid fa-book"></i></div>
<div class="epic-post_talent cando" title="Kann reiten"><i class="fa-sharp fa-solid fa-horse-saddle"></i></div>
<div class="epic-post_talent" title="Kann nicht schreiben"><i class="fa-sharp fa-solid fa-signature"></i></div>
<div class="epic-post_talent" title="Kann nicht kämpfen"><i class="fa-sharp fa-solid fa-sword"></i></div>
<div class="epic-post_talent" title="Kann nicht bogenschießen"><i class="fa-sharp fa-solid fa-bow-arrow"></i></div>
<div class="epic-post_talent cando" title="Kann Tränke brauen"><i class="fa-sharp fa-solid fa-flask-round-potion"></i></div>
<div class="epic-post_talent cando" title="Kann hellsehen"><i class="fa-sharp fa-solid fa-crystal-ball"></i></div>
<div class="epic-post_talent" title="Ist nicht trinkfest"><i class="fa-sharp fa-solid fa-wine-bottle"></i></div>
<div class="epic-post_talent cando" title="Kann Mandoline spielen"><i class="fa-sharp fa-solid fa-mandolin"></i></div>
<div class="epic-post_talent" title="Kann sich nicht verteidigen"><i class="fa-sharp fa-solid fa-shield"></i></div>
<div class="epic-post_talent cando" title="Kann kochen"><i class="fa-sharp fa-solid fa-cauldron"></i></div>
</div>
<div class="epic-post_userstats">
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Posts</div>
<div class="epic-post_userstat-number">12345</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Themen</div>
<div class="epic-post_userstat-number">12345</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Inplayposts</div>
<div class="epic-post_userstat-number">12345</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Inplayszenen</div>
<div class="epic-post_userstat-number">12345</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Dabei seit</div>
<div class="epic-post_userstat-number">12.09.2022</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">zuletzt online</div>
<div class="epic-post_userstat-number">31.10.2022</div>
</div>
</div>
</div>
<div id="information" class="tabcontent epic-postbit_body-navigation-tabcontent">
<div class="epic-postbit_icon"></div>
<div class="epic-postbit_shortinfos">
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon"><i class="fa-sharp fa-solid fa-hourglass"></i></div>
<div class="epic-postbit_shortinfo-content">12345 Jahre</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon" title="Wohnort"><i class="fa-sharp fa-solid fa-boot-heeled"></i></div>
<div class="epic-postbit_shortinfo-content">55 Jahre</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon" title="Beruf"><i class="fa-sharp fa-solid fa-feather-pointed"></i></div>
<div class="epic-postbit_shortinfo-content">Königlicher Berater</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon"><i class="fa-sharp fa-solid fa-house-tree"></i></div>
<div class="epic-postbit_shortinfo-content">Am Hofe</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon" title="Reittier"><i class="fa-sharp fa-solid fa-dragon"></i></div>
<div class="epic-postbit_shortinfo-content">Wollhornschaf</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon" title="Schule"><i class="fa-sharp fa-solid fa-hand-sparkles"></i></div>
<div class="epic-postbit_shortinfo-content">Illusionsmagier</div>
</div>
</div>
<div class="epic-postbit_appearance">
<div class="epic-postbit_appearance-title">Aussehen</div>
<div class="epic-postbit_appearance-content">
<div>1.82m</div>
<div>blaugrau</div>
<div>braun</div>
<div>45</div>
<div>königblau</div>
<div>pfirsicheistee</div>
</div>
</div>
</div>
</div>
<div class="epic-postbit_body-navigation-lines">
<div class="epic-postbit_body-navigation-lines-line1"></div>
<div class="epic-postbit_body-navigation-lines-line2"></div>
</div>
</div>
<div class="epic-postbit_body-post">
<div class="epic-postbit_body-post-head">
<div class="epic-postbit_body-post-head-left">
1.1.2022, 23:59 Uhr - <span class="cando">editiert von XYZ</span>
</div>
<div class="epic-postbit_body-post-head-right">
<div class="epic-postbit_body-post-id">#1234</div>
<div class="epic-postbit_body-post-checkbox"></div>
</div>
</div>
<div class="epic-postbit_body-post-body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
</div>
</div>
</div>
</div>
<div class="epic-postbit_menu">
<div class="epic-postbit_menu-item" title="Editieren"><i class="fa-sharp fa-solid fa-wand-magic-sparkles"></i> </div>
<div class="epic-postbit_menu-item" title="Zitieren"><i class="fa-sharp fa-solid fa-quotes"></i> </div>
<div class="epic-postbit_menu-item" title="Löschen"><i class="fa-sharp fa-solid fa-fire"></i>
</div>
<div class="epic-postbit_menu-item" title="Melden"><i class="fa-sharp fa-solid fa-exclamation"></i> </div>
<div class="epic-postbit_menu-item" title="Essen"><i class="fa-sharp fa-solid fa-utensils"></i> </div>
<div class="epic-postbit_menu-item" title="Suchen"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> </div>
<div class="epic-postbit_menu-item" title="PN schicken"><i class="fa-sharp fa-solid fa-rabbit-running"></i> </div>
</div>
</div>
<div class="epic_postbit-footer">
<div class="epic_postbit-footer-nick">Hans-Dieter</div>
</div>
<div class="epic-postbit">
<div class="epic-postbit_body">
<div class="epic-postbit_body-header">
<div class="epic-postbit_body-header-left">
<div class="epic-postbit_body-username">Ivras Erelin</div>
<div class="epic-postbit_body-quote">"We could have been spared several ends of the world if just one damn soul would listen to me for once!"</div>
</div>
<div class="epic-postbit_body-header-right">
<img src="https://i.imgur.com/NaZnZEL.png">
</div>
</div>
<div class="epic-postbit_body-main">
<div class="epic-postbit_body-navigation">
<div class="epic-postbit_body-navigation-menu">
<div class="epic-postbit_body-navigation-menu-items tablinks" onclick="openNav(event, 'avatar2')">Avatar</div>
<div class="epic-postbit_body-navigation-menu-items tablinks" onclick="openNav(event, 'stats2')">Statistiken</div>
<div class="epic-postbit_body-navigation-menu-items tablinks" onclick="openNav(event, 'information2')">Informationen</div>
</div>
<div class="epic-postbit_body-navigation-content">
<div id="avatar2" class="tabcontent">
<div class="epic-postbit_avatar"></div>
<div class="epic-postbit_body-navigation-content-blocks">
<div class="epic-postbit_body-navigation-content-blocks-block" title="Geschlecht - männlich"><i class="fa-sharp fa-solid fa-mars"></i></div>
<div class="epic-postbit_body-navigation-content-blocks-block" title="Gesinnung - genervt"><i class="fa-sharp fa-solid fa-face-unamused"></i></div>
<div class="epic-postbit_body-navigation-content-blocks-block" title="Beziehungsstatus - verheiratet"><i class="fa-sharp fa-solid fa-rings-wedding"></i></div>
<div class="epic-postbit_body-navigation-content-blocks-block" title="Partei - Greifenkönig"><i class="fa-sharp fa-solid fa-heart"></i></div>
<div class="epic-postbit_body-navigation-content-blocks-block" title="Rasse - Elf"><i class="fa-sharp fa-solid fa-hood-cloak"></i></div>
</div>
</div>
<div id="stats2" class="tabcontent epic-postbit_body-navigation-tabcontent">
<div class="epic-postbit_sword">
<i class="fa-solid fa-shield"></i>
<div class="epic-postbit_sword-title"> Gesundheit</div>
</div>
<div class="epic-post_skills">
<div class="epic-post_skill">
<div class="epic-post_skills_name">STÄRKE</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 30%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Mut</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 40%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Weisheit</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 90%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Intelligenz</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 20%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Ausdauer</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 60%;"></div>
</div>
</div>
<div class="epic-post_skill">
<div class="epic-post_skills_name">Sarkasmus</div>
<div class="epic-post_skills_bar">
<div class="epic-post_skills_bar-content" style="width: 90%;"></div>
</div>
</div>
</div>
<div class="epic-post_talents">
<div class="epic-post_talent cando" title="Kann schwimmen"><i class="fa-sharp fa-solid fa-person-swimming"></i></div>
<div class="epic-post_talent" title="Kann nicht lesen"><i class="fa-sharp fa-solid fa-book"></i></div>
<div class="epic-post_talent cando" title="Kann reiten"><i class="fa-sharp fa-solid fa-horse-saddle"></i></div>
<div class="epic-post_talent" title="Kann nicht schreiben"><i class="fa-sharp fa-solid fa-signature"></i></div>
<div class="epic-post_talent" title="Kann nicht kämpfen"><i class="fa-sharp fa-solid fa-sword"></i></div>
<div class="epic-post_talent" title="Kann nicht bogenschießen"><i class="fa-sharp fa-solid fa-bow-arrow"></i></div>
<div class="epic-post_talent cando" title="Kann Tränke brauen"><i class="fa-sharp fa-solid fa-flask-round-potion"></i></div>
<div class="epic-post_talent cando" title="Kann hellsehen"><i class="fa-sharp fa-solid fa-crystal-ball"></i></div>
<div class="epic-post_talent" title="Ist nicht trinkfest"><i class="fa-sharp fa-solid fa-wine-bottle"></i></div>
<div class="epic-post_talent cando" title="Kann Mandoline spielen"><i class="fa-sharp fa-solid fa-mandolin"></i></div>
<div class="epic-post_talent" title="Kann sich nicht verteidigen"><i class="fa-sharp fa-solid fa-shield"></i></div>
<div class="epic-post_talent cando" title="Kann kochen"><i class="fa-sharp fa-solid fa-cauldron"></i></div>
</div>
<div class="epic-post_userstats">
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Posts</div>
<div class="epic-post_userstat-number">12345</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Themen</div>
<div class="epic-post_userstat-number">12345</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Inplayposts</div>
<div class="epic-post_userstat-number">12345</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Inplayszenen</div>
<div class="epic-post_userstat-number">12345</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">Dabei seit</div>
<div class="epic-post_userstat-number">12.09.2022</div>
</div>
<div class="epic-post_userstat">
<div class="epic-post_userstat-title">zuletzt online</div>
<div class="epic-post_userstat-number">31.10.2022</div>
</div>
</div>
</div>
<div id="information2" class="tabcontent epic-postbit_body-navigation-tabcontent">
<div class="epic-postbit_icon"></div>
<div class="epic-postbit_shortinfos">
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon"><i class="fa-sharp fa-solid fa-hourglass"></i></div>
<div class="epic-postbit_shortinfo-content">12345 Jahre</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon" title="Wohnort"><i class="fa-sharp fa-solid fa-boot-heeled"></i></div>
<div class="epic-postbit_shortinfo-content">55 Jahre</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon" title="Beruf"><i class="fa-sharp fa-solid fa-feather-pointed"></i></div>
<div class="epic-postbit_shortinfo-content">Königlicher Berater</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon"><i class="fa-sharp fa-solid fa-house-tree"></i></div>
<div class="epic-postbit_shortinfo-content">Am Hofe</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon" title="Reittier"><i class="fa-sharp fa-solid fa-dragon"></i></div>
<div class="epic-postbit_shortinfo-content">Wollhornschaf</div>
</div>
<div class="epic-postbit_shortinfo">
<div class="epic-postbit_shortinfo-icon" title="Schule"><i class="fa-sharp fa-solid fa-hand-sparkles"></i></div>
<div class="epic-postbit_shortinfo-content">Illusionsmagier</div>
</div>
</div>
<div class="epic-postbit_appearance">
<div class="epic-postbit_appearance-title">Aussehen</div>
<div class="epic-postbit_appearance-content">
<div>1.82m</div>
<div>blaugrau</div>
<div>braun</div>
<div>45</div>
<div>königblau</div>
<div>pfirsicheistee</div>
</div>
</div>
</div>
</div>
<div class="epic-postbit_body-navigation-lines">
<div class="epic-postbit_body-navigation-lines-line1"></div>
<div class="epic-postbit_body-navigation-lines-line2"></div>
</div>
</div>
<div class="epic-postbit_body-post">
<div class="epic-postbit_body-post-head">
<div class="epic-postbit_body-post-head-left">
1.1.2022, 23:59 Uhr - <span class="cando">editiert von XYZ</span>
</div>
<div class="epic-postbit_body-post-head-right">
<div class="epic-postbit_body-post-id">#1234</div>
<div class="epic-postbit_body-post-checkbox"></div>
</div>
</div>
<div class="epic-postbit_body-post-body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
</div>
</div>
</div>
</div>
<div class="epic-postbit_menu">
<div class="epic-postbit_menu-item" title="Editieren"><i class="fa-sharp fa-solid fa-wand-magic-sparkles"></i> </div>
<div class="epic-postbit_menu-item" title="Zitieren"><i class="fa-sharp fa-solid fa-quotes"></i> </div>
<div class="epic-postbit_menu-item" title="Löschen"><i class="fa-sharp fa-solid fa-fire"></i>
</div>
<div class="epic-postbit_menu-item" title="Melden"><i class="fa-sharp fa-solid fa-exclamation"></i> </div>
<div class="epic-postbit_menu-item" title="Essen"><i class="fa-sharp fa-solid fa-utensils"></i> </div>
<div class="epic-postbit_menu-item" title="Suchen"><i class="fa-sharp fa-solid fa-magnifying-glass"></i> </div>
<div class="epic-postbit_menu-item" title="PN schicken"><i class="fa-sharp fa-solid fa-rabbit-running"></i> </div>
</div>
</div>
<div class="epic_postbit-footer">
<div class="epic_postbit-footer-nick">Hans-Dieter</div>
</div>CSS
Code:
:root {
--epic_col1: #323232;
--epic_col2: #494949;
--epic_col3: #676767;
--epic_col4: #748c6b;
--epic_col5: #536c4b;
--epic_col6: #3b4f33;
--epic_col7: #efefef;
--epic_font1: "Roboto";
--epic_font2: "Playfair";
}
.epic-postbit {
display: flex;
gap: 20px;
margin-left: 100px;
}
.epic-postbit_body {
width: 1100px;
background: var(--epic_col2);
}
.epic-postbit_menu {
display: flex;
flex-direction: column;
gap: 20px;
}
.epic-postbit_menu-item {
width: 55px;
height: 55px;
background: var(--epic_col1);
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: var(--epic_col5);
transition: 0.5s ease-out;
}
.epic-postbit_menu-item:hover {
color: var(--epic_col4);
cursor: pointer;
transition: 0.5s ease-out;
}
.epic-postbit_body-header {
width: 100%;
height: 200px;
background: var(--epic_col6);
display: flex;
gap: 50px;
justify-content: flex-end;
align-items: center;
padding: 20px;
box-sizing: border-box;
background-image: url("https://imgur.com/2XlD5i2.png");
}
.epic-postbit_body-header-left {
text-align: right;
}
.epic-postbit_body-username {
font-size: 30px;
color: var(--epic_col4);
font-weight: bold;
text-transform: uppercase;
border-bottom: 3px solid var(--epic_col7);
padding-top: 5px;
padding-left: 100px;
}
.epic-postbit_body-quote {
font-size: 14px;
font-style: italic;
margin-top: 5px;
width: 450px;
}
.epic-postbit_body-header-right {
width: 100px;
height: 100px;
background: var(--epic_col5);
transform: rotate(45deg);
margin-right: 50px;
}
.epic-postbit_body-header-right img {
transform: rotate(-45deg);
}
/* Hauptteil */
.epic-postbit_body-main {
display: flex;
gap: 20px;
}
.epic-postbit_body-navigation {
width: 350px;
display: flex;
margin-top: -80px;
}
.epic-postbit_body-post {
width: 750px;
flex-basis: 750px;
padding: 50px 60px;
}
.epic-postbit_body-post-head {
display: flex;
justify-content: space-between;
}
.epic-postbit_body-post-head-left {
}
.epic-postbit_body-post-head-right {
display: flex;
gap: 10px;
align-items: center;
}
.epic-postbit_body-post-id {
color: var(--epic_col4);
font-weight: bold;
}
.epic-postbit_body-post-checkbox {
width: 15px;
height: 15px;
background: var(--epic_col7);
}
.epic-postbit_body-post-body {
text-align: justify;
line-height: 180%;
padding: 20px 0;
font-size: 15px;
}
/* Navigation */
.epic-postbit_body-navigation-menu {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 30px;
}
.epic-postbit_body-navigation-menu-items {
width: 50px;
height: 30px;
background: var(--epic_col1);
display: flex;
align-items: center;
padding: 0 10px;
margin-left: 10px;
transition: 0.4s ease-out;
}
.epic-postbit_body-navigation-menu-items:hover {
margin-left: -40px;
width: 100px;
transition: 0.4s ease-out;
cursor: pointer;
}
.epic-postbit_body-navigation-content {
margin-left: -30px;
}
.epic-postbit_body-navigation-tabcontent {
width: 300px;
height: 720px;
background: var(--epic_col1);
padding: 20px;
box-sizing: border-box;
}
.tabcontent {
animation: fadeEffect 0.5s;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.epic-postbit_avatar {
width: 300px;
height: 400px;
background: url("https://images-ext-1.discordapp.net/external/4zvnJnCslkgTmQchP3lB_t03eqEOw7q2_vmaiccZW5c/https/static1.colliderimages.com/wordpress/wp-content/uploads/2022/08/the-lord-of-the-rings-the-rings-of-power-celebrimbor-social-featured.jpg?width=1224&height=612");
background-size: cover;
background-position: center center;
}
.epic-postbit_body-navigation-content-blocks {
width: 300px;
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.epic-postbit_body-navigation-content-blocks-block {
width: 50px;
height: 50px;
background: var(--epic_col1);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--epic_col5);
}
.epic-postbit_body-navigation-lines {
margin-left: 10px;
margin-top: 150px;
display: flex;
gap: 5px;
}
.epic-postbit_body-navigation-lines-line1 {
height: 350px;
width: 3px;
background: var(--epic_col3);
}
.epic-postbit_body-navigation-lines-line2 {
height: 350px;
width: 3px;
background: var(--epic_col3);
margin-top: 100px;
}
/* Schwert test */
.epic-postbit_sword {
font-size: 100px;
text-align: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(0deg, var(--epic_col5) 80%, #e1e1e1 20%);
animation: load 2s 0s;
-webkit-animation: load 2s 0s;
-moz-animation: load 2s 0s;
-o-animation: load 2s 0s;
}
@keyframes load {
0% {
background-image: linear-gradient(0deg, var(--epic_col5) 0%, #e1e1e1 100%);
}
25% {
background-image: linear-gradient(0deg, var(--epic_col5) 20%, #e1e1e1 80%);
}
50% {
background-image: linear-gradient(0deg, var(--epic_col5) 40%, #e1e1e1 60%);
}
75% {
background-image: linear-gradient(0deg, var(--epic_col5) 60%, #e1e1e1 40%);
}
100% {
background-image: linear-gradient(0deg, var(--epic_col5) 80%, #e1e1e1 20%);
}
}
.epic-postbit_sword-title {
font-size: 20px;
text-transform: uppercase;
color: var(--epic_col3);
font-weight: bold;
}
/* Informationen */
.epic-postbit_icon {
width: 100px;
height: 100px;
background: #efefef;
margin: 20px auto;
transform: rotate(45deg);
border: 5px solid var(--epic_col5);
background: url("https://images-ext-1.discordapp.net/external/LbleLg_fRGAsd_83d3G2ZMB_cnw1kS9UQD9tdd3mDeM/https/64.media.tumblr.com/5a91000b67700839912b55938a8daa94/eb3697b72ba4fb23-4b/s540x810/74c8f0b6b355f70761735d961bd7cf7eebba886a.gif");
background-size: cover;
}
.epic-postbit_shortinfos {
margin-top: 60px;
display: flex;
flex-direction: column;
gap: 10px;
}
.epic-postbit_shortinfo {
height: 30px;
display: flex;
align-items: center;
}
.epic-postbit_shortinfo-icon {
background: var(--epic_col6);
font-size: 15px;
height: 100%;
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
}
.epic-postbit_shortinfo-content {
background: var(--epic_col2);
height: 30px;
padding: 0 20px;
display: flex;
justify-content: center;
align-items: center;
}
.epic-postbit_appearance {
margin-top: 40px;
}
.epic-postbit_appearance-title {
font-size: 20px;
font-family: var(--epic_font2);
text-transform: uppercase;
}
.epic-postbit_appearance-content {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
justify-content: center;
}
.epic-postbit_appearance-content div {
background: var(--epic_col2);
padding: 5px 10px;
}
/* Statistiken */
.epic-post_skills {
display: flex;
flex-direction: column;
gap: 10px;
}
.epic-post_skill {
display: flex;
flex-direction: column;
}
.epic-post_skills_name {
color: var(--epic_col7);
text-transform: uppercase;
font-family: var(--epic_font2);
}
.epic-post_skills_bar {
width: 260px;
height: 10px;
background: var(--epic_col3);
}
.epic-post_skills_bar-content {
height: 100%;
background: var(--epic_col4);
animation: load 2s 0s;
-webkit-animation: load 2s 0s;
-moz-animation: load 2s 0s;
-o-animation: load 2s 0s;
}
@keyframes load {
0% {
width: 100%;
}
}
.epic-post_talents {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
.epic-post_talent {
font-size: 20px;
color: var(--epic_col3);
width: 80px;
height: 40px;
background: var(--epic_col2);
display: flex;
justify-content: center;
align-items: center;
}
.cando {
color: var(--epic_col4);
}
/* User Stats */
.epic-post_userstats {
display: flex;
gap: 10px;
margin-top: 20px;
flex-wrap: wrap;
justify-content: space-between;
}
.epic-post_userstat {
background: var(--epic_col3);
width: 120px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.epic-post_userstat-title {
background: var(--epic_col2);
width: 120px;
text-align: center;
text-transform: uppercase;
font-size: 12px;
}
.epic-post_userstat-number {
background: var(--epic_col6);
width: 120px;
text-align: center;
font-size: 12px;
}
/* Footer */
.epic_postbit-footer {
width: 1100px;
background: var(--epic_col1);
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: 100px;
padding-right: 50px;
box-sizing: border-box;
margin-bottom: 50px;
}
.epic_postbit-footer-nick {
font-weight: bold;
font-size: 25px;
text-transform: uppercase;
color: var(--epic_col4);
}JavaScript
Code:
function openNav(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}10
