[html]
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1091 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  display: inline-block;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  min-height: 310px;
  width: 100%;
  overflow: hidden;
  text-align: center;
  background: #000000;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.snip1091 * {
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

figure.snip1091 img {
  opacity: 0.25;
  max-width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

figure.snip1091 figcaption {
  position: absolute;
  top: 50%;
  left: 30px;
  right: 30px;
  -webkit-transform: rotate(0deg) translateY(-50%) scale(1);
  transform: rotate(0deg) translateY(-50%) scale(1);
  -webkit-transform-origin: center 0;
  transform-origin: center 0;
}

figure.snip1091 figcaption h2 {
  top: 50%;
  letter-spacing: -1px;
  color: #ffffff;
  text-transform: uppercase;
  padding: 10px 0;
  margin: 0;
  font-weight: 400;
}

figure.snip1091 figcaption h2 span {
  font-weight: 800;
}

figure.snip1091 figcaption:before,
figure.snip1091 figcaption:after {
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 2px;
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

figure.snip1091 figcaption:before {
  left: 0;
  top: 0;
}

figure.snip1091 figcaption:after {
  bottom: 0;
  right: 0;
}

figure.snip1091.blue {
  background: #091b27;
}

figure.snip1091.red {
  background: #2e0e0a;
}

figure.snip1091.yellow {
  background: #4f3204;
}

figure.snip1091.green {
  background: #061c10;
}

figure.snip1091.navy {
  background: #000000;
}

figure.snip1091 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}

figure.snip1091:hover img,
figure.snip1091.hover img {
  opacity: 1;
}

figure.snip1091:hover figcaption,
figure.snip1091.hover figcaption {
  -webkit-transform: rotate(-45deg) translateY(-50%) scale(0.9);
  transform: rotate(-45deg) translateY(-50%) scale(0.9);
}

figure.snip1091:hover figcaption:before,
figure.snip1091.hover figcaption:before,
figure.snip1091:hover figcaption:after,
figure.snip1091.hover figcaption:after {
  width: 200%;
}

</style>

<figure class="snip1091 red"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample6.jpg" alt="sq-sample6"/>
  <figcaption>
    <h2>Lizbeth  <span>Kent</span></h2>
  </figcaption><a href="#"></a>
</figure>
<figure class="snip1091 green hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample14.jpg" alt="sq-sample14"/>
  <figcaption>
    <h2>Annalee   <span>Weis</span></h2>
  </figcaption><a href="#"></a>
</figure>
<figure class="snip1091 navy"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample10.jpg" alt="sq-sample10"/>
  <figcaption>
    <h2>Carmen  <span>Glenn</span></h2>
  </figcaption><a href="#"></a>
</figure>
[/html]

[html]<style>
.buttons {
  display: flex;
  width: 380px;
  gap: 10px;
  --b: 5px;   /* the border thickness */
  --h: 1.8em; /* the height */
}

.buttons button {
  --_c: #88C100;
  flex: calc(1.25 + var(--_s,0));
  min-width: 0;
  font-size: 40px;
  font-weight: bold;
  height: var(--h);
  cursor: pointer;
  color: var(--_c);
  border: var(--b) solid var(--_c);
  background:
    conic-gradient(at calc(100% - 1.3*var(--b)) 0,var(--_c) 209deg, #0000 211deg)
    border-box;
  clip-path: polygon(0 0,100% 0,calc(100% - 0.577*var(--h)) 100%,0 100%);
  padding: 0 calc(0.288*var(--h)) 0 0;
  margin: 0 calc(-0.288*var(--h)) 0 0;
  box-sizing: border-box;
  transition: flex .4s;
}
.buttons button + button {
  --_c: #FF003C;
  flex: calc(.75 + var(--_s,0));
  background:
    conic-gradient(from -90deg at calc(1.3*var(--b)) 100%,var(--_c) 119deg, #0000 121deg)
    border-box;
  clip-path: polygon(calc(0.577*var(--h)) 0,100% 0,100% 100%,0 100%);
  margin: 0 0 0 calc(-0.288*var(--h));
  padding: 0 0 0 calc(0.288*var(--h));
}
.buttons button:focus-visible {
  outline-offset: calc(-2*var(--b));
  outline: calc(var(--b)/2) solid #000;
  background: none;
  clip-path: none;
  margin: 0;
  padding: 0;
}
.buttons button:focus-visible + button {
  background: none;
  clip-path: none;
  margin: 0;
  padding: 0;
}
.buttons button:has(+ button:focus-visible) {
  background: none;
  clip-path: none;
  margin: 0;
  padding: 0;
}
button:hover,
button:active:not(:focus-visible) {
  --_s: .75;
}
button:active {
  box-shadow: inset 0 0 0 100vmax var(--_c);
  color: #fff;
}

</style>

<div class="buttons">
  <button>Yes</button>
  <button>No</button>
</div>

[/html]

[html]
<style>
body{
  display:flex;
  margin:0;
  padding:0;
  min-height: 100vh;
  background: #444;
  justify-content: center;
  align-items: center;
  font-family: arial;
}

.container{
  width: 1000px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
 
}

.container .card{
  position: relative;
}

.container .card .face{
  width:300px;
  height: 200px;
  transition:.4s;
 
}

.container .card .face.face1{
  position: relative;
  background: #333;
  display: flex;
  justify-content: center;
  align-content:center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
}

.container .card:hover .face.face1{
  transform: translateY(0);
  box-shadow:
    inset 0 0 60px whitesmoke,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
   
}

.container .card .face.face1 .content{
  opacity: .2;
  transition:  0.5s;
  text-align: center;
 
   
 
 

}

.container .card:hover .face.face1 .content{
  opacity: 1;

}

.container .card .face.face1 .content i{
  font-size: 3em;
  color: white;
  display: inline-block;
   
}

.container .card .face.face1 .content h3{
  font-size: 1em;
  color: white;
  text-align: center;
 

}

.container .card .face.face1 .content a{
   transition: .5s;
}

.container .card .face.face2{
   position: relative;
   background: whitesmoke;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0,0,0,.8);
  transform: translateY(-100px);
}

.container .card:hover .face.face2{
    transform: translateY(0);

}

.container .card .face.face2 .content p, a{
  font-size: 10pt;
  margin: 0 ;
  padding: 0;
  color:#333;
}

.container .card .face.face2 .content a{
  text-decoration:none;
  color: black;
  box-sizing: border-box;
  outline : 1px dashed #333;
  padding: 10px;
  margin: 15px 0 0;
  display: inline-block;
}

.container .card .face.face2 .content a:hover{
  background: #333 ;
  color: whitesmoke;
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

</style>
<!DOCTYPE html>
<html>
<head>
<title>Card Effect</title>
</head>
<body>
     <script src="https://kit.fontawesome.com/95a02bd20d.js"></script>

  <div class="container">
     <div class="card">
       <div class="face face1">
         <div class="content">
            <i class="fab fa-windows"></i>           
           <h3>Windows</h3>
         </div>
       </div>
       <div class="face face2">
         <div class="content">
           <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur alias corporis?</p>
           <a href="#" type="button">Read More</a>
         </div>
       </div>
    </div>
   
    <div class="card">
       <div class="face face1">
         <div class="content">
      <i class="fab fa-android"></i>               <h3>Android</h3>
         </div>
       </div>
       <div class="face face2">
         <div class="content">
           <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur alias corporis?</p>
           <a href="#" type="button">Read More</a>
         </div>
       </div>
    </div>
   
   
    <div class="card">
       <div class="face face1">
         <div class="content">
           <i class="fab fa-apple"></i>
            <h3>Apple</h3>
         </div>
       </div>
       <div class="face face2">
         <div class="content">
           <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ab repudiandae, explicabo voluptate et hic cum ratione a. Officia delectus illum perferendis maiores quia molestias vitae fugiat aspernatur alias corporis?</p>
           <a href="#" type="button">Read More</a>
         </div>
       </div>
    </div>
   
   
   
   
   
   
  </div>
 
</body>
</html>
[/html]

[html]<style>

.popover__title {
  font-size: 24px;
  line-height: 36px;
  text-decoration: none;
  color: rgb(228, 68, 68);
  text-align: center;
  padding: 15px 0;
}

.popover__wrapper {
  position: relative;
  margin-top: 1.5rem;
  display: inline-block;
}
.popover__content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -150px;
  transform: translate(0, 10px);
  background-color: #bfbfbf;
  padding: 1.5rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: auto;
}
.popover__content:before {
  position: absolute;
  z-index: -1;
  content: "";
  right: calc(50% - 10px);
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #bfbfbf transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}
.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transform: translate(0, -20px);
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message {
  text-align: center;
}

</style>
<container style="display: block;height: 500px;width: 500px;">
<div class="popover__wrapper">
  <a href="#">
    <h2 class="popover__title">Hover:me</h2>
  </a>
  <div class="popover__content">
    <p class="popover__message">Joseph Francis "Joey" Tribbiani, Jr.</p>
    <img alt="Joseph Francis Joey Tribbiani, Jr." src="https://media.giphy.com/media/11SIBu3s72Co8w/giphy.gif">
  </div>
</div>
</container>
[/html]

[html]
<script>
/* super inefficient right now, could be improved */
var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    cw = c.width = 400,
    ch = c.height = 300,
    rand = function(a,b){return ~~((Math.random()*(b-a+1))+a);},
    dToR = function(degrees){
        return degrees * (Math.PI / 180);
    },
    circle = {
      x: (cw / 2) + 5,
      y: (ch / 2) + 22,
      radius: 90,
      speed: 2,
      rotation: 0,
      angleStart: 270,
      angleEnd: 90,
      hue: 220,
      thickness: 18,
      blur: 25
    },
    particles = [],
    particleMax = 100,
    updateCircle = function(){
      if(circle.rotation < 360){
      circle.rotation += circle.speed;
      } else {
      circle.rotation = 0;
      }
    },
    renderCircle = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation));
      ctx.beginPath();
      ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true);
      ctx.lineWidth = circle.thickness;   
      ctx.strokeStyle = gradient1;
      ctx.stroke();
      ctx.restore();
    },
    renderCircleBorder = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation));
      ctx.beginPath();
      ctx.arc(0, 0, circle.radius + (circle.thickness/2), dToR(circle.angleStart), dToR(circle.angleEnd), true);
      ctx.lineWidth = 2; 
      ctx.strokeStyle = gradient2;
      ctx.stroke();
      ctx.restore();
    },
    renderCircleFlare = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation+185));
      ctx.scale(1,1);
      ctx.beginPath();
      ctx.arc(0, circle.radius, 30, 0, Math.PI *2, false);
      ctx.closePath();
      var gradient3 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 30);     
      gradient3.addColorStop(0, 'hsla(330, 50%, 50%, .35)');
      gradient3.addColorStop(1, 'hsla(330, 50%, 50%, 0)');
      ctx.fillStyle = gradient3;
      ctx.fill();     
      ctx.restore();
    },
    renderCircleFlare2 = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation+165));
      ctx.scale(1.5,1);
      ctx.beginPath();
      ctx.arc(0, circle.radius, 25, 0, Math.PI *2, false);
      ctx.closePath();
      var gradient4 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 25);
      gradient4.addColorStop(0, 'hsla(30, 100%, 50%, .2)');
      gradient4.addColorStop(1, 'hsla(30, 100%, 50%, 0)');
      ctx.fillStyle = gradient4;
      ctx.fill();     
      ctx.restore();
    },
    createParticles = function(){
      if(particles.length < particleMax){
        particles.push({
          x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness),
          y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness),
          vx: (rand(0, 100)-50)/1000,
          vy: (rand(0, 100)-50)/1000,
          radius: rand(1, 6)/2,
          alpha: rand(10, 20)/100
        });
      }
    },
    updateParticles = function(){
      var i = particles.length;
      while(i--){
      var p = particles[i];
        p.vx += (rand(0, 100)-50)/750;
        p.vy += (rand(0, 100)-50)/750;
        p.x += p.vx;
        p.y += p.vy;
        p.alpha -= .01;
       
        if(p.alpha < .02){
          particles.splice(i, 1)
        }
      }
    },
    renderParticles = function(){
      var i = particles.length;
      while(i--){
      var p = particles[i];
        ctx.beginPath();
        ctx.fillRect(p.x, p.y, p.radius, p.radius);
        ctx.closePath();
        ctx.fillStyle = 'hsla(0, 0%, 100%, '+p.alpha+')';
      }
    },
    clear = function(){
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillStyle = 'rgba(0, 0, 0, .1)';
      ctx.fillRect(0, 0, cw, ch);
      ctx.globalCompositeOperation = 'lighter';   
    }
    loop = function(){
      clear();
      updateCircle();
      renderCircle();
      renderCircleBorder();
      renderCircleFlare();
      renderCircleFlare2();
      createParticles();
      updateParticles();
      renderParticles();
    }

