Old school D3 from simpler times

All examples By author By category About

kyroskoh

Full window Github gist

Twitch Social Popup

<link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<div id="popup-container">
  <div class="popup twitter-pop" data-box="enableTwitter">
    <div class="left">
      <span class="twitter"></span>
    </div>
    <div class="right twitterUsername">
      <span data-name="twitterUsername"></span>
    </div>
  </div>
  <div class="popup facebook-pop" data-box="enableFacebook">
    <div class="left">
      <span class="facebook"></span>
    </div>
    <div class="right facebookUsername">
      <span data-name="facebookUsername"></span>
    </div>
  </div>
  <div class="popup instagram-pop" data-box="enableInstagram">
    <div class="left">
      <span class="instagram"></span>
    </div>
    <div class="right instagramUsername">
      <span data-name="instagramUsername"></span>
    </div>
  </div>
  <div class="popup youtube-pop" data-box="enableYoutube">
    <div class="left">
      <span class="youtube"></span>
    </div>
    <div class="right youtubeUsername">
      <span data-name="youtubeUsername"></span>
    </div>
  </div>
  <div class="popup tumblr-pop" data-box="enableTumblr">
    <div class="left">
      <span class="tumblr"></span>
    </div>
    <div class="right tumblrUsername">
      <span data-name="tumblrUsername"></span>
    </div>
  </div>
  <div class="popup twitch-pop" data-box="enableTwitch">
    <div class="left">
      <span class="twitch"></span>
    </div>
    <div class="right twitchUsername">
      <span data-name="twitchUsername"></span>
    </div>
  </div>
  <div class="popup paypal-pop" data-box="enablePaypal">
    <div class="left">
      <span class="paypal"></span>
    </div>
    <div class="right paypalUsername">
      <span data-name="paypalUsername"></span>
    </div>
  </div>
  <div class="popup patreon-pop" data-box="enablePatreon">
    <div class="left">
      <span class="patreon"></span>
    </div>
    <div class="right patreonUsername">
      <span data-name="patreonUsername"></span>
    </div>
  </div>
  <div class="popup snapchat-pop" data-box="enableSnapchat">
    <div class="left">
      <span class="snapchat"></span>
    </div>
    <div class="right snapchatUsername">
      <span data-name="snapchatUsername"></span>
    </div>
  </div>
  <div class="popup steam-pop" data-box="enableSteam">
    <div class="left">
      <span class="steam"></span>
    </div>
    <div class="right steamUsername">
      <span data-name="steamUsername"></span>
    </div>
  </div>
  <div class="popup xbox-pop" data-box="enableXbox">
    <div class="left">
      <span class="xbox"></span>
    </div>
    <div class="right xboxUsername">
      <span data-name="xboxUsername"></span>
    </div>
  </div>
  <div class="popup psn-pop" data-box="enablePsn">
    <div class="left">
      <span class="psn"></span>
    </div>
    <div class="right psnUsername">
      <span data-name="psnUsername"></span>
    </div>
  </div>
  <div class="popup origin-pop" data-box="enableOrigin">
    <div class="left">
      <span class="origin"></span>
    </div>
    <div class="right originUsername">
      <span data-name="originUsername"></span>
    </div>
  </div>
  <div class="popup uplay-pop" data-box="enableUplay">
    <div class="left">
      <span class="uplay"></span>
    </div>
    <div class="right uplayUsername">
      <span data-name="uplayUsername"></span>
    </div>
  </div>
  <div class="popup nintendo-pop" data-box="enableNintendo">
    <div class="left">
      <span class="nintendo"></span>
    </div>
    <div class="right nintendoUsername">
      <span data-name="nintendoUsername"></span>
    </div>
  </div>
  <div class="popup battlenet-pop" data-box="enableBattleNet">
    <div class="left">
      <span class="battlenet"></span>
    </div>
    <div class="right battlenetUsername">
      <span data-name="battlenetUsername"></span>
    </div>
  </div>
  <div class="popup deviantart-pop" data-box="enableDeviantArt">
    <div class="left">
      <span class="deviantart"></span>
    </div>
    <div class="right deviantartUsername">
      <span data-name="deviantartUsername"></span>
    </div>
  </div>
  <div class="popup reddit-pop" data-box="enableReddit">
    <div class="left">
      <span class="reddit"></span>
    </div>
    <div class="right redditUsername">
      <span data-name="redditUsername"></span>
    </div>
  </div>
  <div class="popup gamewisp-pop" data-box="enableGameWisp">
    <div class="left">
      <span class="gamewisp"></span>
    </div>
    <div class="right gamewispUsername">
      <span data-name="gamewispUsername"></span>
    </div>
  </div>
  <div class="popup playstv-pop" data-box="enablePlaysTv">
    <div class="left">
      <span class="playstv"></span>
    </div>
    <div class="right playstvUsername">
      <span data-name="playstvUsername"></span>
    </div>
  </div>
</div>