<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/lil_anubis/pen/MoQxGb?depth=everything&order=popularity&page=31&q=pack&show_forks=false" />
<style class="cp-pen-styles">@-webkit-keyframes design {
from {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,20,147,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
-webkit-filter: drop-shadow(0px 0px 1px deeppink);
filter: drop-shadow(0px 0px 1px deeppink);
}
50% {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="8" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,20,147,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
-webkit-filter: drop-shadow(0px 0px 8px deeppink);
filter: drop-shadow(0px 0px 8px deeppink);
}
to {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,20,147,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
-webkit-filter: drop-shadow(0px 0px 1px deeppink);
filter: drop-shadow(0px 0px 1px deeppink);
}
}
@keyframes design {
from {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,20,147,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
-webkit-filter: drop-shadow(0px 0px 1px deeppink);
filter: drop-shadow(0px 0px 1px deeppink);
}
50% {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="8" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,20,147,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
-webkit-filter: drop-shadow(0px 0px 8px deeppink);
filter: drop-shadow(0px 0px 8px deeppink);
}
to {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(255,20,147,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
-webkit-filter: drop-shadow(0px 0px 1px deeppink);
filter: drop-shadow(0px 0px 1px deeppink);
}
}
@-webkit-keyframes c {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
75% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes c {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
75% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes s {
0% {
top: 88px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
25% {
top: 82px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
50% {
top: 88px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
75% {
top: 96px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100% {
top: 88px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@keyframes s {
0% {
top: 88px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
25% {
top: 82px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
50% {
top: 88px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
75% {
top: 96px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100% {
top: 88px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@-webkit-keyframes s-2 {
from {
border-left: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
50% {
border-left: 15px solid #FF0161;
border-top: 15px solid #ff458b;
border-bottom: 15px solid #ff458b;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
to {
border-left: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@keyframes s-2 {
from {
border-left: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
50% {
border-left: 15px solid #FF0161;
border-top: 15px solid #ff458b;
border-bottom: 15px solid #ff458b;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
to {
border-left: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
}
@-webkit-keyframes s-2-after {
from {
border-right: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
}
50% {
border-right: 15px solid #FF0161;
border-top: 15px solid #ff458b;
border-bottom: 15px solid #ff458b;
}
to {
border-right: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
}
}
@keyframes s-2-after {
from {
border-right: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
}
50% {
border-right: 15px solid #FF0161;
border-top: 15px solid #ff458b;
border-bottom: 15px solid #ff458b;
}
to {
border-right: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
}
}
body {
background: #f2f2f2;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.frame {
width: 300px;
height: 400px;
background-color: black;
box-shadow: 0px 0px 26px 0px rgba(0, 0, 0, 0.75);
position: relative;
}
.c {
width: 40px;
height: 40px;
border-left: 15px solid #ff458b;
border-right: 15px solid transparent;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
border-radius: 100%;
position: absolute;
top: 90px;
left: 45px;
-webkit-animation: c 2s linear infinite;
animation: c 2s linear infinite;
}
.s {
width: 15px;
height: 15px;
border-left: 15px solid #ff458b;
border-right: 15px solid transparent;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
border-radius: 100%;
position: absolute;
top: 88px;
left: 128px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-animation: s 1s linear infinite;
animation: s 1s linear infinite;
}
.s:after {
content: '';
width: 15px;
height: 15px;
border-left: 15px solid transparent;
border-right: 15px solid #ff458b;
border-top: 15px solid #FF0161;
border-bottom: 15px solid #FF0161;
border-radius: 100%;
position: absolute;
top: 9px;
left: 4px;
}
.s-2 {
left: 200px;
-webkit-animation: s-2 1s linear infinite;
animation: s-2 1s linear infinite;
}
.s-2:after {
-webkit-animation: s-2-after 1s infinite;
animation: s-2-after 1s infinite;
}
.design svg {
position: absolute;
top: 245px;
left: 45px;
-webkit-animation: design 2s linear infinite;
animation: design 2s linear infinite;
}
.is {
font-family: 'Satisfy', cursive;
position: absolute;
font-size: 50px;
color: lightgrey;
left: 135px;
top: 170px;
}
.is:before,
.is:after {
width: 75px;
height: 1px;
content: '';
position: absolute;
background: lightgrey;
top: 50%;
left: -90px;
}
.is:after {
left: 43px;
}</style></head><body>
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<div class="container">
<div class="frame">
<div class="c"></div>
<div class="s"></div>
<div class="s s-2"></div>
<div class="is">is</div>
<div class="design">
<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="205px" height="53.5px" viewBox="0 0 205 53.5" style="enable-background:new 0 0 205 53.5;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FF004F;
}
</style>
<g>
<path class="st0" d="M10.3,0.9H3.1C1,0.9,0,1.9,0,4v45.4c0,2.1,1,3.1,3.1,3.1h7.2c4.2,0,7.3-0.9,9.1-2.6c1.8-1.7,2.8-4.5,2.8-8.2
V11.8c0-3.9-0.9-6.7-2.8-8.4C17.6,1.7,14.5,0.9,10.3,0.9z M20.3,41.6c0,3.1-0.8,5.4-2.3,6.9c-1.6,1.5-4.1,2.2-7.7,2.2H3.1
c-0.9,0-1.3-0.4-1.3-1.3V4c0-0.8,0.4-1.2,1.3-1.2h7.2c3.5,0,6.1,0.7,7.6,2.1c1.6,1.4,2.4,3.7,2.4,7V41.6z" />
<path class="st0" d="M10.3,5.3H5.3c-0.6,0-1,0.3-1,0.9v41c0,0.6,0.3,1,1,1h5.1c2.7,0,4.6-0.5,5.8-1.5c1.2-1,1.8-2.7,1.8-5.1V11.9
c0-2.4-0.6-4.1-1.8-5.1C14.9,5.8,12.9,5.3,10.3,5.3z M16,41.6c0,1.8-0.4,3-1.3,3.7c-0.9,0.7-2.4,1-4.4,1H6.2V7.1h4.2
c2,0,3.5,0.4,4.4,1.1c0.9,0.7,1.3,2,1.3,3.8V41.6z" />
<path class="st0" d="M44.4,6.2V20c0,0.6,0.3,1,1,1h14.1v-1.8H46.2V7.1h13.4V5.3H45.3C44.7,5.3,44.4,5.6,44.4,6.2z" />
<path class="st0" d="M46.2,25.2h13.2v-1.8H45.3c-0.6,0-1,0.3-1,1v22.8c0,0.6,0.3,1,1,1h14.3v-1.9H46.2V25.2z" />
<path class="st0" d="M40,4v45.4c0,2.1,1,3.1,3.1,3.1h16.4v-1.8H43.2c-0.9,0-1.3-0.4-1.3-1.3V4c0-0.8,0.4-1.2,1.3-1.2h16.4V0.9H43.2
C41.1,0.9,40,1.9,40,4z" />
<path class="st0" d="M92.6,26.6c-1-0.6-1.9-1.2-2.8-1.6c-0.8-0.4-1.9-1-3.1-1.7c-1.8-1-2.9-2-3.5-3c-0.6-1-0.9-2.4-0.9-4v-5
c0-3.4,1.6-5.1,4.9-5.1c3.3,0,4.9,1.7,4.9,5.1v11.5H94V11.3c0-4.7-2.3-7-6.8-7c-4.5,0-6.7,2.3-6.7,7v5c0,1.1,0.1,2,0.2,2.8
s0.4,1.5,0.8,2.2c0.4,0.7,0.9,1.3,1.6,1.8c0.7,0.6,1.6,1.1,2.8,1.7c2.1,1,3.8,2,5.2,3c1.4,1,2.5,1.9,3.3,2.9
c0.8,0.9,1.4,1.9,1.7,2.8c0.3,0.9,0.4,1.8,0.4,2.6v6.2c0,3.1-0.8,5.4-2.3,7c-1.6,1.6-3.9,2.4-6.9,2.4c-6.1,0-9.2-3.1-9.2-9.4V31.5
h-1.9v10.7c0,7.6,3.7,11.4,11,11.4c3.7,0,6.5-1,8.3-2.9c1.9-1.9,2.8-4.8,2.8-8.4V36c0-1.8-0.4-3.5-1.2-5.1
C96.2,29.4,94.7,27.9,92.6,26.6z" />
<path class="st0" d="M87.2,0c-7.4,0-11,3.8-11,11.3v5c0,1.9,0.1,3.5,0.3,4.7c0.2,1.2,0.5,2.2,1,3c0.5,0.8,1.1,1.5,1.9,2.1
c0.8,0.6,1.8,1.2,2.9,1.9c1.2,0.7,2.3,1.3,3.3,1.8c1,0.5,2,1.1,2.8,1.7c1.3,0.9,2.3,1.6,2.8,2.3c0.5,0.7,0.8,1.5,0.8,2.4v5.9
c0,3.4-1.6,5.1-4.9,5.1c-3.3,0-4.9-1.7-4.9-5.1V31.5h-1.9v10.7c0,4.7,2.2,7,6.7,7c4.5,0,6.8-2.3,6.8-7V36c0-0.4-0.1-0.8-0.2-1.3
s-0.3-0.9-0.6-1.4c-0.3-0.5-0.8-1-1.4-1.5c-0.6-0.5-1.4-1.1-2.4-1.7c-1.1-0.6-2.1-1.2-3-1.7c-0.9-0.5-1.7-1-2.5-1.5
c-1.2-0.7-2.2-1.4-3-2c-0.8-0.6-1.4-1.3-1.8-2c-0.4-0.7-0.7-1.6-0.8-2.6c-0.1-1-0.2-2.3-0.2-3.9v-5C78,5,81,1.8,87.2,1.8
c6.2,0,9.2,3.2,9.2,9.5v11.5h1.9V11.3C98.3,3.8,94.6,0,87.2,0z" />
<rect x="120.3" y="0.9" class="st0" width="1.9" height="51.5" />
<rect x="116" y="0.9" class="st0" width="1.9" height="51.5" />
<path class="st0" d="M157.9,21.6V11.3c0-4.7-2.3-7-6.8-7c-4.5,0-6.8,2.3-6.8,7V42c0,1.5,0.3,2.7,0.9,3.6c0.6,0.9,1.3,1.5,2.1,1.9
c0.8,0.4,1.7,0.7,2.7,0.8c0.9,0.1,1.8,0.2,2.5,0.2h3.5c0.7,0,1.2-0.1,1.5-0.2c0.3-0.1,0.4-0.4,0.4-0.9V29.3c0-0.6-0.3-1-1-1h-8.7
v1.8h7.8v16.4l-3.6,0.1c-1.9,0-3.4-0.3-4.6-1c-1.2-0.7-1.7-1.9-1.7-3.7V11.3c0-3.4,1.6-5.1,4.9-5.1c3.3,0,4.9,1.7,4.9,5.1v10.3
H157.9z" />
<path class="st0" d="M151.1,0C143.7,0,140,3.8,140,11.3V42c0,1,0.1,2.1,0.4,3.3c0.3,1.2,0.9,2.3,1.9,3.4c1,1.1,2.4,2,4.4,2.7
c1.9,0.7,4.6,1.1,8,1.1h4.5c2.1,0,3.1-1,3.1-3.1V27.2c0-2.1-1-3.1-3.1-3.1h-10.9v1.8h10.9c0.8,0,1.2,0.4,1.2,1.3v22.1
c0,0.9-0.4,1.3-1.2,1.3h-4.9c-2.7,0-4.9-0.3-6.5-0.9c-1.6-0.6-2.9-1.3-3.7-2.1c-0.9-0.9-1.4-1.8-1.7-2.8c-0.3-1-0.4-2-0.4-2.9V11.3
c0-6.3,3.1-9.5,9.2-9.5c3,0,5.3,0.8,6.9,2.4s2.3,3.9,2.3,7.1v10.4h1.9V11.2C162.2,3.7,158.5,0,151.1,0z" />
<path class="st0" d="M203.1,0.9v48.5c0,0.5-0.1,0.8-0.4,1.1c-0.3,0.2-0.5,0.4-0.8,0.4c-0.3,0-0.5-0.1-0.8-0.3
c-0.3-0.2-0.4-0.5-0.5-0.8l-9.9-43.8c-0.1-0.4-0.4-0.6-0.9-0.6H185c-0.6,0-1,0.3-1,0.9v46.3h1.9V7.1h3.3l9.8,43.1
c0.2,0.8,0.6,1.4,1.1,1.9c0.5,0.5,1.1,0.7,2,0.7c0.8,0,1.5-0.3,2.1-0.9c0.6-0.6,0.9-1.4,0.9-2.5V0.9H203.1z" />
<path class="st0" d="M192.9,3.7l6,26.6c0.1,0.6,0.4,0.8,0.9,0.8c0.2,0,0.4-0.1,0.6-0.3c0.2-0.2,0.3-0.5,0.3-0.8V0.9h-1.8v22.4
l-4.3-20.1c-0.3-1.5-1.3-2.3-3-2.3h-8.8c-2.1,0-3.1,1-3.1,3.1v48.5h1.9V4c0-0.8,0.4-1.2,1.3-1.2h8.8C192.3,2.8,192.7,3.1,192.9,3.7
z" />
</g>
</svg>
</div>
</div>
</div>
</body></html>