/* Append Canvas */
//document.body.appendChild(c);

/* Set Constant Properties */
ctx.shadowBlur = circle.blur;
ctx.shadowColor = 'hsla('+circle.hue+', 80%, 60%, 1)';
ctx.lineCap = 'round'
 
var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient1.addColorStop(0, 'hsla('+circle.hue+', 60%, 50%, .25)');
gradient1.addColorStop(1, 'hsla('+circle.hue+', 60%, 50%, 0)');
 
var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient2.addColorStop(0, 'hsla('+circle.hue+', 100%, 50%, 0)');
gradient2.addColorStop(.1, 'hsla('+circle.hue+', 100%, 100%, .7)');
gradient2.addColorStop(1, 'hsla('+circle.hue+', 100%, 50%, 0)');

/* Loop It, Loop It Good */
setInterval(loop, 16);

</script>

<canvas id="c" style="
    width: 200px;
"></canvas>

[/html]

[html]
  <style>
.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  margin: 20px;
  border: 1px solid #ccc;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: 100;
  letter-spacing: 2px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 40px;
  line-height: 1.4em;
}

.circle {
  border-radius: 50%;
  flex-grow: 0;
}

.top {
  box-shadow: 0 -5px 5px -5px #333;
}

.right {
  box-shadow: 5px 0 5px -5px #333;
}

