Coding
 Nosotros estamos juntos de nuevo - Profil

#1


Nosotros estamos juntos de nuevo - Profil

am


Profil




HTML


Code:
<div class="epic_member_tab">
  <ul>
    <li><a href="#epic_member_tab1">Überblick</a></li>
    <li><a href="#epic_member_tab2">Charakter</a></li>
    <li><a href="#epic_member_tab3">Lebenslauf</a></li>
    <li><a href="#epic_member_tab4">Szenen</a></li>
     </ul>
    
  <div class="epic-member_container" id="epic_member_tab1">


    <div class="epic-member_flex">
      <div class="epic-member_left">
        <div class="epic-member_h">Pimpernella Filibaldi</div>
        <div class="epic-member_text">
          1Lorem 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
        </div>
      <div class="epic-member_wrap">
          <div class="epic-member_facts">
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Rasse</div>
              <div class="epic-member_lightfact">Fee</div>
            </div>
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Gesinnung</div>
              <div class="epic-member_lightfact">gut</div>
            </div>
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Alter</div>
              <div class="epic-member_lightfact">370</div>
            </div>
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Gruppe</div>
              <div class="epic-member_lightfact">Waldgeister</div>
            </div>
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Beruf</div>
              <div class="epic-member_lightfact">Händlerin</div>
            </div>
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Geschlecht</div>
              <div class="epic-member_lightfact">weiblich</div>
            </div>
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Wohnort</div>
              <div class="epic-member_lightfact">Feenhausen</div>
            </div>
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Beziehung</div>
              <div class="epic-member_lightfact">Single</div>
            </div>

          </div>
        </div>
        <div class="epic-member_flex">
          <div class="epic-member_deko_horizontal">
            <div class="epic-member_deko_col1"></div>
            <div class="epic-member_deko_col2"></div>
            <div class="epic-member_deko_col3"></div>
          </div>
          <div class="epic-member_text  epic-member_dekotext">
            2Lorem 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.
          </div>
        </div>
      </div>
      <div class="epic-member_postbit">
        <div class="epic-member_brown epic-member_title">Rastlos unterwegs</div>
        <div class="epic-member_ava"><img src="https://abload.de/img/epicavatarteamcodingvhe5a.png"></div>
            <div class="epic-member_petname">
      Nella
    </div>
        <div class="epic-member_brown epic-member_online">Online</div>
        <div class="epic-member_flex">
          <div class="epic-member_brown">Beiträge</div>
          <div class="epic-member_lightfact">566</div>
        </div>
        <div class="epic-member_fontawesome">
          <div><i class="fa-solid fa-envelope-open-text"></i></div>
          <div><i class="fa-solid fa-magnifying-glass"></i></div>
          <div><i class="fa-brands fa-discord"></i></div>
        </div>
        <div class="epic-member_icon"><img src="https://abload.de/img/epiciconteamcoding33fgn.png"></div>
        <div class="epic-member_deko_vertical">
          <div class="epic-member_deko_col1"></div>
          <div class="epic-member_deko_col2"></div>
          <div class="epic-member_deko_col3"></div>
        </div>
      </div>
    </div>
    <div class="epic-member_box">
      <div class="epic-member_h epic-member_playername">Fidibus</div>
      <div class="epic-member_flex">
<div class="epic-member_playerfacts">
          <div class="epic-member_playerfact">
            <div class="epic-member_brown">Registriert seit</div>
            <div class="epic-member_lightfact">12.12.2020</div>
          </div>
          <div class="epic-member_playerfact">
            <div class="epic-member_brown">Letzter Beitrag</div>
            <div class="epic-member_lightfact">vor 17 Minuten</div>
          </div>
          <div class="epic-member_playerfact">
            <div class="epic-member_brown">Letzter Besuch</div>
            <div class="epic-member_lightfact">vor 12 Minuten</div>
          </div>
          <div class="epic-member_playerfact">
            <div class="epic-member_brown">Online-Zeit</div>
            <div class="epic-member_lightfact">3 Monate, 4 Tage, 12 Stunden</div>
          </div>
        </div>
        <div class="epic-member_gender">
          <div class="epic-member_brown"><i class="fa-solid fa-transgender"></i></div>
          <div class="epic-member_lightfact">weiblich</div>
        </div>
      </div>
    </div>
    <div class="epic-member_box">
      <div class="epic-member_h">Zweitcharaktere</div>
      <div class="epic-member_zweitcharas">
        <div class="epic-member_zweitchara">
