<div class="twitter-card">
    <div class="tc__backdrop"></div>
    <div class="tc__info">
      <div class="tc__interactions">
        <div class="tc__interactions-tool _left">
          <span class="tc-icon _gear" data-action="settings"></span>
        </div>
        <img src="http://s.drugoi.kz/image/2j472b2I320n/sample-avatar.png" alt="" class="tc-avatar">
        <div class="tc__interactions-tool _right">
          <span class="tc-icon _following" data-action="follow"></span>
        </div>
      </div>
      <div class="tc__author">
        <div class="tc__author-info">
          <h2 class="tc__author-info__name">Nikita Bayev</h2>
          <a target="_blank" href="https://twitter.com/bayevn" class="tc__author-info__link">@bayevn</a>
        </div>
        <div class="tc__author-description">Front-end developer (node.js, SASS, BEM) && DJ (house, deep, techno)</div>
      </div>
    </div>
  </div>
  <p class="inspired">
    Inspired by <a href="https://dribbble.com/shots/1823422-Twitter-Card-Concept-Sketch-Files-Included">Twitter Card Concept by Tobia Crivellari</a>
  </p>

$tc-width: (195px*2);
$border-radius: 4px;
$c-white: #FFF;
$c-text: #505050;
$c-grey: #9B9B9B;
$bxs: 0px 2px 5px 0px rgba(0,0,0,0.30);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  vertical-align: baseline;
  font: inherit;
  font-size: 100%;
}
html { height: 101%; } 
body { font-size: 62.5%; font-family: Arial, Tahoma, Verdana, sans-serif; line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

input { outline: none; }

table { border-spacing: 0; border-collapse: collapse; }
img { max-width: 100%; border: 0; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

* {
  box-sizing: border-box;
}

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  //background: #4E4E4E;
  background-image: radial-gradient(50% 100%, #686868 0%, #383838 100%);
  user-select: none;
  cursor: default;
}

.inspired {
  text-align: center;
  color: $c-white;
  font-size: 15px;
  a {
    color: $c-white;
  }
}
.twitter-card {
  margin: 30px auto;
  width: $tc-width;
  box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.20);
}

.tc__backdrop {
  width: 100%;
  height: (90px*2);
  border-radius: $border-radius $border-radius 0 0;
  background: transparent url(http://s.drugoi.kz/image/1u0d0z1g241H/sample-bkg.png) no-repeat center center;
  background-size: cover;
  
  &::after {
    display: block;
    width: 100%;
    height: (90px*2);
    background-image: linear-gradient(-179deg, rgba(0,0,0,0.00) 60%, rgba(0,0,0,0.90) 100%);
    content: '';
  }
}

.tc__info {
  position: relative;
  padding-bottom: 20px;
  width: 100%;
  border-radius: 0 0 $border-radius $border-radius;
  background: $c-white;
}

.tc__interactions {
  position: relative;
  top: -80px;
  margin-bottom: -80px;
}

.tc__interactions-tool {
  $position: 30px;
  
  position: absolute;
  top: 47px;
  width: (32px*2);
  height: (32px*2);
  border-radius: 50%;
  background: #FFFFFF no-repeat;
  box-shadow: $bxs;
  cursor: pointer;
  
  &._left {
    left: $position;
  }
  
  &._right {
    right: $position;
  }
  &:hover {
    background-color: #55ACEE;
    & > ._gear {
      background-position: -34px 0;
    }
    
    & > ._following {
      background-position: -33px 0;
    }
  }
}

.tc-icon {
  position: relative;
  top: 16px;
  display: block;
  margin: 0 auto;
  width: 32px;
  height: 32px;
  background: transparent no-repeat 0 0;

  &._gear {
    background-image: url(http://s.drugoi.kz/3u3h242T1V04/icon-gear.svg);
  }
  &._following {
    background-image: url(http://s.drugoi.kz/302V350X190M/icon-following.svg);
  }
}

.tc-avatar {
  display: block;
  margin: 0 auto;
  width: 124px;
  height: 124px;
  border-radius: 50%;
}

.tc__author {
  margin: 0 auto 15px;
  width: (149px*2);
  text-align: center;
}

.tc__author-info {
  margin-bottom: 25px;
}

.tc__author-info__name {
  margin-top: 20px;
  margin-bottom: 10px;
  color: $c-text;
  text-align: center;
  font-weight: bold;
  font-size: (1.439em*2);
}

.tc__author-info__link {
  color: $c-grey;
  font-size: (0.963em*2);

  &:hover {
    text-decoration: none;  
  }
}

.tc__author-description {
  color: $c-grey;
  font-size: (1.006em*2);
}
    

// follow me github.com/drugoi