.bottom {
  box-shadow: 0 5px 5px -5px #333;
}

.left {
  box-shadow: -5px 0 5px -5px #333;
}

.left-right {
  box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
}

.top-bottom {
  box-shadow: 0 -5px 5px -5px #333, 0 5px 5px -5px #333;
}

.top-right {
  box-shadow: 5px -5px 5px 0px #333;
}

.bottom-left {
  box-shadow: -5px 5px 5px 0px #333;
}

.all {
  box-shadow: 0 0 5px #333;
}

.inset {
  box-shadow: inset 0 0 20px #333;
}

.multiple {
  box-shadow:
    0 0 0 2px #000,
    0 0 0 3px #999,
    0 0 0 9px #fa0,
    0 0 0 10px #666,
    0 0 0 16px #fd0,
    0 0 0 18px #000;
}
  </style>
<script>

</script>

<div class="boxes">
  <div class="box top">Top Only</div>
  <div class="box right">Right Only</div>
  <div class="box bottom">Bottom Only</div>
  <div class="box left">Left Only</div>
  <div class="box top-bottom">Top and Bottom</div>
  <div class="box left-right">Left and Right</div>
  <div class="box all">All Sides</div>
  <div class="box inset">Inset</div>
  <div class="box circle top-right">Top Right</div>
  <div class="box circle bottom-left">Bottom Left</div>
  <div class="box multiple">Multiple</div>
</div>

[/html]

[html]
<style>
html, body {
  background: rgb(20,20,20);
  text-align: center;
  height: 100%;
  overflow: hidden;
}
.svg-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 164px; 
}
.shape {
  stroke-dasharray: 0 540;
  stroke-dashoffset: -474;
  stroke-width: 1px;
  stroke: #19f6e8;
  border-radius: 100%;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
  font-family: 'Roboto Condensed';
  font-size: 22px;
  line-height: 164px;
  letter-spacing: 8px;
  height:164px;
  color: #fff;
  top: 0;
  position: absolute;
  left:0;
  width:164px;
  text-align: center;
}
.svg-wrapper:hover .shape {
  stroke-width: 2px;
  stroke-dashoffset: 0;
  stroke-dasharray: 760;
  border-radius: 100%;
}
</style>
<div class="svg-wrapper">
  <svg height="166" width="166" xmlns="http://www.w3.org/2000/svg">
    <circle cx="83" cy="83" r="81" class="shape" height="166" width="166"></circle>
    <div class="text">kW</div>
  </svg>
</div>
[/html]

[html]

<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300,900");

container4 {
  background-color: #222;
  font-family: Lato, sans-serif;
  color: rgba(255, 255, 255, 0.75);
  text-align: center; display: block;
}

#c {
  display: block;
  width: 320px;
  height: 480px;
  margin: 1rem auto;
  border-bottom: 1px solid;
}

#score {
  font-size: 6rem;
  font-weight: 900;
}

#restart {
  margin: 1rem;
  border: 1px solid;
  border-radius: 0.5rem;
  padding: 0.25em 0.3em 0.25em 0.5em;
  font-family: inherit;
  font-size: 2rem;
  font-weight: 300;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  background: transparent;
  transition: background-color 0.2s ease;
 
  &:hover {
    background: rgba(255, 255, 255, 0.25);
  }
 
  &:focus {
    outline: 1px dotted;
    outline-offset: 2px;
  }
}
</style>
<script>
var TILE_SIZE = 64;
var TILE_PADDING = 8;

var canvas = document.getElementById('c');
var scoreCounter = document.getElementById('score');
var restartButton = document.getElementById('restart');
var ctx = canvas.getContext('2d');

// off-screen canvas for tile prerendering
var osc = document.createElement('canvas');
osc.width = 4 * TILE_SIZE;
osc.height = TILE_SIZE;

var canvasW = canvas.width;
var canvasH = canvas.height;
var boardW = Math.floor(canvasW / TILE_SIZE);
var boardH = Math.floor(canvasH / TILE_SIZE);

var clickable = true;
var score = 0;
var board = [];

