[html]
<style>
body {
    background-color: #364b71;
    min-height:500px;
    overflow: hidden;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.cloud {
    width: 360px;
    height: 45px;
    background-color: #d1e1ff;
    border-radius: 25px;
    position: relative;
    z-index: 6;
    animation: movebig 5s infinite;
    transition: all 1s ease-in-out;
}

.cloud .part {
    border-radius: 50%;
    background-color: #d1e1ff;
    position: absolute;
}

.cloud .part.one {
    top: -91px;
    left: 41px;
    width: 120px;
    height: 120px;
}

.cloud .part.two {
    top: -129px;
    left: 116px;
    width: 160px;
    height: 160px;
}

.cloud .part.three {
    top: -55px;
    left: 253px;
    width: 70px;
    height: 70px;
}

.shadow.cloud {
    width: 360px;
    height: 45px;
    background-color: #96aeda;
    border-radius: 25px;
    position: absolute;
    transform: scale(.7);
    top: -20px;
    left: 80px;
    z-index: 5;
    animation: movesmall 5s infinite;
    transition: all 1s ease-in-out;
}

.shadow.cloud .part {
    border-radius: 50%;
    background-color: #96aeda;
}

.data {
    color: #9ed7ff;
    font-size: 40px;
    width: 250px;
    text-align: center;
    overflow-wrap: break-word;
    margin: auto;
    letter-spacing: 32px;
    font-family: 'Poppins', sans-serif;
    position: absolute;
    left: 19%;
    padding-top: 15px;
}

@keyframes movebig {
    0%, 100% {left: 0px}
    50% {left: -10px}
  }

 
@keyframes movesmall {
    0%, 100% {left: 80px}
    50% {left: 90px}
  }

</style>
<script>

</script>

<div class="container">
        <div class="cloud">
            <div class="part one"></div>
            <div class="part two"></div>
            <div class="part three"></div>
        </div>
        <div class="shadow cloud">
            <div class="part one"></div>
            <div class="part two"></div>
            <div class="part three"></div>
        </div>
        <p class="data">0</p>
    </div>

[/html]

[html]
<style>
@import url(https://code.ionicframework.com/ionicon … ns.min.css);
.snip1434 {
  font-family: 'Raleway', Arial, sans-serif;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  color: #ffffff;
  cursor: pointer;
  padding: 0px 5px 0px 50px;
  text-align: center;
  display: inline-block;
  margin: 12px 25px;
  font-weight: 600;
  outline: none;
  position: relative;
  font-size: 10px;
  line-height: 35px;
  background-color: #8a1a32;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.snip1434 i {
  font-size: 4em;
  width: 55px;
  line-height: 50px;
  position: absolute;
  left: -13px;
  top: 5px;
  -webkit-transform: rotate(-25deg) scale(1);
  transform: rotate(-25deg) scale(1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.snip1434:hover,
.snip1434.hover {
  color: #ffffff;
  background-color: #ac203f;
cursor: url(http://s1.iconbird.com/ico/0512/32pxman … misc57.png), pointer;
}
.snip1434:hover i,
.snip1434.hover i {
  -webkit-transform: rotate(-20deg) scale(1.3);
  transform: rotate(-20deg) scale(1.3);
cursor: url(http://s1.iconbird.com/ico/0512/32pxman … misc57.png), pointer;
}

</style>

<button class="snip1434">Подписаться<i class="ion-settings"></i></button>
<button class="snip1434">Открыть<i class="ion-clipboard"></i></button>
<button class="snip1434">Добавить<i class="ion-stats-bars"></i></button>
<button class="snip1434">Удалить<i class="ion-person-stalker"></i></button>

[/html]

[html]
<style>
/* import font(s) */
@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,900");

/* detail root variables
--color-theme cascades to most html elements, and will be later updated in JavaScript
*/
:root {
  --font: "Alegreya Sans SC", sans-serif;
  --color-bg: #000b14;
  --color-theme: #70a9fe;
}

/* heading centered atop the page */
h17 {
  text-align: center;
  margin: 1rem 0 0;
  font-size: 3rem;
  transition: all 0.25s ease-in-out;
display: block;
position: absolute;
right: 110px;
top: 160px;
border: 3px solid currentColor;
padding: 10px;
background: #fff;
color: var(--color-theme);
}
/* shown/hidden through an dedicated class */
h17.isHidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem) scale(0);
}

/* wheel positioned to the left of the page, and occupying 50% of whichever dimension is the biggest */
svg#wheel {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
}

/* arrow positioned to the right of the wheel, and pointing at the very middle section */
svg#pin {
  position: absolute;
  left: 500px;
  width: calc(50vmax / 25);
  height: calc(50vmax / 25);
  top: 50%;
  transform: translateY(-50%);
  fill: var(--color-theme);
}

/* instructions displayed on the right side, in a single column layout */
.instructions {
  min-height: 600px;
  color: var(--color-theme);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
}
.instructions h2 {
  font-size: 1rem;
  letter-spacing: 0.1rem;
  position: relative;
}
/* beside a silly exclamation point add a simple word in the middle of the sentence hinting at the innocent nature of the project */
.instructions h2:after {
  content: "!";
}
.instructions h2:before {
  position: absolute;
  content: "suspicious";
  font-size: 0.75rem;
  opacity: 0.6;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(-12deg);
}

.instructions button {
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 1.55rem;
  font-family: inherit;
  color: inherit;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 0 2px currentColor;
  background: var(--color-bg);
  /* transition for a simple hover and active state */
  transition: all 0.5s ease-out;
}
.instructions button:hover {
  box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 3px currentColor,
    0 0 0 5px var(--color-bg), 0 0 0 7px currentColor;
}
.instructions button:active {
  box-shadow: 0 0 0 2px currentColor, 0 0 0 4px var(--color-bg),
    0 0 0 6px currentColor;
  transform: scale(0.95) translateY(0.1rem);
}
/* cursor customized to grab, and not allowed when the wheel is spinning (class added in JS) */
.instructions button,
svg#pin {
  cursor: grab;
}
.instructions button.isSpinning,
svg#pin.isSpinning {
  cursor: not-allowed;
}
/*
animation for the pin, to have it soundly move up and down alongside the spinning wheel
the duration of the animation is customized in JS to have it run a certain number of times
*/
@keyframes pinWheel {
  33% {
    transform: translateY(-50%) rotate(-10deg);
  }
  67% {
    transform: translateY(-50%) rotate(10deg);
  }
}

</style>
<script>
// target the SVG and the pin right next to it
const containerSlices = document.querySelector('g#slices');
const pin = document.querySelector('svg#pin');

// immediately add simple dots around the wheel
for (let i = 0; i < 48; i += 1) {
  const transform = `rotate(${360 / 48 * i}), translate(0 -49.5), rotate(${-360 / 48 * i})`;
  const dot = `<circle r="0.5" cx="50" cy="50" fill="currentColor" transform="${transform}"/>`;
  containerSlices.innerHTML += dot;
}

// target the heading and the button
const heading = document.querySelector('h17');
const spinButton = document.querySelector('button');

// variable updated for the timeout
let timeoutID = 0;

// utility functions returning a random integer in a range and a random hex value
const randomInt = (min = 0, max = 16) => Math.floor(Math.random() * (max - min) + min);
const randomHex = () => randomInt().toString(16);

// object used throughout the script, describing the colors and 3 particular rotation values
// the idea is to include the three slices aroud the wheel and have the arrow point always at one of them
const suspicious = [
  {
    rotation: 45,
    color: 'A2CCB6'
  },
  {
    rotation: 180,
    color: 'FCEEB5'
  },
  {
    rotation: 315,
    color: 'EE786E'
  }
];

// add a random fill color to the circle behind the slices
let randomFill = '';
for (let i = 0; i < 6; i += 1) {
  randomFill += randomHex();
}
document.querySelector('svg circle#slice').style.fill = randomFill;

// create the slices, 24 in total, using a bit of trigonometry to compute the appropriate arc coordinates
for (let i = 360; i > 0; i -= 15) {
  // values for the path element
  const xCoor = 50 + Math.sin(i * Math.PI / 180) * 47;
  const yCoor = 50 - Math.cos(i * Math.PI / 180) * 47;
  const flags = i > 180 ? '0 1 1' : '0 0 1';

  // initialize a variable for the fill color
  let fill = '';
  // create six random hex values for the fill color
  // ! the look might be rather jarring
  for (let j = 0; j < 6; j += 1) {
    fill += randomHex();
  }
  // if the de-cremented variable matches the arbitrary rotation value of one of the objects, find the specific object
  const suspect = suspicious.find(pairing => pairing.rotation === i);
  // if existing, substitute the random hex with the value specified in said object
  if (suspect) {
    fill = suspect.color;
  }

  // create the path element and append it to the SVG container
  const path = `
    <path d="M 50 50 L 50 3 A 47 47 ${flags} ${xCoor} ${yCoor}" fill=#${fill} />
  `;
  containerSlices.innerHTML += path;
}

