вмвмыыывм
вммвввым
фыссыыфс

https://madnyaska.anihub.me/viewtopic.p … остяпример

https://madnyaska.anihub.me/viewtopic.php?id=114

272777

[html]
<style>
.container{
  display:flex;
     align-items: center;
    justify-content: center;
  height:100%;
background: #3d3d3d;
}
.clip-text {
  padding:10px;
  background: url(https://media.tenor.com/y6VDziqkACsAAAAC/fast-city.gif);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  color: #00000047;   
  text-transform:uppercase;
  font-size: 80px;
  font-weight: 900;
  letter-spacing:1px;
  user-select:none;
      border-top: solid 10px #00000057;
    border-bottom: solid 10px #00000057;
  text-align:center;
}
</style>
<div class="container">
  <h1 class="clip-text" style="font-size: 10em; font-weight: 900;">
   Road Trip
  </h1>
</div>

[/html]

[html]
<style>
h71 {
    font-size: 26px;
    text-align: center;
    font-weight: 300;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
text-align: center;
display: block;
background: #a6a5d1;
color: #470a63;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  background: white;
  height: 40px;
  line-height: 40px;
  color: #666;
}

li:nth-child(2n) {
  background-color: #f7f7f7;
}

#container {
  background: #f7f7f7;
  width: 360px;
  margin: 100px auto;
  box-shadow: 0 0 3px rgba(0, 0, 0.1);
}

.completed {
  color: lightslategray;
  text-decoration: line-through;
}

.blue {
  color: blue;
}

span {
  background-color: #e74c3c;
  margin-right: 20px;
  height: 40px;
  text-align: center;
  color: white;
  width: 0;
  display: inline-block;
  transition: 0.2s linear;
  opacity: 0;
}

li:hover span {
  width: 40px;
  opacity: 1;
}

.fa-plus {
  float: right;
}

</style>
<script>
//check off simple todo by clicking

$("ul").on("click", "li", function() {
  $(this).toggleClass("completed")
});

$("ul").on("click", "span", function() {
  $(this).parent().fadeOut(500, function() {
    $(this).remove();

  });

  event.stopPropagation();
});

</script>

  <div id="container">
    <h71>Вы приняты </h71>
    <ul>
      <li><span><i class="fa fa-trash-o"></i></span>1. Пройти регистрацию</li>
      <li><span><i class="fa fa-trash-o"></i></span>2. Написать анкету</li>
      <li><span><i class="fa fa-trash-o"></i></span>3. Порадоваться жизни </li>
      <li><span><i class="fa fa-trash-o"></i></span>4. Закончить с этим</li>
      <li><span><i class="fa fa-trash-o"></i></span>5. Заполнить профиль</li>
    </ul>

  </div>

[/html]

[html]
<style>
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: fontawesome;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  opacity: 0.8;
/* fix buttons height, for twitter bootstrap */
  line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
  margin-left: 0.2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-star-1:before { content: '\f087'; } /* 's' */
.icon-address:before { content: '\f02c'; } /* 'l' */
.icon-down-circled:before { content: '\f01a'; } /* 'f' */
.icon-down-open:before { content: '\f055'; } /* 'd' */
.icon-up-open:before { content: '\f0c6'; } /* 'p' */
.icon-graduation-cap:before { content: '\f072'; } /* 'e' */
.icon-user:before { content: '\f19c'; } /* 'u' */
.icon-briefcase:before { content: '\f169'; } /* 'b' */

