Cacher is the code snippet organizer for pro developers

html, body, div, span, h1, h3, p, a, img, nav {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
}
/*! Copyright 2016 Daniel Lamb (http://daniellmb.com) MIT */
.cards {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -9.44rem 0 0 -15.4rem;
  perspective: 18.88rem;
  width: 30.81rem;
  max-width: 100%;
  height: 18.88rem;
  text-rendering: optimizeLegibility;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  .front {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
    width: 20.19rem;
    height: 12.44rem;
    padding: 0.4375rem 0.4375rem 0 0.4375rem;
    background-color: rgba(234,234,229,1);
    border-left: 0.125rem solid rgba(208,208,208,1);
    border-bottom: 0.125rem solid rgba(180,180,180,1);
    box-shadow: -5.688rem -1.125rem 6.25rem -2.875rem rgba(0,0,0,0.6);
    img {
      float: left;
      margin-right: 0.4375rem;
      border-radius: 50%;
      border: solid 0.125rem #fff;
      box-shadow: 0 0 0.0625rem #000;
      width: 4.688rem;
      height: 4.688rem;
      background-color: #7D7D7D;
    }
    h1 {
      font-size: 1.875rem;
      margin: 0 0 0.4375rem 0;
    }
    h3 {
      font-size: 0.875rem;
      font-weight: 700;
      margin: 0;
      color: #515151;
    }
    p {
      clear: left;
      margin: 1.25rem 0 0.75rem 0;
      padding: 0;
      font-size: 0.8125rem;
      color: #313131;
      font-weight: 100;
    }
    nav {
      text-align: center;
    }
  }
  .back {
    position: absolute;
    z-index: 2;
    top: -0.8rem;
    right: 5rem;
    width: 15.8rem;
    height: 9.51rem;
    padding: 0.3125rem;
    transform: 
      rotate(-23deg) 
      rotateX(26deg) 
      rotateY(10deg) 
      rotateZ(33deg) 
      skewX(-10deg) 
      // next 2 are to fix a webkit bug :( see https://goo.gl/iPsqsJ
      scale(1.435) 
      translate3d(-1rem,-4.063rem,-6.25rem);
    background-color: rgba(234,234,229,1);
    border-left: 0.125rem solid rgba(208,208,208,1);
    border-bottom: 0.125rem solid rgba(180,180,180,1);
    border-right: 0.0625rem solid rgba(208,208,208,0.5);
    box-shadow: -0.9375rem 3.75rem 3.75rem 0.125rem rgba(0,0,0,0.4);
    transition: top 0s, transform 0.2s, z-index 0.2s;
    &:hover {
      top: 2.5rem;
      z-index: 4;
      transform: scale(1.3);
      transition: top 0.4s, transform 0.2s, z-index 0.15s;
    }
    a {
      display: inline-block;
      border-radius: 50%;
      width: 3.125rem;
      height: 3.125rem;
      text-align: center;
      margin: 0.25rem;
      overflow: hidden;
      background-color: #000;
      svg {
        margin-top: 0.54rem;
        height: 2rem;
        path, polygon {
          fill: #fff;
        }
      }
      &.twitter {
        background-color: #7FAADD;
        svg {
          //width: 1.7rem;
        }
      }
      &.linkedin {
        background-color: #0077b5;
        svg {
          width: 1.65rem;
        }
      }
      &.googleplus {
        background-color: #d34836;
      }
      &.github {
        // defaults work :)
      }
      &.snapchat {
        background-color: #FFFC00;
        svg {
          width: 2rem;
        }
        path {
          stroke: #000;
          stroke-width: 5;
          stroke-miterlimit: 10;
        }
      }
      &.youtube {        
        background-color: #b31217;
        svg {
          width: 1.7rem;
        }
      }
      &.leanpub {
        svg {
          width: 2em;
        }
      }
      &.facebook {
        background-color: #3b5998;
      }
    }
    h5 {
      margin: 0.25rem 0.5rem;
      font-weight: 100;
      font-size: 1rem;
    }
  }
  .stack {
    position: absolute;
    z-index: 2;
    height: 3.75rem;
    width: 3.75rem;
    bottom: 7.9em;
    right: 19.9rem;
    background: rgba(234,234,229,1) repeating-linear-gradient(180deg, rgba(234,234,229,1), rgba(0,0,0,0.35) 2%, rgba(0,0,0,.2) 5%);
    transform: rotate(10deg) skew(20deg);
  }
}
a {
  color: #268bd2;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
html { font-size: 16px; }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  html { font-size: 14px; }
}