// function spinning the wheel
function spinWheel() {
  // remove the event listener from the button and the wheel, to avoid running the function twice at the same time
  spinButton.removeEventListener('click', spinWheel);
  pin.removeEventListener('click', spinWheel);

  // immediately hide the heading showing the matching color
  heading.classList.add('isHidden');
  // add a class to the pin and the button to show how they should not be clicked
  pin.classList.add('isSpinning');
  spinButton.classList.add('isSpinning');

  // create variables for the duration of the rotation, as whell as the number of rotations achieved by the wheel
  const randomDuration = randomInt(4, 10);
  const randomRotate = randomInt(10, 20);
  // crate a variable to pick from one of the objects at random
  const randomSuspect = randomInt(0, 3);

  // apply the transition and the transform properties
  containerSlices.style.transformOrigin = '50%';
  containerSlices.style.transition = `transform ${randomDuration}s ease-out`;
  /* for the rotation, beside an arbitrary x360 rotation, remember to
  - add 90 to match the position of the arrow (to the very right of the wheel)
  - subtract the rotation of the slices
  - add up to a slice as to have the arrow point within the slice's boundaries
  */
  containerSlices.style.transform = `rotate(${randomRotate * 360 - suspicious[randomSuspect].rotation + 90 + randomInt(0, 360 / 24)}deg)`;

  pin.style.animation = `pinWheel ${randomDuration / 10}s 10 ease-in-out`;

  // after the time allocated for the rotation show the heading with the "random" color, update the custom property with its value
  timeoutID = setTimeout(() => {
    heading.textContent = `#${suspicious[randomSuspect].color}`;
    heading.classList.remove('isHidden');
    pin.style.animation = '';
    document.documentElement.style.setProperty('--color-theme', `#${suspicious[randomSuspect].color}`);

    // remove the class on the pin and button showing the forbidden cursor
    pin.classList.remove('isSpinning');
    spinButton.classList.remove('isSpinning');

    // reset the event listener on the button and the pin
    spinButton.addEventListener('click', spinWheel);
    pin.addEventListener('click', spinWheel);

    // clear the interval and set the boolean back to false
    clearInterval(timeoutID);
  }, randomDuration * 1000);
}

// attach a click event listener on the button, at which point call the spinWheel function
spinButton.addEventListener('click', spinWheel);

// call the same function when pressing the pin
pin.addEventListener('click', spinWheel);

</script>

<!--
  project's structure
  - svg for the color wheel (consisting of circle elements, and a group in which the slices are added)
  - svg for the arrow pointing at the selected color (positioned to the right of the circle)
  - heading in which to show the color selected through the wheel (hidden by default)
  - container for the simple instructions and the button spinning the wheel
-->

<svg id="wheel" viewBox="0 0 100 100">
  <circle
    cx="50"
    cy="50"
    r="48"
    fill="none"
    stroke-width="1"
    stroke="currentColor"
  />
<!-- add an id to the underlying circle as this depicts the final slice, and as to add a random color -->
  <circle id="slice" cx="50" cy="50" r="47" fill="#001C34" />
  <g id="slices"></g>
</svg>
<svg id="pin" viewBox="0 0 50 50"><path d="M 0 25 L 50 0 V 50" /></svg>

<h17 class="isHidden" style="user-select: all;">#ffffff00</h17>

<div class="instructions">
  <h2>Spin that color <span>wheel</span></h2>
  <button>Spin!</button>
</div>
[/html]

[html]
<style>
@import url(https://fonts.googleapis.com/css?family=Poiret+One);

* {
  overflow: hidden;
  padding: 0;
  margin: 0;
  color: white;
  font-family: 'Poiret One', cursive;
  font-size: 70px;
  font-weight: 500;
}

#container4 {
  background: url("https://4.bp.blogspot.com/-dQHlD3ODaWc/UJvp239aC4I/AAAAAAAAG0o/HE0s1cYxaes/s1600/wallpaper-2110637.jpg") no-repeat;
  background-size: cover;
  text-align: center;
height: 300px;
background-position: center;
}

h14 {
  top: 40px;
  letter-spacing: 7px;
padding: 60px;
position: absolute;
left: 100px;
}

</style>
<script>
$(function(){
  $('h14').delegate('span', 'mouseenter mouseleave', function(e){
   
    var span = $(this);
   
    if (e.type === 'mouseenter'){
      span.not(':animated').animate({ fontSize: '50px' });
    }
    else if (e.type === 'mouseleave'){
      span.animate({ fontSize: '70px' });
    }
  });
 
  var newText = '',
      h14 = $('h14').text(),
      len = h14.length;

for (var i = 0; i < len; i++){
    newText += '<span>' + h14.charAt(i) + '</span>';
}
$('h14').html(newText);
});
</script>
<div id="container4">
  <h14>hover me</h14>
</div>

[/html]

[hideprofile][html]
<style>
section {
  position: relative;
  padding: 10px 260px 2px 2px;
}

article {
  position: relative;
  width: 80%;
  margin: 80px auto 0;
  z-index: 500;
  background: #ffffff;
  padding: 80px 80px 70px;
  border-right: 1px solid #f4f4f1;
  border-bottom: 1px solid #f4f4f1;
}

article h2 {
  color: #283f53;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

article p {
  margin-top: 18px;
  color: #404649;
  font-weight: 400;
}

/* The author card */

@-webkit-keyframes moveOut {
  0%    {
    top: 50px;
    right: 7%;
    z-index: 400;
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
  }
  50%   {
    right: 4%;
    z-index: 400;
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
  }
  51%   {
    z-index: 600;
  }
  100%  {
    z-index: 600;
    right: 7%;
  }
}

@-webkit-keyframes moveIn {
  100%    {
    top: 50px;
    right: 7%;
    z-index: 400;
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
  }
  51%   {
    right: 4%;
    z-index: 400;
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
  }
  50%   {
    z-index: 600;
  }
  0%  {
    z-index: 600;
    right: 7%;
  }
}
.author {
  -webkit-animation: moveIn 0.3s;
 
  position: absolute;
  width: 200px;
  background: #ffffff;
  text-align: center;
  padding: 15px;
  border-left: 1px solid #f4f4f1;
  border-bottom: 1px solid #f4f4f1;

    top: 50px;
    right: 7%;
    z-index: 400;
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
}

.author:before {
  content: "автор";
  display: block;
  text-align: right;
  margin-top: -10px;
  margin-right: -10px;
  text-transform: uppercase;
  font-size: 0.6em;
  color: #dce5ed
}

.author:hover {
    -webkit-animation: moveOut 0.3s forwards;

    right: 7%;
    z-index: 600;
    transform:rotate(0deg);
    -ms-transform:rotate(0deg); /* IE 9 */
    -webkit-transform:rotate(0deg); /* Safari and Chrome */
}

.author a.name {
  display: block;
  text-align: center;
  color: #507da5;
  text-decoration: none; 
  font-weight: 600;
}

.author img.circle {
    border-radius: 100%;
    width: 100px;
}

.author p {
    text-align: left;
    font-size: 12px;
    margin-top: 18px;
    color: #404649;
    font-weight: 400;
}

</style>
<section>
  <div class="author">
    <a href="#" class="name">
      <img src="https://i.pinimg.com/736x/ba/63/c8/ba63c8c59472544babda7ea7455c914c.jpg" class="circle" /><br/>
      Lorem ipsum
    </a>
    <p>Some bio text that goes over several lines so that we have some text that can be used for showing how it works.</p>
    <p>And another line just to show it in greater detail.</p>
  </div>
<article> 
  <div class="article-content">
    <h2>Some title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis odio sit amet diam ultrices, sed ultrices metus fermentum. Vestibulum luctus, nunc non porta sollicitudin, est nibh iaculis mi, eu lacinia purus felis at ligula. Praesent id orci eros. Proin tincidunt bibendum ligula, sed placerat quam vehicula vel. Maecenas euismod tortor id turpis viverra, sed eleifend nulla egestas. Fusce fermentum ullamcorper nisl, sed volutpat metus scelerisque nec. Nulla pulvinar, lorem eu dictum rhoncus, tortor nulla consequat orci, ac sagittis est sem et arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<p>Sed euismod rhoncus gravida. In elementum eros sed lorem iaculis pellentesque. Duis tincidunt ut mauris et condimentum. Ut pretium auctor nunc placerat vulputate. Quisque id arcu et velit fermentum scelerisque sed sit amet nisi. Maecenas adipiscing ullamcorper venenatis. Nam ornare justo scelerisque augue scelerisque, vel adipiscing sapien euismod. Proin non tortor posuere, vulputate tortor at, molestie nibh. Nullam in arcu vitae quam elementum congue at nec dui. In id scelerisque felis, ut dapibus diam.</p>

  </div>
</article>
</section>
[/html]

[html]
<style>
#container{
    text-align:center;
    width:340px;
    height:480px;
    margin:auto;
    position:relative;
    background:#006f81;
}
#menu{
    padding-top:10px;
    padding-left:20px;
    font-size:55px;
    width:100%;
}
#game{
    padding-top:10px;
    font-size:55px;
    width:100%;
    display:none;
}
#opcje{
    padding-top:10px;
    font-size:55px;
    width:100%;
    display:none;
}
#autor{
    font-size:55px;
    width:100%;
    display:none;
}
.txt{
    font-size:24px;
    width:80%;
    margin:auto;
}
.txt a{
    text-decoration:none;
    color:#000;
}
svg line{
    stroke:#000;
    stroke-width:5
}
#back{
    text-align:center;
    width:140px;
    margin:auto;
    background-color: #008499;
    color: white;
   
    font-size:24px;
    cursor:pointer;
    display:none;
}
#back:hover{
    background-color:#4c9aa6;
}
#pass{
    font-size:24px;
    width:250px;
    margin:5px auto 5px auto;
    border-radius:10px;
    background-color:#008499;
    border: 1px black;
    padding:4px 0;
      cursor:default;
}
.title{
    color:#ededed;
    width:340px;
    font-size:48px;
      font-family:nosifer;
}
ul{
    list-style-type: none;
    margin:auto;
    margin-top: 0;
    width: 300px;
    padding:0;
}
li a, li a.lock:hover{
    width: 300px;
    position:relative;
    left:0;
    font-size:24px;
    margin:5px 0;
    display: block;
    color: white;
    padding: 6px 0 6px 0;
    text-decoration: none;
    background-color: #005968;
      cursor:pointer;
    border-radius:5px;
}
li a:hover {
    background-color:#008499
;
    color: white;
    width: 320px;
    position:relative;
    left:-10px;
    cursor:hand;
}
li a.lock{
    opacity:0.5;
}
#alphabet{
    color:#fff;
    font-size:18px;
    margin: auto;
    margin-bottom:5px;
    display: flex;
    flex-wrap: wrap;
    width:90%;
    justify-content: center;
}
#alphabet span{
    background-color:#008499;
    margin: 3px 5px;
    height:25px;
    width:25px;
    padding:4px;
    border-radius:30%;
    cursor:pointer;
}