* {
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body > header {
width:100%;
position:fixed;
z-index:30;
background:#E0DCD9;
border-bottom:1px solid #d5d1cf;
box-shadow:0 1px 1px white;
top:0;
left:0;
}

body > header nav {
width:760px;
margin:0 auto;
overflow:hidden;
}
body > header nav ul {
margin:0 0 0 -65px;
padding:0;
text-align:center;
font-size: 0em;
    letter-spacing: 0px;
    word-spacing: 0px;
}
body > header nav li {
display:inline-block;
cursor:pointer;
border-left:1px solid #ebe7e4;
border-top:1px solid #E0DCD9;
box-shadow:-1px 0px 1px #d5d1cf;
padding:;
font-size:18px;
}
body > header nav li:hover {
background:#d5d1cf;
}
body > header nav li:first-child {
border-left:1px solid #E0DCD9;
box-shadow:-1px 0px 1px #E0DCD9;
text-shadow:1px 1px 1px #fff;
}
body > header nav li:active,body > header nav li.active {
color:white;
}
body > header nav li.all:active,body > header nav li.all.active {
text-shadow:1px 1px 1px #444;
}
body > header nav li.icon-address:active,body > header nav li.icon-address.active {
background:#0ED1E7;
border-left:1px solid #0cb4c6;
border-top:1px solid #0cb4c6;
box-shadow:none;
}
body > header nav li.icon-graduation-cap:active,body > header nav li.icon-graduation-cap.active {
background:#EB2690;
border-left:1px solid #bf1f75;
border-top:1px solid #bf1f75;
box-shadow:none;
}
body > header nav li.icon-briefcase:active,body > header nav li.icon-briefcase.active {
background:#E76B0E;
border-left:1px solid #B85307;
border-top:1px solid #B85307;
box-shadow:none;
}
body > header nav li.icon-star-1:active,body > header nav li.icon-star-1.active {
background:#5E6297;
border-left:1px solid #333;
border-top:1px solid #333;
box-shadow:none;
}
body > header nav li.icon-user:active,body > header nav li.icon-user.active {
background:#454545;
border-left:1px solid #333;
border-top:1px solid #333;
box-shadow:none;
}
body > header nav ul#nav_ctrl {
position:absolute;
top:0;
right:0;
}

div#timeline_container {
width:760px;
margin:40px auto;
position:relative;
}
div#timeline_container header {
position:relative;
z-index:20;
}
div#timeline_container header figure {
width:600px;
height:100px;
border-radius:;
border:5px solid #cdc9c6;
overflow:hidden;
display:block;
margin:0 auto;
}
div#timeline_container header figure img {
width:100%;           
}
div#timeline_container header h1 {
position:absolute;
top:20px;
right:80px;
font-family: 'Lobster', cursive;
font-size:2.8em;
text-shadow:2px 2px 1px #fff;
font-weight:normal;
}
div#timeline_container > ul {
position:relative;
width:4px;
background:#cdc9c6;
border-right:1px solid white;
margin:0 140px;
padding:6em 0 0;
list-style:none;         
}
div#timeline_container > ul:after {
content:"";
width:15px;
height:15px;
border-radius:50%;
background:#cdc9c6;
box-shadow:1px 1px 1px white;
position:absolute;
bottom:0;
left:-6px;
}
div#timeline_container > ul > li {
position:relative;
padding:.3em 0;
min-height:130px;
cursor:pointer;

-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
div#timeline_container > ul > li.hidden {
position:absolute;
top:-500px;
}
div#timeline_container > ul > li div {
position:absolute;
}
div#timeline_container > ul li > div.event_icn {
padding:0.3em;
font-size:1.7em;
border-radius:50%;
background:#ebe7e4;
border:3px solid #cdc9c6;
margin-left:-22px;
color:rgba(85,86,86,0.3);
box-shadow:1px 1px 1px white;

-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

div#timeline_container > ul > li:hover div.event_icn,div#timeline_container > ul li.active div.event_icn{color:white;}

div#timeline_container > ul > li.life_event div.event_icn { background:#bde3e7;}
div#timeline_container > ul li.life_event:hover div.event_icn,div#timeline_container > ul li.life_event.active div.event_icn {background:#0ED1E7}

div#timeline_container > ul > li.education_event div.event_icn { background:#eb98c5}
div#timeline_container > ul > li.education_event:hover div.event_icn,div#timeline_container > ul li.education_event.active div.event_icn { background:#EB2690}

div#timeline_container > ul > li.work_event div.event_icn { background:#e7b793}
div#timeline_container > ul > li.work_event:hover div.event_icn,div#timeline_container > ul li.work_event.active div.event_icn { background:#E76B0E}

div#timeline_container > ul > li.user_event div.event_icn {background:#A2A2A2}
div#timeline_container > ul > li.user_event:hover div.event_icn,div#timeline_container > ul li.user_event.active div.event_icn { background:#454545}

