Cacher is the code snippet organizer for pro developers

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

.body {
  width: 100vw;
  height: 100vh;
  /*   background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%); */
  position: relative;
  /*   background-color: pink; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 375px;
  height: 670px;
  /* Rectangle: */
  background-image: linear-gradient(-101deg, #00b6e3 0%, #ea4c89 99%);
  position: relative;
  /*   left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); */
  overflow: hidden;
  -webkit-box-shadow: 4px 4px 25px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 4px 4px 25px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 4px 4px 25px 0px rgba(50, 50, 50, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball {
  position: absolute;
  left: 50%;
  top: -10%;
  transform: translate(-50%, -50%);
}

.welcome {
  font-family: "Kaushan Script", cursive;
  font-size: 20px;
  position: fixed;
  color: black;
  top: 10%;
  left: 50%;
  z-index: 1000;
  transform: translate(-50%, -50%);
}

.dribbble-title {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}

.main {
  /*   position: fixed;
  margin: auto;
  width: 100%;
  top: 40%; */
  /*   left: 50%; */
  /*   transform: translate(-50%, -50%); */
  /*   background-color: pink; */
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  /*   display-wrap: no-wrap; */
  /*   justify-content: center; */
  align-items: center;
}

.username,
.email,
.password,
.login-btn {
  position: relative;
  margin: 5px 0;
  /*   width: 200%; */
  /* Email Container: */
  opacity: 0.8;
  background-image: linear-gradient(
    -102deg,
    #00b6e3 0%,
    #827bb1 52%,
    #ea4c89 100%
  );
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
  border-radius: 100px;
  width: 250px;
  height: 40px;
  color: #fff;
  display: flex;
  /*   justify-content: center; */
  align-items: center;
  padding-left: 3px;
}

.username .icon-user,
.email .icon-email,
.password .icon-password {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  /* Email Circle: */
  background: linear-gradient(-102deg, #00b6e3 0%, #827bb1 52%, #ea4c89 100%);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-btn {
  text-align: center;
  /*   align-item-self: center; */
}

.create-account {
  text-align: center;
}

.social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 5px 0;
  /*   width: 200%; */
  /* Email Container: */
  opacity: 0.8;
  background-image: linear-gradient(
    -102deg,
    #00b6e3 0%,
    #827bb1 52%,
    #ea4c89 100%
  );
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
  border-radius: 100px;
  width: 100px;
  height: 40px;
  color: #fff;
  display: flex;
  /*   justify-content: center; */
  align-items: center;
  padding-left: 3px;
}

.facebook .icon-fb,
.twitter .icon-tweet {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  /* Email Circle: */
  background-image: linear-gradient(
    -102deg,
    #00b6e3 0%,
    #827bb1 52%,
    #ea4c89 100%
  );
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.10.8/jquery.tablesorter.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.10.8/jquery.tablesorter.widgets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.js"></script>

<div class="body">
  <div class="container">

    <div class="phone">
      <div class="ball">
        <div class="welcome">Welcome</div>
        <svg width="466px" height="466px" viewBox="0 0 466 466" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs>
        <filter x="-3.9%" y="-2.8%" width="107.8%" height="107.8%" filterUnits="objectBoundingBox" id="filter-1">
            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g id="Daily-UI-Challenge-#1---Sign-Up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-119.000000, -72.000000)">
            <g id="dribbble-ball-mark-copy" filter="url(#filter-1)" transform="translate(129.000000, 77.000000)">
                <circle id="Path" fill="#FFFFFF" cx="223" cy="223" r="223"></circle>
                <path d="M223,13 C107.020203,13 13,107.020203 13,223 C13,338.979797 107.020203,433 223,433 C338.979797,433 433,338.979797 433,223 C432.874415,107.072262 338.927738,13.1255854 223,13 Z M361.676008,109 C387.408477,140.881982 401.63793,180.757205 402,222 C396.103353,220.731633 337.091528,208.555306 277.694152,216.16551 C276.439225,213.09068 275.154058,209.969728 273.838652,206.802653 C270.141908,197.947143 266.150332,189.160816 262,180.512857 C327.883687,153.185306 357.797829,114.188776 361.676008,109 Z M222.73322,45.0000852 C266.336768,44.9570837 308.432232,61.1960938 341,90.6234187 C337.782781,95.2225451 310.957519,131.877582 247.5194,156 C227.635183,119.2511 205.415068,83.8549686 181,50.0361286 C194.666572,46.6920382 208.675101,45.0015969 222.73322,45.0000852 L222.73322,45.0000852 Z M146.408304,61 C170.454787,94.4621237 192.684227,129.197502 213,165.055152 C158.800409,179.294056 103.031723,186.666558 47,187 C58.6433293,131.740139 95.4254864,85.1187639 146.408304,61 L146.408304,61 Z M45.0002207,222.230676 C45.0002207,220.394928 45.0002207,218.536232 45.0002207,216.700483 C52.8828885,216.861111 140.30259,217.985507 230.380401,191 C235.536216,201.119565 240.485798,211.399758 245,221.657005 C242.616868,222.330113 240.249012,223.049114 237.896433,223.81401 C144.862622,253.92029 95.3668013,336.001208 91.2421495,343 C61.4104119,309.876218 44.9304348,266.835719 45.0002207,222.230676 Z M221.401467,403.999907 C181.752991,404.040645 143.234814,390.644815 112,365.952326 C115.215027,359.313458 151.282191,288.826994 251.808373,253.412068 L252.985707,253 C269.906253,297.229434 282.634813,342.98353 291,389.646217 C268.996137,399.130515 245.321234,404.013121 221.401467,403.999907 L221.401467,403.999907 Z M289,243.89527 C345.892041,234.878633 395.865714,249.624829 402,251.565118 C393.983351,300.60118 365.84982,344.177755 324.260612,371.977173 C316.228605,328.379141 304.43184,285.520514 289,243.89527 Z" id="Shape" fill="#EA4C89" fill-rule="nonzero"></path>
            </g>
        </g>
    </g>
</svg>
      </div>
      <div class="dribbble-title">
        <svg width="177px" height="43px" viewBox="0 0 177 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Daily-UI-Challenge-#1---Sign-Up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Sign-In" transform="translate(-101.000000, -182.000000)" fill="#FFFFFF">
            <g id="dribbble-logo" transform="translate(101.000000, 182.000000)">
                <path d="M54.0881842,17.2984462 C55.5724508,17.299207 56.9109925,16.4107156 57.479527,15.0473554 C58.0480614,13.6839952 57.7345984,12.1143217 56.6853339,11.0704148 C55.6360693,10.0265078 54.0576881,9.71399681 52.686331,10.2786337 C51.314974,10.8432707 50.4207721,12.1738329 50.4207719,13.6497599 C50.4207716,15.6641395 52.0624224,17.2974079 54.0881842,17.2984462 L54.0881842,17.2984462 Z M175.137378,29.7641642 C174.579417,29.3729648 174.148179,29.3090188 173.790705,30.0669675 C167.630436,43.3338918 157.248577,36.713595 158.281277,37.2966325 C160.583104,36.2490458 166.639346,31.4192384 165.723911,24.7500416 C165.167842,20.6744214 161.64985,18.8670052 157.916238,19.5139887 C151.398496,20.6424484 149.000209,27.6332561 150.222049,33.8228575 C150.439633,34.7894889 150.767056,35.7283808 151.198008,36.6214375 C143.832921,42.5778239 140.906935,31.2894655 140.575942,29.9409562 C140.562702,29.8694871 146.263362,25.1450025 147.84835,13.8867364 C149.510885,2.08680969 145.724315,-0.0610252381 141.852632,0.00668234281 C134.689924,0.130812908 132.755029,15.0114346 135.353804,27.4150873 C134.451205,27.8157338 133.481339,28.0453568 132.494016,28.0921631 C131.321352,24.4265499 126.314833,21.2123205 125.004098,22.4498647 C121.724421,25.5493673 125.800374,31.6054342 128.667727,32.081268 C126.944667,42.6304853 116.173181,40.0181011 118.178058,26.8000767 C121.686593,20.3227182 124.353458,10.689434 123.878718,4.87410511 C123.710384,2.81466619 122.176464,0.0574630285 118.717105,0.19287819 C112.059399,0.454304683 111.34067,15.3405687 112.116141,25.9048321 C112.076422,25.6452863 111.7076,27.1875146 108.978319,27.9567479 C108.333354,24.3945768 102.564603,20.8098366 101.206583,22.5382607 C98.6645497,25.7562515 103.069605,31.4925882 105.155813,31.8931914 C103.432753,42.4424087 92.6612662,39.8300245 94.6661435,26.6120001 C98.1746787,20.1327608 100.849109,10.5013574 100.366804,4.68602849 C100.19847,2.62658957 98.6645497,-0.130613585 95.2051907,0.00480157668 C88.547485,0.26622807 87.8287554,15.152492 88.6042268,25.7167554 C88.5550506,25.4534482 88.1767719,27.0520994 85.3396814,27.8044059 C85.2451117,23.1833635 79.4555558,21.06374 78.06349,22.5382607 C75.5857644,25.1713333 78.6309081,30.5597282 81.4490847,31.8931914 C79.7260251,42.4424087 68.9545382,39.8300245 70.9594155,26.6120001 C74.4679507,20.1346415 77.1348158,10.5013574 76.660076,4.68602849 C76.4917419,2.62658957 74.9578217,-0.130613585 71.4984627,0.00480157668 C64.840757,0.26622807 64.3111668,15.901037 65.0847468,26.4653004 C62.8907302,35.8089465 55.5369917,47.4772196 56.4921455,24.1030581 C56.5867152,22.46303 56.6812848,21.8461387 55.8679856,21.2273667 C55.2513913,20.7496521 53.85176,20.9791055 53.0857455,20.9979132 C52.1551798,21.0355285 51.920647,21.5771892 51.7163765,22.3953224 C51.2378539,24.5093036 51.1489584,26.5574579 51.0827597,29.3541571 C51.0373662,30.6706934 50.9314482,31.2725386 50.4264461,33.0555049 C49.921444,34.8384712 47.0351772,38.0959582 45.4558635,37.5524167 C43.2637383,36.8001103 43.9824679,30.650005 44.3929003,26.4239235 C44.7352426,23.0836828 43.6363429,21.5828315 40.8314061,21.0374093 C39.187785,20.6969906 38.183455,20.7496521 36.4812007,20.211753 C34.8621677,19.7039461 34.4952374,16.6589857 31.0434439,17.6745994 C29.1520503,18.2388293 30.3682164,22.2091266 29.9086078,25.1581679 C27.6767633,39.6645171 23.0333918,40.0632395 20.8790945,33.0160088 C30.5800525,9.3898246 23.6859227,0.0762706899 19.6496886,0.0762706899 C15.4451205,0.0762706899 10.6409807,2.95572365 12.6761202,21.377828 C11.6869214,21.0900707 11.382407,20.9358479 10.2986384,20.9358479 C4.17241439,20.9358479 0,25.8596937 0,31.9345683 C0,38.0094429 4.17430578,42.9332887 10.2986384,42.9332887 C13.9149831,42.9332887 16.4532333,41.2989029 18.3767807,38.7692724 C19.6307747,40.5560003 21.1590207,42.9615002 23.9526092,42.8542965 C32.2747412,42.5326855 34.7013993,25.551248 34.9869997,24.5995804 C35.8778461,24.7349955 36.7195163,24.9945412 37.5422725,25.1299564 C38.9116415,25.3349599 39.0118854,25.8822629 38.9797317,27.2439375 C38.6165841,38.7956032 40.7595331,42.8392504 45.6223062,42.8392504 C48.3307819,42.8392504 50.7460916,40.1930124 52.410518,38.2990809 C53.6531636,40.8493998 55.6258872,42.7602582 58.2889695,42.8392504 C64.7197079,42.9972347 67.189868,32.7978399 66.9647921,34.140707 C66.7888925,35.193936 69.0453251,42.7828274 75.6784427,42.8091581 C83.8851997,42.8430119 85.4115544,33.8679959 85.5931282,32.3652637 C85.6158249,32.0662219 85.6252818,32.0981949 85.5931282,32.3652637 C85.5931282,32.3934752 85.5931282,32.4235675 85.5931282,32.4574213 C88.1994686,31.9759451 89.5423581,30.586059 89.5423581,30.586059 C89.5423581,30.586059 91.6342395,42.9483348 99.3776051,42.8110389 C107.425485,42.6662199 108.942383,34.5544755 109.14287,32.9708704 C109.16935,32.5947172 109.184481,32.6398556 109.14287,32.9708704 L109.14287,33.0178896 C112.23719,31.8894299 113.052381,30.7741356 113.052381,30.7741356 C113.052381,30.7741356 114.714916,42.8919118 122.887628,42.9991155 C130.177059,43.0931538 132.877969,35.6641275 132.893101,32.5646249 C134.122506,32.5777903 136.395962,31.8386492 136.343003,31.7972724 C136.343003,31.7972724 139.01365,42.391628 146.467633,42.9351694 C149.968602,43.1909536 152.593857,40.9772919 154.091841,39.9673205 C157.609833,42.7997543 169.323234,46.4183483 176.720474,33.9488688 C177.775872,32.1546179 175.530788,30.038756 175.137378,29.7641642 L175.137378,29.7641642 Z M10.0187122,38.8162916 C6.44397816,38.8162916 4.15539185,35.5305931 4.15539185,31.9872297 C4.15539185,28.4438663 6.25862158,25.1581679 9.82957279,25.1581679 C11.4372574,25.1581679 12.3318866,25.3349599 13.5839892,26.4182812 C13.8109564,27.3078836 14.4540303,29.3616802 14.7680016,30.2926595 C15.187891,31.5396074 15.6872189,32.6022403 16.1903296,33.7570307 C15.4659259,36.7229989 13.1092494,38.8162916 10.013038,38.8162916 L10.0187122,38.8162916 Z M18.7191229,26.5217233 C18.5715942,26.2866276 18.6018565,26.4314466 18.4354139,26.2076354 C17.7809917,24.4359537 16.5175407,20.4807025 16.3719034,15.9875522 C16.2073522,10.9094836 17.0584793,4.94933575 19.5702501,4.94933575 C21.2725044,4.95121652 23.0806767,17.0219736 18.7210143,26.5217233 L18.7191229,26.5217233 Z M69.030194,21.2273667 C68.6273271,18.2181409 68.6065218,4.76690144 71.8521533,5.13741237 C73.6546514,5.85962656 70.7267741,18.5453942 69.0415423,21.2217244 L69.030194,21.2273667 Z M92.7312478,21.2273667 C92.3283809,18.2181409 92.3075756,4.76690144 95.5532071,5.13741237 C97.3557053,5.85962656 94.4183709,18.5453942 92.7425961,21.2217244 L92.7312478,21.2273667 Z M116.243162,21.4154433 C115.840295,18.4062175 115.81949,4.95497805 119.065122,5.32548898 C120.86762,6.04582241 117.939742,18.7334708 116.254511,21.409801 L116.243162,21.4154433 Z M142.211997,4.35125212 C145.179594,4.04468724 145.049087,16.9316968 139.100654,25.0660104 C138.332749,22.1263729 137.163867,5.36122354 142.211997,4.35125212 Z M154.685738,32.0793873 C153.740041,27.2928375 156.198853,24.1481965 158.733321,23.8040163 C159.620384,23.6629588 160.906532,24.2347117 161.163761,25.3086292 C161.585542,27.3229297 161.103237,30.3095863 155.419599,34.1012109 C155.082156,33.4642469 154.835183,32.7838239 154.685738,32.0793873 Z" id="Shape"></path>
            </g>
        </g>
    </g>
</svg>
      </div>

      <main class="main">
        <div class="inputs">
          <div class="username">
            <div class="icon-user">
              <i class="fa fa-user"></i>
            </div>
            <span>Username</span>
          </div>
          <div class="email">
            <div class="icon-email">
              <i class="fa fa-envelope-o"></i>
            </div>
            <span>Email</span>
          </div>
          <div class="password">
            <div class="icon-password">
              <i class="fa fa-key"></i>
            </div>
            <span>Password</span>
          </div>
          <div class="login-btn">
            <p>Login</p>
          </div>
        </div>
        <div class="create-account">
          <p>Create An Account</p>
        </div>
        <div class="social">
          <div class="facebook">
            <div class="icon-fb">
              <i class="fa fa-facebook"></i>
            </div>
          </div>
          <div class="twitter">
            <div class="icon-tweet">
              <i class="fa fa-twitter"></i>
            </div>
          </div>
        </div>
        <div class="back-btn hidden"></div>
      </main>

    </div>
  </div>
</div>