function resetBoard() {
  score = 0;
  clickable = true;
  scoreCounter.innerHTML = score;

  for (var i = 0; i < boardW * boardH; ++i) {
    board[i] = 1 + Math.floor(Math.random() * 4);
  }
}

function prerenderTiles() {
  var ctx = osc.getContext('2d');
  ctx.lineWidth = 3;
  ctx.lineJoin = 'bevel';
  var colors = [
    'mediumslateblue',
    'cornflowerblue',
    'darkslateblue',
    'royalblue'
  ];

  for (var color = 0; color < 4; ++color) {
    ctx.strokeStyle = colors[color];
    ctx.fillStyle = 'rgba(127, 127, 255, 0.1)';
    ctx.save(); {
      ctx.translate(color * TILE_SIZE, 0);
      if (color > 1) ctx.translate(0, TILE_SIZE);
      if (color && color < 3) ctx.translate(TILE_SIZE, 0);
      ctx.rotate(color * Math.PI / 2);

      ctx.beginPath();
      ctx.moveTo(TILE_PADDING, TILE_PADDING);
      ctx.lineTo(TILE_SIZE - TILE_PADDING, 1.5 * TILE_PADDING);
      ctx.lineTo(TILE_SIZE - TILE_PADDING, TILE_SIZE / 2);
      ctx.lineTo(TILE_SIZE / 2, TILE_SIZE - TILE_PADDING);
      ctx.lineTo(1.5 * TILE_PADDING, TILE_SIZE - TILE_PADDING);
      ctx.closePath();
      ctx.stroke();
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(1.5 * TILE_PADDING, TILE_SIZE - TILE_PADDING);
      ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
      ctx.lineTo(TILE_PADDING, TILE_PADDING);
      ctx.lineTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
      ctx.lineTo(TILE_SIZE - TILE_PADDING, 1.5 * TILE_PADDING);
      ctx.moveTo(TILE_SIZE - TILE_PADDING, TILE_SIZE / 2);
      ctx.lineTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
      ctx.lineTo(TILE_SIZE * 0.75 - TILE_PADDING / 2, TILE_SIZE * 0.75 - TILE_PADDING / 2);
      ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
      ctx.lineTo(TILE_SIZE / 2, TILE_SIZE - TILE_PADDING);
      ctx.moveTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING);
      ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING);
      ctx.stroke();
    }
    ctx.restore();
  }
}

function drawTile(x, y, color) {
  if (!color) return;
  ctx.drawImage(osc, (color - 1) * TILE_SIZE, 0, TILE_SIZE, TILE_SIZE, x, y, TILE_SIZE, TILE_SIZE);
}

function drawBoard() {
  ctx.clearRect(0, 0, canvasW, canvasH);
  for (var i = 0; i < boardW; ++i) {
    for (var j = 0; j < boardH; ++j) {
      drawTile(i * TILE_SIZE, j * TILE_SIZE, board[j * boardW + i]);
    }
  }

  window.requestAnimationFrame(drawBoard); 
}

function handleClick(e) {
  var rect = canvas.getBoundingClientRect();
  var scaleX = canvasW / rect.width / TILE_SIZE;
  var scaleY = canvasH / rect.height / TILE_SIZE;
  var i = Math.floor((e.clientX - rect.left) * scaleX);
  var j = Math.floor((e.clientY - rect.top) * scaleY);
  if (clickable) floodRemove(i, j);
}

function shouldRemove(i, j, color, removed) {
  if (i < 0 || i >= boardW) return false;
  if (j < 0 || j >= boardH) return false;
  if (board[j * boardW + i] !== color) return false;
  return removed.indexOf(j * boardW + i) < 0;
}

function swapTiles(a, b) {
  var tmp = board[a];
  board[a] = board[b];
  board[b] = tmp;
}

function swapColumns(a, b) {
  for (var j = 0; j < boardH; ++j) {
    swapTiles(j * boardW + a, j * boardW + b);
  }
}

function compactColumn(i) {
  var sum = 0;
  for (var j = boardH - 1; j > 0; --j) {
    for (var k = 0; k < j; ++k) {
      if (board[k * boardW + i] && !board[(k + 1) * boardW + i]) {
        swapTiles(k * boardW + i, (k + 1) * boardW + i);
      }
    }
    sum += !!board[j * boardW + i];
  }
  return sum + !!board[i];
}

function compactColumns() {
  var columnSums = [];
  for (var i = 0; i < boardW; ++i) {
    columnSums.push(compactColumn(i));
  }
 
  for (var i = boardW - 1; i > 0; --i) {
    for (var k = 0; k < i; ++k) {
      if (!columnSums[k] && columnSums[k + 1]) {
        columnSums[k] = columnSums[k + 1];
        columnSums[k + 1] = 0;
        swapColumns(k, k + 1);
      }
    }
  }
}

function floodRemove(i, j) {
  var color = board[j * boardW + i];
  if (!color) return;
 
  var q = [[i, j]];
  var rq = [j * boardW + i];
 
  while (q.length) {
    var currentTile = q.shift();
    var ci = currentTile[0];
    var cj = currentTile[1];
    if (shouldRemove(ci - 1, cj, color, rq)) {
      q.push([ci - 1, cj]);
      rq.push(cj * boardW + ci - 1);
    }
    if (shouldRemove(ci + 1, cj, color, rq)) {
      q.push([ci + 1, cj]);
      rq.push(cj * boardW + ci + 1);
    }
    if (shouldRemove(ci, cj - 1, color, rq)) {
      q.push([ci, cj - 1]);
      rq.push((cj - 1) * boardW + ci);
    }
    if (shouldRemove(ci, cj + 1, color, rq)) {
      q.push([ci, cj + 1]);
      rq.push((cj + 1) * boardW + ci);
    }
  }
 
  if (rq.length <= 2) return;
 
  var scoreStep = rq.length - 2;
 
  clickable = false;
  (function removeTile() {
    if (rq.length) {
      var idx = rq.shift();
      score += scoreStep;
      scoreCounter.innerHTML = score;
      board[idx] = 0;
      setTimeout(removeTile, 50);
    } else {
      compactColumns();
      clickable = true;
    }
  })();
}