div#timeline_container > ul > li.portfolio_event div.event_icn {
background:#5E6297
}
div#timeline_container > ul > li.portfolio_event:hover div.event_icn,div#timeline_container > ul li.portfolio_event.active div.event_icn { background:#5E6297}

div#timeline_container > ul > li div.event_content {
width:480px;
padding:1em 2em 1.3em;
border:1px solid #DDDBDA;
border-radius:10px;
top:-2em;
opacity:0.3;
background:white;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
        left: 57px;
}
div#timeline_container > ul > li div.event_content a{color:#999;}

div#timeline_container > ul > li:hover div.event_content,div#timeline_container > ul li.active div.event_content {
opacity:1;
}

div#timeline_container > ul > li div.event_content:before {
content: "";
position: absolute;
width: 40px;
height: 40px;
top: 15px;
left: -20px;
margin-top: 8px;
background: #cdc9c6;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
z-index: -5;
}

div#timeline_container > ul > li div.event_content h2 {
margin:0.3em 0;
padding:0;
text-transform:capitalize;
font-size:1.4em;
}
div#timeline_container > ul > li div.event_content p {
margin:0;
padding:0;
line-height:1.5em;
max-height: 75px;
overflow: auto;
color: #babec6;
}

div#timeline_container > ul > li div.event_content ul {
margin:0;
padding:0;
list-style:none;
line-height:1.5em;
}

div#timeline_container > ul > li div.event_date {
top:1em;
text-align:left;
font-size:1.2em;
text-shadow:1px 1px 1px white;
opacity:0.3;
font-weight:bold;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
margin-left: -170px;
display: block;
width: 120px;
}
div#timeline_container > ul > li div.event_date a {
margin:0;
padding:0;
line-height:1.5em;
max-height: 75px;
overflow: auto;
color: #babec6;
}
div#timeline_container > ul > li:nth-child(even) div.event_date {text-align:left;}

div#timeline_container > ul > li:hover div.event_date,div#timeline_container > ul li.active div.event_date {opacity:0.9;}

div#instructions_container {
position:fixed;
padding:2em;
width:300px;
bottom:2em;
right:2em;
line-height:1.4em;
background:#FDFDBD;
border-radius:10px;
border:1px solid #DDDBDA;
z-index:40;
font-size:0.9em;
color:black;
line-height:1.6em;
}
div#info_container{
position:fixed;
bottom:2em;
right:2em;
border-radius:50%;
color:#ebe7e4;
background:#6d6b6a;
opacity:0.3;
cursor:pointer;
width:22px;
font-size:14px;
height:22px;
padding-top:2px;
text-align:center;
font-family:'lobster','cursive';
display:none;
}

</style>
<script>
$('nav ul#main_nav').on('click','li',function(){
var $type=$(this).attr('data-title');
$('nav ul#main_nav li').removeClass('active')
if ($type=='all') {
    $('nav ul#main_nav li').addClass('active');
    $('div#timeline_container >ul> li').removeClass('hidden');
    $('div#timeline_container >ul> li').removeClass('active');
    $($('div#timeline_container >ul> li')[0]).addClass('active');
} else {
    $(this).addClass('active');
    $('div#timeline_container >ul> li').addClass('hidden');
    $('div#timeline_container >ul> li.'+$type+'_event').removeClass('hidden');
    $('div#timeline_container >ul> li').removeClass('active');
    $($('div#timeline_container >ul> li.'+$type+'_event')[0]).addClass('active');
}
   
});

$(document).on('scroll',function(){
$('div#instructions_container').fadeOut('fast');
$('div#info_container').fadeIn('fast');
});
$(document).on('click','div#info_container',function(){
$('div#instructions_container').fadeIn('fast');
$('div#info_container').fadeOut('fast');
});

$(document).on('click','li.icon-down-open',function(){
scrollToNext();
});

$(document).on('click','li.icon-up-open',function(){
scrollToPrev();
});

$(document).on('keypress',function(e){
if(e.which==106) {
    scrollToNext();
} else if(e.which==107) {
    scrollToPrev();
}
});

$('div#timeline_container').on('click','li', function(){
showNext($(this));
});

function showNext(li){
var $itms=$('div#timeline_container li');
$itms.removeClass('active');
$(li).addClass('active');
$('html,body').stop().animate({ scrollTop: $(li).offset().top-$(li).height()}, 500,function(){
    $('html,body').stop();
});
}

