popup CSS code
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
body {
background:#ddd;
font-family:"Raleway";
}
.center {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.popup {
width:350px;
height:280px;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:center;
opacity:0;
top:-200%;
transform:translate(-50%,-50%) scale(0.5);
transition: opacity 300ms ease-in-out,
top 1000ms ease-in-out,
transform 1000ms ease-in-out;
}
.popup.active {
opacity:1;
top:50%;
transform:translate(-50%,-50%) scale(1);
transition: transform 300ms cubic-bezier(0.18,0.89,0.43,1.19);
}
.popup .icon {
margin:5px 0px;
width:50px;
height:50px;
border:2px solid #34f234;
text-align:center;
display:inline-block;
border-radius:50%;
line-height:60px;
}
.popup .icon i.fa {
font-size:30px;
color:#34f234;
}
.popup .title {
margin:5px 0px;
font-size:30px;
font-weight:600;
}
.popup .description {
color:#222;
font-size:15px;
padding:5px;
}
.popup .dismiss-btn {
margin-top:15px;
}
.popup .dismiss-btn button {
padding:10px 20px;
background:#111;
color:#f5f5f5;
border:2px solid #111;
font-size:16px;
font-weight:600;
outline:none;
border-radius:10px;
cursor:pointer;
transition: all 300ms ease-in-out;
}
.popup .dismiss-btn button:hover {
color:#111;
background:#f5f5f5;
}
.popup > div {
position:relative;
top:10px;
opacity:0;
}
.popup.active > div {
top:0px;
opacity:1;
}
.popup.active .icon {
transition: all 300ms ease-in-out 250ms;
}
.popup.active .title {
transition: all 300ms ease-in-out 300ms;
}
.popup.active .description {
transition: all 300ms ease-in-out 350ms;
}
.popup.active .dismiss-btn {
transition: all 300ms ease-in-out 400ms;
}