<img src="https://abload.de/img/zweitcharakter3inc2x.png">
        </div>
        <div class="epic-member_zweitchara">
<img src="https://abload.de/img/zweitcharakter2nnigh.png">
        </div>
        <div class="epic-member_zweitchara">
<img src="https://abload.de/img/zweitcharakter5yf33.png" alt="profil3">
        </div>
      </div>
    </div>

  </div>
<div class="epic-member_container" id="epic_member_tab2">
  <div class="epic-member_h2">Charakter</div>
  <div class="epic-member_box">
    <div class="epic-member_flex">
      <div class="epic-member_deko_horizontal">
        <div class="epic-member_deko_col1"></div>
        <div class="epic-member_deko_col2"></div>
        <div class="epic-member_deko_col3"></div>
      </div>
      <div class="epic-member_text epic-member_dekotext">
        <div class="epic-member_h3">Aussehen</div>
        2Lorem 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.
      </div>
    </div>
    <div class="epic-member_charakterava">
      <div class="epic-member_darkfact"><i class="far fa-eye"></i></div>
      <div class="epic-member_darkfact">Catherine Zeta-Jones</div>
    </div>

    <div class="epic-member_facts">
      <div class="epic-member_fact">
        <div class="epic-member_darkfact">Spezielle Fähigkeit</div>
        <div class="epic-member_lightfact">Feenmagie</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkfact">Kampfstil</div>
        <div class="epic-member_lightfact">Unberechenbar</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkfact">Bevorzugte Waffe</div>
        <div class="epic-member_lightfact">Langschwert</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkfact">Kampffähigkeit</div>
        <div class="epic-member_lightfact">mies</div>
      </div>

    </div>

    <div class="epic-member_bars">
      <div class="epic-member_bar">
        <div class="epic-member_flex epic-member_space">
          <div class="epic-member_h4">Ungeduldig</div>
          <div class="epic-member_h4">Geduldig</div>
        </div>
        <div class="epic-member_bar_100">
          <div class="epic-member_value" style="width:10%"></div>
        </div>

      </div>
      <div class="epic-member_bar">
        <div class="epic-member_flex epic-member_space">
          <div class="epic-member_h4">Leise</div>
          <div class="epic-member_h4">Laut</div>
        </div>
        <div class="epic-member_bar_100">
          <div class="epic-member_value" style="width:70%"></div>
        </div>

      </div>
      <div class="epic-member_bar">
        <div class="epic-member_flex epic-member_space">
          <div class="epic-member_h4">Ernst</div>
          <div class="epic-member_h4">Witzig</div>
        </div>
        <div class="epic-member_bar_100">
          <div class="epic-member_value" style="width:60%"></div>
        </div>

      </div>
      <div class="epic-member_bar">
        <div class="epic-member_flex epic-member_space">
          <div class="epic-member_h4">Garstig</div>
          <div class="epic-member_h4">Freundlich</div>
        </div>
        <div class="epic-member_bar_100">
          <div class="epic-member_value" style="width:30%"></div>
        </div>

      </div>
    </div>

    <div class="epic-member_facts">
      <div class="epic-member_fact">
        <div class="epic-member_darkicon"><i class="fa-solid fa-heart"></i></div>
        <div class="epic-member_darkfact">Zauberwald</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkicon"><i class="fa-solid fa-heart-crack"></i></div>
        <div class="epic-member_darkfact">Wegelagerer</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkicon"><i class="fa-solid fa-heart"></i></div>
        <div class="epic-member_darkfact">Eichhörnchen</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkicon"><i class="fa-solid fa-heart-crack"></i></div>
        <div class="epic-member_darkfact">Diebe</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkicon"><i class="fa-solid fa-heart"></i></div>
        <div class="epic-member_darkfact">Blumenduft</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkicon"><i class="fa-solid fa-heart-crack"></i></div>
        <div class="epic-member_darkfact">Stinkstiefel</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkicon"><i class="fa-solid fa-heart"></i></div>
        <div class="epic-member_darkfact">Hagebuttentee</div>
      </div>
      <div class="epic-member_fact">
        <div class="epic-member_darkicon"><i class="fa-solid fa-heart-crack"></i></div>
        <div class="epic-member_darkfact">Ameisen</div>
      </div>
    </div>

    <div class="epic-member_sig"><img src="https://abload.de/img/epicsignaturteamcodin3wejf.png" alt="sig"></div>

  </div>
