Nosotros estamos juntos de nuevo - Teamseite
am
Nosotros estamos juntos de nuevo - Teamseite
[Bild: https://abload.de/img/imagebgi34.png]
Codepen
-mit viel Liebe von @little.evil.genius & @chimslady
Codepen
-mit viel Liebe von @little.evil.genius & @chimslady
HTML
Code:
<div id="epic-team_container">
<div class="epic-team_forenbith">Der hohe Rat</div>
<div class="epic-team">
<div class="epic-team_generel">
<div class="epic-team_genereldesc">
Herzlich Willkommen auf der Teamseite,
Du kannst hier nähere Informationen zum Team finden. Wir stehen euch natürlich jederzeit gerne mit Rat und Tat zur Seite, scheut euch also nicht, uns eine PN zu schreiben oder gleich eure Frage im SUPPORT zu stellen. Wir werden euch so schnell es geht antworten um eure Frage zu beantworten. Wir beißen nicht!
</div>
<div class="epic-team_generelnpc">
<div class="epic-team_npc">
<div class="epic-team_npcname">Hoher Elf</div>
<div class="epic-team_npcinfos">
<div class="epic-team_npcavatar">
<img src="https://stormborn.at/contests/epic-team-npc.jpg" class="epic-team_npcimg">
</div>
<div class="epic-team_npcdesc">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</div>
</div>
</div>
<div class="epic-team_npc">
<div class="epic-team_npcname">Hand des Schicksals</div>
<div class="epic-team_npcinfos">
<div class="epic-team_npcavatar">
<img src="https://stormborn.at/contests/epic-team-npc.jpg" class="epic-team_npcimg">
</div>
<div class="epic-team_npcdesc">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</div>
</div>
</div>
</div>
</div>
<div class="epic-team_teamies">
<div class="epic-team_admins">
<div class="epic-team_admin">
<div class="epic-team_adminname">Minnie</div>
<div class="epic-team_admintask">Greylist # Inplayzeitung</div>
<div class="epic-team_admindesc">
<div class="epic-team_adminifo">
<div class="epic-team_adminpic"><img src="https://stormborn.at/contests/epic-admin2.gif" class="epic-team_adminimg">
<div class="epic-team_adminpos">Admin</div></div>
<div class="epic-team_admincontact"><i class="fa-solid fa-clock-rotate-left"></i> Vor 4 Sekunden</div>
<div class="epic-team_admincontact"><i class="fa-brands fa-discord"></i> Discord</div>
<div class="epic-team_admincontact"><i class="fa-solid fa-comments"></i> Epicname</div>
</div>
<div class="epic-team_admintextbox">
<div class="epic-team_admindesctext">
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.
</div></div>
</div>
<div class="epic-team_admincharas">
<div class="epic-team_adminchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_2.png" class="epic-team_admincharaimg">
</div>
<div class="epic-team_adminchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_48.png" class="epic-team_admincharaimg">
</div>
</div>
</div>
<div class="epic-team_admin">
<div class="epic-team_adminname">Lara</div>
<div class="epic-team_admintask">Technik & Design # Gesuche</div>
<div class="epic-team_admindesc">
<div class="epic-team_adminifo">
<div class="epic-team_adminpic"><img src="https://stormborn.at/contests/epic-admin1.gif" class="epic-team_adminimg">
<div class="epic-team_adminpos">Admin</div></div>
<div class="epic-team_admincontact"><i class="fa-solid fa-clock-rotate-left"></i> Vor 9 Stunden</div>
<div class="epic-team_admincontact"><i class="fa-brands fa-discord"></i> Discord</div>
<div class="epic-team_admincontact"><i class="fa-solid fa-comments"></i> Epicname</div>
</div>
<div class="epic-team_admintextbox">
<div class="epic-team_admindesctext">
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.
</div></div>
</div>
<div class="epic-team_admincharas">
<div class="epic-team_adminchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_96.png" class="epic-team_admincharaimg">
</div>
<div class="epic-team_adminchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_106.png" class="epic-team_admincharaimg">
</div>
<div class="epic-team_adminchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_107.png" class="epic-team_admincharaimg">
</div>
</div>
</div>
</div>
<div class="epic-team_mods">
<div class="epic-team-tasks">
<div class="epic-team_headline">Teamprojects</div>
<div class="epic-team-task"><i class="fas fa-archive"></i> Archivierungen</div>
<div class="epic-team-task"><i class="fas fa-user-check"></i> Bewerbung</div>
<div class="epic-team-task"><i class="fas fa-tools"></i> Boardverwaltung </div>
<div class="epic-team-task"><i class="fas fa-search"></i> Canons</div>
<div class="epic-team-task"><i class="fas fa-info-circle"></i>News & Aktuelles</div>
<div class="epic-team-task"><i class="fas fa-star"></i> Plotplanung </div>
<div class="epic-team-task"><i class="fas fa-medkit"></i> Support</div>
<div class="epic-team-task"><i class="fas fa-file-alt"></i> Texte & Informationen</div>
<div class="epic-team-task"><i class="fas fa-history"></i> Zeitsprung</div>
</div>
<div class="epic-team_mod">
<div class="epic-team_modname">Finni</div>
<div class="epic-team_modinfos">
<div class="epic-team_modpic"><img src="https://stormborn.at/contests/epic-mod1.gif" class="epic-team_modimg">
<div class="epic-team_modpos">Mod</div></div>
<div>
<div class="epic-team_modcontact"><i class="fa-solid fa-clock-rotate-left"></i> vor 3 Minuten</div>
<div class="epic-team_modcontact"><i class="fa-brands fa-discord"></i> Discord</div>
<div class="epic-team_modcontact"><i class="fa-solid fa-comments"></i> Epicname</div>
</div>
</div>
<div class="epic-team_moddesc">
<div class="epic-team_modtask">Reservierungen # Abzeichen</div>
<div class="epic-team_moddesctext">
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.
</div>
</div>
<div class="epic-team_modcharas">
<div class="epic-team_modchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_74.png" class="epic-team_modcharaimg">
</div>
<div class="epic-team_modchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_93.png" class="epic-team_modcharaimg">
</div>
</div>
</div>
<div class="epic-team_mod">
<div class="epic-team_modname">Mai</div>
<div class="epic-team_modinfos">
<div class="epic-team_modpic"><img src="https://stormborn.at/contests/epic-mod2.gif" class="epic-team_modimg">
<div class="epic-team_modpos">Mod</div></div>
<div>
<div class="epic-team_modcontact"><i class="fa-solid fa-clock-rotate-left"></i> vor 14 Minuten</div>
<div class="epic-team_modcontact"><i class="fa-brands fa-discord"></i> Discord</div>
<div class="epic-team_modcontact"><i class="fa-solid fa-comments"></i> Epicname</div>
</div>
</div>
<div class="epic-team_moddesc">
<div class="epic-team_modtask">Partnerschaften # Abzeichen</div>
<div class="epic-team_moddesctext">
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.
</div>
</div>
<div class="epic-team_modcharas">
<div class="epic-team_modchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_203.png" class="epic-team_modcharaimg">
</div>
<div class="epic-team_modchara">
<img src="https://far-from-heaven.de/uploads/avatars/avatar_177.png" class="epic-team_modcharaimg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Pirata+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f702d785b9.js" crossorigin="anonymous"></script>CSS
Code:
:root {
--epic_col1: #6873589e;
--epic_col2: #D9D7CC;
--epic_col3: #687358;
--epic_col4: #A4A694;
--epic_font1: 'Pirata One', cursive;
--epic_pic1: url(https://stormborn.at/contests/epic-team-background-blurry.jpg);
--epic_pic2: url(https://stormborn.at/contests/epic-team-background.jpg);
}
body {
background-image: var(--epic_pic1);
background-attachment: fixed;
line-height: 1.4;
margin: 0;
overflow-y: scroll;
background-size: cover;
}
#epic-team_container {
background: var(--epic_col1);
color: var(--epic_col2);
text-align: left;
line-height: 1.4;
margin: auto auto;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
width: 1100px;
padding: 20px;
box-sizing: border-box;
}
.epic-team_forenbith {
font-size: 55px;
padding: 34px;
line-height: 25%;
text-shadow: 2px 2px var(--epic_col2);
font-family: var(--epic_font1);
color: var(--epic_col3);
background-image: var(--epic_pic2);
height: auto;
background-position: 0px -40px;
box-sizing: border-box;
letter-spacing: 4px;
font-style: italic;
text-align: left;
}
.epic-team {
padding: 10px;
box-sizing: border-box;
width: 100%;
}
.epic-team_generel {
margin-bottom: 20px;
box-sizing: border-box;
width: 100%;
text-align: justify;
display: flex;
flex-wrap: wrap;
}
.epic-team_genereldesc {
width: 35%;
padding-right: 20px;
box-sizing: border-box;
height: 120px;
display: flex;
align-items: center;
}
.epic-team_admins {
width: 49%;
}
.epic-team_teamies {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.epic-team_mods {
width: 49%;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
gap: 15px;
}
.epic-team_adminname {
font-size: 40px;
padding: 10px 0;
line-height: 65%;
font-style: italic;
text-shadow: 2px 2px var(--epic_col2);
font-family: var(--epic_font1);
color: var(--epic_col3);
letter-spacing: 4px;
text-transform: uppercase;
text-align: right;
}
.epic-team_admintask {
text-align: right;
font-family: georgia;
padding: 0 5px 5px 5px;
letter-spacing: 0.5pt;
line-height: 13px;
color: var(--epic_col2);
font-weight: bold;
}
.epic-team_admindesc {
display: flex;
flex-flow: wrap;
align-items: center;
}
.epic-team_adminpic {
position: relative;
width: 104px;
height: 104px;
margin-right: 10px;
}
img.epic-team_adminimg {
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid var(--epic_col3);
background: var(--epic_col3);
}
.epic-team_admindesctext {
overflow: auto;
height: 110px;
text-align: justify;
padding-right: 5px;
}
.epic-team_admin {
margin-bottom: 20px;
}
.epic-team_modpic {
position: relative;
width: 90px;
height: 90px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border: 2px solid var(--epic_col3);
background: var(--epic_col3);
}
img.epic-team_modimg {
width: 86px;
height: 86px;
border: 2px solid var(--epic_col3);
background: var(--epic_col3);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.epic-team_moddesc {
margin: -30px 0px 0px 0px;
height: 165px;
padding: 35px 20px 20px;
background-color: var(--epic_col4);
text-align: justify;
text-transform: none;
}
.epic-team_modname {
font-size: 30px;
padding: 10px 0;
line-height: 65%;
font-style: italic;
text-shadow: 2px 2px var(--epic_col2);
font-family: var(--epic_font1);
color: var(--epic_col3);
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
}
.epic-team_moddesctext {
height: 147px;
overflow: auto;
padding-right: 5px;
}
.epic-team_adminifo {
z-index: 99;
}
.epic-team_admincontact {
background-color: var(--epic_col3);
font-size: 10px;
width: 104px;
padding: 3px 0;
margin: 4px 0;
letter-spacing: 0.5pt;
text-align: center;
}
.epic-team_modinfos {
display: flex;
align-items: center;
justify-content: space-evenly;
flex-wrap: nowrap;
}
.epic-team_modcontact {
background-color: var(--epic_col3);
font-size: 10px;
width: 104px;
padding: 3px 0;
margin: 4px 0;
letter-spacing: 0.5pt;
text-align: center;
}
.epic-team_adminpos {
width: 104px;
height: 104px;
background: var(--epic_col4);
opacity: 0;
position: absolute;
top: 0;
transition: 1s ease-in-out;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--epic_font1);
color: #b0ced0;
font-size: 30px;
letter-spacing: 1px;
text-shadow: 2px 2px var(--epic_col2);
color: var(--epic_col3);
}
.epic-team_adminpic:hover .epic-team_adminpos {
opacity: 1;
transition: 1s ease-in-out;
position: absolute;
left: 0px;
}
.epic-team_modpos {
width: 94px;
height: 94px;
background: var(--epic_col4);
opacity: 0;
position: absolute;
top: 0px;
transition: 1s ease-in-out;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--epic_font1);
font-size: 30px;
letter-spacing: 1px;
text-shadow: 2px 2px var(--epic_col2);
color: var(--epic_col3);
}
.epic-team_modpic:hover .epic-team_modpos {
opacity: 1;
transition: 1s ease-in-out;
position: absolute;
left: 0px;
}
.epic-team_generelnpc {
width: 65%;
display: flex;
flex-wrap: nowrap;
align-content: center;
align-items: center;
gap: 5px;
}
img.epic-team_npcimg {
height: 115px;
border: 2px solid var(--epic_col3);
background: var(--epic_col3);
}
.epic-team_npc {
width: 50%;
gap: 5px;
flex-wrap: nowrap;
align-items: center;
}
.epic-team_npcname {
font-size: 25px;
padding: 0 0 5px 0;
line-height: 100%;
font-style: italic;
text-shadow: 2px 2px var(--epic_col2);
font-family: var(--epic_font1);
color: var(--epic_col3);
letter-spacing: 4px;
text-align: center;
}
.epic-team_npcdesc {
overflow: auto;
height: 115px;
padding-right: 5px;
text-align: justify;
}
.epic-team_npcinfos {
display: flex;
gap: 10px;
}
.epic-team_admincharas {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
margin-top: -30px;
gap: 10px;
padding-left: 104px;
padding-right: 10px;
}
img.epic-team_admincharaimg {
border-radius: 90px;
width: 50px;
height: 50px;
border: 2px solid var(--epic_col3);
background: var(--epic_col3);
}
.epic-team_modcharas {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
margin-top: -15px;
gap: 10px;
}
img.epic-team_modcharaimg {
border-radius: 90px;
width: 50px;
height: 50px;
border: 2px solid var(--epic_col3);
background: var(--epic_col3);
}
.epic-team_admintextbox {
width: 375px;
background: var(--epic_col4);
margin-left: -50px;
padding: 20px 20px 20px 50px;
}
.epic-team-tasks {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
height: 166px;
}
.epic-team_mod {
width: 48.5%;
}
.epic-team_headline {
font-size: 40px;
padding: 10px 0;
line-height: 65%;
font-style: italic;
text-shadow: 2px 2px var(--epic_col2);
font-family: var(--epic_font1);
color: var(--epic_col3);
letter-spacing: 4px;
width: 100%;
text-align: right;
}
.epic-team-task {
background-color: var(--epic_col3);
font-size: 11px;
width: 150px;
padding: 5px;
margin: 4px;
letter-spacing: 0.5pt;
text-align: center;
height: 15px;
}
.epic-team-task i {
float: left;
padding-top: 3px;
}
.epic-team_admincontact i {
float: left;
padding-left: 5px;
padding-top: 3px;
}
.epic-team_modcontact i {
float: left;
padding-left: 5px;
padding-top: 3px;
}
.epic-team_modtask {
text-align: center;
font-family: georgia;
padding: 0 5px 5px 5px;
line-height: 13px;
color: var(--epic_col3);
font-weight: bold;
}* {
scrollbar-color:var(--epic_col3) var(--epic_col4);
scrollbar-width: thin;
-webkit-text-size-adjust: none;
}
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background-color: var(--epic_col4);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: var(--epic_col3);
}06. November 23:59 Uhr
10
