<div class="cont">
  <div class="demo">
    <div class="login">
      <div class="login__check"></div>
      <div class="login__form">
        <p class="sr_hello"><span class="happymoji">
<svg id="Capa_1" enable-background="new 0 0 510 510" height="512" viewBox="0 0 510 510" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="lg1"><stop offset="0" stop-color="#ffe548"/><stop offset=".1758" stop-color="#ffde50"/><stop offset=".4446" stop-color="#ffca65"/><stop offset=".7709" stop-color="#ffaa87"/><stop offset="1" stop-color="#ff90a4"/></linearGradient><linearGradient id="SVGID_1_" gradientTransform="matrix(.706 .708 -.708 .706 -989.657 -180.861)" gradientUnits="userSpaceOnUse" x1="1053.46" x2="1308.866" xlink:href="#lg1" y1="-446.895" y2="-401.287"/><linearGradient id="lg2"><stop offset="0" stop-color="#fba5c2" stop-opacity="0"/><stop offset=".3857" stop-color="#fca0ba" stop-opacity=".386"/><stop offset=".9737" stop-color="#ff91a5" stop-opacity=".974"/><stop offset="1" stop-color="#ff90a4"/></linearGradient><linearGradient id="SVGID_2_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="189.058" x2="160.679" xlink:href="#lg2" y1="415.585" y2="516.266"/><linearGradient id="SVGID_3_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="217.65" x2="182.513" xlink:href="#lg2" y1="355.512" y2="482.546"/><linearGradient id="SVGID_4_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="241.013" x2="197.092" xlink:href="#lg2" y1="286.51" y2="431.112"/><linearGradient id="SVGID_5_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="266.058" x2="219.434" xlink:href="#lg1" y1="233.389" y2="338.801"/><linearGradient id="lg3"><stop offset="0" stop-color="#ffd00d" stop-opacity="0"/><stop offset="1" stop-color="#db722b"/></linearGradient><linearGradient id="SVGID_6_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="222.045" x2="287.927" xlink:href="#lg3" y1="313.063" y2="211.707"/><linearGradient id="SVGID_7_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="283.177" x2="241.621" xlink:href="#lg3" y1="268.552" y2="141.856"/><linearGradient id="SVGID_8_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="332.406" x2="298.958" y1="338.387" y2="283.654"><stop offset="0" stop-color="#a34a9e" stop-opacity="0"/><stop offset="1" stop-color="#343168"/></linearGradient><linearGradient id="lg4"><stop offset="0" stop-color="#a34a9e"/><stop offset="1" stop-color="#343168"/></linearGradient><linearGradient id="SVGID_9_" gradientTransform="matrix(.961 .276 -.276 .961 -374.279 -3.357)" gradientUnits="userSpaceOnUse" x1="816.741" x2="795.136" xlink:href="#lg4" y1="104.448" y2="23.715"/><linearGradient id="lg5"><stop offset="0" stop-color="#3fa9f5"/><stop offset="1" stop-color="#666ad6"/></linearGradient><linearGradient id="SVGID_10_" gradientTransform="matrix(.967 -.255 .255 .967 392.904 -310.331)" gradientUnits="userSpaceOnUse" x1="-360.316" x2="-344.596" xlink:href="#lg5" y1="299.54" y2="311.95"/><linearGradient id="SVGID_11_" gradientTransform="matrix(.611 -.791 .791 .611 1030.861 -459.27)" gradientUnits="userSpaceOnUse" x1="-1026.41" x2="-1010.69" xlink:href="#lg4" y1="-413.642" y2="-401.232"/><linearGradient id="lg6"><stop offset="0" stop-color="#ff4974"/><stop offset=".4497" stop-color="#fe4773"/><stop offset=".6292" stop-color="#fc406d"/><stop offset=".7605" stop-color="#f73464"/><stop offset=".8683" stop-color="#f12257"/><stop offset=".9606" stop-color="#e80c46"/><stop offset="1" stop-color="#e4003d"/></linearGradient><linearGradient id="SVGID_12_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="431.698" x2="383.723" xlink:href="#lg6" y1="392.08" y2="421.135"/><linearGradient id="lg7"><stop offset="0" stop-color="#c4f8b6"/><stop offset="1" stop-color="#3b8eac"/></linearGradient><linearGradient id="SVGID_13_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="440.233" x2="417.935" xlink:href="#lg7" y1="332.545" y2="396.738"/><radialGradient id="SVGID_14_" cx="172.969" cy="36.437" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" r="200.758" xlink:href="#lg6"/><linearGradient id="lg8"><stop offset="0" stop-color="#e4003d" stop-opacity="0"/><stop offset=".3434" stop-color="#cd0e2d" stop-opacity=".343"/><stop offset="1" stop-color="#972e07"/></linearGradient><linearGradient id="SVGID_15_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="316.226" x2="243.756" xlink:href="#lg8" y1="179.284" y2="127.085"/><linearGradient id="SVGID_16_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="206.325" x2="226.597" xlink:href="#lg8" y1="142.125" y2="160.876"/><linearGradient id="SVGID_17_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="272.384" x2="305.832" xlink:href="#lg5" y1="209.862" y2="254.459"/><linearGradient id="SVGID_18_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="466.217" x2="499.665" xlink:href="#lg5" y1="195.568" y2="240.165"/><linearGradient id="SVGID_19_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="375.15" x2="408.597" xlink:href="#lg4" y1="40.9" y2="85.497"/><linearGradient id="SVGID_20_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="376.38" x2="400.762" xlink:href="#lg7" y1="152.303" y2="184.813"/><linearGradient id="SVGID_21_" gradientTransform="matrix(1 .002 -.002 1 -2.433 .519)" gradientUnits="userSpaceOnUse" x1="407.748" x2="432.13" xlink:href="#lg1" y1="92.256" y2="124.766"/><path d="m375.307 393.752c-1.73 1.724-3.826 3.025-6.271 3.916l-2.467.741s-332.654 134.218-358.52 108.258c-25.866-25.961 109.562-358.124 109.562-358.124l.75-2.464c.9-2.442 2.209-4.533 3.939-6.257 20.693-20.618 94.111 19.508 163.976 89.628s109.724 143.685 89.031 164.302z" fill="url(#SVGID_1_)"/><path d="m354.611 403.178c-17.507 6.942-52.561 20.683-93.953 36.064-25.316 9.411-53.005 19.435-80.5 28.882-24.027 8.257-47.91 16.089-69.917 22.688-15.12-12.707-30.146-26.489-44.867-41.263s-28.447-29.851-41.099-45.017c6.679-21.982 14.598-45.838 22.943-69.834 9.547-27.461 19.672-55.113 29.175-80.394 15.532-41.336 29.401-76.339 36.406-93.821 44.634 24.204 92.329 59.999 137.239 105.073 44.911 45.075 80.532 92.9 104.573 137.622z" fill="url(#SVGID_2_)"/><path d="m375.305 393.749c-1.726 1.73-3.827 3.024-6.271 3.921l-2.464.735s-4.301 1.735-11.959 4.772c-17.507 6.942-52.561 20.683-93.953 36.064-25.316 9.411-53.005 19.435-80.5 28.882-23.898-18.024-47.851-38.846-71.06-62.14s-43.943-47.323-61.881-71.286c9.547-27.461 19.672-55.113 29.175-80.394 15.532-41.336 29.401-76.339 36.406-93.821 3.065-7.647 4.816-11.941 4.816-11.941l.744-2.462c.907-2.441 2.208-4.537 3.944-6.257 20.694-20.619 94.105 19.51 163.975 89.624 69.861 70.127 109.722 143.684 89.028 164.303z" fill="url(#SVGID_3_)"/><path d="m375.305 393.749c-1.726 1.73-3.827 3.024-6.271 3.921l-2.464.735s-4.301 1.735-11.959 4.772c-17.507 6.942-52.561 20.683-93.953 36.064-33.691-22.188-68.203-50.306-101.205-83.429s-60.995-67.737-83.06-101.508c15.532-41.336 29.401-76.339 36.406-93.821 3.065-7.647 4.816-11.941 4.816-11.941l.744-2.462c.907-2.441 2.208-4.537 3.944-6.257 20.694-20.619 94.105 19.51 163.975 89.624 69.86 70.126 109.721 143.683 89.027 164.302z" fill="url(#SVGID_4_)"/><path d="m375.304 393.755c-20.697 20.622-94.114-19.504-163.979-89.625s-109.725-143.682-89.028-164.305 94.114 19.504 163.979 89.625 109.725 143.683 89.028 164.305z" fill="url(#SVGID_5_)"/><path d="m362.405 374.853c-15.29 15.235-77.215-22.125-138.312-83.445s-98.231-123.38-82.941-138.615 77.215 22.125 138.312 83.445 98.232 123.38 82.941 138.615z" fill="url(#SVGID_6_)"/><path d="m375.307 393.752c20.693-20.618-19.165-94.181-89.031-164.301-40.967-41.116-83.15-71.911-115.214-86.202 1.252 2.304 2.649 4.588 4.21 6.84 2.537 3.66 5.507 6.996 8.851 10.004l17.741 17.864c-2.045.928-3.924 1.662-5.504 2.219-2.829.997-4.485 3.923-3.893 6.863l6.278 31.184c.555 2.757 2.489 4.851 4.906 5.766l170.324 170.945c.465-.368.91-.761 1.332-1.182z" fill="url(#SVGID_7_)"/><path d="m262.055 296.866 17.422 20.827 81.157 81.453c6.203-.175 11.187-1.918 14.671-5.39 18.086-18.021-10.071-76.467-64.083-137.717-16.831 7.029-32.876 16.23-47.693 27.543-4.186 3.194-4.853 9.245-1.474 13.284z" fill="url(#SVGID_8_)"/><path d="m279.477 317.693-17.422-20.827c-3.379-4.039-2.712-10.089 1.473-13.285 53.993-41.222 124.224-54.611 189.815-35.746 16.508 4.747 32.315 11.404 47.111 19.831 4.577 2.607 6.044 8.518 3.232 12.972l-14.494 22.961c-2.628 4.163-8.049 5.523-12.343 3.117-11.357-6.362-23.468-11.411-36.112-15.047-51.295-14.753-106.195-4.459-148.614 27.471-3.932 2.959-9.489 2.327-12.646-1.447z" fill="url(#SVGID_9_)"/><path d="m128.928 101.472-15.819-16.277c-7.17-7.378-9.329-19.254-5.142-28.284 4.861-10.485 16.527-13.558 25.923-6.829 8.093 5.796 12.065 17.194 9.46 27.147l-5.746 21.958c-1.015 3.88-5.88 5.162-8.676 2.285z" fill="url(#SVGID_10_)"/><path d="m100.947 119.148-22.462-3.264c-10.181-1.479-19.131-9.579-21.315-19.29-2.536-11.276 4.84-20.822 16.39-21.213 9.948-.337 20.044 6.278 24.045 15.757l8.827 20.911c1.561 3.695-1.516 7.676-5.485 7.099z" fill="url(#SVGID_11_)"/><path d="m401.689 380.249 22.605-2.046c10.246-.927 20.833 4.87 25.214 13.808 5.087 10.377.132 21.376-11.011 24.442-9.598 2.64-20.954-1.448-27.049-9.737l-13.445-18.287c-2.375-3.232-.309-7.819 3.686-8.18z" fill="url(#SVGID_12_)"/><path d="m405.567 347.38 16.675-15.399c7.558-6.98 19.485-8.835 28.406-4.42 10.358 5.127 13.133 16.867 6.166 26.089-6 7.943-17.496 11.623-27.379 8.766l-21.805-6.304c-3.852-1.114-5.009-6.011-2.063-8.732z" fill="url(#SVGID_13_)"/><path d="m208.759 224.124c-4.423 1.426-9.097-1.344-10.014-5.9l-6.278-31.184c-.592-2.941 1.064-5.866 3.893-6.863 3.306-1.165 7.9-3.082 12.649-6.002-14.343-4.735-26.014-12.945-33.736-24.085-14.558-21.003-15.699-44.677-3.054-63.328 12.513-18.456 35.634-27.46 57.539-22.403 23.947 5.528 40.768 26.481 44.996 56.051.176 1.231.332 2.456.467 3.676 5.875-3.442 10.622-7.688 13.595-12.441 7.526-12.029 8.24-29.981 1.822-45.734-4.074-9.998-10.363-17.644-17.456-21.49-3.164-1.715-4.85-5.274-4.002-8.771l7.192-29.657c1.102-4.542 5.94-7.156 10.305-5.484 20.129 7.709 36.691 24.854 46.2 48.19 11.95 29.328 9.884 62.716-5.393 87.136-12.087 19.32-34.379 33.731-60.155 39.823-5.79 12.106-14.455 22.741-25.82 31.454-12.136 9.302-24.709 14.42-32.75 17.012zm8.94-115.523c-2.983-.005-6.186 1.48-7.728 3.756-2.304 3.398.758 8.821 2.788 11.75 2.784 4.017 9.266 7.014 17.431 8.356-.118-1.818-.314-3.683-.588-5.597-1.457-10.188-5.234-16.941-10.104-18.065-.579-.134-1.184-.199-1.799-.2z" fill="url(#SVGID_14_)"/><path d="m307.915 156.897-32.694-32.813s2.088 31.684-7.893 51.573c15.201-3.592 29.188-10.08 40.587-18.76z" fill="url(#SVGID_15_)"/><path d="m212.759 124.107c-1.487-2.146-3.519-5.627-3.599-8.673l-45.672-.083c.071 11.561 4.016 23.53 11.785 34.739 7.722 11.141 19.392 19.351 33.736 24.085 0 0 23.408-7.101 21.182-41.712-8.166-1.342-14.648-4.339-17.432-8.356z" fill="url(#SVGID_16_)"/><path d="m309.607 227.979c-10.602 6.909-19.649 16.01-26.499 26.656-1.541 2.394-5.096 2.388-6.628-.012-6.812-10.671-15.824-19.805-26.402-26.753-2.348-1.542-2.341-5.049.012-6.582 10.602-6.909 19.648-16.01 26.499-26.656 1.54-2.394 5.096-2.388 6.628.012 6.812 10.671 15.825 19.805 26.402 26.753 2.348 1.542 2.341 5.049-.012 6.582z" fill="url(#SVGID_17_)"/><path d="m503.466 214.039c-10.602 6.909-19.649 16.01-26.499 26.656-1.54 2.394-5.096 2.388-6.628-.012-6.812-10.671-15.824-19.805-26.402-26.753-2.348-1.542-2.341-5.049.012-6.582 10.602-6.909 19.648-16.01 26.499-26.656 1.54-2.394 5.096-2.388 6.628.012 6.812 10.671 15.825 19.805 26.402 26.753 2.348 1.541 2.341 5.048-.012 6.582z" fill="url(#SVGID_18_)"/><path d="m412.68 59.204c-10.602 6.909-19.649 16.01-26.499 26.656-1.541 2.394-5.096 2.388-6.628-.012-6.812-10.671-15.824-19.805-26.402-26.753-2.348-1.542-2.341-5.049.012-6.582 10.602-6.909 19.648-16.01 26.499-26.656 1.54-2.394 5.096-2.388 6.628.012 6.812 10.671 15.825 19.805 26.402 26.753 2.348 1.542 2.341 5.049-.012 6.582z" fill="url(#SVGID_19_)"/><path d="m402.855 165.974c-7.729 5.037-14.323 11.671-19.317 19.431-1.123 1.745-3.715 1.74-4.831-.009-4.965-7.779-11.535-14.437-19.246-19.502-1.711-1.124-1.707-3.68.009-4.798 7.729-5.037 14.323-11.671 19.317-19.431 1.123-1.745 3.715-1.741 4.831.009 4.966 7.779 11.536 14.437 19.246 19.502 1.712 1.124 1.707 3.68-.009 4.798z" fill="url(#SVGID_20_)"/><path d="m434.333 105.985c-7.729 5.037-14.323 11.671-19.317 19.431-1.123 1.745-3.715 1.74-4.831-.009-4.965-7.779-11.535-14.437-19.246-19.502-1.711-1.124-1.707-3.68.009-4.798 7.729-5.037 14.323-11.671 19.317-19.431 1.123-1.745 3.715-1.741 4.831.009 4.966 7.779 11.536 14.437 19.246 19.502 1.711 1.124 1.706 3.68-.009 4.798z" fill="url(#SVGID_21_)"/></svg></span><br>Happy<br>Birthday!</p>
        <button type="button" class="login__submit">OPEN</button>
      </div>
    </div>
    <div class="app">
      <div class="app__top">
        <?xml version="1.0" encoding="iso-8859-1"?><svg style="display: inline-block; width: 13rem; height: 13rem; overflow: visible; top: 40px; position: relative;" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480.166 480.166" style="enable-background:new 0 0 480.166 480.166;" xml:space="preserve"> <path style="fill:#FBB540;" d="M408.166,296.075v160h-336v-160"/> <path style="fill:#EA9D2D;" d="M72.166,296.075h336v40h-336V296.075z"/> <path style="fill:#FBB540;" d="M40.166,120.075h400v176h-400V120.075z"/> <g> <path style="fill:#DC4D41;" d="M184.166,296.075v-176h112v336h-112V296.075z"/> <path style="fill:#DC4D41;" d="M163.246,120.075c-28.198-0.031-51.049-22.882-51.08-51.08v-1.84 c0.005-28.211,22.878-51.076,51.089-51.071c20.881,0.004,39.657,12.716,47.415,32.103l28.76,71.888H163.246z"/> </g> <path style="fill:#F0F0F0;" d="M192.166,88.075h-28.92c-10.538,0-19.08-8.542-19.08-19.08c0,0,0,0,0,0v-1.84 c0-10.538,8.542-19.08,19.08-19.08l0,0c7.804,0.001,14.822,4.754,17.72,12L192.166,88.075z"/> <path style="fill:#DC4D41;" d="M317.086,120.075c28.198-0.031,51.049-22.882,51.08-51.08v-1.84 c-0.005-28.211-22.878-51.076-51.089-51.071c-20.881,0.004-39.657,12.716-47.415,32.103l-28.76,71.888H317.086z"/> <path style="fill:#F0F0F0;" d="M288.166,88.075h28.92c10.538,0,19.08-8.542,19.08-19.08v-1.84c0-10.538-8.542-19.08-19.08-19.08 c-7.804,0.001-14.822,4.754-17.72,12L288.166,88.075z"/> <g> <path style="fill:#F7BA61;" d="M440.166,0.075h16v16h-16V0.075z"/> <path style="fill:#F7BA61;" d="M416.166,24.075h16v16h-16V24.075z"/> <path style="fill:#F7BA61;" d="M440.166,48.075h16v16h-16V48.075z"/> <path style="fill:#F7BA61;" d="M464.166,24.075h16v16h-16V24.075z"/> <path style="fill:#F7BA61;" d="M32.166,0.075h16v16h-16V0.075z"/> <path style="fill:#F7BA61;" d="M8.166,24.075h16v16h-16V24.075z"/> <path style="fill:#F7BA61;" d="M32.166,48.075h16v16h-16V48.075z"/> <path style="fill:#F7BA61;" d="M56.166,24.075h16v16h-16V24.075z"/> <path style="fill:#F7BA61;" d="M448.166,432.075h16v16h-16V432.075z"/> <path style="fill:#F7BA61;" d="M432.166,448.075h16v16h-16V448.075z"/> <path style="fill:#F7BA61;" d="M448.166,464.075h16v16h-16V464.075z"/> <path style="fill:#F7BA61;" d="M464.166,448.075h16v16h-16V448.075z"/> <path style="fill:#F7BA61;" d="M15.654,432l15.996-0.336l0.336,15.996l-15.996,0.336L15.654,432z"/> <path style="fill:#F7BA61;" d="M0,448.325l15.996-0.336l0.336,15.996l-15.996,0.336L0,448.325z"/> <path style="fill:#F7BA61;" d="M16.337,464.092l16-0.336l0.336,16l-16,0.336L16.337,464.092z"/> <path style="fill:#F7BA61;" d="M32.166,448.075h16v16h-16V448.075z"/> </g> <g> <path style="fill:#C7463B;" d="M184.166,296.075h112v40h-112V296.075z"/> <path style="fill:#C7463B;" d="M360.318,96.075H250.502l-9.6,24h76.184C334.669,120.057,351.005,110.988,360.318,96.075 L360.318,96.075z"/> <path style="fill:#C7463B;" d="M120.014,96.075c9.308,14.904,25.628,23.971,43.2,24h76.184l-9.6-24H120.014z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
        <p style="script" class="sr_gift">Every year is a gift from God!</p>
      </div>
      <div class="app__bot">

      </div>
      <div class="app__logout">
        <svg class="app__logout-icon svg-icon" viewBox="0 0 20 20">
          <path d="M6,3 a8,8 0 1,0 8,0 M10,0 10,12"/>
        </svg>
      </div>
    </div>
  </div>
