cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
                      <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="https://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

<div class="main-container" style="max-width:1300px">
	<div class="cloud">
    	<div class="header">
			<div class="header__bar">
            	<div class="lang-ar menu-button" style="display:none">عربي</div>
            	<div class="lang-en menu-button">English</div>                
				<div class="header__text" style="display:none"><span class="header__flag"></span>du: 1 level credit for 3 AED, max 3 times per week. Etisalat: 10 level credits for just 30 AED.</div>
            </div>
        	<div class="header__moon">
            </div>
        <div class="header__sub-title">Thank you for visiting my pen<br><a class="blog-link" href="http://omaraljaber.wordpress.com">omaraljaber.wordpress.com</a></div>
            <div class="header__title">VIDEO OF YOUR DREAMS</div>
        </div>
    	<div class="x3 cloud__front"></div>
    	<div class="x2 cloud__back"></div>
        <div class="snake"></div>
    	<div class="x1 cloud__main"></div>               
    </div>
    <div>
    	<div class="light-stripes"></div>
    	<div class="space"></div>
    	<div class="stars"></div>
    	<div class="blue-shadow"></div>        
    	<div class="popup" style="display:none">
        	<div class="popup__inner">
            	<div class="dialog-1">
                    <div class="popup__title">Question 1 of 3</div>
                    <div class="popup__sub-title"> 
                    What was the last thing you did
                        before you went to sleep last night?
                    </div>
                    <div class="popup__divider"></div>
                    <div class="blue-button">Surf the Net</div>            
                    <div class="blue-button">Watch TV</div>                            
                    <div class="blue-button">Talk on the phone</div>                
            	</div>
            </div>
        </div>
    </div>
    <div class="ground">
    	<div class="first-part">
        	<div class="first-hill"></div>
	        <div class="first-trees"></div>
        	<div class="mountain"></div>
        </div>
    	<div class="last-part">
	      	<div class="last-hill">
            	<div class="house">
    	            <div class="larg-bubble"></div>
	            	<div class="small-bubble"></div>                
                </div>
                <div class="balloon"></div>
            </div>
            <div class="last-trees"></div>        
            <div class="yellow-lighting"></div>
        </div>
        <div class="grace"></div>
    </div>
</div>


     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')			</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
            
          
!
            
              /* line 17, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../Ruby200/lib/ruby/gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* line 40, ../sass/components/_layout.scss */
body {
  position: relative;
}

/* line 44, ../sass/components/_layout.scss */
.cloud, .space, .ground {
  position: relative;
}

/* line 48, ../sass/components/_layout.scss */
.cloud {
  height: 120px;
  z-index: 16;
}