// Nope :)

<div class="cards" itemscope itemtype="http://schema.org/Person">
  <div class="front">
    <img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1506269178">
    <h1>
      <a href="https://tr.gravatar.com/tebm" title="HARUN PEHLİVAN ">
        <span itemprop="name">HARUN PEHLİVAN</span>
      </a>
    </h1>
    <h3>
      <span itemprop="jobTitle"> HP IT GROUP FOUNDER,CEO BLOGGER</span>
    </h3>
    <p itemprop="description"><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a>
      <span itemprop="address" itemscope itemtype="http://harunpehlivantebimtebitagem.business.site/"><span itemprop="addressLocality">CEOSTUDENT</span>,
      <span itemprop="harunpehlivantebimtebitagem">HP IT GROUP </span></span>TEBİM 2008 TEBİTAGEM 2012</p>
    <nav role="HARUN PEHLİVAN">
      <a href="http://harunpehlivan.blogspot.com.tr">blog</a>;
      <a href="http://harunpehlivan.weebly.com" itemprop="email">E-BIOGRAPHY PORTAL</a>;
      <a href="mailto:trcmnhp@hotmail.com" itemprop="email">trcmnhp@hotmail.com</a>
    </nav>
    </p>
  </div>
  <div class="back">
    <a rel="me" itemprop="url" href="https://twitter.com/HTERCUMANP" title="Follow HARUN PEHLİVAN on Twitter" class="twitter">
      <svg viewBox="0 0 430.117 430.117">
        <path d="M381.384,198.639c24.157-1.993,40.543-12.975,46.849-27.876 c-8.714,5.353-35.764,11.189-50.703,5.631c-0.732-3.51-1.55-6.844-2.353-9.854c-11.383-41.798-50.357-75.472-91.194-71.404 c3.304-1.334,6.655-2.576,9.996-3.691c4.495-1.61,30.868-5.901,26.715-15.21c-3.5-8.188-35.722,6.188-41.789,8.067 c8.009-3.012,21.254-8.193,22.673-17.396c-12.27,1.683-24.315,7.484-33.622,15.919c3.36-3.617,5.909-8.025,6.45-12.769 C241.68,90.963,222.563,133.113,207.092,174c-12.148-11.773-22.915-21.044-32.574-26.192 c-27.097-14.531-59.496-29.692-110.355-48.572c-1.561,16.827,8.322,39.201,36.8,54.08c-6.17-0.826-17.453,1.017-26.477,3.178 c3.675,19.277,15.677,35.159,48.169,42.839c-14.849,0.98-22.523,4.359-29.478,11.642c6.763,13.407,23.266,29.186,52.953,25.947 c-33.006,14.226-13.458,40.571,13.399,36.642C113.713,320.887,41.479,317.409,0,277.828 c108.299,147.572,343.716,87.274,378.799-54.866c26.285,0.224,41.737-9.105,51.318-19.39 C414.973,206.142,393.023,203.486,381.384,198.639z"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://linkedin.com/in/harun-pehlivan-0aa34252" title="Connect with HARUN PEHLİVAN on Linkedin" class="linkedin">
      <svg viewBox="0 0 430.117 430.117">
        <path d="M430.117,261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707 c-25.473,0-40.632,17.142-47.301,33.724c-2.432,5.928-3.058,14.179-3.058,22.477V420.56h-92.219c0,0,1.242-251.285,0-277.32h92.21 v39.309c-0.187,0.294-0.43,0.611-0.606,0.896h0.606v-0.896c12.251-18.869,34.13-45.824,83.102-45.824 C384.633,136.724,430.117,176.361,430.117,261.543z M52.183,9.558C20.635,9.558,0,30.251,0,57.463 c0,26.619,20.038,47.94,50.959,47.94h0.616c32.159,0,52.159-21.317,52.159-47.94C103.128,30.251,83.734,9.558,52.183,9.558z M5.477,420.56h92.184v-277.32H5.477V420.56z"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://plus.google.com/111320383727376607540" title="Circle HARUN PEHLİVAN on Google+" class="googleplus">
      <svg viewBox="0 0 491.858 491.858">
  			<path d="M377.472,224.957H201.319v58.718H308.79c-16.032,51.048-63.714,88.077-120.055,88.077 c-69.492,0-125.823-56.335-125.823-125.824c0-69.492,56.333-125.823,125.823-125.823c34.994,0,66.645,14.289,89.452,37.346 l42.622-46.328c-34.04-33.355-80.65-53.929-132.074-53.929C84.5,57.193,0,141.693,0,245.928s84.5,188.737,188.736,188.737 c91.307,0,171.248-64.844,188.737-150.989v-58.718L377.472,224.957L377.472,224.957z" />
  			<polygon points="491.858,224.857 455.827,224.857 455.827,188.826 424.941,188.826 424.941,224.857 388.91,224.857 388.91,255.74 424.941,255.74 424.941,291.772 455.827,291.772 455.827,255.74 491.858,255.74"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://github.com/harunpehlivan" title="Follow HARUN PEHLİVAN on GitHub" class="github">
      <svg viewBox="0 0 438.549 438.549">
      	<path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365 c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996 c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136 c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559 c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559 c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997 c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851 c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136 c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41 c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126 c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817 c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994 c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849 c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24 c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979 c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146 c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995 c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906 C438.536,184.851,428.728,148.168,409.132,114.573z"/>
      </svg>
    </a>
          <a rel="me" itemprop="url" href="https://www.xing.com/profile/HARUN_PEHLIVAN" title="Friend HARUN PEHLİVAN on xing" class="xing">
        <svg viewBox="5.715 10.5 381.828 358.772"><path d="M199 366.772a60.64 60.64 0 0 1-2.86-.076 22.09 22.09 0 0 1-1.888.076c-22.436 0-37.438-10.607-50.678-19.974-9.488-6.702-18.438-13.03-28.922-14.774-5.148-.854-10.27-1.287-15.22-1.287-8.917 0-15.964 1.383-21.108 2.39-3.166.616-5.896 1.147-8.007 1.147-2.21 0-4.896-.49-6.014-4.312-.888-3.014-1.523-5.934-2.138-8.746-1.535-7.026-2.65-11.315-5.28-11.723-28.14-4.342-44.768-10.738-48.08-18.484a7.182 7.182 0 0 1-.584-2.446 4.517 4.517 0 0 1 3.78-4.71c22.35-3.682 42.22-15.493 59.065-35.12 13.05-15.195 19.457-29.713 20.145-31.315.03-.07.064-.148.1-.218 3.247-6.588 3.893-12.28 1.926-16.916-3.626-8.55-15.635-12.36-23.58-14.882-1.976-.625-3.845-1.217-5.334-1.81-7.04-2.78-18.624-8.66-17.08-16.77 1.123-5.917 8.95-10.037 15.27-10.037 1.758 0 3.313.308 4.624.922 7.146 3.35 13.574 5.045 19.104 5.045 6.876 0 10.197-2.62 11-3.363-.197-3.668-.44-7.545-.674-11.213l-.005-.05c-1.613-25.674-3.626-57.626 4.547-75.95 24.463-54.846 76.34-59.11 91.65-59.11.408 0 6.674-.063 6.674-.063.283-.005.59-.01.908-.01 15.355 0 67.34 4.27 91.816 59.15 8.174 18.336 6.158 50.315 4.54 76.017l-.077 1.23c-.223 3.49-.426 6.793-.6 9.994.756.696 3.795 3.096 9.98 3.34 5.27-.2 11.327-1.89 17.997-5.015 2.06-.97 4.344-1.17 5.895-1.17 2.343 0 4.726.456 6.712 1.285l.11.04c5.66 2.01 9.366 6.025 9.446 10.244.07 3.932-2.852 9.81-17.225 15.484-1.47.583-3.35 1.18-5.334 1.808-7.95 2.523-19.95 6.332-23.577 14.878-1.973 4.636-1.324 10.326 1.924 16.912.037.07.066.146.102.22 1 2.346 25.204 57.536 79.21 66.434a4.525 4.525 0 0 1 3.777 4.71 7.28 7.28 0 0 1-.598 2.466c-3.29 7.703-19.917 14.09-48.065 18.438-2.643.408-3.756 4.68-5.277 11.668-.63 2.888-1.27 5.718-2.146 8.69-.82 2.798-2.64 4.165-5.568 4.165h-.44c-1.905 0-4.605-.347-8.01-1.013-5.948-1.158-12.622-2.236-21.108-2.236-4.947 0-10.068.435-15.225 1.288-10.472 1.744-19.42 8.062-28.892 14.758-13.264 9.378-28.272 19.986-50.708 19.986"/></svg>
      </a>
    <a rel="me" itemprop="url" href="https://www.youtube.com/c/harunpehlivan1" title="Watch HARUN PEHLİVAN on Youtube" class="youtube">
      <svg viewBox="0 0 90 90">
        <path d="M90,26.958C90,19.525,83.979,13.5,76.55,13.5h-63.1C6.021,13.5,0,19.525,0,26.958v36.084 C0,70.475,6.021,76.5,13.45,76.5h63.1C83.979,76.5,90,70.475,90,63.042V26.958z M36,60.225V26.33l25.702,16.947L36,60.225z"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://leanpub.com/u/harunpehlivantebimtebitagem" title="Read HARUN PEHLİVAN's books on Leanpub" class="leanpub">
      <svg viewBox="10.72 118.2 196.854 134.425">
        <path fill="#231F20" d="M192.721,130.325c-6.606-3.717-24.019-12.125-46.354-12.125c-20.055,0-31.47,6.165-37.22,10.125 c-5.75-3.959-17.165-10.125-37.22-10.125c-22.335,0-39.747,8.407-46.354,12.125l-14.852,122.3h0.443 c8.396,0,16.663-1.936,24.257-5.519c8.465-3.994,21.811-8.693,37.748-8.693c19.387,0,30.421,8.654,35.979,14.212 c5.558-5.558,16.593-14.212,35.979-14.212c15.937,0,29.282,4.699,37.748,8.693c7.594,3.583,15.859,5.519,24.257,5.519h0.442 L192.721,130.325z M182.432,232.831c-7.862-3.234-15.796-5.446-23.58-6.574c-4.573-0.662-9.192-0.998-13.727-0.998 c-12.892,0-24.54,3.214-34.622,9.555l-1.357,0.844l-1.35-0.84c-10.088-6.344-21.737-9.559-34.629-9.559 c-4.534,0-9.152,0.336-13.725,0.998c-7.785,1.127-15.719,3.339-23.581,6.574l-9.994,4.111L37.79,138.83l0.883-0.39 c10.05-4.441,22.945-7.093,34.495-7.093c14.306,0,26.401,4.556,35.979,13.546c9.578-8.991,21.673-13.546,35.979-13.546 c11.55,0,24.445,2.652,34.495,7.093l0.883,0.39l11.922,98.112L182.432,232.831z M148.927,221.94 c-1.271-0.05-2.539-0.077-3.802-0.077c-13.353,0-25.457,3.297-35.979,9.795c-10.527-6.5-22.629-9.795-35.979-9.795 c-4.697,0-9.478,0.348-14.212,1.034c-8.061,1.167-16.266,3.453-24.385,6.793l-4.632,1.905l10.989-90.431 c9.505-4.03,21.475-6.422,32.24-6.422c13.977,0,25.678,4.614,34.778,13.715l1.201,1.201l1.2-1.201 c8.768-8.768,19.955-13.358,33.26-13.684L148.927,221.94z"/>
      </svg>
    </a>
    <a rel="me" itemprop="url" href="https://facebook.com/100008152065270" title="Friend HARUN PEHLİVAN on Facebook" class="facebook">
      <svg viewBox="0 0 430.113 430.114">
        <path d="M158.081,83.3c0,10.839,0,59.218,0,59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805 c0,0,5.601-34.721,8.316-72.685c-7.784,0-67.784,0-67.784,0s0-42.127,0-49.511c0-7.4,9.717-17.354,19.321-17.354 c9.586,0,29.818,0,48.557,0c0-9.859,0-43.924,0-75.385c-25.016,0-53.476,0-66.021,0C155.878-0.004,158.081,72.48,158.081,83.3z"/>
      </svg>
    </a>
    <h5>Find, Follow, & Friend Me Online</h5>
  </div>
  <div class="stack"></div>
</div>