</div>
  <div class="epic-member_container" id="epic_member_tab3">  
    <div class="epic-member_h2">Lebenslauf</div>
    <div class="epic-member_box">
      
        
      
        <div class="epic-member_text">
          <div class="epic-member_hbalken">To start a life    </div>
          
    <p id="profil-ll-border-links">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. </p>
        
    
  
          <div class="epic-member_h3">To start a life    </div>
          
            <p id="profil-ll-border-rechts">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. </p>
        
        

        
    
      
      <div class="epic-member_zitat">
        <i class="fa-solid fa-quote-right fa-2xl"></i>
        They will change me in your arms into a bear or lion bold.</div>
      
      
    
        <div class="epic-member_h3">To start a life    </div>
        <p>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.</p> </div>
      
    </div>
    
  </div>
  <div class="epic-member_container" id="epic_member_tab4">
    <div class="epic-member_h2">Weitere Infos</div>
    <div class="epic-member_box">
    
    <div class="epic-member_text"> <!---Dieser Tag war nicht geschlossen--->
      <div class="epic-member_h3">Aktive Szenen (2/2)</div>
      <div class="epic-member_szenen">
        
         <div class="epic-member_szenen-dran">Du bist dran!</div>
        <div class="epic-member_szenen-info">
          <div class="epic-member_h4">Supercooler Szenentitel 1</div>
          17.05.1244 | Wirtshaus zur Einäugigen Xanthippe | später Abend<br>
            Pimpernella Filibaldi, Ritter Kunibert von Stein, Eulalie Winter-Wollenstein
        </div></div>
        
        <div class="epic-member_szenen">
        <div class="epic-member_szenen-dran">Du bist dran!</div>
        <div class="epic-member_szenen-info">
          <div class="epic-member_h4">Supercooler Szenentitel 1</div>
          17.05.1244 | Wirtshaus zur Einäugigen Xanthippe | später Abend<br>
            Pimpernella Filibaldi, Ritter Kunibert von Stein, Eulalie Winter-Wollenstein
          </div>
          
          
          
                  </div>
      <div class="epic-member_szenen-link">Zum Szenenarchiv</div> <!---- das möchte vermutlich nicht mit in die flexbox rein ;)--->
      </div>
      
      
      <div class="epic-member_text epic-member_archiv"><!---Dieser Tag war nicht geschlossen--->
      <div class="epic-member_h3">Archivierte (2/2)</div>
        <div class="epic-member_szenen">
        <div class="epic-member_szenen-dran">beendet</div>
        <div class="epic-member_szenen-info"><div class="epic-member_h4">Supercooler Szenentitel 1</div>
          17.05.1244 | Wirtshaus zur Einäugigen Xanthippe | später Abend<br>
            Pimpernella Filibaldi, Ritter Kunibert von Stein, Eulalie Winter-Wollenstein
          </div></div>
          
          
          
          <div class="epic-member_szenen">
        <div class="epic-member_szenen-dran">beendet</div>
        <div class="epic-member_szenen-info"><div class="epic-member_h4">Supercooler Szenentitel 1</div>
          17.05.1244 | Wirtshaus zur Einäugigen Xanthippe | später Abend<br>
            Pimpernella Filibaldi, Ritter Kunibert von Stein, Eulalie Winter-Wollenstein
          </div>
          
          
          </div>
             <div class="epic-member_szenen-link">Zum Szenenarchiv</div>
        
        
          </div>
      <!--- das hier wollte dafür weiter in die box rein---->
            <div class="epic-member_facts" id="epic-member_zusatzinfo">
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Postingfrequenz</div>
              <div class="epic-member_lightfact">Wöchentlich</div>
            </div>
            <div class="epic-member_fact">
              <div class="epic-member_darkfact">Zeichenzahl</div>
              <div class="epic-member_lightfact">5000+</div>
              </div></div>