.red{
    opacity:0.4 !important;
    background:red !important;
}
.green{
    opacity:0.4 !important;
    background:lime !important;
}
#svg{
    margin:auto;
    background-color:#008499;
    width:280px;
    height:220px;
}
svg{
    position:absolute;
    left:50px;
}
.tb1{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear forwards;
    stroke-linecap:round;
}
@keyframes dash {
    to { stroke-dashoffset: 0; }
}
#stickman{
    position:absolute;
    left:190px;
    bottom:0;
      cursor:pointer;
}
@keyframes jmp{
    0% { }
    11%{ transform: rotate(270deg);  bottom:30px; left:260px;}
    22%{ transform: rotate(450deg);  bottom:100px; left:0;}
    33%{ transform: rotate(630deg);  bottom:150px; left:260px;}
    44%{ transform: rotate(810deg);  bottom:210px; left:0;}
    55%{ transform: rotate(990deg);  bottom:250px; left:260px;}
    66%{ transform: rotate(1170deg);  bottom:200px; left:0;}
    77%{ transform: rotate(1350deg);  bottom:150px; left:260px;}
    88%{ transform: rotate(1530deg);  bottom:40px; left:0;}
    100%{ transform: rotate(1800deg); }
}
</style>
<script>
errors=0;
pkt=0;
toggle=0;
word = [
    "слово", "слово", "слово", "слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово", "слово"
    ];

$(document).ready(function(){
    $("#alphabet span").click(function(){
        var input = $(this).html();
        var styyl = $(this).attr("id");
        check(input, styyl);
    });
});
function gra(){
    startgame();
    startpass();
    hide();
    $("#menu").hide();
    $("#game").show();
    $(".title").hide();
    $("#back").toggle();
}
function showMenu() {
    $("#menu").show();
    $("#game").hide();
    $("#opcje").hide();
    $("#autor").hide();
    $(".title").show();
    $("#back").toggle();

}
function showOptions() {
    $("#back").toggle();
    $("#menu").hide();
    $("#opcje").show();
}
function showInfo() {
    $("#back").toggle();
    $("#menu").hide();
    $("#autor").show();
}
function exit(){
    c=confirm("Are you sure?");
    if (c==true){
        window.location.href = "#";
    }
}
function hide() {
    $("#svg svg").hide();
}
function startpass(){
    boxy = new Array();
    hiden="";
    hub=wordp;
    i=hub.length;
    for(i=0; i<hub.length; i++)
    {
        hiden=hiden+"*";
        boxy[i]="*";
    }
    $("#pass").text(hiden);
}
function startgame(){
    errors=0;
    n=Math.floor(Math.random() * 110);
    wordp=word[n];
    clearAlphabet();
}
function jump(){
    if(toggle==0){
        $("#stickman").css("animation","jmp 4s ease-out ");
        toggle=1;
    }
    else{
        $("#stickman").css("animation","none");
        toggle=0;
    }
}

function szubienica(){
    errors++;
    if(errors<11){
        $("#t"+errors).show();
    }
    else{
        $("#t"+errors).show();
        alert("You lost! \nWord is: "+wordp+"\nFinal score is: "+pkt);
        window.setTimeout(gameOver, 600);
    }
}
function gameOver(){
    pkt=0;
    hide();
    showMenu();
}
function clearAlphabet(){
    $("#alphabet span").removeClass("red green");
}
function check(val,styl){
    if (wordp.indexOf(val) > -1){
        $("#"+styl).addClass("green");
        slowa(val);
    }
    else{
        $("#"+styl).addClass("red");
        szubienica();
    }
}
function slowa(val){
    n=wordp.length;
    for(i=0; i<n; i++){
        st=wordp.indexOf(val, i);
        boxy[st]=val;}
        hiden='';
    for(d=0; d<n; d++){
        hiden+=boxy[d];
        $("#pass").text(hiden);
    }
    win();
}
function wygrana(){
        pkt++;
    alert("Congratulations! \nYour score is: "+pkt+"\nLet's continue!");
    gra();
    $("#back").toggle();
}

function win(){
    if(hiden==wordp){
    window.setTimeout(wygrana, 600);
    }
}
</script>

<html>
<head>
      <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
   <link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <title>Виселица</title>
</head>

<body onselectstart="return false">
     
 <div class="container">
      <div id="container">
    <div class="title">ВИСЕЛИЦА</div>
    <!-- Menu start -->
    <div id="menu">
      <div id="opt">
        <ul>
          <li><a onClick="gra();" id="play">PLAY</a></li>
          <li><a onClick="showInfo();" id="auth">INFORMATIONS</a></li>
          <li><a onClick="exit();" id="exit">EXIT</a></li>
        </ul>
      </div>
      <svg id="stickman" onclick="jump()" width="80px" height="100px">
<circle cx="40" cy="20" r="13" stroke="black" stroke-width="5" fill="white" />
<line x1="40" y1="35" x2="40" y2="70" />
<line x1="40" y1="50" x2="10" y2="20" />
<line x1="40" y1="50" x2="70" y2="20" />
<line x1="40" y1="70" x2="20" y2="100" />
<line x1="40" y1="70" x2="60" y2="100" />
</svg>
    </div>

    <div id="game">
      <div id="svg">
        <svg id="t1" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="20" y1="200" x2="20" y2="20" />
        </svg>
        <svg id="t2" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="20" y1="20" x2="160" y2="20" />
        </svg>
        <svg id="t3" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="21" y1="160" x2="60" y2="200"  />
        </svg>
        <svg id="t4" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="20" y1="50" x2="50" y2="20"  />
        </svg>
        <svg id="t5" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="20" x2="140" y2="50"  />
        </svg>
        <svg id="t6" width="280px" height="250px" style="display:none">
            <circle class="tb1" cx="140" cy="50" r="15" stroke="black" stroke-width="5" fill="white" />
        </svg>
        <svg id="t7" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="65" x2="140" y2="100"  />
        </svg>
        <svg id="t8" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="70" x2="120" y2="100"  />
        </svg>
        <svg id="t9" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="70" x2="160" y2="100"  />
        </svg>
        <svg id="t10" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="100" x2="120" y2="130"  />
        </svg>
        <svg id="t11" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="100" x2="160" y2="130"  />
        </svg>
      </div>
      <div id="pass"></div>
      <div id="alphabet">
        <span id="а">а</span><span id="б">б</span>
        <span id="в">в</span><span id="г">г</span>
        <span id="д">д</span><span id="и">и</span>
        <span id="к">к</span><span id="л">л</span>
        <span id="м">м</span><span id="н">н</span>
        <span id="о">о</span><span id="п">п</span>
        <span id="р">р</span><span id="с">с</span>
        <span id="т">т</span><span id="у">у</span>
        <span id="ф">ф</span><span id="х">х</span>
        <span id="ц">ц</span><span id="ш">ш</span>
        <span id="щ">щ</span><span id="ы">ы</span>
        <span id="ь">ь</span><span id="ъ">ъ</span>
        <span id="э">э</span><span id="ю">ю</span>
        <span id="я">я</span>
      </div>
    </div>
   
    <div id="opcje">
      <div id="opt">
        <ul>
          <li><a class="lock" id="lang">LANGUAGE</a></li>
          <li><a class="lock" id="sound">DIFFICULTY</a></li>
          <li><a class="lock" id="login">LOGIN</a></li>
        </ul>
      </div>
    </div>
   
    <div id="autor">
      <div class="txt">
        Hangman game ...
        <br>
        <p>&copy;Created by<br>AOULI Oussama<a target='_blank' href='#'></a></p>
      </div>
    </div>

   
    <div onClick="showMenu();" id="back">MENU</div>
  </div>
       </div>
</body>

</html>
[/html]

[html]<html><head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.3/howler.min.js"></script>
<!-- instagram @myanmessalih-->
<title>Hacked - xxHSYNwq</title>
<meta property="og:image" content="https://s1.postimg.org/13pocq3san/5h311-1nj3c706.jpg">
<!-- instagram @myanmessalih-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- instagram @myanmessalih-->

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.3/howler.min.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="http://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-1.10.2.min.js.download"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Nunito');@import url('https://fonts.googleapis.com/css?family=Poiret+One');body, html {height: 100%;background-repeat: no-repeat; /*background-image: linear-gradient(rgb(12, 97, 33),rgb(104, 145, 162));*/background:black;position: relative;}#particles-js{ width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; position: fixed; top: 0px; z-index:1;}h1{font:1.5em Cinzel,serif;font-weight:400;letter-spacing:.35em;text-shadow:0 0 25px rgba(254,254,255,.85);width:70%} } footer { margin: 20%; }
#a {
onmousedown:stop;
animation-name: rotate ;
animation-duration: 5s;
animation-play-state: running;
animation-timing-function: linear;
animation-iteration-count: infinite;
opacity: 1.0;filter: alpha(opacity=50);} img:hover {opacity: 1.0;filter: alpha(opacity=100);}
@keyframes rotate{
10% {transform:rotateY(36deg)}
20% {transform:rotateY(72deg)}
30% {transform:rotateY(108deg)}
40% {transform:rotateY(144deg)}
50% {transform:rotateY(180deg)}
60% {transform:rotateY(216deg)}
70% {transform:rotateY(252deg)}
80% {transform:rotateY(288deg)}
90% {transform:rotateY(324deg)}
100% {transform:rotateY(360deg)}
}
</style>
<!-- instagram @myanmessalih-->

</head> <body><center>
<!-- instagram @myanmessalih-->
 
<!-- instagram @myanmessalih-->
<img src="https://blog.internetvista.com/wp-content/uploads/2018/02/website-defacement.gif" width="1000">