/* line 53, ../sass/components/_layout.scss */
.space {
  height: 354px;
  position: relative;
  z-index: 2;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViZGFhNCIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMzhiMzlmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA0ODlmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('https://omarkhanfer.github.io/CSS3Animation/images/../images/noise.png');
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #ebdaa4), color-stop(45%, #38b39f), color-stop(100%, #00489f)), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
  background: -webkit-linear-gradient(bottom, #ebdaa4, #38b39f 45%, #00489f 100%), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
  background: -moz-linear-gradient(bottom, #ebdaa4, #38b39f 45%, #00489f 100%), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
  background: -o-linear-gradient(bottom, #ebdaa4, #38b39f 45%, #00489f 100%), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
  background: linear-gradient(bottom, #ebdaa4, #38b39f 45%, #00489f 100%), url('https://omarkhanfer.github.io/CSS3Animation/images/noise.png');
}

/* line 63, ../sass/components/_layout.scss */
.first-part {
  bottom: 0px;
  height: 387px;
  position: absolute;
  width: 50%;
  left: 0;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* line 69, ../sass/components/_layout.scss */
.last-part {
  bottom: 0px;
  height: 387px;
  position: absolute;
  width: 50%;
  right: 0;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* line 75, ../sass/components/_layout.scss */
.ground {
  height: 330px;
  position: relative;
  z-index: 11;
}

/* line 15, ../sass/components/_header.scss */
.header {
  background: #dff2f7;
  height: 30px;
  position: absolute;
  width: 100%;
  z-index: 20;
}
/* line 21, ../sass/components/_header.scss */
.header > div {
  margin-bottom: 5px;
  text-align: center;
}
/* line 25, ../sass/components/_header.scss */
.header .header__bar {
  height: 10px;
  background: #dff2f7;
  padding: 0 20%;
  text-align: left;
}
/* line 30, ../sass/components/_header.scss */
.header .header__bar .lang-en {
  display: none;
}
/* line 34, ../sass/components/_header.scss */
.header .header__flag {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/flag.png") no-repeat transparent;
  height: 19px;
  margin: 0 10px 0 20%;
  width: 19px;
  float: left;
}
/* line 42, ../sass/components/_header.scss */
.header .header__text {
  color: #929ea3;
  font-size: 8px;
  font-family: Lucida Sans Unicode;
  padding-top: 5px;
}
/* line 48, ../sass/components/_header.scss */
.header .header__moon {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/moon.png");
  height: 50px;
  margin: 15px auto 10px;
  width: 50px;
}
/* line 55, ../sass/components/_header.scss */
.header .header__sub-title {
  color: #1a6cca;
  font-family: 'Milonga', cursive;
  font-size: 18px;
}
/* line 61, ../sass/components/_header.scss */
.header .header__title {
  color: #4c79d6;
  font-family: 'Cinzel Decorative', cursive;
  font-size: 40px;
  font-weight: bold;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,2px 2px 0 #0470bb;
}
/* line 69, ../sass/components/_header.scss */
.header .menu-button {
  float: right;
}

/* line 33, ../sass/components/_hills.scss */
.first-hill {
  z-index: 8;
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/hill.png") no-repeat;
  bottom: 0;
  height: 390px;
  position: absolute;
  width: 834px;
  left: 0;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
/* line 546, ../sass/commons/_mixins.scss */
.first-hill else {
  background-position: -20px 0;
}

/* line 42, ../sass/components/_hills.scss */
.last-hill {
  z-index: 9;
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/hill.png") no-repeat;
  bottom: 0;
  height: 390px;
  position: absolute;
  width: 834px;
  right: 0;
}
/* line 546, ../sass/commons/_mixins.scss */
.last-hill else {
  background-position: -20px 0;
}

/* line 49, ../sass/components/_hills.scss */
.grace {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/grace.png") repeat-x transparent;
  background-size: 100% 100%;
  bottom: 0px;
  height: 308px;
  width: 100%;
  position: absolute;
  z-index: 20;
}

/* line 21, ../sass/components/_house.scss */
.house {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/house.png") no-repeat transparent;
  height: 373px;
  top: -100px;
  position: absolute;
  width: 288px;
  z-index: 14;
  left: 30%;
}

/* line 37, ../sass/components/_trees.scss */
.first-trees {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/trees.png") no-repeat transparent;
  height: 178px;
  position: absolute;
  top: -100px;
  width: 436px;
  z-index: 6;
  right: 10%;
}

/* line 42, ../sass/components/_trees.scss */
.last-trees {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/trees.png") no-repeat transparent;
  height: 178px;
  position: absolute;
  top: -100px;
  width: 436px;
  z-index: 6;
  left: 13%;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* line 50, ../sass/components/_clouds.scss */
.larg-bubble {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/small-cloud.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 27px;
  position: absolute;
  width: 36px;
  right: 40%;
  -webkit-animation: bubblemove 5s infinite linear;
  -moz-animation: bubblemove 5s infinite linear;
  -ms-animation: bubblemove 5s infinite linear;
  animation: bubblemove 5s infinite linear;
}

/* line 55, ../sass/components/_clouds.scss */
.small-bubble {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/small-cloud.png") no-repeat transparent;
  background-size: 100% 100%;
  height: 27px;
  position: absolute;
  width: 36px;
  right: 40%;
  -webkit-animation: bubblemove 5s infinite linear -2s;
  -moz-animation: bubblemove 5s infinite linear -2s;
  -ms-animation: bubblemove 5s infinite linear -2s;
  animation: bubblemove 5s infinite linear -2s;
}

/* line 60, ../sass/components/_clouds.scss */
.cloud__back {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/cloud.png") repeat-x transparent;
  height: 228px;
  position: absolute;
  width: 100%;
  top: 2px;
  z-index: 18;
}

/* line 66, ../sass/components/_clouds.scss */
.cloud__front {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/cloud.png") repeat-x transparent;
  height: 228px;
  position: absolute;
  width: 100%;
  top: -12px;
  z-index: 19;
}

/* line 72, ../sass/components/_clouds.scss */
.cloud__main {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/main-cloud.png") repeat-x transparent;
  height: 248px;
  position: absolute;
  top: -5px;
  width: 100%;
  z-index: 16;
}

/* line 81, ../sass/components/_clouds.scss */
.blue-shadow {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/blue-shadow.png") no-repeat transparent;
  height: 392px;
  width: 1000px;
  position: absolute;
  top: 150px;
  z-index: 8;
  left: 13%;
}

/* line 94, ../sass/components/_clouds.scss */
.cloud .x1 {
  -webkit-animation: cloudmove 3.5s infinite linear;
  -moz-animation: cloudmove 3.5s infinite linear;
  -ms-animation: cloudmove 3.5s infinite linear;
  animation: cloudmove 3.5s infinite linear;
}
/* line 98, ../sass/components/_clouds.scss */
.cloud .x2 {
  -webkit-animation: cloudmove 3s infinite linear;
  -moz-animation: cloudmove 3s infinite linear;
  -ms-animation: cloudmove 3s infinite linear;
  animation: cloudmove 3s infinite linear;
}
/* line 102, ../sass/components/_clouds.scss */
.cloud .x3 {
  -webkit-animation: cloudmove 2.5s infinite linear;
  -moz-animation: cloudmove 2.5s infinite linear;
  -ms-animation: cloudmove 2.5s infinite linear;
  animation: cloudmove 2.5s infinite linear;
}

@-webkit-keyframes cloudmove {
  /* line 110, ../sass/components/_clouds.scss */
  0% {
    background-position: -105px 0px;
  }

  /* line 113, ../sass/components/_clouds.scss */
  100% {
    background-position: -210px 0px;
  }
}

@-moz-keyframes cloudmove {
  /* line 110, ../sass/components/_clouds.scss */
  0% {
    background-position: -105px 0px;
  }

  /* line 113, ../sass/components/_clouds.scss */
  100% {
    background-position: -210px 0px;
  }
}

@-ms-keyframes cloudmove {
  /* line 110, ../sass/components/_clouds.scss */
  0% {
    background-position: -105px 0px;
  }

  /* line 113, ../sass/components/_clouds.scss */
  100% {
    background-position: -210px 0px;
  }
}

@keyframes cloudmove {
  /* line 110, ../sass/components/_clouds.scss */
  0% {
    background-position: -105px 0px;
  }

  /* line 113, ../sass/components/_clouds.scss */
  100% {
    background-position: -210px 0px;
  }
}

@-webkit-keyframes bubblemove {
  /* line 119, ../sass/components/_clouds.scss */
  0% {
    height: 24px;
    top: 0px;
    width: 32px;
    right: 40%;
  }

  /* line 125, ../sass/components/_clouds.scss */
  30% {
    top: -25px;
  }

  /* line 127, ../sass/components/_clouds.scss */
  100% {
    height: 44px;
    top: -150px;
    width: 55px;
    right: 45%;
  }
}

@-moz-keyframes bubblemove {
  /* line 119, ../sass/components/_clouds.scss */
  0% {
    height: 24px;
    top: 0px;
    width: 32px;
    right: 40%;
  }

  /* line 125, ../sass/components/_clouds.scss */
  30% {
    top: -25px;
  }

  /* line 127, ../sass/components/_clouds.scss */
  100% {
    height: 44px;
    top: -150px;
    width: 55px;
    right: 45%;
  }
}

@-ms-keyframes bubblemove {
  /* line 119, ../sass/components/_clouds.scss */
  0% {
    height: 24px;
    top: 0px;
    width: 32px;
    right: 40%;
  }

  /* line 125, ../sass/components/_clouds.scss */
  30% {
    top: -25px;
  }

  /* line 127, ../sass/components/_clouds.scss */
  100% {
    height: 44px;
    top: -150px;
    width: 55px;
    right: 45%;
  }
}

@keyframes bubblemove {
  /* line 119, ../sass/components/_clouds.scss */
  0% {
    height: 24px;
    top: 0px;
    width: 32px;
    right: 40%;
  }

  /* line 125, ../sass/components/_clouds.scss */
  30% {
    top: -25px;
  }

  /* line 127, ../sass/components/_clouds.scss */
  100% {
    height: 44px;
    top: -150px;
    width: 55px;
    right: 45%;
  }
}

/* line 17, ../sass/components/_balloon.scss */
.balloon {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/balloon.png") no-repeat transparent;
  height: 69px;
  position: absolute;
  top: -130px;
  width: 49px;
  z-index: 300;
  -webkit-animation: balloonmove 15s infinite linear;
  -moz-animation: balloonmove 15s infinite linear;
  -ms-animation: balloonmove 15s infinite linear;
  animation: balloonmove 15s infinite linear;
  left: 500px;
}

@-webkit-keyframes balloonmove {
  /* line 32, ../sass/components/_balloon.scss */
  0% {
    top: -140px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 33, ../sass/components/_balloon.scss */
  15% {
    top: -180px;
    left: 460px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  /* line 34, ../sass/components/_balloon.scss */
  30% {
    top: -220px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 35, ../sass/components/_balloon.scss */
  45% {
    top: -260px;
    left: 500px;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  /* line 36, ../sass/components/_balloon.scss */
  60% {
    top: -220px;
    left: 520px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 37, ../sass/components/_balloon.scss */
  75% {
    top: -180px;
    left: 530px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  /* line 38, ../sass/components/_balloon.scss */
  90% {
    top: -160px;
    left: 500px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 39, ../sass/components/_balloon.scss */
  100% {
    top: -140px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-moz-keyframes balloonmove {
  /* line 32, ../sass/components/_balloon.scss */
  0% {
    top: -140px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 33, ../sass/components/_balloon.scss */
  15% {
    top: -180px;
    left: 460px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  /* line 34, ../sass/components/_balloon.scss */
  30% {
    top: -220px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 35, ../sass/components/_balloon.scss */
  45% {
    top: -260px;
    left: 500px;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  /* line 36, ../sass/components/_balloon.scss */
  60% {
    top: -220px;
    left: 520px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 37, ../sass/components/_balloon.scss */
  75% {
    top: -180px;
    left: 530px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  /* line 38, ../sass/components/_balloon.scss */
  90% {
    top: -160px;
    left: 500px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 39, ../sass/components/_balloon.scss */
  100% {
    top: -140px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-ms-keyframes balloonmove {
  /* line 32, ../sass/components/_balloon.scss */
  0% {
    top: -140px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 33, ../sass/components/_balloon.scss */
  15% {
    top: -180px;
    left: 460px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  /* line 34, ../sass/components/_balloon.scss */
  30% {
    top: -220px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 35, ../sass/components/_balloon.scss */
  45% {
    top: -260px;
    left: 500px;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  /* line 36, ../sass/components/_balloon.scss */
  60% {
    top: -220px;
    left: 520px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 37, ../sass/components/_balloon.scss */
  75% {
    top: -180px;
    left: 530px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  /* line 38, ../sass/components/_balloon.scss */
  90% {
    top: -160px;
    left: 500px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 39, ../sass/components/_balloon.scss */
  100% {
    top: -140px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes balloonmove {
  /* line 32, ../sass/components/_balloon.scss */
  0% {
    top: -140px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 33, ../sass/components/_balloon.scss */
  15% {
    top: -180px;
    left: 460px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  /* line 34, ../sass/components/_balloon.scss */
  30% {
    top: -220px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 35, ../sass/components/_balloon.scss */
  45% {
    top: -260px;
    left: 500px;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  /* line 36, ../sass/components/_balloon.scss */
  60% {
    top: -220px;
    left: 520px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 37, ../sass/components/_balloon.scss */
  75% {
    top: -180px;
    left: 530px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  /* line 38, ../sass/components/_balloon.scss */
  90% {
    top: -160px;
    left: 500px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 39, ../sass/components/_balloon.scss */
  100% {
    top: -140px;
    left: 480px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

/* line 17, ../sass/components/_snake.scss */
.snake {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/snake.png");
  height: 188px;
  position: absolute;
  top: 100px;
  width: 188px;
  z-index: 17;
  -webkit-animation: snakemove 8s infinite linear;
  -moz-animation: snakemove 8s infinite linear;
  -ms-animation: snakemove 8s infinite linear;
  animation: snakemove 8s infinite linear;
  left: 24%;
}

@-webkit-keyframes snakemove {
  /* line 33, ../sass/components/_snake.scss */
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 34, ../sass/components/_snake.scss */
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes snakemove {
  /* line 33, ../sass/components/_snake.scss */
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 34, ../sass/components/_snake.scss */
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-ms-keyframes snakemove {
  /* line 33, ../sass/components/_snake.scss */
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 34, ../sass/components/_snake.scss */
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes snakemove {
  /* line 33, ../sass/components/_snake.scss */
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 34, ../sass/components/_snake.scss */
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* line 17, ../sass/components/_stars.scss */
.stars {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/stars.png") no-repeat transparent;
  height: 124px;
  margin: 0 auto;
  position: absolute;
  top: 240px;
  width: 820px;
  z-index: 10;
  left: 18%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

/* line 16, ../sass/components/_mountain.scss */
.mountain {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/mountain.png") no-repeat transparent;
  height: 188px;
  position: absolute;
  top: -145px;
  width: 282px;
  z-index: 3;
  left: 19%;
}

/* line 18, ../sass/components/_lighting.scss */
.yellow-lighting {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/yellow-lighting.png") no-repeat transparent;
  height: 500px;
  position: absolute;
  top: -215px;
  width: 500px;
  z-index: 5;
  right: 47%;
}

/* line 28, ../sass/components/_lighting.scss */
.light-stripes {
  background: url("https://omarkhanfer.github.io/CSS3Animation/images/light-stripes.png") no-repeat transparent;
  height: 692px;
  position: absolute;
  top: 100px;
  width: 970px;
  z-index: 11;
  left: 16%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

/* line 88, ../sass/ui/_popup.scss */
.popup {
  height: 260px;
  width: 328px;
  z-index: 100;
  background-color: rgba(19, 108, 148, 0.7);
  border: 1px solid #fff;
  position: absolute;
  top: 238px;
  z-index: 15;
  -webkit-box-shadow: inset 0 0 29px 5px rgba(255, 255, 190, 0.6), 0 0 21px 4px rgba(13, 133, 171, 0.55);
  -moz-box-shadow: inset 0 0 29px 5px rgba(255, 255, 190, 0.6), 0 0 21px 4px rgba(13, 133, 171, 0.55);
  box-shadow: inset 0 0 29px 5px rgba(255, 255, 190, 0.6), 0 0 21px 4px rgba(13, 133, 171, 0.55);
  left: 38%;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -khtml-border-radius: 30px;
  border-radius: 30px;
}
/* line 42, ../sass/ui/_popup.scss */
.popup .popup__inner {
  display: block;
  height: 100%;
  width: 100%;
  -webkit-border-radius: inherit;
  -moz-border-radius: inherit;
  -khtml-border-radius: inherit;
  border-radius: inherit;
  -webkit-box-shadow: inset 0 -3px 0 rgba(48, 140, 148, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.6);
  -moz-box-shadow: inset 0 -3px 0 rgba(48, 140, 148, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 -3px 0 rgba(48, 140, 148, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.6);
}
/* line 54, ../sass/ui/_popup.scss */
.popup .popup__title {
  color: #02203c;
  display: block;
  font-family: Georgia;
  font-size: 18px;
  font-style: italic;
  padding: 20px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* line 66, ../sass/ui/_popup.scss */
.popup .popup__sub-title {
  color: #fff;
  font-family: Georgia;
  font-size: 15px;
  padding: 0 40px;
  text-align: center;
  text-shadow: 0 1px #004261;
}
/* line 75, ../sass/ui/_popup.scss */
.popup .popup__divider {
  border-top: 1px solid rgba(204, 204, 204, 0.6);
  height: 1px;
  margin: 15px auto;
  width: 60%;
}

/* line 63, ../sass/ui/_buttons.scss */
.blue-button {
  border: 1px solid;
  color: #fff;
  display: block;
  font-family: milonga;
  font-size: 17px;
  margin: 10px 35px;
  padding: 7px 10px;
  text-align: center;
  text-shadow: 0 1px rgba(159, 45, 66, 0.6);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  border-color: #005b76;
  -webkit-box-shadow: 0 1px 0 rgba(37, 143, 176, 0.6);
  -moz-box-shadow: 0 1px 0 rgba(37, 143, 176, 0.6);
  box-shadow: 0 1px 0 rgba(37, 143, 176, 0.6);
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE1ODFhMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ3YjVkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1581a0), color-stop(100%, #47b5d9));
  background: -webkit-linear-gradient(#1581a0, #47b5d9);
  background: -moz-linear-gradient(#1581a0, #47b5d9);
  background: -o-linear-gradient(#1581a0, #47b5d9);
  background: linear-gradient(#1581a0, #47b5d9);
}
/* line 31, ../sass/ui/_buttons.scss */
.blue-button:hover, .blue-button:active {
  cursor: pointer;
}
/* line 35, ../sass/ui/_buttons.scss */
.blue-button:active {
  color: #eee;
  padding: 7px 11px 7px 9px;
  -webkit-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
}

/* line 71, ../sass/ui/_buttons.scss */
.red-button {
  border: 1px solid;
  color: #fff;
  display: block;
  font-family: milonga;
  font-size: 17px;
  margin: 10px 35px;
  padding: 7px 10px;
  text-align: center;
  text-shadow: 0 1px rgba(159, 45, 66, 0.6);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  border-color: #872235;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2MjYzYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M0NDE1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #96263b), color-stop(100%, #c44159));
  background: -webkit-linear-gradient(#96263b, #c44159);
  background: -moz-linear-gradient(#96263b, #c44159);
  background: -o-linear-gradient(#96263b, #c44159);
  background: linear-gradient(#96263b, #c44159);
  -webkit-box-shadow: 0 2px rgba(160, 44, 65, 0.6);
  -moz-box-shadow: 0 2px rgba(160, 44, 65, 0.6);
  box-shadow: 0 2px rgba(160, 44, 65, 0.6);
}
/* line 31, ../sass/ui/_buttons.scss */
.red-button:hover, .red-button:active {
  cursor: pointer;
}
/* line 35, ../sass/ui/_buttons.scss */
.red-button:active {
  color: #eee;
  padding: 7px 11px 7px 9px;
  -webkit-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.7);
}

/* line 79, ../sass/ui/_buttons.scss */
.menu-button {
  border: 1px solid #340b0b;
  color: #fff;
  display: inline;
  padding: 5px 10px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk0MmEzMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IxNTY1MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #942a31), color-stop(100%, #b15653));
  background: -webkit-linear-gradient(#942a31, #b15653);
  background: -moz-linear-gradient(#942a31, #b15653);
  background: -o-linear-gradient(#942a31, #b15653);
  background: linear-gradient(#942a31, #b15653);
  -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(148, 42, 49, 0.5), 0 1px 0 rgba(255, 255, 255, 0.7);
  -moz-box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(148, 42, 49, 0.5), 0 1px 0 rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(148, 42, 49, 0.5), 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* line 51, ../sass/ui/_buttons.scss */
.menu-button:hover {
  background: #b1474e;
  cursor: pointer;
}
/* line 55, ../sass/ui/_buttons.scss */
.menu-button:active {
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
}

/* line 36, ../sass/edit/_stylesheet.scss */
.hide {
  display: none;
}

/* line 40, ../sass/edit/_stylesheet.scss */
.show {
  display: block;
}
.blog-link {
  line-height:30px;
  color:#1A6CCA;
  text-decoration:none;
}
.blog-link:hover {
  text-decoration:underline;
  color:#5AaCAA;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console