function scrollToNext() {
var $itms=$('div#timeline_container > ul > li');
var $current=$itms.index($('div#timeline_container li.active'));

if ($($itms[$current+1]).length>0 && !$($itms[$current+1]).hasClass('hidden')) {
    $itms.removeClass('active');
    $($itms[$current+1]).addClass('active');
    $('html,body').stop().animate({ scrollTop: $($itms[$current+1]).offset().top-$($itms[$current+1]).height()}, 500);
} else {
    $('html,body').stop().animate({ scrollTop: $(document).height()}, 500);
}
}
function scrollToPrev() {
var $itms=$('div#timeline_container > ul > li');
var $current=$itms.index($('div#timeline_container li.active'));

if ($($itms[$current-1]).length>0 && !$($itms[$current-1]).hasClass('hidden')) {
    $itms.removeClass('active');
    $($itms[$current-1]).addClass('active');
    $('html,body').stop().animate({ scrollTop: $($itms[$current-1]).offset().top-$($itms[$current-1]).height()}, 500);
} else {
    $('html,body').stop().animate({ scrollTop: 0}, 500);
}
}

</script>

<header>
<nav>
    <ul id="main_nav">
    <li class="active all" data-title="all" title="Весь список">All</li>
    <li class="icon-address active" data-title="life" title="Настоящее"></li>
    <li class="icon-graduation-cap active" data-title="education" title="Прошлое"></li>
    <li class="icon-briefcase active" data-title="work" title="Альта"></li>
    <li class="icon-user active" data-title="user" title="Незавершенное"></li>
   
    </ul>
    <ul id="nav_ctrl">
    <li class="icon-up-open" data-title="Next"></li>
    <li class="icon-down-open" data-title="Previous"></li>
    </ul>
</nav>
</header>

<div id="timeline_container">
<header>
    <figure>
    <img src="https://wallpaper.dog/large/20514532.jpg">
    </figure>
    <h1>Хронология <br/> персонажа такого-то</h1>
</header>
<ul>
    <li class="life_event active">
    <div class="event_icn icon-address"></div>
    <div class="event_content">
        <h2>001 Король-лягушонок или <a href="#">Железный Генрих</a></h2>
        <p>
        В стародавние времена, когда заклятья ещё помогали, жил-был на свете король; все дочери были у него красавицы, но самая младшая была так прекрасна, что даже солнце, много видавшее на своем веку, и то удивлялось, сияя на её лице.

        </p>

    </div>
    <div class="event_date">
        25/07/99999
                        <a href="#">Persones</a>, <a href="">Persones</a>,<a href="">Persones</a>
    </div>
    </li>

    <li class="life_event">
    <div class="event_icn icon-address"></div>
    <div class="event_content">
        <h2>002 Дружба кошки и мышки</h2>
        <p>
        Кошка познакомилась с мышкой и столько пела ей про свою великую любовь и дружбу, что мышка наконец согласилась поселиться с нею в одном доме и завести общее хозяйство. "Да, вот к зиме нужно бы нам наготовить припасов, а не то голодать придется, - сказала кошка. - Ты, мышка, не можешь ведь всюду ходить. Того гляди, кончишь тем, что в мышеловку угодишь."
        </p>
    </div>
    <div class="event_date">
        25/07/1995
    </div>
    </li>

    <li class="education_event">
    <div class="event_icn icon-graduation-cap"></div>
    <div class="event_content">
        <h2>003 Дитя Марии (Приемыш Богоматери)</h2>
        <p>
        На опушке большого леса жил дровосек со своею женой, и было у них единственное дитя трехлетняя девочка. Были они так бедны, что даже без хлеба насущного сиживали и не знали, чем прокормить ребенка..
        </p>
    </div>
    <div class="event_date">
        01/09/1997
    </div>
    </li>

    <li class="work_event">
    <div class="event_icn icon-briefcase"></div>
    <div class="event_content">
        <h2>004 Сказка о том, кто ходил страху учиться</h2>
        <p>
        Один отец жил с двумя сыновьями. Старший был умен, сметлив, и всякое дело у него спорилось в руках, а младший был глуп, непонятлив и ничему научиться не мог.<br>
