<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row text-center">
<div class="col-sm-6 col-sm-offset-3">
<br><br> <h2 style="color:#0fad00">Success</h2>
<div class="icon" >
<div class="success" >
<svg id="successAnimation" class="animated" xmlns="http://www.w3.org/2000/svg" width="100" height="100"
viewBox="0 0 70 70">
<path id="successAnimationResult" fill="#D8D8D8" d="M35,60 C21.1928813,60 10,48.8071187 10,35 C10,21.1928813 21.1928813,10 35,10 C48.8071187,10 60,21.1928813 60,35 C60,48.8071187 48.8071187,60 35,60 Z M23.6332378,33.2260427 L22.3667622,34.7739573 L34.1433655,44.40936 L47.776114,27.6305926 L46.223886,26.3694074 L33.8566345,41.59064 L23.6332378,33.2260427 Z"></path>
<circle id="successAnimationCircle" cx="35" cy="35" r="24" stroke="#979797" stroke-width="2"
stroke-linecap="round" fill="transparent"></circle>
<polyline id="successAnimationCheck" stroke="#979797" stroke-width="2" points="23 34 34 43 47 27"
fill="transparent"></polyline>
</svg>
</div>
</div>
<h3>Dear, Faisal khan</h3>
<p style="font-size:20px;color:#5C5C5C;">Thank you for verifying your Mobile No.We have sent you an email "faisalkhan.chat@gmail.com" with your details
Please go to your above email now and login.</p>
<a href="" class="btn btn-success"> Log in </a>
<br><br>
</div>
</div>
</div>
@-webkit-keyframes scaleAnimation {
0% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scaleAnimation {
0% {
opacity: 0;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes drawCircle {
0% {
stroke-dashoffset: 151px;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes drawCircle {
0% {
stroke-dashoffset: 151px;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes drawCheck {
0% {
stroke-dashoffset: 36px;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes drawCheck {
0% {
stroke-dashoffset: 36px;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#successAnimationCircle {
stroke-dasharray: 151px 151px;
stroke: #ffc600;
}
#successAnimationCheck {
stroke-dasharray: 36px 36px;
stroke: #ffc600;
}
#successAnimationResult {
fill: #ffc600;
opacity: 0;
}
#successAnimation.animated {
-webkit-animation: 1s ease-out 0s 1 both scaleAnimation;
animation: 1s ease-out 0s 1 both scaleAnimation;
}
#successAnimation.animated #successAnimationCircle {
-webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut;
}
#successAnimation.animated #successAnimationCheck {
-webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut;
}
#successAnimation.animated #successAnimationResult {
-webkit-animation: 0.3s linear 0.9s both fadeIn;
animation: 0.3s linear 0.9s both fadeIn;
}