prerenderTiles();
resetBoard();

canvas.addEventListener('click', handleClick);
restartButton.addEventListener('click', resetBoard);
window.requestAnimationFrame(drawBoard);
</script>
<container4>
<canvas id="c" width="640" height="960"></canvas>
<div id="score">0</div>
<button id="restart" type="button">Play again</button>
</container4>
[/html]

[html]
<style>
.y-us-section {
    padding: 82px 0 82px;
}
.y-us-head {
    text-align: center;
    margin: 0 0 91px;
}
.y-us-title h2 {
    color: #000;
    font-size: 30px;
    letter-spacing: 0;
    line-height: 32px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.y-us-title > p {
    color: #777777;
    line-height: 22px;
}
.y-us-title-border {
    background: #ffae11 none repeat scroll 0 0;
    border-radius: 2px;
    display: inline-block;
    height: 3px;
    position: relative;
    width: 50px;
}
.service-3 .service-box {
    margin-bottom: 18px;
}
.service-3 .service-box .iconset {
    float: left;
    text-align: center;
    width: 25%;
}
.service-3 .service-box .iconset i {
    color: #000;
    font-size: 44px;
}
.service-3 .service-box .y-us-content {
    float: left;
    width: 75%;
}
service-3 .service-box .y-us-content h4 {
    color: #3a3a3a;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 22px;
    margin: 14px 0 12px;
    text-transform: uppercase;
}
.service-3 .service-box .y-us-content p {
    color: #777777;
    font-size: 13px;
    font-weight: 300;
    line-height: 24px;
}

.icon {
    color : #f4b841;
    padding:0px;
    font-size:40px;
    border: 1px solid #fdb801;
    border-radius: 100px;
    color: #fdb801;
    font-size: 28px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    width: 70px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shovon</title>
</head>
<body>
    <div class="y-us-section">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
                    <div class="y-us-head">
                        <div class="y-us-title">
                            <h2>Why choose us</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim </p>
                            <span class="y-us-title-border"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="y-us-content">
                        <div class="service-3">
                            <div class="service-box">
                                <div class="clearfix">
                                    <div class="iconset">
                                        <span class="glyphicon glyphicon-cog icon"></span>
                                    </div>
                                    <div class="y-us-content">
                                        <h4>safety first</h4>
                                        <p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
                                    </div>
                                </div>
                            </div>
                            <div class="service-box">
                                <div class="clearfix">
                                    <div class="iconset">
                                        <span class="glyphicon glyphicon-cog icon"></span>
                                    </div>
                                    <div class="y-us-content">
                                        <h4>CLEAN SURFACE</h4>
                                        <p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
                                    </div>
                                </div>
                            </div>
                            <div class="service-box">
                                <div class="clearfix">
                                    <div class="iconset">
                                        <span class="glyphicon glyphicon-cog icon"></span>
                                    </div>
                                    <div class="y-us-content">
                                        <h4>PROFESSIONAL</h4>
                                        <p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="why-choose-banner">
                        <img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="y-us-contentbox">
                        <div class="service-3">
                            <div class="service-box">
                                <div class="clearfix">
                                    <div class="iconset">
                                                <span class="glyphicon glyphicon-cog icon"></span>
                                            </div>
                                    <div class="y-us-content">
                                        <h4>sustainability</h4>
                                        <p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
                                    </div>
                                </div>
                            </div>
                            <div class="service-box">
                                <div class="clearfix">
                                    <div class="iconset">
                                        <span class="glyphicon glyphicon-cog icon"></span>
                                    </div>
                                    <div class="y-us-content">
                                        <h4>MODERN PAINTING</h4>
                                        <p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
                                    </div>
                                </div>
                            </div>
                            <div class="service-box">
                                <div class="clearfix">
                                    <div class="iconset">
                                        <span class="glyphicon glyphicon-cog icon"></span>
                                    </div>
                                    <div class="y-us-content">
                                        <h4>home decor</h4>
                                        <p>Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior del</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
</body>
</html>

[/html]

[html]
<style>
body {
    margin: 0;
    font-family: 'Share Tech', sans-serif;
    font-size:16px;
    color: #505050;
    background:#eee;
    overflow-x:hidden;
}

main {
    position:relative;
    padding:7vh 0 10vh;
    opacity:0;
    margin-top:-5px;
}

@media all and (min-width:670px) {
    main {
        width: 570px;
        margin-left: 10vw;
    }
}

@media all and (max-width:670px) {
    main { margin:0 15px }
}

.wave {
    width:100vw;
    height:150px;
    position:fixed;
    bottom:0;
    fill:#1b7477;
    z-index:-1;
}

#one {
    height:180px;
    fill:#8adbd3;
    width:120vw;
    left:-10vw;
}

h1, h2 {
    position:relative;
    display:flex;
    align-items:center;
    font-family:'Share Tech Mono', monospace;
    line-height: 1em;
    word-spacing:-.1em;
    letter-spacing:-.05em;
    transition:.2s all ease;
    margin-left:10px;
    margin-bottom:15px;
}

h1 span, h2 span {
    background:rgba(238,238,238,.7);
    padding:5px 7px;
    border-radius:10px;
    box-sizing:border-box;
}
h1, h2:active { color:#51b5ac; }
h1 { font-size:2.2em }
h2 { cursor:pointer }
p:first-child { margin-top:0 }
p:last-child { margin-bottom:0 }

.subtext {
    position:relative;
    border-radius:10px;
    background: white;
    border:1px solid;
    padding:13px;
    line-height:1.5em;
}

.subtext:not(#main) {
    display:none;
}

.subtext ul { margin:0; padding:0 25px; }

.subtext a {
    color:#0a9;
    text-decoration:underline;
    cursor:pointer;
    transition:.2s all ease;
}

.subtext a:hover, h2:hover {
    color:#777;
}

.subtext:before {
    content:'';
    position:absolute;
    width:1px;
    background:#bbb;
    left:1.2em;
    height:1.2em;
    top:calc(-1.2em - 1px);
}

.subtext.coll:before {
    left:1em;
    height:1.2em;
    top:calc(-1.2em - 1px);
}

.hex:hover {
    transform:rotate(30deg);
}

.hex, .hex:before, .hex:after {
    height:1em;
    width:.59em;
    border:solid;
    border-width:1px 0;
    border-radius:2px;
    box-sizing:border-box;
}

main .hex {
    position:relative;
    display:inline-block;
    margin-right:.5em;
    transition:.4s all ease;
}

.hex:before, .hex:after {
    content:'';
    position:absolute;
    margin-top:-1px;
    margin-left:;
/*     color:#ccc; */
}

.hex:before { transform:rotate(60deg); }
.hex:after { transform:rotate(-60deg); }

.hex, .hex:before, .hex:after, .subtext {
    border-color:#bbb;
}

.hex.moved {
    transform:rotate(30deg);
}

#hex-holder {
    position:fixed;
    height:100vh;
    width:100vw;
    top:0;
    z-index:-1;
    pointer-events:none;
    font-size:60px;
}

#hex-holder .hex {
    position:fixed;
}