Люди говорили, глядя на него: "С этим отец еще не оберется хлопот!" Когда нужно было сделать что-нибудь, все должен был один старший работать; но зато он был робок, и когда его отец за чем-нибудь посылал позднею порой, особливо ночью, и если к тому же дорога проходила мимо кладбища или иного страшного места, он отвечал: "Ах, нет, батюшка, не пойду я туда! Уж очень боязно мне."
        </p>
    </div>
    <div class="event_date">
        07/2000 - 07/2003
    </div>
    </li>

<li class="user_event">
    <div class="event_icn icon-user"></div>
    <div class="event_content">
        <h2>005 Волк и семеро козлят</h2>
        <p>
        Жила-была старая коза. Было у ней семеро козлят, и она их так любила, как может любить своих детей только мать. Раз собралась она идти в лес, корму принести; вот созвала она всех своих семерых деток и говорит:
        </p>
    </div>
    <div class="event_date">
Дата
    </div>
    </li>

    <li class="education_event">
    <div class="event_icn icon-graduation-cap"></div>
    <div class="event_content">
        <h2>003 Дитя Марии (Приемыш Богоматери)</h2>
        <p>
        На опушке большого леса жил дровосек со своею женой, и было у них единственное дитя трехлетняя девочка. Были они так бедны, что даже без хлеба насущного сиживали и не знали, чем прокормить ребенка..
        </p>
    </div>
    <div class="event_date">
        01/09/1997
    </div>
    </li>

</ul>
</div>

<!-- of #timeline_container -->

[/html]

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
.star {
  transform-style: preserve-3d;
  width: 1px;
  height: 1px;
  position: absolute;
  color: red;
}
.star:before {
  position: absolute;
  content: '\2726';
  color: inherit;
  inset: 0;
  //box-shadow: 0 0 1em .5em #a3c2;
  //filter: drop-shadow(0 0 .5em white);
  text-shadow: 0 0 .8em #fff5;
}

</style>
<script>
//look at fixes in the Pen https://codepen.io/ghaste/pen/OJqLbvg
//for adding mouse trail to a page that scrolls beyond the viewport, as would be the case with most websites - lol
let x1=0, y1=0;
window.client
const
  vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
  dist_to_draw = 50,
  delay = 1000,
  fsize = [
    '1.1rem', '1.4rem', '.8rem', '1.7rem'
  ],
  colors = [
  '#E23636',
  '#F9F3EE',
  '#E1F8DC',
  '#B8AFE6',
  '#AEE1CD',
  '#5EB0E5'
],
  rand = (min, max) =>
    Math.floor(Math.random() * (max - min + 1)) + min,
  selRand = (o) => o[rand(0, o.length -1)],
  distanceTo =  (x1, y1, x2, y2) =>
    Math.sqrt((Math.pow(x2-x1,2))+(Math.pow(y2-y1,2))),
  shouldDraw = (x, y) =>
    (distanceTo(x1, y1, x, y) >= dist_to_draw),
  addStr = (x, y) => {
    const str = document.createElement("div");
    str.innerHTML = '✦';
    str.className = 'star';
    str.style.top = `${y + rand(-20,20)}px`;
    str.style.left = `${x}px`;
    str.style.color = selRand(colors);
    str.style.fontSize = selRand(fsize);
    document.body.appendChild(str);
    //console.log(rand(0, 3));
    const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize);
    //console.log(vh, y, fs);
    //console.log((y+fs)>vh?vh-y:fs);
    str.animate({
      translate: `0 ${(y+fs)>vh?vh-y:fs}px`,
      opacity: 0,
      transform: `rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)`
    }, {
      duration: delay,
      fill: 'forwards',

    });
    //could add a animation terminate listener, but why add the additional load
    setTimeout(() => {
        str.remove();
      }, delay);
  }

addEventListener("mousemove", (e) => {
  const {clientX, clientY} = e;
  if(shouldDraw(clientX, clientY)){
    addStr(clientX, clientY);
    x1 = clientX;
    y1 = clientY;
  }
});
</script>
<h1>Sed ut perspiciatis</h1>
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
[/html]