<!---->          

          
      
          
      
      <div class="epic-member_h4" id="epic-member_h4-position">Errungenschaften</div>
      <div class="epic-member_awards">
              
        
        <div class="epic-member_awards-liste">
          <img src="https://abload.de/img/award3adrh.png">
          <img src="https://abload.de/img/award2r8in0.png">
          <img src="https://abload.de/img/award35qiph.png">
          <img src="https://abload.de/img/award494i34.png">
          <img src="https://abload.de/img/award5pbdaq.png">
          <img src="https://abload.de/img/award67ide7.png">
        </div>
        
        
        <div class="epic-member_deko_horizontal">
          <div class="epic-member_deko_col1"></div>
          <div class="epic-member_deko_col2"></div>
          <div class="epic-member_deko_col3"></div>
        </div>
          
        </div>
        
        
    </div>
  </div>

</div>

      </div>

CSS


Code:
html {
  background: url("https://abload.de/img/imagegsd21.png");
  background-size: cover;
}

:root {
  --epic_col1: #484648; /*braun*/
  --epic_col2: #879fb1; /*mittelblau*/
  --epic_col3: #a6b9c6; /*hellblau*/
  --epic_col4: #50697c; /*dunkelblau*/
  --epic_col5: #8e8f98; /*hellgrau*/
  --epic_col6: #010d16; /*dunkel*/
  --epic_col7: #edf1f3; /*hell*/
  --epic_col8: #3C4F5D; /*dunkles Dunkelblau*/
  --epic_font1: "Roboto", sans-serif;
  --epic_font2: "Grenze", serif;
  --epic_font3: "Grenze Gotisch", cursive;
}


.epic_member_tab{margin:auto;
  width: 850px;
}



.epic_member_tab ul {
  display: flex;
  text-decoration: none;
  list-style: none;
  text-transform: uppercase;
  margin-left:-40px;
  margin-bottom:-30px;
}

.epic_member_tab ul li {
  text-decoration: none;
  background: var(--epic_col2);
  padding: 10px;

  font-family: var(--epic_font1);
  font-size: 15px;
  height:30px;
  
}

.epic_member_tab ul li a {
  text-decoration: none;
  color: var(--epic_col7);

}
  
.ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  background:var(--epic_col1);
color:var(--epic_col3);
}

.ui-widget-header .ui-state-active a {
color:var(--epic_col3);
  transition:0.3s ease-in;
}

/****************BASICS****************/

.epic-member_container {
  font-family: var(--epic_font1);
  font-size: 14px;
  background: var(--epic_col1);
  padding-bottom:10px;
}

.epic-member_flex {
  display: flex;  
}

.epic-member_box {
  background: var(--epic_col2);
  margin: 20px;
  padding:20px;
}

.epic-member_h {
  font-family: var(--epic_font3);
  font-size: 52px;
  color: var(--epic_col7);
}


.epic-member_text {
  line-height: 160%;
  text-align: justify;
  background: var(--epic_col3);
  padding: 20px 40px;
  margin: 10px 20px;

}