#uno {
    border-radius:4px;
    border:none;
    background:#5b8b8c;
    transform:rotate(-12deg);
    bottom:30vh;
    left:30px;
}

#uno:before, #uno:after {
    margin-top:0;
}

#hex-holder .hex:before, #hex-holder .hex:after {
    border:inherit;
    border-radius:inherit;
    background:inherit;
}

#dos {
    border-color:#1B7477;
    border-radius:3px;
    border-width:5px 0;
    font-size:100px;
    bottom:12vh;
    right:-20px;
    transform:rotate(7deg);
}

#dos:before, #dos:after {
    margin-top:-5px;
}

#tres { display:none }

#bg {
/*     z-index:100; */
    position:fixed;
    top:0;
    height:100vh;
    width:100vw;
    box-sizing:border-box;
    border:5px solid black;
}
</style>
<script>
function draw() {
    var canvas = $('canvas')[0];
    if(canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'rgb(200, 0, 0)';
        ctx.fillRect(10, 10, 50, 50);
        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        ctx.fillRect(30, 30, 50, 50);
    }
}

$(document).ready(function() {
    // $(document).draw();
    $('#content').animate({
        opacity:1,
        marginTop:'0',
    }, 800);
    $('h2').click(function() {
        $(this).next('.subtext').slideToggle('fast');
        $(this).children('.hex').toggleClass('moved');
    })
});

</script>
<html>

<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Share+Tech|Share+Tech+Mono" rel="stylesheet" />
    <title>Designs by Laighlin</title>
</head>

<body onload="draw()">
    <canvas id="bg"></canvas>
    <main id="content">
        <h1>
            <div class="hex moved"></div><span>About the Dev</span></h1>
        <div class="subtext" id="main">
            <p>The name's Lin (which is short for Lindeun or Laighlin, depending on where you know me from). I'm a 24-year-old South Asian design student with a tech sort of background and a lot to say about the trends and direction of the contemporary design
                world.</p>
            <p>I wanted to be an engineer for most of my life. By the time I changed my mind about that, my liaison with the applied sciences had drastically altered my worldview already. This still informs much of my work and work ethic - design is no less
                of a science in my eyes than physics or computing. (In other words, I like design as long as I can be a nerd about it.)</p>
        </div>
        <h2>
            <div class="hex"></div><span>Skills</span></h2>
        <div class="subtext coll">
            A good grasp of object-oriented programming and computing-related math as a whole. Proficient in CSS3 and HTML5; making significant inroads into JavaScript and JQuery. Adobe Illustrator is both enjoyable for me and putty in my hands. <i>Putty.</i>            In addition to my knowledge of coding, I also speak five human languages and am in the process of learning a few more.
        </div>
        <h2>
            <div class="hex"></div><span>Hobbies & Interests</span></h2>
        <div class="subtext coll">
            Small indie coding projects (semi-professionally). Music (unprofessionally). Massively multiplayer online games (clumsily). Cooking (hungrily).
        </div>
        <h2>
            <div class="hex"></div><span>Currently Working On</span></h2>
        <div class="subtext coll">
            An accessibility app for Android, a couple of desktop themes for a blogging platform I casually use, and a photography project detailing the interplay of natural and artifical in urban environments.
        </div>
       
        <h2>
            <div class="hex"></div><span>Find Me</span></h2>
        <div class="subtext coll">
            <a>Twitter</a> | <a>Tumblr</a> | <a>Codepen</a> | <a>Behance</a>
        </div>
       
        <h2>
            <div class="hex"></div><span>Contact Me</span></h2>
        <div class="subtext coll">
            <ul>
                <li>Phone: +12 345 678 90</li>
                <li>E-mail: <a>lindeun@yahoo.com</a></li>
                <li>Discord: <a>Laighlin#0371</a></li>
            </ul>
        </div>
    </main>
    <svg viewBox="0 0 500 150" preserveAspectRatio="none" class="wave" id="one"><path d="M-13.36,88.98 C168.85,182.73 276.72,-73.84 506.31,79.10 L500.00,150.00 L0.00,150.00 Z"></path></svg>
    <svg viewBox="0 0 500 150" preserveAspectRatio="none" class="wave" id="two"><path d="M-13.36,88.98 C168.85,182.73 276.72,-73.84 506.31,79.10 L500.00,150.00 L0.00,150.00 Z"></path></svg>
    <div id="hex-holder">
        <div class="hex" id="uno"></div>
        <div class="hex" id="dos"></div>
        <div class="hex" id="tres"></div>
    </div>
</body>

</html>

[/html]

