arcane rp shenzi

In this example below you will see how to do a arcane rp shenzi with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by trien, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright trien ©
  • HTML
  • CSS
  • JavaScript
    <div class="rp_shenzi">
    
<h1>Titre</h1>
<h2>Sous titre</h2>
<fieldset>
<b>T</b>exte.<br>
<i>texte italique</i><br>
<b>texte en gras</b><br>
Il était une fois un texte...<br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ipsam debitis nemo qui molestias quaerat distinctio delectus id vitae! Placeat quos numquam at facere ipsam natus officiis nam, est blanditiis?<br>
<a href="">lien</a><br>
<quote>Je parle blabla</quote>
<div class="separator"></div>
<quote>Je parle blabla <br>sur plusieurs lignes <br>
  J'ai beaucoup de choses à dire...
</quote>
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
<center>
  <img src="https://pbs.twimg.com/profile_images/476888511686381569/MSKAUjMp_reasonably_small.jpeg" alt="">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/ETA_Hoffmann_2.jpg/120px-ETA_Hoffmann_2.jpg" alt="">
  <img src="https://68.media.tumblr.com/avatar_cc58a77a4937_128.png" alt="">
</center>
</fieldset>
  
<b>T</b>exte.<br>
<i>texte italique</i><br>
<b>texte en gras</b><br>
Il était une fois un texte...<br>
<a href="">lien</a><br>
</div>

/*Downloaded from https://www.codeseek.co/trien/arcane-rp-shenzi-ZJqxbZ */
    @import url('https://fonts.googleapis.com/css?family=Kurale');
@red: rgb(220, 20, 60);
@green: rgb(63, 184, 175);
@white: rgb(247, 242, 178);

@title: lighten(@green, 10%);
@subTitle: lighten(@green, 0%);
@subTitleBg: lighten(@green, 30%);
@text: darken(@red, 15%);
@blockBg: lighten(@white, 20%);
@speakText: @red;
@speakBg: lighten(@red, 49%);
@invert: @red;

@firstFont: 'Kurale';
@secondFont: 'Kurale';
.rp_shenzi {
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/xv.png')/*url(https://tse4.mm.bing.net/th?id=OIP.MBSLfCLchidnieBkyFvsnAEmDr&pid=Api)*/ white;
  background-attachment: fixed;
  position: relative;
  padding: 0 30px 5px;
  &, * {
    font-family: @firstFont;
    letter-spacing: 1px;
    font-size: 1.05em;
    &::selection {
      color: @invert;
    } 
  }
  a {
    text-decoration: none;
    color: @title;
    border-bottom: @title 1px solid;
  }
  b {
    color: @title;
    font-size: 1.2em; 
    padding-right: 10px;
  }
  h1, h2 {
    font-family: @secondFont;
    margin: 0;
    padding: 15px;
  }
  h1 {
    color: @title;
    font-size: 4em;
    text-align: center;
    line-height: 1em;
  }
  h2 {
    color: @subTitle;
    background: @subTitleBg;
    font-size: 2.5em;
  }
  fieldset {
    position:relative;
    background: @blockBg;
    color: @text;
    border: none;
    margin: 0 0 20px 0;
    padding: 10px 15px;
    border-top: none;
    a {
      color: @text;
      border-bottom: 1px dotted @text;
    }
    b {
      color: @invert;
      &:nth-of-type(1) {
        font-family: @secondFont;
        padding-right: 5px;
        line-height: 1.2em;
      }
    }
    .separator {
      background: url(https://kuzgunakademi.com/wp-content/uploads/2015/10/xdfd.png) center center no-repeat;
      width: 100%;
      height: 50px;
      background-size: contain;
      filter: sepia(100%) hue-rotate(130deg) brightness(100%);
    }
    center {
      vertical-align: top;
      display: table;
      margin: 0 auto;
      * {
        display: table-cell;
        vertical-align: top;
      }
    }
  }
  quote {
    background: @speakBg;
    color: @speakText;
    display: block;
    margin-top: 10px;
    padding: 5px 10px;
    quotes: "“ " "";

    &:before {
      color: @invert;
      content: open-quote;
      font-size: 3em;
      vertical-align: -0.5em;
      line-height: 0em;
    }
  }
  .col-2 {
    > div {
      float: left;
      width: 49%;
      &:nth-of-type(1) {
        margin-right: 10px;
      }
    }
    + *, + .break {
      clear: both;
      display: block;
    }
  }
  &.no_br br, .no_br br { display: none; }
  &.br br, .br br { display: initial; }
  .toggle_input, .toggle_box { display: none; }
  .toggle_input:checked + .toggle_box { display: block; }
  
    .gold {
      background: url(https://img4.hostingpics.net/pics/994377tsuris.png) no-repeat;
      height: 10px;
      width: 10px;
      display: inline-block;
      background-position: 53% 80%;
      background-size: 54px;
      margin-bottom: -1px;
      image-rendering: pixelated;
      &.neg {
        filter: hue-rotate(-50deg);
      }
    }
  .y2b_music {
    font-size:0;
  }
}


/*Downloaded from https://www.codeseek.co/trien/arcane-rp-shenzi-ZJqxbZ */
    if(location.search.search('type') != -1) document.body.setAttribute('id','iframe');

Comments