<script src="https://forumstatic.ru/files/0017/95/29/40399.js"></script>
<script>
$(document).ready(function() {
  hvStickerPack.init("ССЫЛКА_НА_ФАЙЛ_СО_СТИКЕРАМИ");
});
</script>

[hideprofile][html]
<style>
.pagetit { font-family: abril fatface, sans serif; font-size: 16px; letter-spacing: 3px; text-align: justify; margin-left: 50px; color: #000000; position: absolute; z-index: 10; text-transform: uppercase; }

.pagetit span { border-top: 4px solid #9c9a7f; padding-top: 30px; }

.canoninf { margin-left: -4px; background-color: rgba(156,154,127,0.1); width: 291px; height: 20px; overflow: auto; padding: 50px; font-family: Lora, sans serif; font-size: 8px; letter-spacing: 2px; text-align: justify; color: #000000; line-height: 220%; }

</style>

<table><tr><td valign=top><div style="background-color: #EEEEEE; width: 700px; padding: 50px; white-space: normal; overflow-y: hidden; overflow-x: hidden; text-overflow: ellipsis; z-index: 11;white-space: normal; overflow-y: hidden; overflow-x: hidden; text-overflow: ellipsis;">
 
  <div style="background-color: rgba(0,0,0,0.1); width: 800px; height: 1px; margin-left: -50px; margin-bottom: 32px;"></div>
 
    <div class="pagetit"><span>Athalía</span></div>
 
    <div style="background-color: rgba(0,0,0,0.1); width: 800px; height: 1px; margin-left: -50px; margin-top: 70px; margin-bottom: 30px;"></div>
 
  <div style="padding: 50px;">
   
     <div style="width: 570px; padding: 15px; background-color: #9c9a7f; font-family: yseva one, sans serif; font-size: 16px; letter-spacing: 2px; text-align: right; color: #FFFFFF; text-transform: uppercase;"><span style="color: #000000;">001.</span> OVERVIEW</div>
   
<div style="width: 500px; background-color: rgba(156,154,127,0.1); padding: 50px; font-family: Lora, sans serif; font-size: 12px; letter-spacing: 2px; text-align: justify; color: #000000; line-height: 220%;">
 
  <div style="border: 1px solid rgba(0,0,0,0.2); width: 120px; height: 180px; padding: 5px; margin-right: 50px; margin-bottom: 30px; float: left;"><div style="background-color: #101010; background-image: url(https://cdnw.nickpic.host/vNk7xO.png); width: 120px; height: 180px;"></div></div><div style="float: none;">Steeped in tradition and history, <b>Athalía</b> (<i>Ah-thah-lay-a</i>) sits on the northwestern shores of Minaea, bordered by Kimsara to the east, Nyperia to the southeast and N'Dadu to the south.
<br><br>
A warrior people, the Athalíans are ostentatiously proud of their culture, their heritage and their land, and will fight to the death to defend it. The kingdom is dominantly patriarchal and led by its king who, upon death, passes the mantle to his oldest son (or oldest male relative outside of his children). Women have very little claim to anything and cannot fight in the Athalían army: the <i>Verdaderos Guerreros</i>, meaning True Warriors.
<br><br>
<div style="border: 1px solid rgba(0,0,0,0.2); width: 120px; height: 180px; padding: 5px; margin-left: 50px; margin-bottom: 30px; float: right;"><div style="background-color: #101010; background-image: url(https://cdnw.nickpic.host/vNkALA.png); width: 120px; height: 180px;"></div></div>The Athalían people follow the Union religion and have ritual days where gifts are given to chosen Gods to increase harvests, as well as individual and private ceremonies where prayers can be given and items can be offered for luck, wealth, improved health or the producing of a healthy child.
<br><br>
The N’Dadu people find their neighbours rather old fashioned and have been warring with the Athalíans on and off for centuries. They have a good trade deal with Kimsara and produce exotic fur garments as well as grow beans, peas and berries that are a delicacy in Xian-Tsu.   
 
 
  </div></div>
    </div></td></tr></table>

[/html]

[hideprofile][html]
<style>

@keyframes rotate {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.garden {
  color: #333;
  border: #ccc solid 1px;
  width: 530px;
  margin: 0 auto;
  padding: 5px;
  background: #fefefe;
}

.garden2 {
  border: #c8c8c8 solid 1px;
  background: #e3e3e3;
}

.gard-01 {
  border-bottom: rgba(199, 165, 176, 0.9) solid 1px;
  background: rgba(199, 165, 176, 0.3);
  padding: 100px 70px 50px;
  text-align: right;
}

.gard-01 h2 {
  margin: 0;
  display: inline-block;
  border: rgba(199, 165, 176, 0.8) solid 1px;
  background: #fefefe;
  border-radius: 5px;
  padding: 7px 15px;
  font: 18px poppins;
}

.gard-01 h2 b {
  font: 18px poppins;
  color: #c7a5b0;
}

.gard-side {
border-left: #ccc solid 1px;
background: #f3f3f3;
width: 200px;
float: right;
}

.gard-side icon {
  position: relative;
  display: block;
  border-bottom: #ccc solid 1px;
  padding: 40px;
  background: #eee;
}

.gard-side iconan {
  position: absolute;
  top: 35px;
  left: 35px;
  animation: infinite 1s rotate;
  display: block;
  padding: 3px;
  width: 107px;
  height: 107px;
  border: solid 2px;
  border-color: #c7a5b0 #c7a5b0 transparent transparent;
  border-radius: 100%;
}

.gard-side icon img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #fefefe;
  padding: 3px;
}

.gard-side basic {display: block;}

.gard-side sideinfo {
  display: block;
  padding: 20px 20px 10px;
}

.gard-side basic {
  border: #ccc solid 1px;
  padding: 10px;
  font: bold 9px Poppins;
  text-transform: uppercase;
  background: #fefefe;
  margin: 0 0 10px 0;
}

.gardtabs {
position: relative;
height: 397px;
width: 190px;
left: 145px;
}

.gtabs {float: left;}
.gtabs [type=radio] {display: none;}

.gtabs label {
cursor: pointer;
display: inline-block;
position: relative;
top: 332px;
right: 0;
margin: 0 0px 0 10px;
font-size: 46px;
}

.gtabs label i {
  transition: 300ms;
  color: #c37e95;
  text-shadow: #fff 1px 1px, #fff -1px 1px, #fff 1px -1px, #fff -1px -1px;
}

.gct-01 {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 220px;
  border: #ccc solid 1px;
  background: #fefefe;
  margin: 30px;
  padding: 30px;
}

.gct-02 {
  transform: scale(0);
  transition: 600ms;
  height: 180px;
  overflow: auto;
  font: 11px poppins;
  text-align: justify;
  padding: 0 5px 0 0;
}

.gct-02::-webkit-scrollbar {width: 5px;}

.tabcontain {
border-top: rgba(199, 165, 176, 0.9) solid 1px;
background: #d8cace;
position: absolute;
bottom: 0;
width: 327px;
height: 90px;
left: -145px;
}

.gct-02 h3 {
  font: italic 300 25px poppins;
  color: #555;
  margin: 0;
  padding: 10px;
}

.gct-02 h3 i.fa {
  color: #c37e95;
  font-family: FontAwesome;
  font-size: inherit;
}

.gct-02 p {
  border-left: #dad0d3 solid 1px;
  margin: 7px 0 7px 10px;
  padding: 0 0 0 10px;
}

.gct-02 b {
  font: 600 13px poppins;
  color: #c37e95;
}

.gct-02 i {
  font: 14px cutive mono;
  color: #c37e95;
}

.gtabs [type=radio]:checked ~ label i {color: #aaa;}
.gtabs [type=radio]:checked ~ label ~ .gct-01 {z-index: 2;}
.gtabs [type=radio]:checked ~ label ~ .gct-01 .gct-02 {transform: scale(1);}

</style>
<!-- Code désigné par Von appetit. Merci de créditer l'auteur ! Lien source : http://yourscent.jcink.net/index.php?showtopic=8 -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Cutive+Mono|Playfair+Display:400,400i,700,700i,900,900i|Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<div class="garden">
  <div class="garden2">
    <div class="gard-01"><h2><b>von's</b> requests</h2></div>
    <div class="gard-02 fl frowr bcet">
      <div class="gard-side flexs">
        <icon><iconan></iconan><img src="http://placehold.it/100"></icon>
        <sideinfo>
          <basic>gmt + 8</basic>
          <basic>17 years old</basic>
          <basic>likes kpop</basic>
          <basic>also anime</basic>
        </sideinfo>
      </div>
      <div class="gardtabs flex">
        <div class="tabcontain"></div>
        <div class="gtabs">
          <input type="radio" id="gtab1" name="gardentabs" checked>
          <label for="gtab1" title="index"><i class="fa fa-user-o"></i></label>
          <div class="gct-01">
            <div class="gct-02">
              <h3><i class="fa fa-chevron-right"></i> about me.</h3>
              <b>hey guys</b> im von, seventeen, and an avid aesthetic enthusiast. From images, to websites, to written poetry, I browse them all. Although, lately, I've been away at writing because of academics (which, apparently, took a heavy blow to my writing style). <br><br>
              I like starting my roleplay as <i>communications,</i> first and eventually might be promoted to threads.
            </div>
          </div>
        </div>
        <div class="gtabs">
          <input type="radio" id="gtab2" name="gardentabs">
          <label for="gtab2" title="faces"><i class="fa fa-heart-o"></i></label>
          <div class="gct-01">
            <div class="gct-02">
              <h3><i class="fa fa-chevron-right"></i> ideas.</h3>
              <i>plots i like</i>
              <p>bestfriend. travel partner. <b>korean entertainment.</b> idol-paparazzi. rivalries. power struggles. faction vs faction. college roommates (?). political warfare. high or epic fantasy. dystopian. <b>mythological.</b> modern gods. <b>harry potter au.</b> urban fantasy. first love. angst. more angst. adventure squad/gang. <b>mystery murder.</b> you can hit me up with more ideas. im open!</p>
            </div>
          </div>
        </div>
        <div class="gtabs">
          <input type="radio" id="gtab3" name="gardentabs">
          <label for="gtab3" title="plots"><i class="fa fa-folder-o"></i></label>
          <div class="gct-01">
            <div class="gct-02">
              <h3><i class="fa fa-chevron-right"></i> faces.</h3>
              <i>animanga boys</i>
              <p>ookurikara. <b>allen walker.</b> mystic messenger guys. <b>haikyuu boys.</b> nanase haruka. shintarou kisaragi. <b>gray fullbuster.</b> roy mustang. kekkai sensen!! and many more i forgot.
              </p><br>
              <i>animanga girls</i>
              <p>panty. <b>stockings.</b> nier. levy mcgarden. <b>lucy heartfilia.</b> saber of fate series. kiznaiver. <b>junko enoshima.</b> and many more I forgot also.</p>
            </div> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

[/html]

[hideprofile][html]
<style>
/****************
    Cлайдер
**************/

/* Oбщие настройки */
.slider,
.slider * {
  margin:0;
  padding:0;
}
.slider {
  overflow:hidden;
  border:none 0 transparent!important;
  border-collapse:collapse;
  /*outline:solid red 2px;*/
  /*position:relative;z-index:1000;*/
}
.button-left.hide,.button-right.hide{
  display:none;
}
.slider img.button-left,
.slider img.button-right{
  cursor:pointer;
}
div.Wrap-slids {
  text-align:left;
  overflow:hidden;
  position:relative;
}
div.train {
  text-align:left;
  overflow:hidden;
  white-space:nowrap;
  position:absolute;
}

.slider-content{
  margin:0;padding:0;
  white-space: normal;/* Поменял с nowrap; и добавка ниже*/
  word-break: normal;
  text-align:center;
  overflow-y:auto;
  overflow-x:auto;
  display:none;
  /*outline:solid red 1px;*/
}

.slider-content.active {
   display:block;
}
/* End Cлайдер */

/****************
    Индикатор
**************/

#indexActive{ /*Задаём Позицию индикаторов*/
  position:absolute;
  z-index:1000;
  margin-left: 580px;
  margin-top: -6px;
}

span[id^="active_Ind"]{ /*Фон и размеры индикатор*/
  display:inline-block;
  cursor:pointer;
  float:right;
  background:transparent url(http://s3.uploads.ru/geZ4A.png) no-repeat center top;
  /*border:solid 2px blue!important;*/
  height:11px;
  width:10px;
  padding:0 1px 0 1px;
  margin:10px 6px;
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0010/b4/f8/39493.js"></script>

<!-- Cлайдер -->
   <div id="slider" slide-width="772" slide-height="210" class="slider" style="padding:0;height:0;width:0">
<!-- Две Кнопки слайдера -->
    <img button-width="42" class="button-left hide" src="//s3.uploads.ru/KcP7S.png"/>
    <img button-width="42" class="button-right" src="//s2.uploads.ru/aIH0D.png"/>
<!-- 1-й Контейнер слайдера -->
<div class="slider-content active">
    1-й Контент
</div>
<!-- 2-й Контейнер слайдера -->
<div class="slider-content">
    2-й Контент
</div>
<!-- 3-й Контейнер слайдера -->
<div class="slider-content">
    3-й Контент
</div>
   </div><script>$("#slider2").slideF(660,4);</script><!--//End Cлайдер -->
[/html]

[html]
<style>
img {
  --b: 10px; /* control the size */
  padding: var(--b);
  border: calc(2*var(--b)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1*var(--b));
  background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,#000 0);
}

</style>
<script>

</script>

<img src="https://picsum.photos/id/1021/200/200" >

[/html]

[html]
<style>
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 500px;
  --card-width: calc(var(--card-height) / 1.5);
}

#container5 {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem;
}

</style>
<script>

</script>
<container5>
<div class="card">
  Magic Card
</div>

<a href="https:/" target="_blank">Mythrill</a>
</container5>

[/html]

[html]
<style>
img {
  border-radius: 50%;
  cursor: pointer;
  padding: 40px;
  clip-path: circle(calc(50% - 40px));
  --_p: 100px;
  --_g1: radial-gradient(50% 50%,#e71e24 90%,#0000); /* color 1 */
  --_g2: radial-gradient(50% 50%,#fcc010 90%,#0000); /* color 2 */
  --_g3: radial-gradient(50% 50%,#85c341 90%,#0000); /* color 3 */
  --_g4: radial-gradient(50% 50%,#eb2288 90%,#0000); /* color 4 */
  background:
     var(--_g1) calc(20% - var(--_p)) calc(20% - var(--_p)),
     var(--_g2) calc(80% + var(--_p)) calc(10% - var(--_p)),
     var(--_g3) calc(80% + var(--_p)) calc(80% + var(--_p)),
     var(--_g3) 55%                   calc(12% - var(--_p)),
     var(--_g1) calc(18% - var(--_p)) calc(88% + var(--_p)),
     var(--_g2) calc(10% - var(--_p)) calc(70% + var(--_p)),
     var(--_g2) calc(88% + var(--_p)) 40%,
     var(--_g1) calc(82% + var(--_p)) calc(28% - var(--_p)),
     var(--_g4) calc(12% - var(--_p)) 30%,
     var(--_g4) 65%                   calc(85% + var(--_p)),
     var(--_g3) calc(20% - var(--_p)) calc(10% - var(--_p)),
     var(--_g4) calc(30% - var(--_p)) calc(85% + var(--_p));
  background-size: 15px 15px, 20px 20px, 30px 30px;
  background-repeat: no-repeat;
  filter: grayscale(80%);
  transition: .5s;
}
img:hover {
  filter: grayscale(0%);
  clip-path: circle(50%);
  --_p: 0px;
}

</style>
<img src="https://picsum.photos/id/360/200/200" alt="a few flowers">
<img src="https://picsum.photos/id/64/200/200" alt="a girl holding flowers">

[/html]

[html]<style>
body{
  background-color: #f0f0f0;
  width: 700px;
  float: center;
}

hr.style1{
border-top: 1px solid #8c8b8b;
}

hr.style2 {
border-top: 3px double #8c8b8b;
}

hr.style3 {
border-top: 1px dashed #8c8b8b;
}

hr.style4 {
border-top: 1px dotted #8c8b8b;
}

hr.style5 {
background-color: #fff;
border-top: 2px dashed #8c8b8b;
}

hr.style6 {
background-color: #fff;
border-top: 2px dotted #8c8b8b;
}

hr.style7 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}

hr.style8 {
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}
hr.style8:after {
content: '';
display: block;
margin-top: 2px;
border-top: 1px solid #8c8b8b;
border-bottom: 1px solid #fff;
}

hr.style9 {
border-top: 1px dashed #8c8b8b;
border-bottom: 1px dashed #fff;
}

hr.style10 {
border-top: 1px dotted #8c8b8b;
border-bottom: 1px dotted #fff;
}

hr.style11 {
height: 6px;
background: url(http://ibrahimjabbari.com/images/hr-11.png) repeat-x 0 0;
    border: 0;
}

hr.style12 {
height: 6px;
background: url(http://ibrahimjabbari.com/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

hr.style14 {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

hr.style15 {
border-top: 4px double #8c8b8b;
text-align: center;
}
hr.style15:after {
content: '\002665';
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
}

hr.style16 {
  border-top: 1px dashed #8c8b8b;
}
hr.style16:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -12px;
  left: 40px;
  padding: 0 3px;
  background: #f0f0f0;
  color: #8c8b8b;
  font-size: 18px;
}

hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}

hr.style18 {
  height: 30px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr.style18:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

</style>
<br>
<hr class="style1">
<br>
<hr class="style2">
<br>
<hr class="style3">
<br>
<hr class="style4">
<br>
<hr class="style5">
<br>
<hr class="style6">
<br>
<hr class="style7">
<br>
<hr class="style8">
<br>
<hr class="style9">
<br>
<hr class="style10">
<br>
<hr class="style11">
<br>
<hr class="style12">
<br>
<hr class="style13">
<br>
<hr class="style14">
<br>
<hr class="style15">
<br>
<hr class="style16">
<br>
<hr class="style17">
<br>
<hr class="style18">
[/html]

[html]
<style>
body {
  margin: 0;
  padding: 0;
  background: rgb(230,230,230);
 
  color: rgb(50,50,50);
  font-family: 'Open Sans', sans-serif;
  font-size: 112.5%;
  line-height: 1.6em;
}

/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
 
  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
 
  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
 
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(255,80,80);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
 
  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250,80,80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
 
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {

.timeline {
width: 100%;
padding: 4em 0 1em 0;
}

.timeline li {
padding: 2em 0;
}

.direction-l,
.direction-r {
float: none;
width: 100%;

text-align: center;
}

.flag-wrapper {
text-align: center;
}

.flag {
background: rgb(255,255,255);
z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -30px;
left: 50%;
content: ' ';
display: block;
width: 12px;
height: 12px;
margin-left: -9px;
background: #fff;
border-radius: 10px;
border: 4px solid rgb(255,80,80);
z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
content: "";
position: absolute;
left: 50%;
top: -8px;
height: 0;
width: 0;
margin-left: -8px;
border: solid transparent;
border-bottom-color: rgb(255,255,255);
border-width: 8px;
pointer-events: none;
}

.time-wrapper {
display: block;
position: relative;
margin: 4px 0 0 0;
z-index: 14;
}

.direction-l .time-wrapper {
float: none;
}

.direction-r .time-wrapper {
float: none;
}

.desc {
position: relative;
margin: 1em 0 0 0;
padding: 1em;
background: rgb(245,245,245);
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
box-shadow: 0 0 1px rgba(0,0,0,0.20);

  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
position: relative;
margin: 1em 1em 0 1em;
padding: 1em;

  z-index: 15;
}

}

@media screen and (min-width: 400px ?? max-width: 660px) {

.direction-l .desc,
.direction-r .desc {
margin: 1em 4em 0 4em;
}

}

</style>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
 
<!-- The Timeline -->

<ul class="timeline">

<!-- Item 1 -->
<li>
    <div class="direction-r">
    <div class="flag-wrapper">
        <span class="flag">Freelancer</span>
        <span class="time-wrapper"><span class="time">2013 - present</span></span>
    </div>
    <div class="desc">My current employment. Way better than the position before!</div>
    </div>
</li>
 
<!-- Item 2 -->
<li>
    <div class="direction-l">
    <div class="flag-wrapper">
        <span class="flag">Apple Inc.</span>
        <span class="time-wrapper"><span class="time">2011 - 2013</span></span>
    </div>
    <div class="desc">My first employer. All the stuff I've learned and projects I've been working on.</div>
    </div>
</li>

<!-- Item 3 -->
<li>
    <div class="direction-r">
    <div class="flag-wrapper">
        <span class="flag">Harvard University</span>
        <span class="time-wrapper"><span class="time">2008 - 2011</span></span>
    </div>
    <div class="desc">A description of all the lectures and courses I have taken and my final degree?</div>
    </div>
</li>
 
</ul>

[/html]

[html]<style>
body {
   font-family:sans-serif;
   margin:0;
   padding:0;
   width:100%;
   background:url(https://i.imgur.com/EOjzXGI.jpg);
   background-size:cover;
}
html {
   width:100%;
}

/* ****** */

.timeline-parcours {
   width:960px;
   height:auto;
   min-height:10px;
   margin:100px auto;
}
.container-info  {
   width:960px;
   margin:0 auto;
   height:auto;
   min-height:187px;
}
.timeline-section-tl {
   width:236px;
   height:auto;
   min-height:10px;
   display:inline-block;
}
.infobox {
   width:226px;
   height:auto;
   min-height:10px;
   background-color:white;
   padding:5px;
   border-radius:10px;
   display:inline-block;
   margin:0px 1px;
}
.fleche-bloc {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 15px 15px 0 15px;
   border-color: #ffffff transparent transparent transparent;
   margin:auto;
}
.parcours-box {
   opacity:0;
   z-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.container-time-line {
   width:960px;
   margin:auto;
}
.time-line-parcours {
   width:730px;
   height:10px;
   background-color:#432828;
   margin:auto;
}
.timeline-indicator {
   width:0px;
   height:10px;
   background-color:rgb(120, 131, 208);
   -webkit-transition: all 100ms ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.tl-round {
   width:20px;
   height:20px;
   border-radius:50%;
   background-color:rgb(85, 69, 69);
   margin:auto;
    -webkit-transition: all 100ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.container-bulle {
   margin-top:-15px;
}
/* animation classe */

.anim-phase-1 {
   width:240px;
   -webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-ms-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}
.anim-phase-2 {
   width:475px;
   -webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-ms-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}
.anim-phase-3 {
   width:720px;
   -webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-ms-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}
.parcours-active {
   opacity:1;
   z-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

</style>
<script>
$( document ).ready(function() {
   $(".parcours-box").removeClass("parcours-active");
   
   
   $(".round1").on("click",function(){
      $(".tl-round").css("background-color","rgb(85, 69, 69)");
      $(".round1").css("background-color","white");
      $(".parcours-active").removeClass("parcours-active");
      $(".parc1").addClass("parcours-active");
      $(".timeline-indicator").css("width","0");
   })
   
   $(".round2").on("click",function(){
      $(".tl-round").css("background-color","rgb(85, 69, 69)");
      $(".round1").css("background-color","white");
      $(".round2").css("background-color","white");
      $(".parcours-active").removeClass("parcours-active");
      $(".parc2").addClass("parcours-active");
      $(".timeline-indicator").css("width","240");
   })
   
   $(".round3").on("click",function(){
      $(".tl-round").css("background-color","rgb(85, 69, 69)");
      $(".round1").css("background-color","white");
      $(".round2").css("background-color","white");
      $(".round3").css("background-color","white");
      $(".parcours-active").removeClass("parcours-active");
      $(".parc3").addClass("parcours-active");
      $(".timeline-indicator").css("width","480");
   })
   
   $(".round4").on("click",function(){
      $(".tl-round").css("background-color","rgb(85, 69, 69)");
      $(".round1").css("background-color","white");
      $(".round2").css("background-color","white");
      $(".round3").css("background-color","white");
      $(".round4").css("background-color","white");
      $(".parcours-active").removeClass("parcours-active");
      $(".parc4").addClass("parcours-active");
      $(".timeline-indicator").css("width","720");
   })
   
});
</script>
<html>
   <head>
      <title>test</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   </head>
   <body>
      <div class="timeline-parcours">
         <div class="container-info">
            <div class="timeline-section-tl">
               <div class="parcours-box parc1">
                  <div class="infobox date1">
                     <h3>Titre titre 1</h3>
                     <p class="subt-infobox">ceci est un test</p>
                     <p class="infobox-text">ceci est un court texte d'information par rapport à un évènement</p>
                  </div>
                  <div class="fleche-bloc"></div>
               </div>
            </div>
            <div class="timeline-section-tl">
               <div class="parcours-box parc2">
                  <div class="infobox date1">
                     <h3>Titre titre 2</h3>
                     <p class="subt-infobox">ceci est un test</p>
                     <p class="infobox-text">ceci est un court texte d'information par rapport à un évènement</p>
                  </div>
                  <div class="fleche-bloc"></div>
               </div>
            </div>
            <div class="timeline-section-tl">
               <div class="parcours-box parc3">
                  <div class="infobox date1">
                     <h3>Titre titre 3</h3>
                     <p class="subt-infobox">ceci est un test</p>
                     <p class="infobox-text">ceci est un court texte d'information par rapport à un évènement</p>
                  </div>
                  <div class="fleche-bloc"></div>
               </div>
            </div>
            <div class="timeline-section-tl">
               <div class="parcours-box parc4">
                  <div class="infobox date1">
                     <h3>Titre titre 4</h3>
                     <p class="subt-infobox">ceci est un test</p>
                     <p class="infobox-text">ceci est un court texte d'information par rapport à un évènement</p>
                  </div>
                  <div class="fleche-bloc"></div>
               </div>
            </div>
         </div>

         <div class="container-time-line">
            <div class="time-line-parcours">
               <div class="timeline-indicator">
                  <p class="indicator-val"></p>
               </div>
            </div>
         </div>
         <div class="container-bulle">
            <div class="timeline-section-tl">
               <div class="tl-round round1"></div>
            </div>
            <div class="timeline-section-tl">
               <div class="tl-round round2"></div>
            </div>
            <div class="timeline-section-tl">
               <div class="tl-round round3"></div>
            </div>
            <div class="timeline-section-tl">
               <div class="tl-round round4"></div>
            </div>
         </div>

      </div>
      <script type="text/javascript" src="script.js"></script>
      <script>

         function reste_a_faire()
         {
            return true;
         }

         if(reste_a_faire())
            console.log('rien n\'est fait');

      </script>
   </body>
</html>
[/html]

[hideprofile][html]
<style>
.hideprofile .post-author,.hideprofile .pl-email,.hideprofile .pl-website{display:none!important}
.hideprofile .post-body,.hideprofile .post-links,.hideprofile .post-links ul,.post.hideprofile h3>span{margin-left:0!important}
@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Share+Tech+Mono&display=swap");

:root {
  --font-body: "Share Tech Mono", monospace;
  --font-headings: "Audiowide", cursive;
  --neon-pink: 341, 100%, 58%;
  --neon-blue: 184, 96%, 46%;
  --very-light-blue: 190, 100%, 91%;
  --dark-blue: 240, 95%, 9%;
  --yellow: 44, 97%, 72%;
  --border: hsl(var(--neon-blue)), hsl(var(--neon-pink)), hsl(var(--neon-blue));
  --padding-wrapper: 1.5em;
  --border-image: linear-gradient(-45deg, var(--border)) 10% stretch;
  --background-lines: linear-gradient(
      hsla(184, 96%, 46%, 0) 90%,
      hsla(184, 96%, 46%, 0.25) 95%
    )
    top left / 100% 0.5rem;
}

/* === GLOBAL STYLES === */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 1em;
  background: hsl(var(--dark-blue)) var(--background-lines);
  color: hsl(var(--very-light-blue));
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-size: clamp(1.2rem, 0.7rem + 0.9vw, 4rem);
  line-height: 1.2;
  overflow-x: hidden;
  max-width: 112.5rem;
}

@media (min-width: 48rem) {
  body {
    margin-left: 13em;
  }
}

h1,
h2,
h3,
h4 {
  z-index: 2;
  position: relative;
  color: hsl(var(--yellow));
  font-family: var(--font-headings);
  text-transform: uppercase;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

h2,
h3,
h4 {
  z-index: 3;
  position: relative;
  font-size: 1.6rem;
  font-size: clamp(1.6rem, 1rem + 2vw, 3rem);
}

h3 {
  margin-top: 1em;
}

strong {
  color: hsl(var(--yellow));
}

li {
  list-style-type: none;
}

a {
  color: hsl(var(--neon-pink));
}

a:hover,
a:active {
  color: hsl(var(--very-light-blue));
  top: -0.03rem;
  left: -0.03rem;
  -webkit-filter: drop-shadow(0 0 0.2rem hsla(var(--neon-pink), 0.4))
    drop-shadow(0.5rem 0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(-0.5rem 0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(0.5rem -0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(-0.5rem -0.5rem 0.2rem hsla(var(--neon-pink), 0.6));
  filter: drop-shadow(0 0 0.2rem hsla(var(--neon-pink), 0.4))
    drop-shadow(0.5rem 0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(-0.5rem 0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(0.5rem -0.5rem 0.2rem hsla(var(--neon-pink), 0.6))
    drop-shadow(-0.5rem -0.5rem 0.2rem hsla(var(--neon-pink), 0.6));
}

p:not(:first-child) {
  margin-top: 1.5em;
}

p:last-child {
  margin-bottom: 1.5em;
}

h1::before,
h2::before,
h3::before,
h4::before {
  z-index: -1;
  position: absolute;
  top: 0.2rem;
  left: -0.2rem;
  width: 100%;
  height: 100%;
  color: hsl(var(--neon-pink));
  opacity: 0.7;
  animation: glitch 0.3s linear infinite alternate-reverse;
}

h1::after,
h2::after,
h3::after,
h4::after {
  z-index: -1;
  position: absolute;
  top: 0.1rem;
  left: 0.2rem;
  width: 100%;
  height: 100%;
  color: hsl(var(--neon-blue));
  opacity: 0.7;
  animation: glitch 0.3s 0.1s linear infinite alternate-reverse;
  -webkit-clip-path: polygon(3% 100%, 14% 28%, 67% 15%, 103% 67%);
  clip-path: polygon(3% 100%, 14% 28%, 67% 15%, 103% 67%);
}

aside {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

aside ul {
  margin-top: 0.5rem;
  display: -ms-grid;
  display: grid;
}

aside li {
  margin: 1em;
}

.profile .container > a,
[class^="link"] {
  display: block;
  margin-top: 1em;
  border: 0.2rem solid hsl(var(--yellow));
  padding: 0.6em 1.2em;
  color: hsl(var(--neon-blue));
  text-decoration: none;
  text-align: center;
  font-size: 0.95em;
  max-width: 35ch;
  margin-left: auto;
  margin-right: auto;
}

.profile .container > a:hover,
[class^="link"]:hover {
  -webkit-transform: translate(-0.1rem, -0.1rem);
  transform: translate(-0.1rem, -0.1rem);
  -webkit-filter: none;
  filter: none;
  -webkit-box-shadow: 0px 0px 25px hsl(var(--yellow));
  box-shadow: 0px 0px 25px hsl(var(--yellow));
  border-color: hsl(var(--very-light-blue));
}

::-moz-selection {
  background-color: hsl(var(--yellow));
  color: hsl(var(--dark-blue));
}

::selection {
  background-color: hsl(var(--yellow));
  color: hsl(var(--dark-blue));
}

:focus {
  outline: 2px solid transparent;
}

:focus-visible {
  outline-color: hsl(var(--neon-pink));
  outline-offset: 2px;
}

/* === SKIP LINK === */
.skip-link:not(:focus) {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.skip-link:hover,
.skip-link:active {
  top: 0;
  left: 0;
  -webkit-filter: none;
  filter: none;
}

.skip-link {
  z-index: 100;
  position: fixed;
  left: 0;
  width: 100vw;
  top: 0;
  margin: 0 auto;
  padding: 0.3rem;
  background-color: hsl(var(--dark-blue));
  -webkit-filter: none;
  filter: none;
  text-align: center;
}

@media (min-width: 48rem) {
  .skip-link,
  .skip-link:hover,
  .skip-link:active {
    display: inline-block;
    width: initial;
    top: 2em;
    left: 1em;
  }
}

/* === HEADER === */
header {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
  text-align: center;
}

header h1 {
  max-width: 5ch;
  font-size: 3rem;
  font-size: clamp(3rem, 2.5rem + 2.5vw, 6rem);
  overflow: hidden;
  opacity: 0.9;
}

header h1::before,
header h1::after {
  content: "Style Stage";
}

header h2 {
  margin-top: 0.5em;
  max-width: 25ch;
  color: hsl(var(--very-light-blue));
  font-size: 1.3rem;
  font-size: clamp(1.3rem, 1.3rem + 1.7vw, 4rem);
  font-family: var(--font-body);
  text-transform: none;
  line-height: 1;
}

.link-github svg {
  width: 1.5rem;
  vertical-align: middle;
  stroke: hsl(var(--neon-pink));
  stroke-width: 0.15rem;
  fill: transparent;
}

/* === NAVIGATION === */
nav {
  border: 0.4rem solid hsl(var(--neon-blue));
  margin-top: 2em;
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
  background-color: hsl(var(--dark-blue));
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

nav li {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 33%;
  flex: 1 1 33%;
  margin-top: 0;
  border: 1px solid hsl(var(--neon-blue));
  padding: 0.5em;
  width: 100%;
  text-align: center;
}

nav a {
  margin: 0;
  padding: 0;
  font-size: 1em;
}

@media screen and (min-width: 48rem) {
  nav {
    position: fixed;
    left: 1em;
    top: 3em;
    width: 12em;
  }

  nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  nav li:not(:last-child) {
    -ms-flex-preferred-size: content;
    flex-basis: content;
  }
}

/* === ABOUT === */
[id="about"] > .container {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

[id="about"] ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 1.5em auto;
  font-size: 0.8em;
  text-align: center;
}

[id="about"] li {
  border: 0.2rem solid hsl(var(--very-light-blue));
  padding: 1em;
  margin: 0.5em;
  border-radius: 15%;
  background: hsl(var(--dark-blue));
  -webkit-box-shadow: 0 0 1.2rem hsla(var(--neon-blue), 0.3),
    0.1rem 0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    -0.1rem 0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    0.1rem -0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    -0.1rem -0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    0 0 1.5rem hsla(var(--neon-blue), 0.4) inset,
    0.1rem 0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.1rem 0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    0.1rem -0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.1rem -0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset;
  box-shadow: 0 0 1.2rem hsla(var(--neon-blue), 0.3),
    0.1rem 0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    -0.1rem 0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    0.1rem -0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    -0.1rem -0.1rem 1.2rem hsla(var(--neon-blue), 0.3),
    0 0 1.5rem hsla(var(--neon-blue), 0.4) inset,
    0.1rem 0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.1rem 0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    0.1rem -0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.1rem -0.1rem 1.5rem hsla(var(--neon-blue), 0.2) inset;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}

[id="about"] li:nth-child(3n) {
  -webkit-transform: rotate(8deg);
  transform: rotate(8deg);
}

[id="about"] li:nth-child(2n + 2) {
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

[id="about"] li:hover {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation: flicker 0.4s linear;
  animation: flicker 0.4s linear;
}

[id="about"] :first-child h2::before,
[id="about"] :first-child h2::after {
  content: "Setting the Stage";
}

[id="about"] :last-child h2::before,
[id="about"] :last-child h2::after {
  content: "Modern CSS Under the Spotlight";
}

blockquote {
  position: relative;
  margin: 1em 0 1em 2em;
}

blockquote::before {
  content: "";
  z-index: 2;
  position: absolute;
  width: 0.5rem;
  height: 100%;
  background-color: hsla(var(--very-light-blue), 0.25);
  top: 0;
  left: -2em;
  border-radius: 30%;
  -webkit-filter: drop-shadow(0 0 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(0.2rem 0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(-0.2rem 0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(0.2rem -0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(-0.2rem -0.5rem 0.2rem hsla(var(--neon-blue), 0.6));
  filter: drop-shadow(0 0 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(0.2rem 0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(-0.2rem 0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(0.2rem -0.5rem 0.2rem hsla(var(--neon-blue), 0.6))
    drop-shadow(-0.2rem -0.5rem 0.2rem hsla(var(--neon-blue), 0.6));
}

blockquote::after {
  content: "";
  z-index: 3;
  position: absolute;
  width: 0.5rem;
  height: 100%;
  top: 0;
  left: -2em;
  border-radius: 15%;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(1%, hsla(var(--very-light-blue), 0)),
    color-stop(35%, hsla(var(--very-light-blue), 0.8)),
    color-stop(99%, hsla(var(--very-light-blue), 0))
  );
  background-image: linear-gradient(
    hsla(var(--very-light-blue), 0) 1%,
    hsla(var(--very-light-blue), 0.8) 35% 60%,
    hsla(var(--very-light-blue), 0) 99%
  );
  background-position: top left;
  background-size: 100% 30%;
  background-repeat: no-repeat;
  animation: blockquote-animation 1s ease-in-out infinite alternate-reverse;
}

/* === GUIDELINES === */
[id="guidelines"] {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

[id="guidelines"] h2::before,
[id="guidelines"] h2::after {
  content: "Guidelines";
}

/* === CONTRIBUTE === */
[id="contribute"] {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

[id="contribute"] h2::before,
[id="contribute"] h2::after {
  content: "Contribute";
}

[id="contribute"] ol {
  margin: 1em 0 0 3em;
  counter-reset: contribution-steps;
}

[id="contribute"] li {
  position: relative;
  margin-top: 1em;
  text-align: left;
  counter-increment: contribution-steps;
}

[id="contribute"] li::before {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  content: counter(contribution-steps);
  position: absolute;
  top: 0rem;
  left: -3em;
  border: 0.2rem solid hsl(var(--neon-blue));
  width: 2ch;
  height: 2ch;
  border-radius: 50%;
  color: hsl(var(--neon-blue));
  text-align: center;
}

[id="contribute"] li:hover:before {
  color: hsl(var(--very-light-blue));
  border-color: hsl(var(--very-light-blue));
  -webkit-box-shadow: 0 0 1rem hsla(var(--neon-blue), 0.3),
    0.05rem 0.05rem 1rem hsla(var(--neon-blue), 0.3),
    -0.05rem 0.05rem 1rem hsla(var(--neon-blue), 0.3),
    0.05rem -0.05rem 1rem hsla(var(--neon-blue), 0.3),
    -0.05rem -0.05rem 1rem hsla(var(--neon-blue), 0.3),
    0 0 0.1rem hsla(var(--neon-blue), 0.4) inset,
    0.05rem 0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.05rem 0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    0.05rem -0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.05rem -0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset;
  box-shadow: 0 0 1rem hsla(var(--neon-blue), 0.3),
    0.05rem 0.05rem 1rem hsla(var(--neon-blue), 0.3),
    -0.05rem 0.05rem 1rem hsla(var(--neon-blue), 0.3),
    0.05rem -0.05rem 1rem hsla(var(--neon-blue), 0.3),
    -0.05rem -0.05rem 1rem hsla(var(--neon-blue), 0.3),
    0 0 0.1rem hsla(var(--neon-blue), 0.4) inset,
    0.05rem 0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.05rem 0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    0.05rem -0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset,
    -0.05rem -0.05rem 0.5rem hsla(var(--neon-blue), 0.2) inset;
}

/* === FILES === */
[id="files"] {
  margin-top: 1.5em;
}

[id="files"] .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

[id="files"] h3 {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

[id="files"] a {
  margin: 1em;
}

/* === PROFILE === */
.profile h4::before,
.profile h4::after {
  content: "Currently Staged Style";
}

.profile {
  text-align: center;
}

.profile li {
  margin: 0;
}

.profile ul > * + * {
  margin-top: 1em;
}

/* === STYLES === */
[id="styles"] {
  text-align: center;
}

[id="styles"] h2::before,
[id="styles"] h2::after {
  content: "Featured Styles";
}

[id="styles"] li {
  margin: 0;
}

[id="styles"] ul > * + * {
  margin-top: 1em;
}

/* === FOOTER === */
.page-footer {
  width: 100%;
  border: 0.4rem solid hsl(var(--neon-blue));
  padding: 1.5em;
  margin-top: 2em;
  background-color: hsl(var(--dark-blue));
  -o-border-image: var(--border-image);
  border-image: var(--border-image);
}

.page-footer ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 -1em;
}

.page-footer li {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 30ch;
  flex: 0 1 30ch;
  margin: 1em 1em 0 1em;
}

.page-footer a {
  margin: 0;
  width: 100%;
}

/* === ANIMATIONS === */
@-webkit-keyframes flicker {
  50% {
    border-color: hsl(184, 96%, 46%, 0.5);
  }
}
@keyframes flicker {
  50% {
    border-color: hsl(184, 96%, 46%, 0.5);
  }
}

@-webkit-keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-0.1rem, -0.1rem);
    transform: translate(-0.1rem, -0.1rem);
  }
  40% {
    -webkit-transform: translate(-0.1rem, -0.1rem);
    transform: translate(-0.1rem, -0.1rem);
  }
  60% {
    -webkit-transform: translate(0.1rem, 0.1rem);
    transform: translate(0.1rem, 0.1rem);
  }
  80% {
    -webkit-transform: translate(0.1rem, -0.1rem);
    transform: translate(0.1rem, -0.1rem);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-0.1rem, -0.1rem);
    transform: translate(-0.1rem, -0.1rem);
  }
  40% {
    -webkit-transform: translate(-0.1rem, -0.1rem);
    transform: translate(-0.1rem, -0.1rem);
  }
  60% {
    -webkit-transform: translate(0.1rem, 0.1rem);
    transform: translate(0.1rem, 0.1rem);
  }
  80% {
    -webkit-transform: translate(0.1rem, -0.1rem);
    transform: translate(0.1rem, -0.1rem);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@-webkit-keyframes blockquote-animation {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(70%);
    transform: translateY(70%);
  }
}

@keyframes blockquote-animation {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(70%);
    transform: translateY(70%);
  }
}

/* === DISABLE ANIMATIONS === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

</style>
<script>

</script>
<a href="#main" class="skip-link">Skip to main content</a>
<header>
  <div class="container">
    <h1>Style Stage</h1>
    <h2>A modern CSS showcase styled by community contributions</h2>
    <p>
      Maintained by <a href="https://twitter.com/5t3ph">Stephanie Eckles</a> of
      <a href="https://moderncss.dev">ModernCSS.dev</a>
    </p>
    <a href="https://github.com/5t3ph/stylestage" class="link-github"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
          <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
        </svg>
      </span>
      Star on Github</a>
  </div>
</header>
<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#guidelines">Guidelines</a></li>
    <li><a href="#contribute">Contribute</a></li>
    <li><a href="#files">Files</a></li>
    <li><a href="/styles/">All Styles</a></li>
    <li><a href="/resources/">Resources</a></li>
  </ul>
</nav>

<main id="main" tabIndex="-1">
  <div class="container">
    <article id="about">
      <section class="container">
        <h2>Setting the Stage</h2>
        <p>
          In 2003, <a href="http://daveshea.com/projects/zen/">Dave Shea</a> began a legendary
          project called <a href="http://www.csszengarden.com/">CSS Zen Garden</a> that provided
          a demonstration of "what can be accomplished through CSS-based design" until
          submissions stopped in 2013.
        </p>
        <p>
          <strong>Style Stage</strong> seeks to rekindle that spirit by providing this page as
          the base HTML for contributors - like you! - to re-style by submitting an alternate
          stylesheet.
        </p>
        <blockquote>
          <p>
            <strong>How it works:</strong> Visit the
            <a href="/styles/">"All Styles"</a> directory page and select a style to view. A
            page with identical content to this one will be presented with a new design provided
            from a contributed stylesheet. CSS practitioners of any skill level are invited to
            <a href="#contribute">submit a stylesheet</a>!
          </p>
        </blockquote>
        <p>
          The HTML for this page was created to be semantic, accessible, and free of nearly all
          other opinions. Nested sectioning elements with the class `.container` serve as
          additional style aids since you do not have access to alter the base HTML. IDs are
          included where needed for nav anchors or accessibility, and a small number of
          additional classes are provided for key elements without IDs. Don't forget the
          `.skip-link`!
        </p>
      </section>
      <section class="container">
        <h2>Modern CSS Under the Spotlight</h2>
        <p>
          Modern CSS has increased and improved the available CSS properties and layout
          behaviors, and browser support is nearly in sync for most high-touch features.
        </p>
        <p>Some examples of modern CSS include:</p>
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
          <li>custom variables</li>
          <li>@supports()</li>
          <li>gradients</li>
          <li>animation</li>
          <li>3D transforms</li>
          <li>object-fit</li>
          <li>:focus-within</li>
          <li>calc()</li>
          <li>min() / max() / clamp()</li>
          <li>viewport units</li>
          <li>scroll-(margin/padding/snap)</li>
          <li>position: sticky</li>
          <li>two-value display</li>
          <li>expanded media query values</li>
          <li>variable fonts</li>
        </ul>
        <p>
          We also collectively have an improved understanding of what it takes to make
          accessible experiences.
        </p>
        <p>
          <a href="#contribute">Join Style Stage as a contributor</a> to refresh your CSS
          skills, and learn from others!
        </p>
      </section>
    </article>
    <article id="guidelines">
      <section class="container">
        <h2>Guidelines</h2>
        <p>
          Contributing a stylesheet to Style Stage means you agree to abide by
          <a href="/guidelines/">our full guidelines</a>.
        </p>
        <h3>TL;DR</h3>
        <p>
          All submissions will be autoprefixed and prepended with the
          <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA license</a>
          as well as attribution using the metadata you provide. You may use any build setup you
          prefer, but the final submission should be the compiled, unminified CSS. You retain
          the copyright to original graphics and must ensure all graphics used are appropriately
          licensed. All asset links, including fonts, must be absolute to external resources.
          Stylesheets will be saved into the Github repo, and detected changes that violate the
          guidelines are cause for removal.
        </p>
        <p>
          Ensure your design is responsive, and that it passes accessible contrast (we'll be
          using aXe to verify). Animations should be removed via `prefers-reduced-motion`.
          Cutting-edge techniques should come with a fallback if needed to not severely impact
          the user experience. No content may be permanently hidden, and hidden items must come
          with an accessible viewing technique. Page load time should not exceed 3 seconds.
        </p>
        <p>
          Most importantly - have fun and learn something new! Check out the
          <a href="/resources/">resources</a> for tips and inspiration.
        </p>
        <a href="/guidelines/" class="link-guidelines">Review full guidelines</a>
      </section>
    </article>
    <article id="contribute">
      <section class="container">
        <h2>Contribute</h2>
        <p>All who enjoy the craft of writing CSS are welcome to contribute!</p>
        <p>
          By participating as a contributor, your work will be shared with your provided
          attribution as long as Style Stage is online, your stylesheet link and any asset links
          remain valid, and all <a href="/guidelines/">contributor guidelines</a> are adhered
          to.
        </p>
      </section>
      <section class="container">
        <h3>Steps to Contribute</h3>
        <ol>
          <li>
            Download the source files listed below to use as a reference to build your
            stylesheet.
          </li>
          <li>
            Host your completed stylesheet at a public URL, and ensure all asset links are
            absolute URLs to external resources.
          </li>
          <li>
            <a href="https://github.com/5t3ph/stylestage">Create a pull request</a> to add your
            information as a unique .json file to: src/_data/styles. The schema is detailed in
            the repo README, and you can review the FAQ on
            <a href="/guidelines/#how-do-i-create-a-pull-request-pr">creating a pull request</a>.
          </li>
          <li>
            If your contribution abides by the previously listed guidelines, your submission
            will be added!
          </li>
        </ol>
      </section>
      <footer id="files">
        <div class="container">
          <h3>Source Files</h3>
          <a href="/source-files/style.css" class="link-downloadcss" download>Download CSS</a>
          <a href="/source-files/stylestage.html" class="link-downloadhtml" download>Download HTML</a>
          <a href="https://codepen.io/5t3ph/pen/b493845ae41e836889dd84fdbb0f5291" class="link-codepen" download>Fork the CodePen</a>
        </div>
      </footer>
    </article>
  </div>
</main>
<aside class="profile" aria-labelledby="profile-title">
  <div class="container">
    <h4 id="profile-title">Currently Staged Style</h4>
    <ul>
      <li class="profile-title"><span>Title:</span> <span>Retro Cyberpunk</span></li>
      <li class="profile-author"><span>Author:</span> <span>Inès K.</span></li>
      <li class="profile-twitter">
        <span>Twitter:</span> <span><a href="https://twitter.com/inescodes">inescodes</a></span>
      </li>
    </ul>
    <a href="/styles/css/retro-cyberpunk.css">View Stylesheet</a>
  </div>
</aside>
<aside id="styles">
  <div class="container">
    <h2>Featured Styles</h2>
    <ul class="features">
      <li>
        <span>
          <a href="/styles/web-2.0-lobster-party">Web 2.0 Lobster Party<span aria-hidden="true"></span></a>
          <span>by Andy Bell</span>
        </span>
      </li>
      <li>
        <span>
          <a href="/styles/retroish">Retroish<span aria-hidden="true"></span></a>
          <span>by Jean Louise Tiston</span>
        </span>
      </li>
      <li>
        <span>
          <a href="/styles/transparency">Transparency<span aria-hidden="true"></span></a>
          <span>by Jens Oliver Meiert</span>
        </span>
      </li>
    </ul>

    <a href="/styles/" class="link-allstyles">View All Styles</a>
  </div>
</aside>
<footer class="page-footer">
  <div class="container">
    <p>
      Created and maintained by
      <a href="https://twitter.com/5t3ph">Stephanie Eckles (@5t3ph)</a>
    </p>
    <ul>
      <li>
        <a href="https://twitter.com/5t3ph" class="link-twittercontact">Contact on Twitter</a>
      </li>
      <li>
        <a href="https://github.com/5t3ph/stylestage" class="link-github"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
            <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
          </svg>
          Star on Github</a>
      </li>
      <li><a href="/feed/" class="link-rss">RSS Feed</a></li>
      <li><a href="/subscribe/" class="link-support">Subscribe to Updates</a></li>
    </ul>
    <p>
      Crafted with semantic, accessible HTML and CSS, <strong>Style Stage</strong> is generated
      with <a href="https://11ty.dev">11ty</a> and hosted on
      <a href="https://netlify.com">Netlify</a>. This project uses
      <a href="https://postcss.org/">PostCSS</a> with
      <a href="https://github.com/postcss/autoprefixer">autoprefixer</a>.
    </p>
    <p>
      Contributors retain copyright of all graphics used, and styles are available under
      <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA</a>
    </p>
  </div>
</footer>

[/html]

[html]
<style>
h91,
h92 {
  margin: 0;
}

a {
  color: #ccc;
}

.hero {
  font-size: clamp(40px, 10vw, 100px);
  line-height: 1;
  display: inline-block;
  color: #fff;
  z-index: 2;
  letter-spacing: 10px;

  /* Bright things in dark environments usually cast that light, giving off a glow */
  filter: drop-shadow(0 1px 3px);
}

section {
  padding: 20px;
}

.hero {
  font-size: clamp(40px, 10vw, 100px);
  line-height: 1;
  display: inline-block;
  color: #fff;
  z-index: 2;
  letter-spacing: 10px;

  /* Bright things in dark environments usually cast that light, giving off a glow */
  filter: drop-shadow(0 1px 3px);
}

.demo {
  height: 100px;
  background: #fff;
}

.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}
.hero-container {
  position: relative;
  padding: 200px 0;
  text-align: center;
}

.environment {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  filter: blur(5px);
  background: url(https://images.unsplash.com/photo-16021 … 0&q=80)
    center no-repeat;
  background-size: cover;
}

</style>
<section>

  <div class="hero-container">
    <div class="environment"></div>
    <h92 class="hero glitch layers" data-text="БЛЯ"><span>БЛЯ</span></h92>
  </div>
</section>

[/html]

[html]
<style>
body{
  margin:0;
  padding:0;
}
.wrapper{
  height:100vh;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background:url('https://onemartialarts.com/kickboxing/wp-content/uploads/2015/09/Black-Brick-Wall-Background.jpg') center;
}
.neon {
  font-family: 'Charmonman', cursive;
  font-size:120px;
  color:#ffffff;
  text-shadow: 0 0 5px #ffffff,
            0 0 10px #ffffff,
            0 0 15px #ffffff,
            0 0 20px #ff0000,
            0 0 35px #ff0000,
            0 0 40px #ff0000,
            0 0 50px #ff0000,
            0 0 75px #ff0000;
  animation: blink 1.5s ease-in-out infinite alternate;   
}

@keyframes blink {
    from {
      text-shadow: 0 0 10px #ffffff,
                 0 0 20px  #ffffff,
                 0 0 30px  #ffffff,
                 0 0 40px  #228DFF,
                 0 0 70px  #228DFF,
                 0 0 80px  #228DFF,
                 0 0 100px #228DFF,
                 0 0 150px #228DFF;
    }
    to {
      text-shadow: 0 0 5px #ffffff,
            0 0 10px #ffffff,
            0 0 15px #ffffff,
            0 0 20px #ff0000,
            0 0 35px #ff0000,
            0 0 40px #ff0000,
            0 0 50px #ff0000,
            0 0 75px #ff0000;
    }
}
</style>
<div class="wrapper">
  <h1 class="neon">Welcome</h1>
</div>
[/html]

[html]<style>

</style>
<script>
var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
   
    opts = {
     
      len: 20,
      count: 50,
      baseTime: 10,
      addedTime: 10,
      dieChance: .05,
      spawnChance: 1,
      sparkChance: .1,
      sparkDist: 10,
      sparkSize: 2,
     
      color: 'hsl(hue,100%,light%)',
      baseLight: 50,
      addedLight: 10, // [50-10,50+10]
      shadowToTimePropMult: 6,
      baseLightInputMultiplier: .01,
      addedLightInputMultiplier: .02,
     
      cx: w / 2,
      cy: h / 2,
      repaintAlpha: .04,
      hueChange: .1
    },
   
    tick = 0,
    lines = [],
    dieX = w / 2 / opts.len,
    dieY = h / 2 / opts.len,
   
    baseRad = Math.PI * 2 / 6;
   
ctx.fillStyle = 'white';
ctx.fillRect( 0, 0, w, h );

function loop() {
 
  window.requestAnimationFrame( loop );
 
  ++tick;
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.shadowBlur = 0;
  ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );
  ctx.fillRect( 0, 0, w, h );
  ctx.globalCompositeOperation = 'lighter';
 
  if( lines.length < opts.count && Math.random() < opts.spawnChance )
    lines.push( new Line );
 
  lines.map( function( line ){ line.step(); } );
}
function Line(){
 
  this.reset();
}
Line.prototype.reset = function(){
 
  this.x = 0;
  this.y = 0;
  this.addedX = 0;
  this.addedY = 0;
 
  this.rad = 0;
 
  this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();
 
  this.color = opts.color.replace( 'hue', tick * opts.hueChange );
  this.cumulativeTime = 0;
 
  this.beginPhase();
}
Line.prototype.beginPhase = function(){
 
  this.x += this.addedX;
  this.y += this.addedY;
 
  this.time = 0;
  this.targetTime = ( opts.baseTime + opts.addedTime * Math.random() ) |0;
 
  this.rad += baseRad * ( Math.random() < .5 ? 1 : -1 );
  this.addedX = Math.cos( this.rad );
  this.addedY = Math.sin( this.rad );
 
  if( Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY )
    this.reset();
}
Line.prototype.step = function(){
 
  ++this.time;
  ++this.cumulativeTime;
 
  if( this.time >= this.targetTime )
    this.beginPhase();
 
  var prop = this.time / this.targetTime,
      wave = Math.sin( prop * Math.PI / 2  ),
      x = this.addedX * wave,
      y = this.addedY * wave;
 
  ctx.shadowBlur = prop * opts.shadowToTimePropMult;
  ctx.fillStyle = ctx.shadowColor = this.color.replace( 'light', opts.baseLight + opts.addedLight * Math.sin( this.cumulativeTime * this.lightInputMultiplier ) );
  ctx.fillRect( opts.cx + ( this.x + x ) * opts.len, opts.cy + ( this.y + y ) * opts.len, 2, 2 );
 
  if( Math.random() < opts.sparkChance )
    ctx.fillRect( opts.cx + ( this.x + x ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.cy + ( this.y + y ) * opts.len + Math.random() * opts.sparkDist * ( Math.random() < .5 ? 1 : -1 ) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize )
}
loop();

window.addEventListener( 'resize', function(){
 
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
  ctx.fillStyle = 'white';
  ctx.fillRect( 0, 0, w, h );
 
  opts.cx = w / 2;
  opts.cy = h / 2;
 
  dieX = w / 2 / opts.len;
  dieY = h / 2 / opts.len;
});
</script>
<container><canvas id=c style="width: 100%; height: 500px;"></canvas></container>[/html]