</center><br><br> <b><b> <div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1365" height="949"></canvas></div> <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>--> <script type="text/javascript">$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){ particlesJS('particles-js', { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "width": 100, "height": 100 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 5, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true, "config_demo": { "hide_card": false, "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover" } } );}); </script> <script> // This script and many more from// http://rainbow.arch.scriptmania.comif (document.getElementById){// Plenty of black gives a better sparkle effect.showerCol=new Array('#000000','#ff0000','#ffffff','#000000','#00ff00','#ff00ff','#ffffff','#ffa500','#000000','#fff000');launchCol=new Array('#ffff00','#ff00ff','#00ffff','#ffffff','#ff8000');runSpeed=70; //setTimeout speed.// *** DO NOT EDIT BELOW ***var yPos=200;var xPos=200;var explosionSize=200;var launchColour='#ffff80';var timer=null;var dims=8;var evn=360/14;firework=new Array();var ieType=(typeof window.innerWidth != 'number');var ieRef=((ieType) && (document.compatMode) && (document.compatMode.indexOf("CSS") != -1))?document.documentElement:document.body;thisStep=0;step=5;for (i=0; i < 14; i++){document.write(' <div id="sparks'+i+'" style="position:absolute;top:0px;left:0px;border-radius:50%;height:'+dims+'px;width:'+dims+';font-size:'+dims+';background-color:'+launchColour+'"> &lt;\/div&gt;'); firework=document.getElementById(&quot;sparks&quot;+i).style; } function winDims(){ winH=(ieType)?ieRef.clientHeight:window.innerHeight; winW=(ieType)?ieRef.clientWidth:window.innerWidth; bestFit=(winW &gt;= winH)?winH:winW; } winDims(); window.onresize=new Function(&quot;winDims()&quot;); function Reset(){ var dsy=(ieType)?ieRef.scrollTop:window.pageYOffset; thisStep=-1; launchColour = launchCol[Math.floor(Math.random()*launchCol.length)]; explosionSize=Math.round(100+Math.random()*(bestFit/4)); yPos = explosionSize+Math.round(Math.random()*(winH-(explosionSize*2.2)))+dsy; xPos = explosionSize+Math.round(Math.random()*(winW-(explosionSize*2.2))); for (i=0; i &lt; 14; i++){ firework.backgroundColor=launchColour; firework.width=dims+&quot;px&quot;; firework.height=dims+&quot;px&quot;; firework.fontSize=dims+&quot;px&quot;; } Fireworks(); } function Fireworks(){ thisStep+=step; timer=setTimeout(&quot;Fireworks()&quot;,runSpeed); for (i=0; i &lt; 14; i++){ firework.top = yPos + explosionSize * Math.sin(i*evn*Math.PI/180)*Math.sin(thisStep/100)+&quot;px&quot;; firework.left= xPos + explosionSize * Math.cos(i*evn*Math.PI/180)*Math.sin(thisStep/100)+&quot;px&quot;; if (thisStep &gt; 100){ var dims_change=(explosionSize &lt; 150)?dims:Math.round(dims+Math.random()*2); firework.backgroundColor=showerCol[Math.floor(Math.random()*showerCol.length)]; firework.width=dims_change+&quot;px&quot;; firework.height=dims_change+&quot;px&quot;; firework.fontSize=dims_change+&quot;px&quot;; } } if (thisStep &gt; 140){ clearTimeout(timer); Reset(); } } window.onload=Fireworks; } </div> </script></b></b><div align="center" class="a"><font color="white"></font></div><font color="white"><br><div align="center"></div><br> </font></body></html>

<!-- instagram @myanmessalih-->

</html><!-- instagram @myanmessalih-->[/html]

[html]
<style>
.header{
  position: relative ;
  width: 900px;
  height: 150px;
  margin-top: 0px;
  margin-bottom: 0px;
  object-fit: fill;
  border-radius: 0%;
background-position: center center;
background-size: cover;
}
.pp-container {
display: block;
width: 800px;
margin: -130px 0px 0px 0px;
}

.bio-container {
  display: block;
  grid-template-columns: 10px 400px;
  grid-template-rows: 100px;
  grid-column-gap: 0px;
  margin-top: 30px;
  text-align: end;
}

.pp {
position: relative;
      top: 65px;
      left: 20px;
  width: 100px;
  height: 100px;
  margin-top: 1px;
  margin-bottom: 5px;
  object-fit: cover;
  border-radius: 50%;
border: 5px solid #fff !important;
}

.bio {
font-family: Georgia;
font-size: 16px;
letter-spacing: 1px;
word-spacing: 5px;
color: #2D2D2D;
font-weight: 200;
line-height:15px;
}

.bio b {
font-size: 1.2em;
letter-spacing: 1px;
word-spacing: 5px;
color: #2D2D2D;
font-weight: 200;
line-height:15px;
}
</style>
<div class="header" style="background-image: url(https://wallpaperaccess.com/full/199624.jpg)"></div>

<div class="pp-container">
<img class="pp" src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F8d%2Fbe%2F96%2F8dbe966e815f9aa53bd12d9bb640b83c.gif" alt="pp" />

<div class="bio-container">
<div class="bio">
<p>
<b>@user</b> <br />

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?
<br />

</p>

</div></div></div>
[/html]

[html]<pre id=p><script>n=setInterval("for(n+=7,i=k,P='p.\\n';i-=1/k;P+=P[i%2?(i%2*j-j+n/k^j)&1:2])j=k/i;p.innerHTML=P",k=64)</script>
[/html]

[html]
<style>
.solar-system {
  position: relative;
  width: 100%;
  max-width: 700px;
  padding-top: 100%;
  right: 0;
  bottom: 0;
  transition: all 1.5s ease 0s;
}

.solar-system.top-pos {
    bottom: -45%;
transition: all 1.5s ease 0s;
}
.solar-system.bot-pos {
    bottom: 45%;
transition: all 1.5s ease 0s;
}
.solar-system.right-pos {
    right: 50%;
transition: all 1.5s ease 0s;
}
.solar-system.left-pos {
    right: -50%;
transition: all 1.5s ease 0s;
}

@media (min-width: 700px) {
  .solar-system {
    padding-top: 700px;
  }
}

/*** ORBITS ***/

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px dotted rgb(84 84 84 / 15%);
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
.orbit-sun {
    width: calc(50%);
    height: calc(50%);
border: 1px dotted #ff6600;
    background: #ffcc00;
}
.orbit-sun:before {
    content: "";
    background: #ff660017;
    width: 99%;
    height: 99%;
    display: block;
    margin-left: 0.5%;
    margin-top: 0.5%;
    border-radius: 100%;
    box-shadow: 0 0 10em 5em #ff66006b, 0 0 100px 50px #ff66006b inset, 0 0 10px 5px #ffcc00f2;
}
.orbit.orbit-sun:after {
    content: "SUN";
    color: #ffa200;
    top: 50%;
    position: absolute;
    left: -3.5em;
transition: left 1s ease 0s;
}
.solar-system.right-pos .orbit-sun:after {
    left: calc(3.5em + 350px);
transition: left 1s ease 0s;
}
.orbit-mercury {
width: calc(100%);
    height: calc(100%);
transform: translate(-50%, -50%);
}
.orbit-venus {
width: calc(150%);
    height: calc(150%);
transform: translate(-50%, -50%);
}
.orbit-earth {
width: calc(200%);
    height: calc(200%);
/* transform: translate(-50%, -50%) rotate(-10deg) !important; */
}
.orbit-earth:after {
    content: "";
    border: 2px solid red;
    width: 1em;
    height: 1em;
    display: block;
    position: relative;
    border-color: #54cbeb #54cbeb transparent transparent;
    transform: rotate(-50deg);
    border-width: 2px 2px 0 0;
    top: 52.75%;
    left: -0.5em;
animation: blinker 2s linear infinite;
}
.orbit-mars {
width: calc(280%);
    height: calc(280%);
transform: translate(-50%, -50%);
}
.orbit-asteroids {
width: calc(380%);
    height: calc(380%);
transform: translate(-50%, -50%) rotate(0deg);
}

/*** PLANETS ***/

.planet {
  position: absolute;
  top: 50%;
  border-radius: 100%;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0s ease 0s;
}
.planet-mercury {
    left: -6px;
    width: 10px;
    height: 10px;
    transition-duration: 1s;
background: #bcc1c9;
}
.planet-venus {
    left: -8px;
    width: 14px;
    height: 14px;
    transition-duration: 2s;
    background: #ec5f24
}
.planet-earth {
    left: -13px;
    width: 24px;
    height: 24px;
transition-duration: 3s;
z-index: 1;
}
.planet-mars {
    left: -9px;
    width: 18px;
    height: 18px;
    transition-duration: 4s;
    background: #d83e3c;
}
.planet-asteroids {
    left: -40px;
    width: calc(100% + 80px);
    height: 1700px;
transition: all 5s ease 0s;
}
.planet-mercury:before {
    content: "MERCURY";
    color: #bcc1c9;
    margin-left: 15px;
    top: 0px;
    position: absolute;
    height: 10px;
    line-height: 10px;
}
.planet-venus:before {
    content: "VENUS";
    color: #ec5f24;
    margin-left: 21px;
    top: 1px;
    position: absolute;
    height: 14px;
    line-height: 14px;
}
.planet-earth:before {
    content: "EARTH";
    color: #54cbeb;
    margin-left: 29px;
    top: 1px;
    position: absolute;
    height: 24px;
    line-height: 24px;
}
.planet-mars:before {
    content: "MARS";
    color: #d83e3c;
    margin-left: 23px;
    top: 1px;
    position: absolute;
    height: 18px;
    line-height: 18px;
}
.planet-asteroids:before, .planet-asteroids:after {
    content: "ASTEROID BELT";
    color: #666666;
    margin-left: 8em;
    top: 36.75%;
    position: absolute;
}
.planet-asteroids:after {
    right: 8em;
}
.planet-asteroids img + img {
    position: absolute;
    right: 0;
    transform: rotate(180deg);
}
.planet-mars:after, .planet-venus:after, .planet-mercury:after, .planet-earth:after {
    content: "";
    background: linear-gradient(105deg, rgba(0,0,0,1), rgba(0,0,0,0.6), transparent, transparent);
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    box-shadow: 0 0 3px 2px #ffffff26;
opacity: 0.8;
position: absolute;
    top: 0;
    left: 0;
}
.planet-earth:after {
    box-shadow: 0 0 5px 3px #54cbeb5c;
}
.planet img {
    width: 100%;
}

