<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;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
border-radius-bottomright: 7px;
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;
transition: all .4s ease-out;
transition: all .4s ease-out;
transition: all .4s ease-out;
transition: all .4s ease-out;
transition: all .4s ease-out;
}
a.start:hover {
border-radius:5px;
transition: all .4s ease-out;
transition: all .4s ease-out;
transition: all .4s ease-out;
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");
});
});
This Pen doesn't use any external CSS resources.