Nosotros estamos juntos de nuevo - Header
am
Wir durften einen Header einmal in der Gästeversion und einmal für die Mitglieder erstellen, daher gibt es mehr Screenshots.
Gästeheader - Geschlossen
[Bild: https://i18.servimg.com/u/f18/18/65/71/67/final_11.png]
Gästeheader - Offen
[Bild: https://i18.servimg.com/u/f18/18/65/71/67/final_10.png]
HTML
Code:
<head><script src="https://kit.fontawesome.com/09b9123a9a.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pirata+One&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Quicksand">
</head>
<div class="epic_header_header">
<div id="epic_header_whole">
<div id="epic_header_hidden">
<div id="epic_header_header_open">
<div id="epic_header_hf_top">
<!-- leer fuer guests, usern wird angezeigt - wuerde mit conditionals und user group geloest werden -->
</div>
<div id="epic_header_hf_middle">
<div class="epic_header_hf_m_title">
who's here to help?
</div>
<div class="epic_header_hf_m_teamonline">
<!-- anzeigen ueber plugin - userid ueber usergroup, last activity etc automatisiert ueber plugin -->
<div class="epic_header_hf_m_teamie">
<div class="epic_header_teamiebild">
<img src="https://picsum.photos/g/50/50"></div>
<div class="epic_header_teamieinfo"> <div class="epic_header_teamername"><a class="epic_header_one" href="https://epic.quodvide.de/member.php?action=profile&uid=199">Jazzy</a></div>
online (vor 15 Minuten)</br>
<a class="epic_header_three" href="https://epic.quodvide.de/private.php?action=send&uid=199">PN senden</a></div>
</div>
<div class="epic_header_hf_m_teamie">
<div class="epic_header_teamiebild">
<img src="https://picsum.photos/g/50/50">
</div>
<div class="epic_header_teamieinfo"> <div class="epic_header_teamername">
<a class="epic_header_one" href="https://epic.quodvide.de/member.php?action=profile&uid=515">Fiffi</a>
</div>
nicht online
</div>
</div>
<div class="epic_header_hf_m_teamie">
<div class="epic_header_teamiebild">
<img src="https://picsum.photos/g/50/50">
</div>
<div class="epic_header_teamieinfo">
<div class="epic_header_teamername"><a class="epic_header_one" href="https://epic.quodvide.de/member.php?action=profile&uid=511">Kay</a></div>
online (vor 3 Minuten) </br>
<a class="epic_header_three" href="https://epic.quodvide.de/private.php?action=send&uid=511">PN senden</a></div>
</div>
</div>
</div>
<div class="epic_header_hf_bottom">
<div class="epic_header_hf_bottom_infobox">
<div class="epic_header_hf_b_info_title">TITLE
</div>
<div class="epic_header_hf_b_info_text">
A wonderful serenity 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 charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, ...</div>
<div class="epic_header_hf_b_info_link">
<a class="epic_header_two" href="https://test.de">weiterlesen</a>
</div>
</div>
<div class="epic_header_hf_bottom_links">
<div class="epic_header_hf_b_links">
<a href="#" title="Storyline"> <i class="fas fa-scroll"></i></a>
</div>
<div class="epic_header_hf_b_links">
<a href="#" title="Glossar"><i class="fas fa-book"></i></a>
</div>
<div class="epic_header_hf_b_links">
<a href="#" title="Gruppierungen"><i class="fas fa-users"></i></a>
</div>
<div class="epic_header_hf_b_links">
<a href="#" title="Memberlist"> <i class="fas fa-user"></i> </a>
</div>
<div class="epic_header_hf_b_links">
<a href="#" title="Weitere Listen"> <i class="fas fa-list-ul"></i> </a>
</div>
<div class="epic_header_hf_b_links">
<a href="#" title="Gesuche"><i class="fas fa-search"></i> </a>
</div>
</div>
</div>
</div>
</div>
<div class="epic_header_left" id="epic_header_left">
<div class="epic_header_back" id="epic_header_vorhang">
<h2 class="epic_header_main" id="epic_header_title" style="font-size: 550%">we light <br/>the way</h2>
<div class="epic_header_mitte" id="epic_header_mitte">
<div>High Fantasy</div>
<div>Szenentrennung</div>
<div> 1 n. A.E.</div>
<div>Plotorientiert</div>
</div>
<!--Jazzy-->
<div class="epic_header_ucp">
<a href="#" title="Login" class="epic_header_right_button">
<i class="fas fa-swords"></i>
</a> <a href="#" title="Registrieren" class="epic_header_right_button">
<i class="fas fa-plus"></i>
</a>
</div>
</div>
<img src="https://i18.servimg.com/u/f18/18/65/71/67/button14.png" title="Klick mich" id="epic_header_toggle" class="epic_header_circle" onclick="move()"></a>
</div>
<div id="epic_header_right">
</div>
</div>
</div>
</div>CSS
Code:
:root {
--epic_col1: #8a1b14;
--epic_col2: grey;
--epic_col3: lightgrey ;
--epic_col4: #fff;
--epic_col5: black ;
--epic_col6:hsla(0, 100%, 65%, 0.4);
--epic_font1: "Pirata One";
--epic_font2: "Quicksand";
--epic_font3: "Georgia";
}
a{
text-decoration:none;
}
.epic_header_header{
box-sizing:border-box;
margin:0;
padding:0
}
#epic_header_whole{
background:url(https://i18.servimg.com/u/f18/18/65/71/67/adobes15.jpg);
background-repeat:no-repeat;
background-size:cover;
/*large*/
width:1500px;
height:900px;
position:relative;
z-index:0
}
#epic_header_left{
display:inline-block;
width:33%;
height:900px;
left:0;
position:absolute;
top:0;
z-index:3;
transition:all 2s linear
}
#epic_header_right{
display:inline-block;
right:0;
top:0
}
#epic_header_toggle{
right:-220px;
z-index:3;
top:calc(450px - 160px);
text-align:center;
cursor:pointer
}
.epic_header_ucp{
text-align:center;
margin:80px auto auto
}
a.epic_header_right_button i{
font-size:2rem;
color:var(--epic_col2)
}
a.epic_header_right_button i:hover{
color:var(--epic_col1);
}
.epic_header_back {
height: 700px;
width: 528px;
background-image: url(https://i18.servimg.com/u/f18/18/65/71/67/bg_lef10.png);
background-size:contain;
background-repeat:no-repeat;
padding-top: 150px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
box-shadow: 10px 0px 10px black;
}
#epic_header_title {
margin: 40px auto 130px -50px;
color: var(--epic_col1);
padding-top: 30px;
padding-bottom: 0px;
padding-right: auto;
padding-left: auto;
opacity:1;
transition:all 2s linear;
font-family:var(--epic_font1);
}
.epic_header_main {
text-align: center;
height:auto
}
.epic_header_circle {
border-radius: 100%;
position: absolute;
width: 300px;
height: 300px;
color: black;
padding: 10px;
objext-fit:cover;
filter:drop-shadow(0px 0px 16px black);
}
.epic_header_mitte {
margin-left: auto;
transition:all 2s linear;
display:flex;
flex-direction:row}
.epic_header_mitte div{
flex:1;
height: auto;
width: 100px;
background-color: var(--epic_col3);
text-align: center;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
margin: 100px 10px auto 10px;
font-family:var(--epic_font2);
font-size:11px;
text-transform:uppercase
}
#epic_header_mitte{
opacity:1;
transition:all 1s linear;
}
a.epic_header_one:link, a.epic_header_one:visited, a.epic_header_one:active {
color: var(--epic_col3);
text-decoration: none;
}
a.epic_header_one:hover {
color: var(--epic_col2);
text-decoration: none;
}
a.epic_header_two:link, a.epic_header_two:visited, a.epic_header_two:active {
color: var(--epic_col1);
text-decoration: none;
font-family: var(--epic_font2)
}
a.epic_header_two:hover {
color: var(--epic_col2);
text-decoration: underline;
font-family: var(--epic_font2)
}
a.epic_header_three:link, a.epic_header_three:visited, a.epic_header_three:active {
color: black;
text-decoration: none;
}
a.epic_header_three:hover {
color: var(--epic_col2);
text-transform: uppercase;
}
#epic_header_hidden{
width:600px;
height:900px;
transition: 1s all 0s linear;
display:inline-block;
z-index:1
}
#epic_header_header_open {
display: flex;
flex-direction: column;
justify-content: flex-end;
background:rgb(26,25,31);
height: 850px;
width: 450px;
padding: 25px 25px;
gap: 20px;
transition: 1s all 0s linear;
}
#epic_header_hf_top {
display: flex;
justify-content: space-between;
height: 50px;
width: 450px;
transition: 1s all 0s linear
}
.epic_header_hf_top_left {
margin: 10px;
}
.epic_header_hf_top_right {
margin: 10px;
}
#epic_header_hf_middle {
display: flex;
flex-direction: column;
background-color: var(--epic_col6);
height: 110px;
width: 450px;
gap: 10px;
transition: 1s all 0s linear
}
.epic_header_hf_m_title {
font-family: var(--epic_font2);
font-size: 26px;
text-align: right;
margin-top: 10px;
margin-right: 25px;
border-right: solid 2px;
padding-right: 10px;
}
.epic_header_hf_m_teamonline {
display: flex;
justify-content: space-evenly;
}
.epic_header_hf_m_teamie {
display: flex;
margin-top: -5px;
}
.epic_header_teamieinfo {
display: flex;
flex-direction: column;
font-size: 12px;
margin-left: 5px;
justify-content: center;
}
.epic_header_teamername {
text-transform: uppercase;
font-size: 10px;
font-family: var(--epic_font2);
font-weight: 600;
}
.epic_header_hf_bottom {
display: flex;
gap: 18px;
justify-content:flex-end
}
.epic_header_hf_bottom_infobox {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 150px;
width: 300px;
background-color: var(--epic_col3);
border-style: solid;
border-width: 2px;
border-color: var(--epic_col);
gap: 5px;
}
.epic_header_hf_b_info_title {
text-transform: uppercase;
font-size: 20px;
font-family: var(--epic_font2);
border-left: 2px solid var(--epic_col5);
margin-left: 10px;
padding-left: 10px;
}
.epic_header_hf_b_info_title_left {
text-transform: uppercase;
font-size: 16px;
font-family: var(--epic_font2);
border-left: 2px solid var(--epic_col5);
margin-left: 10px;
padding-left: 10px;
}
.epic_header_hf_b_info_title_right {
text-transform: uppercase;
text-align: right;
font-size: 16px;
font-family: var(--epic_font2);
border-right: 2px solid black;
margin-right: 10px;
padding-right: 10px;
}
.epic_header_hf_b_info_text {
font-size: 13px;
font-family: var(--epic_font3);
text-align: justify;
padding: 0px 10px 10px 10px;
overflow:hidden;
}
.epic_header_hf_b_info_link {
text-transform: uppercase;
text-align: right;
font-size: 10px;
font-family: var (--epic_font2);
padding: 10px;
margin-top: -40px;
}
.epic_header_hf_bottom_links {
display: grid;
grid-template:repeat(3,auto)/repeat(2,1fr);
grid-gap:20px;
padding: 10px;
}
.epic_header_hf_b_links {
padding: 3px;
text-transform: uppercase;
color: var(--epic_col4);
font-family: var(--epic_font2);
font-size: 12px;
}
.epic_header_hf_b_links a{
color:var(--epic_col3);
}
.epic_header_hf_b_links i {
color: var(--epic_col2);
font-size: 30px;
}
.epic_header_hf_b_links i:hover {
color: var(--epic_col4);
}JavaScript
Code:
function move(){
document.getElementById("epic_header_left").style.left = "43%";
document.getElementById("epic_header_hidden").style.width="600px";
document.getElementById("epic_header_mitte").style.opacity="0";
document.getElementById("epic_header_header_open").style.width="600px";
document.getElementById("epic_header_hf_top").style.width="600px";
document.getElementById("epic_header_hf_middle").style.width="600px";
}Userheader - Geschlossen
[Bild: https://i18.servimg.com/u/f18/18/65/71/67/final_13.png]
Userheader - Offen
[Bild: https://i18.servimg.com/u/f18/18/65/71/67/final_12.png]
HTML
Code:
<head><script src="https://kit.fontawesome.com/09b9123a9a.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Pirata+One&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Quicksand">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<div class="epic_header_header">
<div id="epic_header_whole">
<div id="epic_header_hidden">
<div id="epic_header_header_open">
<div id="epic_header_hf_top">
<!-- leer fuer guests, usern wird angezeigt - wuerde mit conditionals und user group geloest werden -->
<div class="epic_header_hf_top_left">
<a class="epic_header_icon" href='url' title="Storyline"><i class="fas fa-scroll"></i></a>
<a class="epic_header_icon" href='url' title="Glossar"><i class="fas fa-book"></i></a>
<a class="epic_header_icon" href='url' title="Gruppierungen"><i class="fas fa-users"></i></a>
<a class="epic_header_icon" href='url' title="Memberlist"><i class="fas fa-user"></i></a>
<a class="epic_header_icon" href='url' title="Weitere Listen"><i class="fas fa-list-ul"></i></a>
<a class="epic_header_icon" href='url' title="Weltkarte"><i class="fas fa-map-marked-alt"></i></a>
<a class="epic_header_icon" href='url' title="Gesuche"><i
<i class="fas fa-search"></i></a>
</div>
<div class="epic_header_hf_top_right">
<a class="icon" href='url' title="Neuer Charakter"><i class="fas fa-user-plus"></i></a>
<a class="epic_header_icon" href='url' title="Charakter bearbeiten"><i class="fas fa-user-edit"></i></a>
<a class="epic_header_icon" href='url' title="Logout"><i class="fas fa-sign-out"></i></a>
</div>
</div>
<div id="epic_header_hf_middle">
<div class="epic_header_hf_m_title">
who's here to help?
</div>
<div class="epic_header_hf_m_teamonline">
<!-- anzeigen ueber plugin - userid ueber usergroup, last activity etc automatisiert ueber plugin -->
<div class="epic_header_hf_m_teamie">
<div class="epic_header_teamiebild">
<img src="https://picsum.photos/g/50/50">
</div>
<div class="epic_header_teamieinfo">
<div class="epic_header_teamername">
<a class="epic_header_one" href="https://epic.quodvide.de/member.php?action=profile&uid=199">Jazzy</a>
</div>
online (vor 15 Minuten)</br>
<a class="epic_header_three" href="https://epic.quodvide.de/private.php?action=send&uid=199">PN senden</a>
</div>
</div>
<div class="epic_header_hf_m_teamie">
<div class="epic_header_teamiebild">
<img src="https://picsum.photos/g/50/50">
</div><div class="epic_header_teamieinfo">
<div class="epic_header_teamername">
<a class="epic_header_one" href="https://epic.quodvide.de/member.php?action=profile&uid=515">Fiffi</a>
</div>
nicht online</div>
</div>
<div class="epic_header_hf_m_teamie">
<div class="epic_header_teamiebild">
<img src="https://picsum.photos/g/50/50"></div>
<div class="epic_header_teamieinfo">
<div class="epic_header_teamername">
<a class="epic_header_one" href="https://epic.quodvide.de/member.php?action=profile&uid=511">Kay</a>
</div>
online (vor 3 Minuten) </br>
<a class="epic_header_three" href="https://epic.quodvide.de/private.php?action=send&uid=511">PN senden</a></div>
</div>
</div>
</div>
<div class="epic_header_hf_bottom">
<div class="epic_header_hf_bottom_infobox">
<div class="epic_header_hf_b_info_title">Plot
</div>
<div class="epic_header_hf_b_info_text">
A wonderful serenity 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 charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, ...</div>
<div class="epic_header_hf_b_info_link">
<a class="epic_header_two" href='url'>weiterlesen</a>
</div>
</div>
<div class="epic_header_hf_bottom_infobox">
<div class="epic_header_hf_b_info_title_right">ZEITRAUM
</div>
<div class="epic_header_hf_b_info_text">
Aktuell werden die Sommermonate <b>Juli</b> und <b>August</b> des Jahres 1234 bespielt. </div>
<div class="epic_header_hf_b_info_link">
<a class="epic_header_two" href='url'>weiterlesen</a>
</div>
<div class="epic_header_hf_b_info_title_left">WETTER
</div>
<div class="epic_header_hf_b_info_text">
Heißer Sommer: tagsüber 30-40˚C, nachts mind. 20˚C. Achtung: Sandsturm-Warnung!</div>
</div>
</div>
</div>
</div>
<div class="epic_header_left" id="epic_header_left">
<div class="epic_header_back" id="epic_header_vorhang">
<h2 class="epic_header_main" id="epic_header_title" style="font-size: 550%">we light <br/>the way</h2>
<div class="epic_header_mitte" id="epic_header_mitte">
<div>High Fantasy</div>
<div>Szenentrennung</div>
<div> 1 n. A.E.</div>
<div>Plotorientiert</div>
</div>
<div class="epic_header_ucp">
<a href="#" title="Link zum UCP" class="epic_header_right_button">
<img src="https://www.fillmurray.com/200/300">
</a>
</div>
</div>
<img src="https://i18.servimg.com/u/f18/18/65/71/67/button14.png" title="Klick mich" id="epic_header_toggle" class="epic_header_circle" onclick="move()"></a>
</div>
<div id="epic_header_right">
</div>
</div>
</div>
</div>CSS
Code:
:root {
--epic_col1: #8a1b14;
--epic_col2: grey;
--epic_col3: lightgrey ;
--epic_col4: #fff;
--epic_col5: black ;
--epic_col6:hsla(0, 100%, 65%, 0.4);
--epic_font1: "Pirata One";
--epic_font2: "Quicksand";
--epic_font3: "Georgia";
}
.epic_header_header{
box-sizing:border-box;
margin:0;
padding:0
}
#epic_header_whole{
background:url(https://i18.servimg.com/u/f18/18/65/71/67/adobes15.jpg);
background-repeat:no-repeat;
background-size:cover;
width:1500px;
height:900px;
position:relative;
z-index:0
}
#epic_header_left{
display:inline-block;
width:33%;
height:900px;
left:0;
position:absolute;
top:0;
z-index:3;
transition:all 2s linear
}
#epic_header_right{
display:inline-block;
right:0;
top:0
}
#epic_header_toggle{
right:-220px;
z-index:3;
top:calc(450px - 160px);
text-align:center;
cursor:pointer
}
.epic_header_ucp{
text-align:center;
margin:35px auto auto
}
.epic_header_right_button img{
border-radius:100%;
height:100px;
width:100px;
object-fit:cover;
border:3px solid var(--epic_col1);
}
/*Fiffis Teil*/
.epic_header_back {
height: 700px;
width: 528px;
background-image: url(https://i18.servimg.com/u/f18/18/65/71/67/bg_lef10.png);
background-size:contain;
background-repeat:no-repeat;
padding-top: 150px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
box-shadow: 10px 0px 10px black;
}
#epic_header_title {
margin: 40px auto 130px -50px;
color: var(--epic_col1);
padding-top: 30px;
padding-bottom: 0px;
padding-right: auto;
padding-left: auto;
opacity:1;
transition:all 2s linear;
font-family:var(--epic_font1);
}
.epic_header_main {
text-align: center;
height:auto
}
.epic_header_circle {
border-radius: 100%;
position: absolute;
width: 300px;
height: 300px;
color: black;
padding: 10px;
objext-fit:cover;
filter:drop-shadow(0px 0px 16px black);
}
.epic_header_mitte {
margin-left: auto;
transition:all 2s linear;
display:flex;
flex-direction:row}
.epic_header_mitte div{
flex:1;
height: auto;
width: 100px;
background-color: var(--epic_col3);
text-align: center;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
margin: 100px 10px auto 10px;
font-family:var(--epic_font2);
font-size:11px;
text-transform:uppercase
}
#epic_header_mitte{
opacity:1;
transition:all 1s linear;
}
a.epic_header_one:link, a.epic_header_one:visited, a.epic_header_one:active {
color: var(--epic_col3);
text-decoration: none;
}
a.epic_header_one:hover {
color: var(--epic_col2);
text-decoration: none;
}
a.epic_header_two:link, a.epic_header_two:visited, a.epic_header_two:active {
color: var(--epic_col1);
text-decoration: none;
font-family: var(--epic_font2)
}
a.epic_header_two:hover {
color: var(--epic_col2);
text-decoration: underline;
font-family: var(--epic_font2)
}
a.epic_header_three:link, a.epic_header_three:visited, a.epic_header_three:active {
color: black;
text-decoration: none;
}
a.epic_header_three:hover {
color: var(--epic_col2);
text-transform: uppercase;
}
#epic_header_hidden{
width:600px;
height:900px;
transition: 1s all 0s linear;
display:inline-block;
z-index:1
}
#epic_header_header_open {
display: flex;
flex-direction: column;
justify-content: flex-end;
background:rgb(26,25,31);
height: 850px;
width: 450px;
padding: 25px 25px;
gap: 20px;
transition: 1s all 0s linear;
}
#epic_header_hf_top {
display: flex;
justify-content: space-between;
height: 50px;
width: 450px;
transition: 1s all 0s linear
}
.epic_header_hf_top_left {
margin: 10px;
}
.epic_header_hf_top_right {
margin: 10px;
}
#epic_header_hf_middle {
display: flex;
flex-direction: column;
background-color: var(--epic_col6);
height: 110px;
width: 450px;
gap: 10px;
transition: 1s all 0s linear
}
.epic_header_hf_m_title {
font-family: var(--epic_font2);
font-size: 26px;
text-align: right;
margin-top: 10px;
margin-right: 25px;
border-right: solid 2px;
padding-right: 10px;
}
.epic_header_hf_m_teamonline {
display: flex;
justify-content: space-evenly;
}
.epic_header_hf_m_teamie {
display: flex;
margin-top: -5px;
}
.epic_header_teamieinfo {
display: flex;
flex-direction: column;
font-size: 12px;
margin-left: 5px;
justify-content: center;
}
.epic_header_teamername {
text-transform: uppercase;
font-size: 10px;
font-family: var(--epic_font2);
font-weight: 600;
}
.epic_header_hf_bottom {
display: flex;
gap: 18px;
}
.epic_header_hf_bottom_infobox {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 150px;
width: 300px;
background-color: var(--epic_col3);
border-style: solid;
border-width: 2px;
border-color: var(--epic_col);
gap: 5px;
}
.epic_header_hf_b_info_title {
text-transform: uppercase;
font-size: 20px;
font-family: var(--epic_font2);
border-left: 2px solid var(--epic_col5);
margin-left: 10px;
padding-left: 10px;
}
.epic_header_hf_b_info_title_left {
text-transform: uppercase;
font-size: 16px;
font-family: var(--epic_font2);
border-left: 2px solid var(--epic_col5);
margin-left: 10px;
padding-left: 10px;
}
.epic_header_hf_b_info_title_right {
text-transform: uppercase;
text-align: right;
font-size: 16px;
font-family: var(--epic_font2);
border-right: 2px solid black;
margin-right: 10px;
padding-right: 10px;
}
.epic_header_hf_b_info_text {
font-size: 13px;
font-family: var(--epic_font3);
text-align: justify;
padding: 0px 10px 10px 10px;
overflow:hidden;
}
.epic_header_hf_b_info_link {
text-transform: uppercase;
text-align: right;
font-size: 10px;
font-family: var (--epic_font2);
padding: 10px;
margin-top: -40px;
}
.epic_header_hf_bottom_links {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
}
.epic_header_hf_b_links {
background-color: var(--epic_col2);
padding: 3px;
text-transform: uppercase;
color: var(--epic_col4);
font-family: var(--epic_font2);
font-size: 12px;
}
i {
color: var(--epic_col2);
font-size: 25px;
}
i:hover {
color: var(--epic_col4);
}JavaScript
Code:
<script>function move(){
document.getElementById("epic_header_left").style.left = "43%";
document.getElementById("epic_header_hidden").style.width="600px";
document.getElementById("epic_header_mitte").style.opacity="0";
document.getElementById("epic_header_header_open").style.width="600px";
document.getElementById("epic_header_hf_top").style.width="600px";
document.getElementById("epic_header_hf_middle").style.width="600px";
}</script>by @Fräulein Flauschig , @naklaerchen und @TheStoryteller
Großes Lob an die beiden, dass sie durchgehalten haben, und sich sofort motiviert und begeistert auf die Codes gestürzt haben. Die beiden haben im Grunde alles selbst erstellt, ich habe nur das JS geschrieben und am Ende alles zusammengebracht und vereinheitlicht.
Edit: solltet ihr merken, dass die Avabildchen im Live-Code nicht mit denen auf den Screenshots übereinstimmen, liegt es an der externen Bilderdatenbank, die sich automatisch ändert.
06.11.2022
8
