Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
html {
display: grid;
min-height: 100%;
}
body {
display: grid;
overflow: hidden;
font-family: "Lato", sans-serif;
text-transform: uppercase;
text-align: center;
}
#container {
position: relative;
margin: auto;
overflow: hidden;
width: 700px;
height: 250px;
}
h1 {
font-size: 0.9em;
font-weight: 100;
letter-spacing: 3px;
padding-top: 5px;
color: #FCFCFC;
padding-bottom: 5px;
text-transform: uppercase;
}
.green {
color: #4ec07d;
}
.red {
color: #e96075;
}
.alert {
font-weight: 700;
letter-spacing: 5px;
}
p {
margin-top: -5px;
font-size: 0.5em;
font-weight: 100;
color: #5e5e5e;
letter-spacing: 1px;
}
button, .dot {
cursor: pointer;
}
#success-box {
position: absolute;
width: 35%;
height: 100%;
left: 12%;
background: linear-gradient(to bottom right, #B0DB7D 40%, #99DBB4 100%);
border-radius: 20px;
box-shadow: 5px 5px 20px #cbcdd3;
perspective: 40px;
}
#error-box {
position: absolute;
width: 35%;
height: 100%;
right: 12%;
background: linear-gradient(to bottom left, #EF8D9C 40%, #FFC39E 100%);
border-radius: 20px;
box-shadow: 5px 5px 20px #cbcdd3;
}
.dot {
width: 8px;
height: 8px;
background: #FCFCFC;
border-radius: 50%;
position: absolute;
top: 4%;
right: 6%;
}
.dot:hover {
background: #c9c9c9;
}
.two {
right: 12%;
opacity: .5;
}
.face {
position: absolute;
width: 22%;
height: 22%;
background: #FCFCFC;
border-radius: 50%;
border: 1px solid #777777;
top: 21%;
left: 37.5%;
z-index: 2;
animation: bounce 1s ease-in infinite;
}
.face2 {
position: absolute;
width: 22%;
height: 22%;
background: #FCFCFC;
border-radius: 50%;
border: 1px solid #777777;
top: 21%;
left: 37.5%;
z-index: 2;
animation: roll 3s ease-in-out infinite;
}
.eye {
position: absolute;
width: 5px;
height: 5px;
background: #777777;
border-radius: 50%;
top: 40%;
left: 20%;
}
.right {
left: 68%;
}
.mouth {
position: absolute;
top: 43%;
left: 41%;
width: 7px;
height: 7px;
border-radius: 50%;
}
.happy {
border: 2px solid;
border-color: transparent #777777 #777777 transparent;
transform: rotate(45deg);
}
.sad {
top: 49%;
border: 2px solid;
border-color: #777777 transparent transparent #777777;
transform: rotate(45deg);
}
.shadow {
position: absolute;
width: 21%;
height: 3%;
opacity: .5;
background: #777777;
left: 40%;
top: 43%;
border-radius: 50%;
z-index: 1;
}
.scale {
animation: scale 1s ease-in infinite;
}
.move {
animation: move 3s ease-in-out infinite;
}
.message {
position: absolute;
width: 100%;
text-align: center;
height: 40%;
top: 47%;
}
.button-box {
position: absolute;
background: #FCFCFC;
width: 50%;
height: 15%;
border-radius: 20px;
top: 73%;
left: 25%;
outline: 0;
border: none;
box-shadow: 2px 2px 10px rgba(119, 119, 119, 0.5);
transition: all .5s ease-in-out;
}
.button-box:hover {
background: #efefef;
transform: scale(1.05);
transition: all .3s ease-in-out;
}
@keyframes bounce {
50% {
transform: translateY(-10px);
}
}
@keyframes scale {
50% {
transform: scale(0.9);
}
}
@keyframes roll {
0% {
transform: rotate(0deg);
left: 25%;
}
50% {
left: 60%;
transform: rotate(168deg);
}
100% {
transform: rotate(0deg);
left: 25%;
}
}
@keyframes move {
0% {
left: 25%;
}
50% {
left: 60%;
}
100% {
left: 25%;
}
}
footer {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
font-size: 1em;
text-transform: uppercase;
padding: 10px;
font-family: "Lato", sans-serif;
}
footer p {
color: #EF8D9C;
letter-spacing: 2px;
}
footer a {
color: #B0DB7D;
text-decoration: none;
}
footer a:hover {
color: #FFC39E;
}
</style>
</head>
<body>
<div id="container">
<div id="success-box">
<div class="dot"></div>
<div class="dot two"></div>
<div class="face">
<div class="eye"></div>
<div class="eye right"></div>
<div class="mouth happy"></div>
</div>
<div class="shadow scale"></div>
<div class="message"><h1 class="alert">Success!</h1><p>Yay, everything is working.</p></div>
<button class="button-box"><h1 class="green">continue</h1></button>
</div>
<div id="error-box">
<div class="dot"></div>
<div class="dot two"></div>
<div class="face2">
<div class="eye"></div>
<div class="eye right"></div>
<div class="mouth sad"></div>
</div>
<div class="shadow move"></div>
<div class="message"><h1 class="alert">Failure!</h1><p>Oh no, something went wrong.</div>
<button class="button-box"><h1 class="red">try again</h1></button>
</div>
</div>
<script src="http://devanswer.com/codes/files/prefixfree.min.js"></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>