.epic-member_wrap {
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.epic-member_facts {
   display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0px 0px;
}

.epic-member_fact {
  font-size: 15px;
  padding: 7px 0px;
  display: flex;
  text-align: center;
  flex: 0 0 47%;
}

.epic-member_darkfact {
  background: var(--epic_col8);
  color: var(--epic_col7);
  padding: 5px;
  box-sizing: border-box;
}

.epic-member_lightfact {
  background: var(--epic_col4);
  color: var(--epic_col7);
  padding: 5px;
  box-sizing: border-box;
}

.epic-member_brown {
  background: var(--epic_col1);
  text-align: center;
  color:var(--epic_col7);
  text-transform: uppercase;
  padding:5px 10px;
}

.epic-member_deko_vertical {
  display: flex;
  height:5px;
}

.epic-member_deko_horizontal {
  display: flex;
  flex-direction: column;
}

.epic-member_deko_horizontal div {
  height: 33.33%;
  width: 5px;
}

.epic-member_deko_vertical div {
  height: 5px;
  flex: 1 0 33.33%;
}

.epic-member_deko_col1 {
  background: var(--epic_col1);
}
.epic-member_deko_col2 {
  background: var(--epic_col7);
}
.epic-member_deko_col3 {
  background: var(--epic_col5);
}

/****************ÜBERBLICK****************/

.epic-member_left {
  background: var(--epic_col2);
  flex:1 0 520px;
  margin: 20px;
}

.epic-member_left .epic-member_h {
  text-align:right;
  padding-right:20px;
  margin-bottom:-30px;
}
.epic-member_petname {
  color: var(--epic_col7);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  font-size:24px;
  padding:10px 20px 0px;
}
.epic-member_petname:before, .epic-member_petname:after {
  content:'"'  
}

.epic-member_postbit {
flex:0 0 250px;
  margin:20px;
  margin-left:0px;
  background: var(--epic_col2);
  display: flex;
  flex-direction: column;
  align-items:center;
}

.epic-member_ava img{
  width: 190px;
  height: 190px;
  border-radius: 50%;
  margin: 20px 0px;
}


.epic-member_title {
  margin-top:40px;
}

.epic-member_online {
  width:170px;
  margin-top:60px;
}

.epic-member_postbit .epic-member_flex {
  width:190px;
  margin: 20px 0px;
}

.epic-member_postbit .epic-member_flex .epic-member_lightfact {
  flex: 1 0;
  display:flex;
justify-content:center;
  background:var(--epic_col7);
  color:var(--epic_col6);
}

.epic-member_fontawesome {
  justify-content:space-around;
margin-top:30px;
  margin-bottom:20px;
    display:flex;
width:190px;
}

.epic-member_fontawesome i {

  color:var(--epic_col7);
  font-size:33px;
}

.epic-member_postbit .epic-member_deko_vertical {
  width:190px;
  margin-top:20px;
}

.epic-member_fact .epic-member_darkfact {
  flex: 1 0 40%;
}

.epic-member_fact .epic-member_lightfact {
  flex: 1 0 60%;
}

.epic-member_playerfacts {
  display:flex;
  flex-wrap:wrap;
  margin-bottom:-10px;
}


.epic-member_playerfact {
  flex: 1 1 42%;
display:flex;
  margin-bottom:20px;
}
.epic-member_playerfact div {
  display:flex;
  align-items:center;
}

.epic-member_playerfact:nth-child(odd) {
color:red;
}

.epic-member_playerfact .epic-member_lightfact{
color:var(--epic_col6);
  background:Var(--epic_col7);
  flex: 1 0 33%;
  margin-right:20px;

}

.epic-member_playername {
  display:flex;
  justify-content:flex-end;
  margin-top:-60px;

}

.epic-member_gender {
  width:33%;
  display:flex;
  height:30px;
}

.epic-member_gender .epic-member_lightfact {
color:var(--epic_col6);
  background:Var(--epic_col7);
  flex: 1 0;
  margin-right:20px;
}

.epic-member_zweitcharas {
  display:flex;
}

.epic-member_zweitchara img {
  width:100px;
  height:100px;
  border-radius:50%;
  border:7px solid var(--epic_col7);
  margin-left:20px;
}

/**********************LEBENSLAUF********************/
.epic-member_uberschrift {
  display: flex;
  font-size: 36px;
  font-family: var(--epic_font2);
  align-items: center;
}

.epic-member_uberschrift:after {
  content: "";
  background: var(--epic_col6);
  height: 27px;
  flex: 1 0 33%;
  margin-left: 2%;
  width:100%;
}

/****************CHARAKTER*****************/

/***Skala****/
.epic-member_bars {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 50px 0 50px 0;
}

.epic-member_bar {
  flex: 0 0 47%;

  box-sizing: border-box;
}

.epic-member_space {
  justify-content: space-between;
}

.epic-member_darkicon {
  background: var(--epic_col8);
  color: var(--epic_col7);
  padding: 5px;
  padding-left:20px;
  padding-right:-20px;
  box-sizing: border-box;
}

/*.epic-member_bar_beschr { ### brauchen wir nicht, hab profil_h4 genommen - lina ###
}*/

.epic-member_bar_100 {
  background: var(--epic_col3);
  height: 15px;
  width: 100%;
}

.epic-member_value {
  background: var(--epic_col8);
  height: 15px;
}
/***Skala-Ende****/

/************************ CHARAKTER - LINA ************/

.epic-member_dekotext {
  margin: 0;
}

.epic-member_charakterava {
  display: flex;
  justify-content: flex-end;  
}

.epic-member_sig {
display: flex;
  justify-content: center;
  margin: 40px;
}

#epic_member_tab2 .epic-member_facts {
  margin: 20px 0;
  padding: 20px 0 10px 0;
}