.planet-asteroids img {
    width: initial;
}

/*** SELECTED DAYS ***/

.new-year-line, .winter-solstice-line, .spring-equinox-line, .summer-solstice-line, .autumn-equinox-line {
    width: 12em;
    border-bottom: 2px dotted white;
    position: absolute;
    left: -13.35em;
    top: 50%;
    z-index: -1;
    color: white;
    margin-top: -13px;
    margin-left: -50%;
    height: 14px;
line-height: 1em;
}
.new-year-line:after, .winter-solstice-line:after, .spring-equinox-line:after, .summer-solstice-line:after, .autumn-equinox-line:after {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    float: right;
    position: absolute;
    background: #ffffff00;
    right: -28px;
    top: -1px;
    border: 2px dotted #fff;
    border-radius: 100%;
}

.winter-solstice-line {
margin-top: 120px;
    left: -12.05em;
}
.spring-equinox-line {
    top: -47.25%;
    left: 58.35%;
}
.summer-solstice-line {
  top: 30.35%;
  left: 178.75%;
}
.autumn-equinox-line {
top: 148.5%;
  left: 97.5%;
}

#cronoNewYear, #cronoWinterSolstice, #cronoSpringEquinox, #cronoSummerSolstice, #cronoAutumnEquinox {
    left: 0;
    position: absolute;
    color: #fff;
    width: 100%;
    bottom: -17px;
font-size: 1.1em;
}
#cronoNewYear span, #cronoWinterSolstice span , #cronoSpringEquinox span, #cronoSummerSolstice span, #cronoAutumnEquinox span {
font-size: 0.75em;
color: #666;
}

/*** WARNING ***/

#warning {
    position: fixed;
    left: 2em;
    bottom: 2em;
    background: rgb(0 0 0 / 0.75);
    height: 5em;
    width: 45em;
    font-size: 1.35em;
    color: #ffa200;
    z-index: 3;
    text-transform: uppercase;
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
#warning:before {
content: " ! ";
z-index: 2;
font-size: 1.9em;
margin-left: 1.15em;
color: #ffa200;
font-weight: bold;
margin-top: 5px;
}
#warning:after {
content: "";
background: #ffa200;
position: absolute;
left: 0;
width: 5em;
height: 5em;
z-index: 0;
}
#warning p {
    display: block !important;
    float: left;
    width: 100%;
    margin: 0 !important;
    padding-left: 2.5em;
}
#warning p:before {
content: "";
position: absolute;
z-index: 1;
border: 1.75em solid transparent;
border-bottom: 2.85em solid #040404;
left: 0.775em;
top: -0.75em;
}
#reload {
    background: rgb(255 162 0);
    border: 0;
    border-radius: 1px;
    padding: 0.5em 0.75em;
    margin-left: 1.5em;
cursor: pointer;
outline: none;
}
#reload:hover {
    background: #54cbeb;
}

/* ARROWS */
.arrows {
    position: fixed;
    left: 0;
    top: 0px;
    width: 100vw;
    height: 100vh;
}

.arrows span {
    background: #ffffff;
    padding: 0.5em !important;
    position: absolute;
    cursor: pointer;
    margin: 1em;
    width: 3em;
    height: 3em;
    border-radius: 2px;
    text-align: center;
    line-height: 2em;
    opacity: 0.05;
box-shadow: 0 0 3px -2px #000;
transition: all 0.4s ease 0s;
}
.arrows span:hover {
opacity: 0.9;
}
.arrows span:before {
    content: "";
    border: 4px solid #121212;
    width: 1.35em;
    height: 1.35em;
    float: left;
    border-left-width: 0;
    border-bottom-width: 0;
    transform: rotate(-45deg);
    margin-left: 0.3em;
    margin-top: 0.6em;
    border-radius: 3px;
}

.arrows span#down:before {
transform: rotate(135deg);
    margin-top: 0;
}
.arrows span#right:before {
transform: rotate(45deg);
    margin-left: 0.1em;
    margin-top: 0.35em;
}
.arrows span#left:before {
transform: rotate(-135deg);
    margin-top: 0.3em;
    margin-left: 0.5em;
}

.arrows span#up, .arrows span#down {
left: calc(50% - 2.5em);
}
.arrows span#down {
bottom: 0;
}
.arrows span#right, .arrows span#left {
bottom: calc(50% - 2.5em);
}
.arrows span#right {
left: calc(100% - 5em);
}

.arrows span.active {
opacity: 0.9;
}

/* ANIMATIONS */

@keyframes blinker {
0%   { opacity:0;   top:52.85%;}
40%  { opacity:1;   top:51%;   }
50%  { opacity:0;   top:51%;   }
60%  { opacity:1;   top:51%; }
100% { opacity:0;   top:48.25%;}
}
@keyframes spin {
from {transform: rotate(0deg) }
to {transform: rotate(-360deg);}
}
 
</style>
<script>
//prevent loading error
document.getElementById('warning').remove();

//short getElementById
elem = function (id){ return document.getElementById(id); }

  //get next year
  var nextYear = new Date().getFullYear() + 1;

//count until date
var newYearDate = new Date("Jan 1, "+ nextYear + " 00:00:00").getTime();

//title angles
var todayDate = new Date().getTime();
/**///todayDate = new Date("Apr 3, 2021 00:00:00").getTime();
var todaySecondsLeft = (newYearDate - todayDate) / 1000;
var todayDays = parseInt(todaySecondsLeft / 86400);

var plaDeg = parseInt(todayDays-365);
var degMax = Math.abs(plaDeg) + 15;
var degMin = Math.abs(plaDeg) - 15;

//planets positions
var randMer = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var randVen = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var randMar = Math.floor(Math.random() * (degMax - degMin + 1)) + degMin;
var style = document.createElement('style'); style.innerHTML = '.orbit-mercury {transform: translate(-50%, -50%) rotate('+randMer+'deg)} .orbit-venus {transform: translate(-50%, -50%) rotate('+randVen+'deg)} .orbit-mars {transform: translate(-50%, -50%) rotate('+randMar+'deg)} .planet-mercury {transform:rotate(-'+randMer+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} .planet-mars {transform:rotate(-'+randMar+'deg)} .planet-earth {transform:rotate('+parseInt(todayDays-365)+'deg)} .planet-venus {transform:rotate(-'+randVen+'deg)} '; document.head.appendChild(style);

/*screen position*/
function qSel(sel){ return document.querySelector(sel); }
var screenPos = qSel('.solar-system').classList;
if(todayDays<367){ screenPos.add('left-pos');     }
if(todayDays<335){ screenPos.add('top-pos');   }
if(todayDays<280){ screenPos.remove('left-pos');  }
if(todayDays<230){ screenPos.add('right-pos');    }
if(todayDays<185){ screenPos.remove('top-pos');   }
if(todayDays<158){ screenPos.add('bot-pos');      }
if(todayDays<120){ screenPos.remove('right-pos'); }
if(todayDays<60) { screenPos.add('left-pos');   }
if(todayDays<30) { screenPos.remove('bot-pos');   }

/*arrows*/
function goUp(){
    arrowOn('up');
    if(screenPos.contains('bot-pos')){screenPos.remove('bot-pos');} else {screenPos.add('top-pos');}
}
function goDown(){
    arrowOn('down');
    if(screenPos.contains('top-pos')){screenPos.remove('top-pos');} else {screenPos.add('bot-pos');}
}
function goRight(){
    arrowOn('right');
    if(screenPos.contains('left-pos')){screenPos.remove('left-pos');} else {screenPos.add('right-pos');}
}
function goLeft(){
    arrowOn('left');
    if(screenPos.contains('right-pos')){screenPos.remove('right-pos');} else {screenPos.add('left-pos');}
}
function arrowOn(id){
    elem(id).classList.add('active');
    setTimeout(function(){ elem(id).classList.remove('active'); }, 1000);
}

//detecting arrow key presses
document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
    case 37: goLeft();  break;
    case 38: goUp();   break;
    case 39: goRight(); break;
    case 40: goDown(); break;
    }
});

//countdown vars
var days, hours, minutes, seconds;