</div>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 768px) {
  html, body {
    font-size: 50%;
  }
span.happymoji {
    position: relative !important;
    top: -10px !important;
}
.login__form {
    height: 53% !important;
}  
.sr_gift {
    font-size: 20px !important;
    bottom: -40px !important;
    max-width: 170px !important;
}  
.sr_hello {
    font-size: 24px !important;
    bottom: 130px !important;
}
.demo {
    height: 40rem !important;
}
.login__submit {
    background: #60f;
    font-size: 12px;
    bottom: 60px;
}  
}
svg {
    display: inline-block;
    width: 10rem;
    height: 10rem;
    overflow: visible;
}
.svg-icon {
  cursor: pointer;
}
.svg-icon path {
  stroke: rgba(255, 255, 255, 0.9);
  fill: none;
  stroke-width: 1;
}
.sr_hello {
  font-size:48px;
  position:absolute;
  bottom:155px;
  left:0;
  right:0;
}
input, button {
  outline: none;
  border: none;
}

.cont {
  position: relative;
  height: 100%;
  background: linear-gradient(to right, #fc0 0%, #f30 100%);
  background-size: cover;
  overflow: auto;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.demo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15rem;
    margin-top: -24rem;
    width: 30rem;
    height: 45rem;
    overflow: hidden;
    box-shadow: 0 100px 100px #af230090;
    border-bottom: 5px solid #00000000;
}

.login {
  position: relative;
  height: 100%;
  background: white;
  -webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25), -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  -webkit-transform: scale(1);
          transform: scale(1);
}
.login.inactive {
  opacity: 0;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.login__form {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    padding: 3rem 2.5rem;
    text-align: center;
}
.login__row {
  height: 5rem;
  padding-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.login__icon {
  margin-bottom: -0.4rem;
  margin-right: 0.5rem;
}
.login__icon.name path {
  stroke-dasharray: 73.50196075439453;
  stroke-dashoffset: 73.50196075439453;
  -webkit-animation: animatePath 2s 0.5s forwards;
          animation: animatePath 2s 0.5s forwards;
}
.login__icon.pass path {
  stroke-dasharray: 92.10662841796875;
  stroke-dashoffset: 92.10662841796875;
  -webkit-animation: animatePath 2s 0.5s forwards;
          animation: animatePath 2s 0.5s forwards;
}
.login__input {
  display: inline-block;
  width: 22rem;
  height: 100%;
  padding-left: 1.5rem;
  font-size: 1.5rem;
  background: transparent;
  color: #FDFCFD;
}
.login__submit {
    position: absolute;
    height: 5rem;
    margin: 17rem 0 2.2rem;
    color: rgba(255, 255, 255, 0.8);
    background: #60f;
    box-shadow: 0 10px 10px #6600ff35;
    font-size: 1.2rem;
    color: white;
    border-radius: 3rem;
    cursor: pointer;
    overflow: hidden;
    transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
    left: 15%;
    right: 15%;
    bottom: 70px;
    margin: 0 auto;
    width: 70%;
    font-weight: bold;
}
.login__submit:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  margin-left: -1.5rem;
  margin-top: -1.5rem;
  width: 3rem;
  height: 3rem;
  border: 2px dotted #fff;
  border-radius: 50%;
  border-left: none;
  border-bottom: none;
  transition: opacity 0.1s 0.4s;
  opacity: 0;
}
.login__submit.processing {
  width: 5rem;
  font-size: 0;
}
.login__submit.processing:after {
  opacity: 0.5;
  animation: rotate 0.5s 0.4s infinite linear;
}
.login__submit.success {
  transition: transform 0.5s 0.1s ease-out, opacity 0.1s 0.5s, background-color 0.1s 0.5s;
  transform: scale(30);
  opacity: 0;
}
.login__submit.success:after {
  transition: opacity 0.1s 0s;
  opacity: 0;
  animation: none;
}
.login__signup {
  font-size: 1.2rem;
  color: #ABA8AE;
}
.login__signup a {
  color: #fff;
  cursor: pointer;
}

.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: none;
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  transform: scale(1.2);
}
.app.active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.app.active .app__user-photo {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.app.active .app__meeting {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.app.active .app__logout {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.app__top {
  position: relative;
  height: 28rem;
  background: #fff;
  padding: 6rem 1.5rem 2rem;
  text-align: center;
}
.app__bot {
  position: relative;
  height: 25rem;
  background: #fff;
}
.app__menu-btn {
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  width: 1.8rem;
  height: 1.7rem;
  cursor: pointer;
}
.app__menu-btn span, .app__menu-btn:before, .app__menu-btn:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}
.app__menu-btn span {
  top: 0.8rem;
}
.app__menu-btn:before {
  content: "";
  top: 0;
}
.app__menu-btn:after {
  content: "";
  bottom: 0;
}
.app__icon {
  position: absolute;
  top: 2rem;
}
.app__icon.search {
  right: 1.5rem;
  stroke-dasharray: 61.847137451171875;
  stroke-dashoffset: 61.847137451171875;
  -webkit-animation: animatePath 0.5s 0.5s forwards;
          animation: animatePath 0.5s 0.5s forwards;
}
.app__hello {
    font-size: 8rem;
    color: #000;
    font-weight: normal;
    z-index: 7;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
}
.sr_gift {
    font-size: 2.7rem;
    color: #000;
    font-weight: normal;
    z-index: 7;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -60px;
    max-width: 250px;
    margin: 0 auto;
    line-height: 1.5em;
}
.app__logout-icon path {
    stroke-width: 2px !important;
}
.app__logout {
    position: absolute;
    top: 14px;
    right: 40px;
    width: 4.6rem;
    height: 4.6rem;
    margin-right: -2.3rem;
    margin-bottom: -2.3rem;
    background: #f60;
    box-shadow: 0 12px 12px #ff660035;
    z-index: 777;
    color: #fff;
    font-size: 2rem;
    border-radius: 50%;
    cursor: pointer;
    transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s;
    transform: scale(0);
}
.app__logout.clicked {
  bottom: 50%;
  right: 50%;
  -webkit-transform: scale(30) !important;
          transform: scale(30) !important;
  opacity: 0.9;
}
.app__logout.clicked svg {
  opacity: 0;
}
.app__logout-icon {
  position: absolute;
  width: 3rem;
  height: 3rem;
  top: 50%;
  left: 50%;
  margin-left: -1.5rem;
  margin-top: -1.5rem;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
}
.app__logout-icon path {
  stroke-width: 4px;
  stroke-dasharray: 64.36235046386719;
  stroke-dashoffset: 64.36235046386719;
  -webkit-animation: animatePath 0.5s 0.5s forwards;
          animation: animatePath 0.5s 0.5s forwards;
}

.ripple {
  position: absolute;
  width: 15rem;
  height: 15rem;
  margin-left: -7.5rem;
  margin-top: -7.5rem;
  background: rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: animRipple 0.4s;
          animation: animRipple 0.4s;
  border-radius: 50%;
}

@-webkit-keyframes animRipple {
  to {
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
    opacity: 0;
  }
}

@keyframes animRipple {
  to {
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
    opacity: 0;
  }
}
@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes animatePath {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes animatePath {
  to {
    stroke-dashoffset: 0;
  }
}
$(document).ready(function() {
  
  var animating = false,
      submitPhase1 = 1100,
      submitPhase2 = 400,
      logoutPhase1 = 800,
      $login = $(".login"),
      $app = $(".app");
  
  function ripple(elem, e) {
    $(".ripple").remove();
    var elTop = elem.offset().top,
        elLeft = elem.offset().left,
        x = e.pageX - elLeft,
        y = e.pageY - elTop;
    var $ripple = $("<div class='ripple'></div>");
    $ripple.css({top: y, left: x});
    elem.append($ripple);
  };
  
  $(document).on("click", ".login__submit", function(e) {
    if (animating) return;
    animating = true;
    var that = this;
    ripple($(that), e);
    $(that).addClass("processing");
    setTimeout(function() {
      $(that).addClass("success");
      setTimeout(function() {
        $app.show();
        $app.css("top");
        $app.addClass("active");
      }, submitPhase2 - 70);
      setTimeout(function() {
        $login.show();
        $login.addClass("inactive");
        animating = false;
        $(that).removeClass("success processing");
      }, submitPhase2);
    }, submitPhase1);
  });
  
  $(document).on("click", ".app__logout", function(e) {
    if (animating) return;
    $(".ripple").remove();
    animating = true;
    var that = this;
    $(that).addClass("clicked");
    setTimeout(function() {
      $app.removeClass("active");
      $login.show();
      $login.css("top");
      $login.removeClass("inactive");
    }, logoutPhase1 - 120);
    setTimeout(function() {
      $app.hide();
      animating = false;
      $(that).removeClass("clicked");
    }, logoutPhase1);
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js