.epic-member_darkfact i {
  flex: 0 0 20%;
  padding: 1px 0 1px 5px;
}


/************************ ÜBERBLICK - FEYE ************/

.epic-member_left .epic-member_flex {
  margin:0px 20px 20px 20px;
}



/***Szenen & LL, Abbys Ergänzungen, die oben noch ordentlich einsortiert werden müssen***/

.epic-member_h2 {
  font-family: var(--epic_font3);
  font-size: 52px;
  color: var(--epic_col7);
  text-align: right;
  margin: 0px 60px -50px 0px;
  
}

.epic-member_h3 {
  font-family: var(--epic_font3);
  font-size: 24px;
  color: var(--epic_col4);
}

.epic-member_h4 {
  font-family: var(--epic_font2);
  font-size: 24px;
  /*color: #ffffff;*/
  color:var(--epic_col7)
}

.epic-member_szenen{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  margin: 20px;
  
}

.epic-member_szenen-dran{
  background: var(--epic_col4);
  width: 170px;
  height: 60px;
  color:var(--epic_col7);
  display:flex;
  align-items: center;
  justify-content:center;
  align-self:center;
}

.epic-member_archiv .epic-member_szenen-dran{
  background: var(--epic_col1);
  opacity:0.8;
}

.epic-member_szenen-info{
  padding-right: 10px;
  text-align: right;
  border-right-style: solid;
  border-color: var(--epic_col8);
  border-width: 5px;
}

.epic-member_archiv .epic-member_szenen-info{
  border-color: var(--epic_col1)
}

.epic-member_archiv div {
  opacity:0.8;
}

.epic-member_szenen-link{
  color:var(--epic_col7);
  text-align: right;
  text-transform: uppercase;
}

.epic-member_awards{
  display: flex;
  line-height: 160%;
  background: var(--epic_col3);
  margin: 40px 20px;
}

.epic-member_awards-liste{
  margin: 20px;
  width: 99%;
}

.epic-member_awards-liste img{
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 10px;
}

.epic-member_text p{
  padding: 10px;
}

.epic-member_zitat{
  display: flex;
  color:var(--epic_col7);
  font-size: 32px;
  font-family: var(--epic_font3);
  text-align: center;
  width: 500px;
  line-height: 30px;
  padding: 20px;
  margin: auto;
}

.epic-member_zitat i{
  padding: 20px;
}

.epic-member_hbalken {
  display:flex;
  font-family: var(--epic_font3);
  font-size: 44px;
  color: var(--epic_col4);
  text-align: left;
  margin: auto;
  
}

.epic-member_hbalken:after{
  content: "";
  flex: 1 0;
background:var(--epic_col4);
  height: 25px;  
  margin-left:10px;
margin-right:10px;
}

.epic-member_deko_col4 {
  background: var(--epic_col4); /*einfarbige horizontale Balken kannst du auch als border einer klasse zuordnen statt eine extraklasse zu machen. but this is fine, too*/
}

#epic-member_zusatzinfo{
  margin: -30px 10px 0px 10px;
  color: var(--epic_col7);
}

#epic-member_h4-position{
  margin-bottom: -55px;
  margin-left: 30px;
}

#profil-ll-border-rechts{
   border-right-style: solid;
  border-color: var(--epic_col8);
  border-width: 5px;
  
}

#profil-ll-border-links{
  border-left-style: solid;
  border-color: var(--epic_col8);
  border-width: 5px;
  }

JS


Code:
$(function() {
            $( ".epic_member_tab" ).tabs(
            {
               show: { effect: "fade", duration: 900 }
            }
            );
         });

20 fucking shortfacts. My ass.
Ich scheitere ja bei sowas schon an der hälfte.


mit verzweiflung von @muup und schlaflosen nächten von @dystervals und "I dont care enough anymore" @Feye
10
5
4
4
2
2
1
1
1
1
1
1
1
1
Merken
Merken
Benutzerdefinierter Titel
Zur besseren Übersicht kannst du dem Post einen benutzerdefinierten Titel geben.
Ordner
Neue Ordner für deine Favoriten kannst du im UserCP erstellen.
  Zitieren