[html]
<style>
@import url(https://fonts.googleapis.com/css?family … 00,700,900);
@import url(https://fonts.googleapis.com/css?family … 00,400,700);

body{
  color:#4a5b65;
  font-family: "Roboto", Arial, sans-serif;
  font-size:14px;
  line-height: 20px;
}

*:focus{outline:none !important;}

/* TO DO LIST
================================================== */
.tdl-holder{
  margin:0px auto;
  width: 300px;
}

.tdl-holder h2{
  background-color: #de3f53;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color:#fff;
  font-family:"Roboto Condensed", Arial, sans-serif;
  font-size:16px;
  font-weight: 100;
  line-height: 56px;
  padding-left: 15px;
  margin:0;
}

.tdl-holder ul, .tdl-holder li {
  list-style: none;
  margin:0;
  padding:0;
}

.tdl-holder li{
  background-color: #262e4c;
  border-bottom:1px solid #1c2340;
  color: #b1b2c9;
}

.tdl-holder li span{
  margin-left:30px;
  -webkit-transition: all .2s linear;
     -moz-transition: all .2s linear;
       -o-transition: all .2s linear;
        transition: all .2s linear;
}

.tdl-holder label{
  cursor:pointer;
  display:block;
  line-height: 56px;
  padding: 0 15px;
  position: relative;
}

.tdl-holder label:hover{
  background-color: #2a3353;
  color:#8284a3;
}

.tdl-holder label a{
  background-color:#de3f53;
  border-radius:50%;
  color:#fff;
  display:none;
  float:right;
  font-weight: bold;
  line-height: normal;
  height:16px;
  margin-top: 20px;
  text-align: center;
  text-decoration: none;
  width:16px;
  -webkit-transition: all .2s linear;
     -moz-transition: all .2s linear;
       -o-transition: all .2s linear;
        transition: all .2s linear;
}

.tdl-holder label:hover a{
  display: block;
}

.tdl-holder label a:hover{ 
  background-color:#fff;
  color:#de3f53;
}

.tdl-holder input[type="checkbox"]{
  cursor: pointer;
  opacity: 0;
  position: absolute;
}

.tdl-holder input[type="checkbox"] + i{
  background-color: #404a6e;
  border-radius: 50%;
  display: block;
  height: 16px;
  position: absolute;
  top:20px;
  width: 16px; 
  z-index: 1;
}

.tdl-holder input[type="checkbox"]:checked + i::after{
  background-color: #6E6E96;
  border-radius: 50%;
  content: '';
  display: block;
  height:8px;
  left:4px;
  position: absolute;
  top:4px;
  width:8px; 
  z-index: 2;
}

.tdl-holder input[type="checkbox"]:checked ~ span{ 
  color: #586186;
  text-decoration: line-through;
}

.tdl-holder ::-webkit-input-placeholder {color: #464f72;} /* WebKit browsers */
.tdl-holder :-moz-placeholder       {color: #464f72;} /* Mozilla Firefox 4 to 18 */
.tdl-holder ::-moz-placeholder      {color: #464f72;} /* Mozilla Firefox 19+ */
.tdl-holder :-ms-input-placeholder    {color: #464f72;} /* Internet Explorer 10+ */

.tdl-holder li.remove{
  -webkit-animation:collapseItem 300ms ease;
      animation:collapseItem 300ms ease;
  -webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
      transform-origin: 50% 0%;

}

.tdl-holder li.remove span{
  color: #586186;
  text-decoration: line-through;
}

@keyframes collapseItem {
    0%    { -ms-transform: perspective(500px) rotateX(0deg);transform: perspective(500px) rotateX(0deg);  }
    100%  { -ms-transform: perspective(500px) rotateX(-90deg);transform: perspective(500px) rotateX(-90deg); }
}

@-webkit-keyframes collapseItem {
    0%    { -webkit-transform: perspective(500px) rotateX(0deg);  }
    100%  { -webkit-transform: perspective(500px) rotateX(-90deg);}
}
</style>

<script>
/* TO DO LIST */
  $(".tdl-new").bind('keypress', function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 13) {
      var v = $(this).val();
      var s = v.replace(/ +?/g, '');
      if (s == ""){
        return false;
      }else{
        $(".tdl-content ul").append("<li><label><input type='checkbox'><i></i><span>"+ v +"</span><a href='#'>–</a></label></li>");
        $(this).val("");
      }
    }
  });

  $(".tdl-content a").bind("click", function(){
    var _li = $(this).parent().parent("li");
        _li.addClass("remove").stop().delay(100).slideUp("fast", function(){
          _li.remove();
        });
    return false;
  });

  // for dynamically created a tags
  $(".tdl-content").on('click', "a", function(){
    var _li = $(this).parent().parent("li");
        _li.addClass("remove").stop().delay(100).slideUp("fast", function(){
          _li.remove();
        });
    return false;
  });
</script>
    <div class="tdl-holder">
      <h2>TO DO LIST</h2>
      <div class="tdl-content">
        <ul>
          <li><label><input type="checkbox"><i></i><span>get up</span><a href='#'>–</a></label></li>
          <li><label><input type="checkbox" checked><i></i><span>stand up</span><a href='#'>–</a></label></li>
          <li><label><input type="checkbox"><i></i><span>don't give up the fight.</span><a href='#'>–</a></label></li>
          <li><label><input type="checkbox" checked><i></i><span>save the world.</span><a href='#'>–</a></label></li>
          <li><label><input type="checkbox"><i></i><span>do something else</span><a href='#'>–</a></label></li>
        </ul>
      </div>
    </div>

[/html]

[html]
<style>
* {
  padding : 0;
  margin  : 0;
  border  : 0;
}

body {
  background-color : #3d332a;
  background-image : url('http://mojoimage.com/free-image-hosting-12/9690bg.jpg');
  padding-top     : 50px;
}

nav {
  width : 456px;
  margin: auto;
  position : relative;
}

menu:after , menu:before {
  top       : 0;
  width     : 60px;
  height    : 76px;
  background: #eae2d5;
  display : block;
  content : "";
  position: absolute;
}

menu:after {
  clear : both;
  right : -61px;
  border-right : 1px solid #857e74;
}

menu:before {
  left  : -55px;
  border-left : 1px solid #857e74;
}

.ribbon {
  position : absolute;
  top      : 76px;
  border-style : solid ;
  border-width : 13px;
}

.ribbon.left {
  left     : -55px;
  border-color : #857e74 #857e74 transparent transparent;
}

.ribbon.right {
  left         : 491px;
  border-color : #857e74 transparent transparent #857e74;
}

.left:after , .left:before {
  display : block;
  content : "";
  position: absolute;
  left     : -68px;
  border-style : solid;
  z-index : -2;
}

.left:after {
  top      : -68px;
  border-width : 58px 0 0 56px;
  border-color : #eae2d5 transparent transparent transparent;
}

.left:before {
  top      : -26px;
  border-width : 0 40px 38px 41px;
  border-color : transparent transparent #eae2d5 transparent;   
}

.right:after , .right:before {
  display : block;
  content : "";
  position: absolute;
  right    : -65px;
  border-style : solid;
  z-index : -2;
}

.right:before {
  top      : -25px;
  border-width : 0 40px 38px 38px;
  border-color : transparent transparent #eae2d5 transparent;   
}

.right:after {
  top      : -65px;
  border-width : 58px 56px 0 0;
  border-color : #eae2d5 transparent transparent transparent;
}

li {
  float       : left;
  position    : relative;
  margin-left : 33px;
  cursor      : pointer;
  background-color   : #eae2d5;
  list-style-type    : none;
  border-left        : 2px solid #d7cfc2;
  border-right       : 2px solid #d7cfc2;
  transition : margin .1s ,padding .1s ,border 1s;
}

li:first-child {
  margin-left : 20px;
}

li:before , li:after {
  content : "";
  display    : block;
  position   : absolute;
  top        : 0;
  width      : 20px;
  height     : 100%;
  background : inherit;
  transition : all .1s;
}

li:before {
  right : 100%;
}

li:after {
  left : 100%;
}
li:hover {
  margin-top        : -9px;
  box-shadow         : 0 4px 10px 0px #000;
  transition : margin .2s ,padding .2s;
}

li:hover:before , li:hover:after {
  height : 86%;
  background         : #d7cfc2;
  transition : all .2s;
}

li:hover:before {
  transform : rotate(-30deg) skew(-30deg) translate(1.5px,9px);
}

li:hover:after {
  transform : rotate(30deg) skew(30deg) translate(-1.5px,9px);
}

a {
  display : block;
  padding : 10.5px 15px;
  text-decoration : none;
  text-align      : center
}

a span {
  text-shadow : 1px 1px 1px #FFF;
  color       : #857e74;
  transition  : all .2s;
}

a span:first-child {
  font-size   : 33px;
  display     : block;
  margin-bottom: 4px;;
}

a span:last-child {
  text-transform : capitalize;
  font-family    : 'Georgia';
  font-size      : 11px;
  letter-spacing : 1px;
  font-style     : italic;
  color       : #6488ba;
}

li:hover span {
  transition : all .2s;
}

li:hover a span:first-child {
  color : #6488ba;
  text-shadow  : 1px 1px 1px #FFF , 0 0 1px #6488ba;
}

li:hover a span:last-child {
  color : #857e74;
}
</style>
<nav>
  <menu>
    <li>
      <a href="#">
        <span class="fa fa-twitter"></span>
        <span>twitter</span>
      </a>
    </li>
    <li id="at">
      <a href="#">
        <span class="fa fa-github"></span>
        <span>github</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-facebook"></span>
        <span>facebook</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="fa fa-google-plus"></span>
        <span>google+</span>
      </a>
    </li>
  </menu>
  <div class="ribbon left"></div>
  <div class="ribbon right"></div>
</nav>
[/html]

[html]
<style>
@import url(https://code.ionicframework.com/ionicon … ns.min.css);
figure.snip1113 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 250px;
  width: 100%;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
float: inline-start;
}

figure.snip1113 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

figure.snip1113 img {
  max-width: 65%;
  margin: 40px auto;
  display: block;
  position: relative;
  border: 3px solid #666666;
  padding: 15px 15px 85px 15px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

figure.snip1113 figcaption {
  position: absolute;
  height: 120px;
  bottom: 0px;
  left: 0;
  right: 0;
  display: block;
}

figure.snip1113 h3 {
  background-color: #ffffff;
  color: #000000;
  font-size: 1.7em;
  width: 100%;
  padding: 5px 12px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
}

figure.snip1113 h3 span {
  font-weight: 800;
}

figure.snip1113 h4 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -1px;
  opacity: 0.6;
  font-size: 1.1em;
}

figure.snip1113.blue img {
  border-color: #2472a4;
}

figure.snip1113.blue h3,
figure.snip1113.blue h4 {
  color: #2472a4;
}

figure.snip1113.red img {
  border-color: #ab3326;
}

figure.snip1113.red h3,
figure.snip1113.red h4 {
  color: #ab3326;
}

figure.snip1113.yellow img {
  border-color: #e08e0b;
}

figure.snip1113.yellow h3,
figure.snip1113.yellow h4 {
  color: #e08e0b;
}

figure.snip1113.green img {
  border-color: #229955;
}

figure.snip1113.green h3,
figure.snip1113.green h4 {
  color: #229955;
}

figure.snip1113.orange img {
  border-color: #d67118;
}

figure.snip1113.orange h3,
figure.snip1113.orange h4 {
  color: #d67118;
}

figure.snip1113.navy img {
  border-color: #2b3c4e;
}

figure.snip1113.navy h3,
figure.snip1113.navy h4 {
  color: #2b3c4e;
}

/* Demo purposes only */
html {
  height: 100%;
}
body {
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
  margin: 0;
  height: 100%;
}
</style>
<figure class="snip1113 red">
  <img src="https://i.pinimg.com/736x/9c/29/20/9c292092da949baf08fa209952ba6c3e.jpg" alt="pr-sample1" />
  <figcaption>
    <h3>Roberto <span>Alvarez</span></h3>
    <h4>
      Creator
    </h4>
  </figcaption>
</figure>
<figure class="snip1113 blue hover"><img src="https://i.pinimg.com/736x/9c/29/20/9c292092da949baf08fa209952ba6c3e.jpg" alt="pr-sample3" />
  <figcaption>
    <h3>Joshua <span>Franklin</span></h3>
    <h4>
      Creator
    </h4>
  </figcaption>
</figure>
<figure class="snip1113"><img src="https://i.pinimg.com/736x/9c/29/20/9c292092da949baf08fa209952ba6c3e.jpg" alt="pr-sample9" />
  <figcaption>
    <h3>Dalene <span>Atkinson</span></h3>
    <h4>
      Creator
    </h4>
  </figcaption>
</figure>
[/html]

[hideprofile][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]