//countdown interval
var countDown = setInterval(function() {

    var rightNow = new Date().getTime();
    /**///rightNow = new Date("Apr 3, 2021 00:00:00").getTime();
    var timeTo = newYearDate - rightNow;
   
    days = Math.floor(timeTo / (1000 * 60 * 60 * 24));
    hours = Math.floor((timeTo % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    minutes = Math.floor((timeTo % (1000 * 60 * 60)) / (1000 * 60));
    seconds = Math.floor((timeTo % (1000 * 60)) / 1000);
   
    if(hours<10)hours="0"+hours;
        if(minutes<10)minutes="0"+minutes;
        if(seconds<10)seconds="0"+seconds;
   
    /*new year*/
    var newYearDays;
    if (days<0){ elem("cronoNewYear").style.display='none'; newYearDays = days.toString().substr(1); } else { newYearDays="-"+days; }
    elem("cronoNewYear").innerHTML = days + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";   
   
    /*leap year*/
    var leapYear = new Date().getFullYear();
    if(((leapYear % 4 == 0) && (leapYear % 100 != 0)) || (leapYear % 400 == 0)) {
    rotationDeg = newYearDays * 0.9836065573770491;
    } else {
    rotationDeg = newYearDays * 0.9863013698630136;
    }
   
    /*earth position*/
    elem("position-earth").style.transform = 'translate(-50%, -50%) rotate('+rotationDeg+'deg';
   
    /*winter solstice*/
    var winSolsDays;
    var wsDays=days-11;   
    if (wsDays<0){ elem("cronoWinterSolstice").style.display='none'; } else { winSolsDays=wsDays }
    elem("cronoWinterSolstice").innerHTML = winSolsDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
   
    /*spring equinox*/
    var sprEquiDays;
    var seDays=days-287;   
    if (seDays<0){ elem("cronoSpringEquinox").style.display='none'; } else { sprEquiDays=seDays }
    elem("cronoSpringEquinox").innerHTML = sprEquiDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
   
    /*summer solstice*/
    var sumSolsDays;
    var ssDays=days-194;   
    if (ssDays<0){ elem("cronoSummerSolstice").style.display='none'; } else { sumSolsDays=ssDays }
    elem("cronoSummerSolstice").innerHTML = sumSolsDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
   
    /*autumn equinox*/
    var autEquiDays;
    var aeDays=days-101;   
    if (aeDays<0){ elem("cronoAutumnEquinox").style.display='none'; } else { autEquiDays=aeDays }
    elem("cronoAutumnEquinox").innerHTML = autEquiDays + " <span>DAYS</span> &nbsp;" + hours + ":" + minutes + ":" + seconds + " <span>LEFT</span>";
   
    /*initial opacity*/
    var opacityList = document.querySelectorAll('.planet');
    for(i=0;i<opacityList.length;i++){
    opacityList[i].style.opacity = '1';
    }

    if (timeTo < 0) {
    clearInterval(countDown);
    }
   
}, 1000);
</script>
<div class="solar-system">

<div class="orbit orbit-sun"></div>

<div class="orbit orbit-mercury" id="position-mercury">
    <div class="planet planet-mercury" id="opacity-mercury">
    <img src="https://cdn.josetxu.com/img/planet-mercury.png" alt="mercury">
    </div>
</div>

<div class="orbit orbit-venus" id="position-venus">
    <div class="planet planet-venus" id="opacity-venus">
    <img src="https://cdn.josetxu.com/img/planet-venus.png" alt="venus">
    </div>
</div>

<div class="orbit orbit-earth" id="position-earth">
    <div class="planet planet-earth" id="opacity-earth">
    <img src="https://cdn.josetxu.com/img/planet-earth.png" alt="earth">
    </div>
</div>

<div class="orbit orbit-mars" id="position-mars">
    <div class="planet planet-mars" id="opacity-mars">
    <img src="https://cdn.josetxu.com/img/planet-mars.png" alt="mars">
    </div>
</div>

<div class="orbit orbit-asteroids" id="position-asteroids">
    <div class="planet planet-asteroids" id="opacity-asteroids">
    <img src="https://cdn.josetxu.com/img/planets-asteroid-belt.png" alt="asteroids">
    <img src="https://cdn.josetxu.com/img/planets-asteroid-belt.png" alt="asteroids">
    </div>
</div>
<div class="lines">
<div class="new-year-line">NEW YEAR <span id='cronoNewYear'></span></div>
<div class="winter-solstice-line">WINTER SOLSTICE <span id="cronoWinterSolstice"></span></div>
<div class="spring-equinox-line">SPRING EQUINOX <span id="cronoSpringEquinox"></span></div>
<div class="summer-solstice-line">SUMMER SOLSTICE <span id="cronoSummerSolstice"></span></div>
<div class="autumn-equinox-line">AUTUMN EQUINOX <span id="cronoAutumnEquinox"></span></div>
</div>

</div>

<div class="arrows">
<span id="up" onclick="goUp()"></span>
<span id="down" onclick="goDown()"></span>
<span id="right" onclick="goRight()"></span>
<span id="left" onclick="goLeft()"></span>
</div>

<div id="warning"><p>it seems that the earth has gone out of its orbit... <button id="reload" onclick="location.reload()">RE-ORBIT</button></p></div>

[/html]

[html]
<style>
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

.container {
    position: relative;
    margin: 0px auto;
    padding: 50px 0;
    clear: both;
}
@media only screen and (min-width: 1200px) {
    .container {
        width: 1210px;
    }
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .container {
        width: 1030px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 682px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 428px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 479px) {
    .container {
        width: 320px;
        margin: 0 auto;
    }
}

 
.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*height: 100px;*/
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
 
  /* == */
  width: 250px;
  /* == */
}
.mcd-menu li {
  position: relative;
  /*float:left;*/
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  color: #777;
  /*text-align: center;
  border-right: 1px solid #E7E7E7;*/
 
  /* == */
  text-align: left;
  height: 36px;
  position: relative;
  border-bottom: 1px solid #EEE;
  /* == */
}
.mcd-menu li a i {
  /*display: block;
  font-size: 30px;
  margin-bottom: 10px;*/
 
  /* == */
  float: left;
  font-size: 20px;
  margin: 0 10px 0 0;
  /* == */
 
}
/* == */
.mcd-menu li a p {
  float: left;
  margin: 0 ;
}
/* == */

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;
 
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  /*border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;*/
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;
 
  /* == */
  border-left: 4px solid #e67e22;
  border-right: 4px solid #e67e22;
  margin: 0 -4px;
  /* == */
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  /*top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
 
  /* == */
  top: 42%;
  left: 0;
  border-left: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* == */
}

/* == */
.mcd-menu li a.active:after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-right: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* == */

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*border-top: 4px solid #e67e22;*/
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  /*top: 130px;*/
  z-index: 1000;
 
  /* == */
  left:280px;
  top: 0px;
  border-left: 4px solid #e67e22;
  /* == */
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  /*top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
 
  /* == */
  top: 25px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  /* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  /*top: 100px;*/
 
  /* == */
  left:250px;
  /* == */
}
/*.mcd-menu li ul li {
  float: none;
}*/
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;
 
  /* == */
  height: auto;
  /* == */
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
} 
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  /*left: -14px;*/
  /* == */
  left: -9px;
  /* == */
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}

/*.mcd-menu li.float {
  float: right;
}*/
.mcd-menu li a.search {
  /*padding: 29px 20px 30px 10px;*/
  padding: 10px 10px 15px 10px;
  clear: both;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;
 
  /* == */
  width:170px;
  float:left;
  /* == */
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  /*padding: 10px;*/
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;
 
  /* == */
  float:left;
  padding: 10px 10px 11px 10px;
  /* == */
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}

.search-mobile {
display:none !important;
background:#e67e22;
border-left:1px solid #e67e22;
border-radius:0 3px 3px 0;
}
.search-mobile i {
color:#FFF;
margin:0 !important;
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
    .mcd-menu {
    margin-left:10px;
}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .mcd-menu {
    width: 200px;
}
.mcd-menu li a {
    height:30px;
}
.mcd-menu li a i {
    font-size: 22px;
}
.mcd-menu li a strong {
    font-size: 12px;
}
.mcd-menu li a small {
    font-size: 10px;
}
.mcd-menu li a.search input {
    width: 120px;
    font-size: 12px;
}
.mcd-menu li a.search buton{
    padding: 8px 10px 9px 10px;
}
.mcd-menu li > ul {
    min-width:180px;
}
.mcd-menu li:hover > ul {
    min-width:180px;
    left:200px;
}
.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
    min-width:150px;
}
.mcd-menu li ul li:hover > ul {
    left:180px;
    min-width:150px;
}
.mcd-menu li ul li ul li:hover > ul {
    left:150px;
    min-width:150px;
}
.mcd-menu li ul a {
    font-size:12px;
}
.mcd-menu li ul a i {
    font-size:14px;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

.mcd-menu {
    width: 50px;
}
.mcd-menu li a {
    position: relative;
    padding: 12px 16px;
    height:20px;
}
.mcd-menu li a small {
    display: none;
}
.mcd-menu li a strong {
    display: none;
}
.mcd-menu li a:hover strong,.mcd-menu li a.active strong {
    display:block;
    font-size:10px;
    padding:3px 0;
    position:absolute;
    bottom:0px;
    left:0;
    background:#e67e22;
    color:#FFF;
    min-width:100%;
    text-transform:lowercase;
    font-weight:normal;
    text-align:center;
}
.mcd-menu li .search {
    display: none;
}

.mcd-menu li > ul {
    min-width:180px;
    left:70px;
}
.mcd-menu li:hover > ul {
    min-width:180px;
    left:50px;
}
.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
    min-width:150px;
}
.mcd-menu li ul li:hover > ul {
    left:180px;
    min-width:150px;
}
.mcd-menu li ul li ul li > ul {
    left:35px;
    top: 45px;
    border:0;
    border-top:4px solid #e67e22;
}
.mcd-menu li ul li ul li > ul:before {
    left:30px;
    top: -9px;
    border:0;
    border-bottom:5px solid #e67e22;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
}
.mcd-menu li ul li ul li:hover > ul {
    left:30px;
    min-width:150px;
    top: 35px;
}
.mcd-menu li ul a {
    font-size:12px;
}
.mcd-menu li ul a i {
    font-size:14px;
}

}