[html]<style>
.characterscroll ::-webkit-scrollbar {width: 3px; background: transparent; border: none;}
.characterscroll ::-webkit-scrollbar-thumb {background-color: #1a1a1a; border: none; }

.a1 {
  border-top: 10px solid #FC4747;
  width: 100%;
}

.a2 {
  background-color: #F9F9F9;
  padding: 5px;
  font-family: times;
  font-size: 18px;
  letter-spacing: 2px;
  border-bottom: 1px dotted #BABABA;
  line-height: 9px;
  text-align: center;
}

.a3 {
  font-size: 10px;
  line-height: 11px;
  overflow: auto;
  height: 234px;
  text-align: justify;
  color: #6B6B6B;
  padding-right: 5px;
}

.a4 {
  background-color: #F9F9F9;
  padding: 5px;
  border-top: 10px solid #FC4747;
  margin-top: 10px;
}

.a5 {
  font-family: times;
  font-size: 18px;
  letter-spacing: 2px;
  border-bottom: 1px dotted #BABABA;
  line-height: 9px;
  text-align: center;
}

.a6 {
  background-color: #F9F9F9;
  padding: 5px;
  border-top: 10px solid #202020;
}

.a7 {
  font-size: 8px;
  letter-spacing: 2px;
  line-height: 9px;
  text-align: justify;
  color: #ACACAC;
}

.a8 {
  border: 1px dotted #9A9A9A;
  padding: 5px;
  margin-top: 15px;
}
.a8 img{
  width: 120px;
  height: 120px;
}

.a9 {
  border: 5px solid #DFDFDF;
  height: 80px;
  width: 80px;
}

.a10 {
  font-size: 8px;
  letter-spacing: 2px;
  line-height: 9px;
  text-align: right;
  color: #FC4747;
  margin-top: 6px;
}

.a11 {
  font-size: 8px;
  letter-spacing: 2px;
  line-height: 9px;
  text-align: justify;
  color: #ACACAC;
  margin-top: 15px;
  border-top: 1px dotted #BFBFBF;
  padding-top: 5px;
}

.a12 {
  font-family: helvetica;
  font-size: 30px;
  letter-spacing: -2px;
  text-align: right;
  margin-top:0px;
  line-height: 24px;
}

.a13 {
  color: #FC4747;
  font-weight: 700;
  font-style: italic;
}

.a14 {
  border-top: 10px solid #FC4747;
    height: 280px;
}

.a15 {
  background-color: #F9F9F9;
  padding: 5px;
  font-family: times;
  font-size: 18px;
  letter-spacing: 2px;
  border-bottom: 1px dotted #BABABA;
  line-height: 9px;
  text-align: center;
}

.a16 {
  font-size: 10px;
  line-height: 11px;
  overflow: auto;
  height: 230px;
  text-align: justify;
  color: #6B6B6B;
  padding-right: 5px;
}

.a17 {
  background-color: #F9F9F9;
  padding: 5px;
  border-top: 10px solid #FC4747;
  margin-top: 10px;
    height: 270px;
}

.a18 {
  font-family: times;
  font-size: 18px;
  letter-spacing: 2px;
  border-bottom: 1px dotted #BABABA;
  line-height: 9px;
  text-align: center;
}

.a19 {
  font-size: 10px;
  line-height: 11px;
  overflow: auto;
  height: 230px;
  text-align: justify;
  color: #6B6B6B;
  padding-right: 5px;
}

.ac {
  font-family: arial;
  font-size: 8px;
  letter-spacing: 3px;
}
</style>

FRIENDS             Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne.             Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam.             In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare. LOVERS             Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne.             Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam.             In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare.

─ Baby I'm gonna leave you d r o w n i n g until you reach for my hand. Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus. ─ NICKNAME TRAIT EXTRA OR ESSENTIAL INFORMATION FIRST- MIDDLE LAST

ENEMIES             Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne.             Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam.             In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare. OTHERS             Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne.             Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam.             In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare.

[/html]

[html]
<style>

.centerBox{
display: flex;
justify-content: center;
align-items: center;
height: 200px
}

.categoryWrapper{
height: 100px;
width: 260px;
background: url("") no-repeat center center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.categoryWrapper:after{
position: absolute;
top:0;
left: 0;
right:0;
bottom: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/# … ,95909b+99 */
background: #a29ca9; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a29ca9 0%, #95909b 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #a29ca9 0%,#95909b 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #a29ca9 0%,#95909b 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29ca9', endColorstr='#95909b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
content: '';
opacity: 0;
    -webkit-transition: opacity 0.9s ease 0s;
}

.categoryWrapper:hover:after{
opacity: 0.4;
background-image: url(https://i.pinimg.com/474x/d6/0f/9c/d60f … 4acb95.jpg);
background-size: cover;
}

.categoryWrapper h61{
color: #000;
font-size: 10px;
letter-spacing: 2px;
-webkit-transition: all 0.15s ease 0s;
position: relative;
z-index: 10;
}

.categoryWrapper:hover h61{
transform: translateY(-10px);
}

.categoryWrapper button{
position: absolute;
transform: translatey(20px);
-webkit-appearance: none;
border: none;
background: none;
color:white;
width: 80px;
height:25px;
font-size: 10px;
padding: 0;
margin: 0;
outline: none;
z-index: 10;
}

.categoryWrapper button span{
display: block;
position: relative;
line-height: 10px;
height: 25px;
cursor: pointer;
}

.categoryWrapper button > span:after{
content:'';
position: absolute;
top:0;
left: 50%;
width: 20px;
height: 0;

border: 1px solid white;
border-left: none;
border-bottom: none;

    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}

.categoryWrapper:hover button > span:after{
width: calc(50% - 1px);
height: calc(100% - 2px);
transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}

.categoryWrapper button > span:before{
content:'';
position: absolute;
top:0;
right: 50%;
width: 20px;
height: 0;

border: 1px solid white;
border-right: none;
border-bottom: none;

    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
}

.categoryWrapper:hover button > span:before{
width: calc(50% - 1px);
height: calc(100% - 2px);
transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}

.categoryWrapper button > span > span:before{
content:'';
position: absolute;
bottom:0;
right: 0%;
width: 1px;
height: 1px;
opacity: 0;

}

.categoryWrapper:hover button > span > span:before{
opacity: 1;
border-bottom: 1px solid white;
width: calc(50%);
height: 1px;
transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
}

.categoryWrapper button > span > span:after{
content:'';
position: absolute;
bottom:0;
left: 0%;
width: 1px;
height: 1px;
opacity: 0;

}

.categoryWrapper:hover button > span > span:after{
opacity: 1;
border-bottom: 1px solid white;
width: calc(50%);
height: 1px;
transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
}

.categoryWrapper button > span > span > span{
transition: color 0.15s ease-out 0.3s;
color: transparent;
}

.categoryWrapper:hover button > span > span > span{
color:white;
}

.categoryWrapper button > span > span > span:after{
position: absolute;
top:0;left:0;right:0;bottom:0;
color:#1f2e4d;
content: attr(data-attr-span);
width: 0%;
height: 100%;
background:white;
white-space: nowrap;
text-align: center;
margin: auto;
overflow: hidden;
display: flex;
justify-content: center;
transition: width 0.2s;
}

.categoryWrapper button:hover > span > span > span:after{
width: 100%;
}
</style>
<!-- THIS IS GOING TO BE A MAGENTO BUTTON -->

<div class="centerBox">

<div class="categoryWrapper">
    <h61>Администрация</h61>
    <button>
    <span>
        <span>
        <span data-attr-span="Написать">
            Великий и Ужасный
        </span>
        </span>
    </span>
    </button>
</div>

<div class="categoryWrapper">
    <h61>Администрация</h61>
    <button>
    <span>
        <span>
        <span data-attr-span="Написать">
            Великий и Ужасный
        </span>
        </span>
    </span>
    </button>
</div>

<div class="categoryWrapper">
    <h61>Администрация</h61>
    <button>
    <span>
        <span>
        <span data-attr-span="Написать">
            Великий и Ужасный
        </span>
        </span>
    </span>
    </button>
</div>

<div class="categoryWrapper">
    <h61>Администрация</h61>
    <button>
    <span>
        <span>
        <span data-attr-span="Написать">
            Великий и Ужасный
        </span>
        </span>
    </span>
    </button>
</div>

</div>

[/html]

545445245