Nosotros estamos juntos de nuevo - Footer
am
Nosotros estamos juntos de nuevo - Footer
HTML
Code:
<div id="epic-footer_basiskasten">
<div class="epic-footer_basislinks">
<div class="epic-footer_basislinks-strich">
<i class="cp cp-targaryen epic-footer_dragonicon"></i>
<!--- <i class="fa-brands fa-d-and-d epic-footer_dragonicon"></i> --->
<div class="epic-footer_whoisonline">
<div class="epic-footer_whoisonlinetitle">Wer ist online?</div>
<div class="epic-footer_whoisonlinebauch"><font style="color:var(--epic_col4);">Daenerys Targaryen</font>, <font style="color:var(--epic_col6);">Sansa Stark</font>, <font style="color:var(--epic_col7);">Cersei Baratheon</font>, <font style="color:var(--epic_col4);">Margaery Tyrell</font>, <font style="color:var(--epic_col6);">Jon Snow</font>, <font style="color:var(--epic_col7);">Tyrion Lannister</font>, <font style="color:var(--epic_col6);">Arya Stark</font>, <font style="color:var(--epic_col5);">Oberyn Martell</font>, <font style="color:var(--epic_col5);">Jorah Mormont</font>, <font style="color:var(--epic_col5);">Theon Graufreud</font>, <font style="color:var(--epic_col4);">Daenerys Targaryen</font>, <font style="color:var(--epic_col4);">Sansa Stark</font>, <font style="color:var(--epic_col6);">Jon Snow</font>, <font style="color:var(--epic_col7);">Tyrion Lannister</font>, <font style="color:var(--epic_col6);">Arya Stark</font>, <font style="color:var(--epic_col5);">Oberyn Martell</font>, <font style="color:var(--epic_col5);">Jorah Mormont</font>, <font style="color:var(--epic_col5);">Theon Graufreud</font> </div>
</div>
<div class="epic-footer_buttons">
<a href="" class="epic-footer_buttonlink" title="Datenschutz"><i class="cp cp-sword" style="font-size:20px;"></i></a>
<a href="" class="epic-footer_buttonlink" title="Impressum"><i class="fa-solid fa-scroll-old" style="font-size:21px;"></i></a><br />
<a href="" class="epic-footer_buttonlink" title="alles als gelesen markieren" style="margin-top:10px;"><i class="cp cp-crystal-ball" style="font-size:20px;"></i></a>
<a href="" class="epic-footer_buttonlink-logout" title="ausloggen" style="margin-top:10px;"><i class="fa-solid fa-dungeon" style="font-size:21px;"></i></a>
<br />
<a href="" class="epic-footer_buttonlink" title="nach oben" style="margin-top:10px;"><i class="cp cp-key" style="font-size:20px;"></i></a>
<a href="" class="epic-footer_buttonlink" title="powered by" style="margin-top:10px;"><i class="fa-sharp fa-solid fa-staff" style="font-size:21px;"></i></a>
</div>
<div class="epic-footer_sisterbutton">
<div class="epic-footer_whoisonlinetitle">neue Westerosi</div>
<div class="epic-footer_flex">
<div><img src="https://abload.de/img/220629_ariellekebbel_n5f4w.png" style="height:50px;filter: grayscale(100%) brightness(40%);" /></div>
<div style="margin-top:10px;"><div class="epic-footer_newuser">Elsa Targaryen</div>
<div class="epic-footer_newuser1">12 Jahre, Prinzessin</div>
</div>
</div>
</div>
</div>
</div>
<!--- RECHTER KASTEN --->
<div class="epic-footer_basisdragon epic-footer_flex">
<div class="epic-footer_basisdragon-strich">
<div style="margin-bottom:80px;">
<div class="epic-footer_northmiddlesouth"><i class="cp cp-stark" style="color:#64809d80;"></i></div>
<div class="epic-footer_northmiddlesouth-stat"><font style="font-family:var(--epic_font2) !important;font-size:20px;text-transform:lowercase;">North</font><br />
45</div>
</div>
<div style="margin-bottom:80px;">
<div class="epic-footer_northmiddlesouth"><i class="cp cp-lannister" style="color:#999c5e80;"></i></div>
<div class="epic-footer_northmiddlesouth-stat"><font style="font-family:var(--epic_font2) !important;font-size:20px;text-transform:lowercase;">middle</font><br />
234</div>
</div>
<div><div class="epic-footer_northmiddlesouth"><i class="cp cp-tyrell" style="color:#9d646480;"></i></div>
<div class="epic-footer_northmiddlesouth-stat"><font style="font-family:var(--epic_font2) !important;font-size:20px;text-transform:lowercase;">south</font><br />
111</div>
</div>
</div>
<div class="epic-footer_basislinie epic-footer_flexwrap">
<div class="epic-footer_quote">
<div class="epic-footer_whoisonlinetitle">Inplayzitat:</div>
<div class="epic-footer_quote-in"><font style="font-size:20px;">➳</font>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.</div>
</div>
<div class="epic-footer_whowasthere">
<div class="epic-footer_whoisonlinetitle">Wer war online?</div>
<div class="epic-footer_whowasthere-in"><div class="epic-footer_whowasthere-scroll"><font style="color:var(--epic_col4);">Daenerys Targaryen</font>, <font style="color:var(--epic_col6);">Sansa Stark</font>, <font style="color:var(--epic_col7);">Cersei Baratheon</font>, <font style="color:var(--epic_col4);">Margaery Tyrell</font>, <font style="color:var(--epic_col6);">Jon Snow</font>, <font style="color:var(--epic_col7);">Tyrion Lannister</font>, <font style="color:var(--epic_col6);">Arya Stark</font>, <font style="color:var(--epic_col5);">Oberyn Martell</font>, <font style="color:var(--epic_col5);">Jorah Mormont</font>, <font style="color:var(--epic_col5);">Theon Graufreud</font>, <font style="color:var(--epic_col4);">Daenerys Targaryen</font>, <font style="color:var(--epic_col4);">Sansa Stark</font>, <font style="color:var(--epic_col6);">Jon Snow</font>, <font style="color:var(--epic_col7);">Tyrion Lannister</font>, <font style="color:var(--epic_col6);">Arya Stark</font>, <font style="color:var(--epic_col5);">Oberyn Martell</font>, <font style="color:var(--epic_col5);">Jorah Mormont</font>, <font style="color:var(--epic_col5);">Theon Graufreud</font>, <font style="color:var(--epic_col4);">Daenerys Targaryen</font>, <font style="color:var(--epic_col6);">Sansa Stark</font>, <font style="color:var(--epic_col7);">Cersei Baratheon</font>, <font style="color:var(--epic_col4);">Margaery Tyrell</font>, <font style="color:var(--epic_col6);">Jon Snow</font>, <font style="color:var(--epic_col7);">Tyrion Lannister</font>, <font style="color:var(--epic_col6);">Arya Stark</font>, <font style="color:var(--epic_col5);">Oberyn Martell</font>, <font style="color:var(--epic_col5);">Jorah Mormont</font>, <font style="color:var(--epic_col5);">Theon Graufreud</font>, <font style="color:var(--epic_col4);">Daenerys Targaryen</font>, <font style="color:var(--epic_col4);">Sansa Stark</font>, <font style="color:var(--epic_col6);">Jon Snow</font>, <font style="color:var(--epic_col7);">Tyrion Lannister</font>, <font style="color:var(--epic_col6);">Arya Stark</font>, <font style="color:var(--epic_col5);">Oberyn Martell</font>, <font style="color:var(--epic_col5);">Jorah Mormont</font>, <font style="color:var(--epic_col5);">Theon Graufreud</font>, <font style="color:var(--epic_col4);">Daenerys Targaryen</font>, <font style="color:var(--epic_col6);">Sansa Stark</font>, <font style="color:var(--epic_col7);">Cersei Baratheon</font>, <font style="color:var(--epic_col4);">Margaery Tyrell</font>, <font style="color:var(--epic_col6);">Jon Snow</font>, <font style="color:var(--epic_col7);">Tyrion Lannister</font>, <font style="color:var(--epic_col6);">Arya Stark</font>, <font style="color:var(--epic_col5);">Oberyn Martell</font>, <font style="color:var(--epic_col5);">Jorah Mormont</font>, <font style="color:var(--epic_col5);">Theon Graufreud</font>, <font style="color:var(--epic_col4);">Daenerys Targaryen</font>, <font style="color:var(--epic_col4);">Sansa Stark</font>, <font style="color:var(--epic_col6);">Jon Snow</font>, <font style="color:var(--epic_col7);">Tyrion Lannister</font>, <font style="color:var(--epic_col6);">Arya Stark</font>, <font style="color:var(--epic_col5);">Oberyn Martell</font>, <font style="color:var(--epic_col5);">Jorah Mormont</font>, <font style="color:var(--epic_col5);">Theon Graufreud</font> </div></div>
</div>
<div><div class="epic-footer_abwesenheit">
<div class="epic-footer_whoisonlinetitle">Abwesenheiten</div>
<div class="epic-footer_abwesenheit-in"><div class="epic-footer_abwesenheit-scroll"><font style="color:var(--epic_col4);">Daenerys Targaryen</font> (08.11.2022 bis 31.12.2022), <font style="color:var(--epic_col6);">Sansa Stark</font>(01.11.2022 bis 31.11.2022), <font style="color:var(--epic_col7);">Cersei Baratheon</font>, <font style="color:var(--epic_col4);">Margaery Tyrell</font>(02.11.2022 bis 22.12.2022), <font style="color:var(--epic_col6);">Jon Snow</font>(03.11.2022 bis 11.12.2022), </div></div>
<div class="epic-footer_buttonsister epic-footer_flexwrap">
<div style="width:88px;height:31px;padding:5px;border:1px solid var(--epic_col2);"><img src="https://via.placeholder.com/88x31" /></div>
<div style="width:88px;height:31px;padding:5px;border:1px solid var(--epic_col2);"><img src="https://via.placeholder.com/88x31" /></div>
<div style="width:88px;height:31px;padding:5px;border:1px solid var(--epic_col2);"><img src="https://via.placeholder.com/88x31" /></div>
<div style="width:88px;margin-top:10px;height:31px;padding:5px;border:1px solid var(--epic_col2);"><img src="https://via.placeholder.com/88x31" /></div>
<div style="width:88px;margin-top:10px;height:31px;padding:5px;border:1px solid var(--epic_col2);"><img src="https://via.placeholder.com/88x31" /></div>
<div style="width:88px;margin-top:10px;height:31px;padding:5px;border:1px solid var(--epic_col2);"><img src="https://via.placeholder.com/88x31" /></div>
</div>
</div>
</div>
<div class="epic-footer_postdings">
<div>
<div class="epic-footer_zahlen">156</div>
<div class="epic-footer_zahlen-name">Posts</div>
</div>
<div style="margin-top:50px;"><div class="epic-footer_zahlen">78</div>
<div class="epic-footer_zahlen-name">Themen</div>
<div>
<div style="margin-top:50px;"><div class="epic-footer_zahlen">22</div>
<div class="epic-footer_zahlen-name">User</div>
</div>
<div style="margin-top:50px;">
<div class="epic-footer_zahlen">285</div>
<div class="epic-footer_zahlen-name">Charakter</div>
</div>
</div>
</div>
</div>
<div class="epic-footer_marktschreier epic-footer_flex">
<div class="epic-footer_marktschreiertitle">Marktschreier</div>
<div class="epic-footer_marktschreiertext"><marquee direction="right" scrolldelay="200">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 </marquee></div>
</div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Pirata+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f39936c821.js" crossorigin="anonymous"></script>
<script src="//pull.cappuccicons.com/cpf.js"></script>CSS
Code:
:root {
--epic_col1:#282828;
--epic_col2:#6dc7a480;
--epic_col3:#d9e5e0;
--epic_col4:#649d86;
--epic_col5:#9d6464;
--epic_col6:#64809d;
--epic_col7:#999c5e;
--epic_font1:'Calibri', sans-serif;
--epic_font2:'Pirata One', cursive;
}
.epic-footer_flex {display: flex;flex-wrap: nowrap;flex-direction: row;align-items: flex-start; justify-content:space-between;}
.epic-footer_flexwrap {display: flex;flex-wrap: wrap;flex-direction: row;align-items: flex-start; justify-content:space-between;}
#epic-footer_basiskasten {
width:1100px;
height:500px;
background-color:#000;
margin:auto;
position:relative;
}
.epic-footer_basislinks {
width:165px;
height:490px;
padding:10px 0px 0px 10px;
float:left;
background-color:var(--epic_col1);
}
.epic-footer_basislinks-strich {
width:160px;
height:350px;
border-top:5px solid var(--epic_col2);
border-left:5px solid var(--epic_col2);
}
.epic-footer_dragonicon {
color:var(--epic_col2);
font-size:45px;
margin:0px 0px 0px 0px;
}
.epic-footer_whoisonline {
width:140px;
height:160px;
position:relative;
margin:-30px 0px 0px 10px;
}
.epic-footer_whoisonlinetitle {
font-family: var(--epic_font2);
color:var(--epic_col3);
font-weight:400;
font-size:26px;
}
.epic-footer_whoisonlinebauch {
width:130px;
height:150px;
padding:10px 10px 0px 0px;
overflow:auto;
font-family:var(--epic_font1);
font-size:13px;
color:var(--epic_col3);
margin-top:-10px;
text-align:justify;
}
.epic-footer_whoisonlinebauch::-webkit-scrollbar {width: 4px;background-color:var(--epic_col2);border:1px solid var(--epic_col1);border-radius:2px;}
.epic-footer_whoisonlinebauch::-webkit-scrollbar-thumb {width: 4px;background-color:var(--epic_col2);}
.epic-footer_buttons {
width:150px;
height:155px;
margin:40px 0px 0px 0px;
text-align:center;
}
a.epic-footer_buttonlink:link, a.epic-footer_buttonlink:visited {
min-width:20px;
min-height:20px;
display:inline-block;
text-align:center;
padding:10px;
border:1px solid var(--epic_col4);
color:var(--epic_col4);
text-decoration:none;
transition:1s;
margin-right:5px;
}
a.epic-footer_buttonlink:hover {color:var(--epic_col3); border:1px solid var(--epic_col3);}
a.epic-footer_buttonlink-logout:link, a.epic-footer_buttonlink-logout:visited {
min-width:20px;
min-height:20px;
display:inline-block;
text-align:center;
padding:10px;
border:1px solid var(--epic_col7);
color:var(--epic_col7);
text-decoration:none;
transition:1s;
margin-right:5px;
}
a.epic-footer_buttonlink-logout:hover {color:var(--epic_col4); border:1px solid var(--epic_col4);}
.epic-footer_sisterbutton {
width:154px;
height:83px;
border-left:1px solid var(--epic_col2);
border-bottom:1px solid var(--epic_col2);
margin-top:10px;
padding:5px;
margin-left:-5px;
}
.epic-footer_newuser {
font-size:13px;
text-transform:uppercase;
color:var(--epic_col4);
font-family:var(--epic_font1);
}
.epic-footer_newuser1 {
font-size:12px;
color:var(--epic_col3);
font-family:var(--epic_font1);
}
/**** RECHTER KASTEN ***/
.epic-footer_basisdragon {
width:925px;
height:490px;
padding:10px 0px 0px 0px;
background:url('https://abload.de/img/221104_footeraufgabe_dmesc.png');
}
.epic-footer_basisdragon-strich {
width:180px;
height:454px;
text-align:center;
padding:10px;
border-top:5px solid var(--epic_col2);
border-bottom:1px solid var(--epic_col2);
}
.epic-footer_northmiddlesouth {
font-size:105px;
margin-top:20px;
}
.epic-footer_northmiddlesouth-stat {
color:var(--epic_col3);
text-transform:uppercase;
font-size:15px;
position:relative;
margin-top:-80px;
font-family:var(--epic_font1);
line-height:13px;
}
.epic-footer_basislinie {
width:740px;
height:478px;
margin-right:10px;
border-top:1px solid var(--epic_col2);
border-right:1px solid var(--epic_col2);
border-bottom:1px solid var(--epic_col2);
}
.epic-footer_quote {
width:710px;
height:100px;
margin-top:10px;
}
.epic-footer_quote-in {
font-style:italic;
text-align:center;
width:710px;
height:60px;
color:var(--epic_col4);
font-size:14px;
line-height:13px;
margin-top:10px;
}
.epic-footer_whowasthere {
width:300px;
height:200px;
margin-top:10px;
}
.epic-footer_whowasthere-in {
width:280px;
height:180px;
padding:10px;
margin-top:10px;
}
.epic-footer_whowasthere-scroll {
width:270px;
height:180px;
padding:0px 10px 0px 0px;
font-family:var(--epic_font1);
overflow:auto;
font-size:13px;
text-align:justify;
color:var(--epic_col3);
}
.epic-footer_whowasthere-scroll::-webkit-scrollbar {width: 4px;background-color:var(--epic_col2);border:1px solid var(--epic_col1);}
.epic-footer_whowasthere-scroll::-webkit-scrollbar-thumb {width: 4px;background-color:var(--epic_col2);}
/*** Abwesenheiten ***/
.epic-footer_abwesenheit {
width:300px;
height:100px;
margin-top:10px;
}
.epic-footer_abwesenheit-in {
width:280px;
height:80px;
padding:10px;
margin-top:10px;
}
.epic-footer_abwesenheit-scroll {
width:270px;
height:80px;
padding:0px 10px 0px 0px;
font-family:var(--epic_font1);
overflow:auto;
font-size:13px;
text-align:justify;
color:var(--epic_col3);
}
.epic-footer_abwesenheit-scroll::-webkit-scrollbar {width: 4px;background-color:var(--epic_col2);border:1px solid var(--epic_col1);}
.epic-footer_abwesenheit-scroll::-webkit-scrollbar-thumb {width: 4px;background-color:var(--epic_col2);}
.epic-footer_postdings {
width:90px;
height:320px;
padding:10px;
text-align:center;
}
.epic-footer_zahlen {
font-size:45px;
color:var(--epic_col2);
font-family:var(--epic_font2);
}
.epic-footer_zahlen-name {
color:var(--epic_col3);
font-family:var(--epic_font1);
text-transform:uppercase;
font-size:12px;
margin-top:-35px;
}
.epic-footer_buttonsister {
width:310px;
height:100px;
}
.epic-footer_marktschreier {
width:600px;height:50px;margin-top:-70px;
}
.epic-footer_marktschreiertitle {
color:var(--epic_col5);
font-family:var(--epic_font2);
font-size:25px;
margin-top:8px;
}
.epic-footer_marktschreiertext {
color:var(--epic_col3);
font-family:var(--epic_font1);
width:460px;
height:25px;
padding-top:15px;
}9
