<div class="popup"> <a href="#" class="close"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" width="10px" height="10px" viewBox="215.186 215.671 80.802 80.8"
    enable-background="new 215.186 215.671 80.802 80.8" xml:space="preserve">
        <polygon fill="#FFFFFF" points="280.486,296.466 255.586,271.566 230.686,296.471 215.19,280.964 240.086,256.066 215.186,231.17 
  230.69,215.674 255.586,240.566 280.475,215.671 295.985,231.169 271.089,256.064 295.987,280.96 "
        />
       </svg></a>

    <div class="valid">
        <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px" y="0px" width="15px" height="15px" viewBox="222.744 227.408 67.744 58.526"
        enable-background="new 222.744 227.408 67.744 58.526" xml:space="preserve">
            <path fill="#39BA6F" d="M250.062,285.934c-9.435-11.111-15.731-18.195-27.318-28.935l5.793-5.357
  c6.778,3.28,11.076,5.774,18.693,11.204c14.32-16.25,23.783-24.495,41.372-35.438l1.886,4.335
  C275.983,244.402,265.359,258.502,250.062,285.934z" />
        </svg>
    </div>
     <h1>Welcome!</h1>

    <p>You've successfully signed into iAnswer 2.0!</p>
    <div class="bottom-popup"><a class="start" href="#">START</a>

    </div>
</div>
body {
    background:#000000;
}
.popup {
     position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background:#FF7391;
    height:200px;
    width:330px;
    border-radius:7px;
    border:1px solid #e5e5e5;
    font-family:'helvetica neue';
}

.popup:hover{zoom:1.3;}
.valid {
    height:30px;
    width:30px;
    background:#fff;
    margin:0 auto;
    margin-top:30px;
    border-radius:5px;
}
#Layer_2 {
    margin:7px;
}
h1 {
    color:white;
    font-family:helvetica;
    font-size:.9em;
    text-align:center;
    font-weight:bold;
    line-height:10px;
    margin-top:26px;
}
p {
    color:white;
    font-family:helvetica;
    font-size:.75em;
    text-align:center;
    line-height:1px;
    text-shadow: 0px 1px 1px #4CB572;
}
.bottom-popup {
    width:100%;
    background:#fff;
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    margin-top:32px;
    padding:30px 0 30px 0;
}
a.start {
    margin:-12px 39% 0 0;
    border-radius:40px;
    background:#FF7391;
    padding:6px 20px 6px 20px;
    font-family:'helvetica';
    color:white;
    font-weight:bold;
    text-decoration:none;
    font-size:.10em;
    float:right;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
a.start:hover {
    border-radius:5px;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
#Layer_1 {
    float:right;
    margin:10px;
}
$(document).ready(function () {
    $('a.close').click(function (event) {
        event.preventDefault();
        $('.popup').hide("slow");
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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