@media only screen and (max-width: 479px) {
    .mcd-menu {
    width: 50px;
}
.mcd-menu li a {
    position: relative;
    padding: 12px 16px;
    height:20px;
}
.mcd-menu li a small {
    display: none;
}
.mcd-menu li a strong {
    display: none;
}
.mcd-menu li a:hover strong,.mcd-menu li a.active strong {
    display:block;
    font-size:10px;
    padding:3px 0;
    position:absolute;
    bottom:0px;
    left:0;
    background:#e67e22;
    color:#FFF;
    min-width:100%;
    text-transform:lowercase;
    font-weight:normal;
    text-align:center;
}
.mcd-menu li .search {
    display: none;
}

.mcd-menu li > ul {
    min-width:180px;
    left:70px;
}
.mcd-menu li:hover > ul {
    min-width:180px;
    left:50px;
}
.mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul {
    min-width:150px;
}
.mcd-menu li ul li:hover > ul {
    left:180px;
    min-width:150px;
}
.mcd-menu li ul li ul li > ul {
    left:35px;
    top: 45px;
    border:0;
    border-top:4px solid #e67e22;
}
.mcd-menu li ul li ul li > ul:before {
    left:30px;
    top: -9px;
    border:0;
    border-bottom:5px solid #e67e22;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
}
.mcd-menu li ul li ul li:hover > ul {
    left:30px;
    min-width:150px;
    top: 35px;
}
.mcd-menu li ul a {
    font-size:12px;
}
.mcd-menu li ul a i {
    font-size:14px;
}
   
}

</style>
<div class="container">
<nav>
    <ul class="mcd-menu">
    <li>
        <a href="">
        <i class="fa fa-home"></i>
        <strong>Home</strong>
        <small>sweet home</small>
        </a>
    </li>
    <li>
        <a href="" class="active">
        <i class="fa fa-edit"></i>
        <strong>About us</strong>
        <small>sweet home</small>
        </a>
    </li>
    <li>
        <a href="">
        <i class="fa fa-gift"></i>
        <strong>Features</strong>
        <small>sweet home</small>
        </a>
    </li>
    <li>
        <a href="">
        <i class="fa fa-globe"></i>
        <strong>News</strong>
        <small>sweet home</small>
        </a>
    </li>
    <li>
        <a href="">
        <i class="fa fa-comments-o"></i>
        <strong>Blog</strong>
        <small>what they say</small>
        </a>
        <ul>
        <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li>
        <li>
            <a href="#"><i class="fa fa-group"></i>Our Team</a>
            <ul>
            <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li>
            <li>
                <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a>
                <ul>
                <li><a href="#"><i class="fa fa-leaf"></i>About</a></li>
                <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li>
            </ul>
        </li>
        <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li>
        <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li>
        </ul>
    </li>
    <li>
        <a href="">
        <i class="fa fa-picture-o"></i>
        <strong>Portfolio</strong>
        <small>sweet home</small>
        </a>
    </li>
    <li>
        <a href="">
        <i class="fa fa-envelope-o"></i>
        <strong>Contacts</strong>
        <small>drop a line</small>
        </a>
    </li>
    <li class="float">
        <a class="search">
        <input type="text" value="search ...">
        <button><i class="fa fa-search"></i></button>
        </a>
        <a href="" class="search-mobile">
        <i class="fa fa-search"></i>
        </a>
    </li>
    </ul>
</nav>
</div>
[/html]

[html]
<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family:arial, sans-serif;
  font-weight:normal;
  font-size:12px;
  background:#3f4348 url('http://www.frecosse.com/workshop/accordion_menu/bg.png');
}

ul {
  list-style:none;
  margin:0;
  padding:0;
  width:300px;
  margin:0 auto;
  -moz-box-shadow: 0 0 5px #111;
  -webkit-box-shadow: 0 0 5px #111;
  box-shadow: 0 0 5px #111;
}

