<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/ItsJonQ/pen/yvfDF?depth=everything&limit=all&order=popularity&page=47&q=image&show_forks=false" />
<style class="cp-pen-styles">html,
body {
background-color: #85b9dd;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
* {
position: relative;
}
.frame {
width: 500px;
height: auto;
margin: 15% auto 0;
position: absolute;
width: 100%;
}
svg {
max-width: 100%;
height: auto;
display: block;
}
/**
* Paper Plane
*/
/*Paper Plane: Container*/
.plane-container {
width: 200px;
margin: 0px auto;
z-index: 3;
}
/*Paper Plane: Image*/
.plane {
width: 100%;
height: 60px;
}
/*Paper Plane: Animation*/
.plane-container {
-webkit-animation: paper-plane-scoping 2s alternate infinite;
-moz-animation: paper-plane-scoping 2s alternate infinite;
animation: paper-plane-scoping 2s alternate infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes paper-plane-scoping {
0% {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
transform: translateY(100px);
}
}
.plane {
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation: paper-plane-soaring 4s forwards infinite;
-moz-animation: paper-plane-soaring 4s forwards infinite;
animation: paper-plane-soaring 4s forwards infinite;
}
@-webkit-keyframes paper-plane-soaring {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
40% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
60% {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/**
* Clouds
*/
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
transform: translateZ(0);
}
.cloud {
position: absolute;
top: 20%;
width: 300px;
right: 0;
opacity: 1;
}
.cloud.front {
z-index: 9;
}
.cloud.distant {
z-index: 1;
}
.cloud.background {
z-index: 1;
}
/*Cloud Sizing*/
.cloud.smaller {
margin-right: 400px;
width: 100px;
margin-top: 50px;
}
.cloud.small {
margin-right: 200px;
width: 150px;
}
.cloud.big {
width: 500px;
margin-top: 50px;
margin-right: 150px;
}
.cloud.massive {
width: 600px;
margin-top: 20px;
margin-right: 0px;
}
/*Cloud: Animation*/
.cloud {
-webkit-animation-name: cloud-movement;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: cloud-movement;
-moz-animation-timing-function: linear;
-moz-animation-direction: forwards;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
animation-name: cloud-movement;
animation-timing-function: linear;
animation-direction: forwards;
animation-iteration-count: infinite;
animation-duration: 8s;
}
.slow {
-webkit-animation-duration: 9.2s;
-moz-animation-duration: 9.2s;
animation-duration: 9.2s;
}
.slower {
-webkit-animation-duration: 11.2s;
-moz-animation-duration: 11.2s;
animation-duration: 11.2s;
}
.slowest {
-webkit-animation-duration: 13.5s;
-moz-animation-duration: 13.5s;
animation-duration: 13.5s;
}
.super-slow {
-webkit-animation-duration: 20.5s;
-moz-animation-duration: 20.5s;
animation-duration: 20.5s;
}
@-webkit-keyframes cloud-movement {
0% {
opacity: 0.1;
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
transform: translateX(300px);
}
10% {
opacity: 0.7;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
-webkit-transform: translateX(-1000px);
-moz-transform: translateX(-1000px);
transform: translateX(-1000px);
}
}</style></head><body>
<div class="frame">
<div class="plane-container">
<a href="http://customer.io/" target="_blank">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1131.53px" height="379.304px" viewBox="0 0 1131.53 379.304" enable-background="new 0 0 1131.53 379.304"
xml:space="preserve" class="plane">
<polygon fill="#D8D8D8" points="72.008,0 274.113,140.173 274.113,301.804 390.796,221.102 601.682,367.302 1131.53,0.223 "/>
<polygon fill="#C4C4C3" points="1131.53,0.223 274.113,140.173 274.113,301.804 390.796,221.102 "/>
</svg></a>
</div>
</div>
<div class="clouds">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="762px"
height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve" class="cloud big front slowest">
<path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="762px"
height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve" class="cloud distant smaller">
<path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="762px"
height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve" class="cloud small slow">
<path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="762px"
height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve" class="cloud distant super-slow massive">
<path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="762px"
height="331px" viewBox="0 0 762 331" enable-background="new 0 0 762 331" xml:space="preserve" class="cloud slower">
<path fill="#FFFFFF" d="M715.394,228h-16.595c0.79-5.219,1.201-10.562,1.201-16c0-58.542-47.458-106-106-106
c-8.198,0-16.178,0.932-23.841,2.693C548.279,45.434,488.199,0,417.5,0c-84.827,0-154.374,65.401-160.98,148.529
C245.15,143.684,232.639,141,219.5,141c-49.667,0-90.381,38.315-94.204,87H46.607C20.866,228,0,251.058,0,279.5
S20.866,331,46.607,331h668.787C741.133,331,762,307.942,762,279.5S741.133,228,715.394,228z"/>
</svg>
</div>
</body></html>