ul li label {
  background: #575e63; /* fallback colour */
  border-top:1px solid #878e98;
  border-bottom:1px solid #33373d;
  color: #fff;
  text-shadow: 0 1px 1px #000;
  letter-spacing: 0.09em;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575e63), to(#3f4347));
  background: -webkit-linear-gradient(top, #575e63, #3f4347);
  background: -moz-linear-gradient(top, #575e63, #3f4347);
  background: -ms-linear-gradient(top, #575e63, #3f4347);
  background: -o-linear-gradient(top, #575e63, #3f4347);
}

ul li input[type='checkbox'] {
  display: none;
}

ul li label {
  display:block;
  padding:12px;
  width:300px;
}

ul li i {
  font-size:18px;
  vertical-align: middle;
  width:20px;
  display:inline-block;
}

ul li span {
  display:inline;
  float:right;
  background:#48515c;
  border:1px solid #3c434c;
  border-bottom:1px solid #707781;
  padding:4px 6px;
  font-size:10px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: inset 0 0 10px #111;
  -webkit-box-shadow: inset 0 0 10px #111;
  box-shadow: inner 0 0 10px #111;
  position:relative;
}

ul li label:hover {
  background: #566f82; /* fallback colour */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#566f82), to(#3e505e));
  background: -webkit-linear-gradient(top, #566f82, #3e505e);
  background: -moz-linear-gradient(top, #566f82, #3e505e);
  background: -ms-linear-gradient(top, #566f82, #3e505e);
  background: -o-linear-gradient(top, #566f82, #3e505e);
}

ul li label:hover span {
  background:#3e505e;
}

ul li input[type='checkbox']:checked ~ label {
  background: #44c6eb; /* fallback colour */
  border-top:1px solid #878e98;
  border-bottom:1px solid #2799db;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#44c6eb), to(#2799db));
  background: -webkit-linear-gradient(top, #44c6eb, #2799db);
  background: -moz-linear-gradient(top, #44c6eb, #2799db);
  background: -ms-linear-gradient(top, #44c6eb, #2799db);
  background: -o-linear-gradient(top, #44c6eb, #2799db);
}

ul li input[type='checkbox']:checked ~ label span {
  background: #2173a1; /* fallback colour */
  border-top:1px solid #1b5f85;
  border-bottom:1px solid #4cb1e4;
  -moz-box-shadow: inset 0 0 5px #111;
  -webkit-box-shadow: inset 0 0 5px #111;
  box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
  height: auto;
  display:block;
  min-height:40px;
  max-height:400px;
}

ul ul {
  background:#fff; margin:0; padding:0;
  -moz-box-shadow: inset 0 2px 2px #b3b3b3;
  -webkit-box-shadow: inset 0 2px 2px #b3b3b3;
  box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
  display:block;
  padding:6px 12px;
  color:#999;
  text-decoration:none;
}

ul ul li a:hover {
  color:#44c6eb;
}

ul ul li a span {
  color:#999;
  background:none;
  border:1px solid #ccc;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

ul ul li {
  border-bottom:1px solid #ccc;
}

ul ul li:first-child {
  padding-top:6px;
}

ul ul li:last-child {
  padding-bottom:6px; border:0;
}

.options {
  height: 0;
  display: block;
  overflow: hidden;
}
 
/* Abridged icomoon font styles
/* (Hosted on Frecosse - Please don't hotlink!)
=============================================== */
@font-face {
  font-family: 'icomoon';
  src:url('http://www.frecosse.com/workshop/accordion_menu/icomoon.eot');
  src:url('http://www.frecosse.com/workshop/accordion_menu/icomoon.eot?#iefix') format('embedded-opentype'),
    url('http://www.frecosse.com/workshop/accordion_menu/icomoon.woff') format('woff'),
    url('http://www.frecosse.com/workshop/accordion_menu/icomoon.ttf') format('truetype'),
    url('http://www.frecosse.com/workshop/accordion_menu/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-music:before, .icon-search:before, .icon-fire:before, .icon-dribbble:before, .icon-flickr:before, .icon-deviantart:before, .icon-picassa:before, .icon-reddit:before, .icon-android:before, .icon-users:before, .icon-film:before, .icon-eye:before, .icon-point-right:before, .icon-microphone:before, .icon-download:before, .icon-warning:before, .icon-images:before, .icon-movie:before, .icon-cloud:before {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.icon-music:before { content: "\61"; }
.icon-search:before { content: "\62"; }
.icon-fire:before { content: "\63"; }
.icon-dribbble:before { content: "\64"; }
.icon-flickr:before { content: "\65"; }
.icon-deviantart:before { content: "\66"; }
.icon-picassa:before { content: "\67"; }
.icon-reddit:before { content: "\68"; }
.icon-android:before { content: "\69"; }
.icon-users:before { content: "\6a"; }
.icon-film:before { content: "\6b"; }
.icon-eye:before { content: "\6c"; }
.icon-point-right:before { content: "\6d"; }
.icon-microphone:before { content: "\6e"; }
.icon-download:before { content: "\6f"; }
.icon-warning:before { content: "\70"; }
.icon-images:before { content: "\71"; }
.icon-movie:before { content: "\72"; }
.icon-cloud:before { content: "\73"; }

</style>
<script>

</script>

<ul>
  <li class="block">
    <input type="checkbox" name="item" id="item1" />   
    <label for="item1"><i aria-hidden="true" class="icon-users"></i> Friends <span>124</span></label>
    <ul class="options">
      <li><a href="#"><i aria-hidden="true" class="icon-search"></i> Find New Friends</a></li>
      <li><a href="#"><i aria-hidden="true" class="icon-point-right"></i> Poke A Friend</a></li>
      <li><a href="#"><i aria-hidden="true" class="icon-fire"></i> Incinerate Existing Friends</a></li>
    </ul>
  </li>
  <li class="block">
    <input type="checkbox" name="item" id="item2" />   
    <label for="item2"><i aria-hidden="true" class="icon-film"></i> Videos <span>1,034</span></label>
    <ul class="options">
      <li><a href="#"><i aria-hidden="true" class="icon-movie"></i> My Videos <span>7</span></a></li>
      <li><a href="#"><i aria-hidden="true" class="icon-download"></i> My Downloaded Videos <span>3</span></a></li>
      <li><a href="#"><i aria-hidden="true" class="icon-warning"></i> My Well Dodgy Videos <span>1,024</span></a></li>
    </ul>
  </li>
  <li class="block">
    <input type="checkbox" name="item" id="item3" />   
    <label for="item3"><i aria-hidden="true" class="icon-images"></i> Galleries <span>4</span></label>
    <ul class="options">
      <li><a href="http://gattkins.deviantart.com/" target="_blank"><i aria-hidden="true" class="icon-deviantart"></i> My Deviant Art</a></li>
      <li><a href="http://dribbble.com/" target="_blank"><i aria-hidden="true" class="icon-dribbble"></i> Latest Dribbble Images</a></li>
      <li><a href="http://www.flickr.com/groups/catching_sun/pool/" target="_blank"><i aria-hidden="true" class="icon-flickr"></i> Sample Flickr Stream</a></li>
      <li><a href="https://picasaweb.google.com/lh/explore#utm_medium=embed&utm_source=pwalogin" target="_blank"><i aria-hidden="true" class="icon-picassa"></i> Sample Picasa Stream</a></li>
    </ul>
  </li>
  <li class="block">
    <input type="checkbox" name="item" id="item4" />   
    <label for="item4"><i aria-hidden="true" class="icon-microphone"></i> Podcasts <span>1</span></label>
    <ul class="options">
      <li><a href="https://css-tricks.com/css-tricks-screencasts-now-on-itunes/" target="_blank"><i aria-hidden="true" class="icon-music"></i> CSS-Tricks</a></li>
    </ul>
  </li>
  <li class="block">
    <input type="checkbox" name="item" id="item5" />   
    <label for="item5"><i aria-hidden="true" class="icon-android"></i> Robots <span>3</span></label>
    <ul class="options">
      <li><a href="http://en.wikipedia.org/wiki/HAL_9000" target="_blank"><i aria-hidden="true" class="icon-eye"></i> Hal 9000</a></li>
      <li><a href="http://en.wikipedia.org/wiki/Skynet_(Terminator)" target="_blank"><i aria-hidden="true" class="icon-cloud"></i> Skynet</a></li>
      <li><a href="http://en.wikipedia.org/wiki/Short_Circuit" target="_blank"><i aria-hidden="true" class="icon-reddit"></i> Johnny 5</a></li>
    </ul>
  </li>
</ul>

[/html]

[hideprofile][html]
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald');

$base-color: #303F9F;
$second-color: #3F51B5;
$third-color: #FBC02D;
$site: #303F9F;
$light: #fff;

body {
position: relative;
font-family: 'Oswald', sans-serif;
background: $site;
color: $light;
font-size: 20px;
}

.grid {
list-style: none;
margin-left: -40px;
}

.gc {
box-sizing: border-box;
display: inline-block;
margin-right: -.25em;
min-height: 1px;
padding-left: 40px;
vertical-align: top;
}

.gc--1-of-3 {
width: 33.33333%;
}

.gc--2-of-3 {
width: 66.66666%;
}

.naccs {
position: relative;
max-width: 900px;
margin: 100px auto 0;
}

.naccs .menu div {
padding: 15px 20px 15px 40px;
margin-bottom: 10px;
color: $base-color;
background: $second-color;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
cursor: pointer;
position: relative;
vertical-align: middle;
font-weight: 700;
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
margin-left: 25px;
}

.naccs .menu div:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.naccs .menu div span.light {
height: 10px;
width: 10px;
position: absolute;
top: 24px;
left: 15px;
background-color: $base-color;
border-radius: 100%;
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.naccs .menu div.active span.light {
background-color: $third-color;
left: 0;
height: 100%;
width: 3px;
top: 0;
border-radius: 0;
}

.naccs .menu div.active {
color: $third-color;
padding: 15px 20px 15px 20px;
}

ul.nacc {
position: relative;
height: 0px;
list-style: none;
margin: 0;
padding: 0;
transition: .5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li {
opacity: 0;
transform: translateX(50px);
position: absolute;
list-style: none;
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li.active {
transition-delay: .3s;
z-index: 2;
opacity: 1;
transform: translateX(0px);
}

ul.nacc li p {
margin: 0;
}
</style>
<script>
// Acc
$(document).on("click", ".naccs .menu div", function() {
var numberIndex = $(this).index();

if (!$(this).is("active")) {
    $(".naccs .menu div").removeClass("active");
    $(".naccs ul li").removeClass("active");

    $(this).addClass("active");
    $(".naccs ul").find("li:eq(" + numberIndex + ")").addClass("active");

    var listItemHeight = $(".naccs ul")
    .find("li:eq(" + numberIndex + ")")
    .innerHeight();
    $(".naccs ul").height(listItemHeight + "px");
}
});

</script>

<body>
<div class="naccs">
  <div class="grid">
   <div class="gc gc--1-of-3">
    <div class="menu">
     <div class="active"><span class="light"></span><span>Beer</span></div>
     <div><span class="light"></span><span>Wine</span></div>
     <div><span class="light"></span><span>Lemonade</span></div>
    </div>
   </div>
   <div class="gc gc--2-of-3">
    <ul class="nacc">
     <li class="active">
      <div>
       <p>Beer is the world's oldest[1][2][3] and most widely consumed[4] alcoholic drink; it is the third most popular drink overall, after water and tea.[5] The production of beer is called brewing, which involves the fermentation of sugars, mainly derived
        from cereal grain starches—most commonly from malted barley, although wheat, maize (corn), and rice are widely used.[6] Most beer is flavoured with hops, which add bitterness and act as a natural preservative, though other flavourings such as
        herbs or fruit may occasionally be included. The fermentation process causes a natural carbonation effect, although this is often removed during processing, and replaced with forced carbonation.[7] Some of humanity's earliest known writings refer
        to the production and distribution of beer: the Code of Hammurabi included laws regulating beer and beer parlours,[8] and "The Hymn to Ninkasi", a prayer to the Mesopotamian goddess of beer, served as both a prayer and as a method of remembering
        the recipe for beer in a culture with few literate people.[9][10]</p>
      </div>
     </li>
     <li>
      <div>
       <p>A vine (Latin vīnea "grapevine", "vineyard", from vīnum "wine") in the narrowest sense is the grapevine (Vitis), but more generally it can refer to any plant with a growth habit of trailing or scandent (that is, climbing) stems, lianas or runners.
        The word also can refer to such stems or runners themselves, for instance when used in wicker work.[1][2] In the United Kingdom, the term "vine" applies almost exclusively to the grapevine. The term "climber" is used for all climbing plants.[3]</p>
      </div>
     </li>
     <li>
      <div>
       <p>Lemonade is any of various sweetened beverages found around the world, all characterized by lemon flavor. Most lemonade varieties can be separated into two distinct types: cloudy and clear; each is known simply as "lemonade" (or a cognate) in countries
        where dominant.[1] Cloudy lemonade, generally found in North America and India, is a traditionally homemade drink made with lemon juice, water, and sweetener such as cane sugar or honey.[2] Found in the United Kingdom, Ireland, South Africa, Australia,
        and New Zealand, clear lemonade is a lemon flavoured carbonated soft drink. Not to be confused with Sprite a lemon-lime flavored, soft drink.</p>
      </div>
     </li>
    </ul>
   </div>
  </div>
</div>
</body>

[/html]

[html]
<style>
* { margin: 0; padding: 0; }
body {
  background:
    url(http://imgsrc.hubblesite.org/hu/db/imag … ge_web.jpg);
}
.b-nav {
  overflow: hidden;
  position: relative;
  margin: 3em auto 0;
  width: 28em; height: 10em;
}
.b-menu {
  width: 0; height: 0;
  list-style: none;
}
.b-menu li {
  overflow: hidden;
  position: absolute;
  width: 12em; height: 12em;
}
.b-menu li:nth-child(-n+3) {
  top: 0.66em; left: -5.68em;
  transform-origin: 100% 100%;
}
.b-menu li:nth-child(n+4) {
  right: -5.69em; bottom: 0.66em;
  transform-origin: 0 0;
}
.b-menu li:first-child {
  transform: skewY(67.5deg);
}
.b-menu li:nth-child(2) {
  transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:nth-child(3) {
  transform: rotate(45deg) skewY(67.5deg);
}
.b-menu li:nth-child(4) {
  transform: skewY(67.5deg);
}
.b-menu li:nth-child(5) {
  transform: rotate(22.5deg) skewY(67.5deg);
}
.b-menu li:last-child {
  transform: rotate(45deg) skewY(67.5deg);
}
.b-menu a, .b-menu li:after {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 .2em black, inset 0 0 .2em black;
  transform: skewY(-67.5deg) rotate(-11.25deg);
}
.b-menu a {
  width: 200%; height: 200%;
  opacity: .7;
  background: radial-gradient(transparent 57.3%,
    #c9c9c9 57.7%);
  color: #7a8092;
  font: 900 1em/2.5 sans-serif;
  text-align: center;
  text-decoration: none;
  transition: .5s;
}
.b-menu li:nth-child(n+4) a {
  top: -100%; left: -100%;
  line-height: 45.5;
}
.b-menu a:hover { opacity: 1; }
.b-menu li:after {
  top: 19%; left: 19%;
  width: 162%; height: 162%;
  content: '';
}
.b-menu li:nth-child(n+4):after {
  top: auto; right: 19%; bottom: 19%; left: auto;
}
.b-menu:before, .b-menu:after {
  position: absolute;
  width: 1em; height: 2.1em;
  opacity: .7;
  background: #c9c9c9;
  content: '';
}
.b-menu:before {
  top: 1.75em; left: 1.21em;
  border-radius: 100% 0 0 100%/ 50% 0 0 50%;
  transform: rotate(-22.5deg);
}
.b-menu:after {
  bottom: 1.75em; right: 1.21em;
  border-radius: 0 100% 100% 0/ 0 50% 50% 0;
  transform: rotate(-22.5deg);
}
</style>

<nav class='b-nav'>
  <ul class='b-menu'>
    <li><a href='#'>☁</a></li>
    <li><a href='#'>☀</a></li>
    <li><a href='#'>☃</a></li>
    <li><a href='#'>☂</a></li>
    <li><a href='#'>❆</a></li>
    <li><a href='#'>☾</a></li>
  </ul>
</nav>

[/html]