CodePen

HTML

            
              <div class="banner">
		<div class="frame1">
			<p class="text p1">Conheça o programa que vai ajudar você a anunciar seus clientes no <span class="span">Google</span></p>
		</div>
		<div class="frame2">
			<div class="plataforma"></div>
			<p class="adword">
				<span class="adwords ar -deg">A</span>
				<span class="adwords ds deg">D</span>
				<span class="adwords wd">W</span>
				<span class="adwords o -deg">O</span>
				<span class="adwords ar -deg">R</span>
				<span class="adwords wd deg">D</span>
				<span class="adwords ds">S</span>
			</p>
			<div class="cifrao">
				<p class="cif">$</p>
				<p class="cif">$</p>
				<p class="cif">$</p>
				<p class="cif">$</p>
				<p class="cif">$</p>
			</div>
			<div class="processor"></div>
			<div class="sistema">
				<div class="boxleft"></div>
				<div class="gear-large">
					<div class="gear-large-in"></div>
				</div>
				<div class="gear-small">
					<div class="gear-small-in"></div>
				</div>
				<div class="pistao">
					<div class="pistaotop"></div>
					<div class="pistao-in"></div>
				</div>
			</div>
		</div>
		<div class="frame3">
			<p class="text p3">Aprenda mais sobre <span class="span">AdWords</span> e aproveite os beneficios:</p>
			<p class="text p3">Treinamento em AdWords . Certificação Google . Recompensas reais e virtuais</p>
		</div>
		<div class="frame4">
			<p class="google"><span class="Gg">G</span><span class="oe">o</span><span class="_o">o</span><span class="Gg">g</span><span class="_l">l</span><span class="oe">e</span> <span class="span engage">Engage</span></p>
			<p class="text p4">Transformando palavras em bons negócios</p>
			<button class="button">Clique aqui e participe</button>
		</div>


		<div class="colors blue"></div>
		<div class="colors red"></div>
		<div class="colors yellow"></div>
		<div class="colors green"></div>
	</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /****
https://developer.mozilla.org/pt-PT/demos/detail/banner-google-engage-css


 Banner Google Engage CSS - only chrome


****/



@keyframes "frame1" {
 from {
    top: 0;
 }
 to {
    top: -55px;
 }

}

@-moz-keyframes frame1 {
 from {
   top: 0;
 }
 to {
   top: -55px;
 }

}

@-webkit-keyframes "frame1" {
 from {
   top: 0;
 }
 to {
   top: -55px;
 }

}

@keyframes "frame2" {
 from {
    top: 90px;
 }
 to {
    top: -7px;
 }

}

@-moz-keyframes frame2 {
 from {
   top: 90px;
 }
 to {
   top: -7px;
 }

}

@-webkit-keyframes "frame2" {
 from {
   top: 90px;
 }
 to {
   top: -7px;
 }

}

@keyframes "frame2-1" {
 from {
    top: -7px;
 }
 to {
    top: 90px;
 }

}

@-moz-keyframes frame2-1 {
 from {
   top: -7px;
 }
 to {
   top: 90px;
 }

}

@-webkit-keyframes "frame2-1" {
 from {
   top: -7px;
 }
 to {
   top: 90px;
 }

}

@keyframes "frame3" {
 from {
    top: -75px;
 }
 to {
    top: 0;
 }

}

@-moz-keyframes frame3 {
 from {
   top: -75px;
 }
 to {
   top: 0;
 }

}

@-webkit-keyframes "frame3" {
 from {
   top: -75px;
 }
 to {
   top: 0;
 }

}
@keyframes "frame3-1" {
 from {
    top: 0;
 }
 to {
    top: 75px;
 }

}

@-moz-keyframes frame3-1 {
 from {
   top: 0;
 }
 to {
   top: 75px;
 }

}

@-webkit-keyframes "frame3-1" {
 from {
   top: 0;
 }
 to {
   top: 75px;
 }

}
@keyframes "frame4" {
 from {
   	opacity: 0;
 }
 to {
   	opacity: 1;
 }

}

@-moz-keyframes frame4 {
 from {
   
   opacity: 0;
 }
 to {
   
   opacity: 1;
 }

}

@-webkit-keyframes "frame4" {
 from {
   
   opacity: 0;
 }
 to {
   
   opacity: 1;
 }

}

@keyframes "gearlarge" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(360deg);
   	-moz-transform: rotate(360deg);
   	transform: rotate(360deg);
 }

}

@-moz-keyframes gearlarge {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "gearlarge" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@keyframes "gearsmall" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(-360deg);
   	-moz-transform: rotate(-360deg);
   	transform: rotate(-360deg);
 }

}

@-moz-keyframes gearsmall {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }

}

@-webkit-keyframes "gearsmall" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(-360deg);
   transform: rotate(-360deg);
 }

}

@keyframes "pistao-top" {
 from {
    top: 4;
 }
 to {
    top: 24px;
 }

}

@-moz-keyframes pistao-top {
 from {
   top: 4;
 }
 to {
   top: 24px;
 }

}

@-webkit-keyframes "pistao-top" {
 from {
   top: 4;
 }
 to {
   top: 24px;
 }

}

@keyframes "pistao-in" {
 from {
    top: 12;
 }
 to {
    top: 32px;
 }

}

@-moz-keyframes pistao-in {
 from {
   top: 12;
 }
 to {
   top: 32px;
 }

}

@-webkit-keyframes "pistao-in" {
 from {
   top: 12;
 }
 to {
   top: 32px;
 }

}

@keyframes "adword" {
 from {
    left: 65px;
 }
 to {
    left: 290px;
 }

}

@-moz-keyframes adword {
 from {
   left: 65px;
 }
 to {
   left: 290px;
 }

}

@-webkit-keyframes "adword" {
 from {
   left: 65px;
 }
 to {
   left: 290px;
 }

}

@keyframes "cifrao" {
 from {
    right: 266px;
 }
 to {
    right: 80px;
 }

}

@-moz-keyframes cifrao {
 from {
   right: 266px;
 }
 to {
   right: 80px;
 }

}

@-webkit-keyframes "cifrao" {
 from {
   right: 266px;
 }
 to {
   right: 80px;
 }

}

@keyframes "cif-1" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	-o-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(350deg);
   	-moz-transform: rotate(350deg);
   	-o-transform: rotate(350deg);
   	transform: rotate(350deg);
 }

}

@-moz-keyframes cif-1 {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(350deg);
   transform: rotate(350deg);
 }

}

@-webkit-keyframes "cif-1" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(350deg);
   transform: rotate(350deg);
 }

}

@keyframes "cif-2_5" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	-o-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(370deg);
   	-moz-transform: rotate(370deg);
   	-o-transform: rotate(370deg);
   	transform: rotate(370deg);
 }

}

@-moz-keyframes cif-2_5 {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(370deg);
   transform: rotate(370deg);
 }

}

@-webkit-keyframes "cif-2_5" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(370deg);
   transform: rotate(370deg);
 }

}
@keyframes "cif-3" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	-o-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(380deg);
   	-moz-transform: rotate(380deg);
   	-o-transform: rotate(380deg);
   	transform: rotate(380deg);
 }

}

@-moz-keyframes cif-3 {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(380deg);
   transform: rotate(380deg);
 }

}

@-webkit-keyframes "cif-3" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(380deg);
   transform: rotate(380deg);
 }

}

@keyframes "cif-4" {
 from {
    -webkit-transform: rotate(0);
   	-moz-transform: rotate(0);
   	-o-transform: rotate(0);
   	transform: rotate(0);
 }
 to {
    -webkit-transform: rotate(340deg);
   	-moz-transform: rotate(340deg);
   	-o-transform: rotate(340deg);
   	transform: rotate(340deg);
 }

}

@-moz-keyframes cif-4 {
 from {
   -moz-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -moz-transform: rotate(340deg);
   transform: rotate(340deg);
 }

}

@-webkit-keyframes "cif-4" {
 from {
   -webkit-transform: rotate(0);
   transform: rotate(0);
 }
 to {
   -webkit-transform: rotate(340deg);
   transform: rotate(340deg);
 }

}

@keyframes "google" {
 from {
    -webkit-transform: scale(0);
   	-moz-transform: scale(0);
   	-o-transform: scale(0);
   	transform: scale(0);
 }
 to {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	transform: scale(1);
 }

}

@-moz-keyframes google {
 from {
   -moz-transform: scale(0);
   transform: scale(0);
 }
 to {
   -moz-transform: scale(1);
   transform: scale(1);
 }

}

@-webkit-keyframes "google" {
 from {
   -webkit-transform: scale(0);
   transform: scale(0);
 }
 to {
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

@keyframes "p4" {
 from {
    -webkit-transform: scale(0);
   	-moz-transform: scale(0);
   	-o-transform: scale(0);
   	transform: scale(0);
 }
 to {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	transform: scale(1);
 }

}

@-moz-keyframes p4 {
 from {
   -moz-transform: scale(0);
   transform: scale(0);
 }
 to {
   -moz-transform: scale(1);
   transform: scale(1);
 }

}

@-webkit-keyframes "p4" {
 from {
   -webkit-transform: scale(0);
   transform: scale(0);
 }
 to {
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

@keyframes "button" {
 from {
    -webkit-transform: scale(0);
   	-moz-transform: scale(0);
   	-o-transform: scale(0);
   	transform: scale(0);
 }
 to {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	transform: scale(1);
 }

}

@-moz-keyframes button {
 from {
   -moz-transform: scale(0);
   transform: scale(0);
 }
 to {
   -moz-transform: scale(1);
   transform: scale(1);
 }

}

@-webkit-keyframes "button" {
 from {
   -webkit-transform: scale(0);
   transform: scale(0);
 }
 to {
   -webkit-transform: scale(1);
   transform: scale(1);
 }

}

body {
  margin: 0;
  padding: 0;
}
.banner {
  font-family: Verdana, sans-serif;
  position: relative;
  width: 728px;
  height: 90px;
  margin: 10% auto;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: -webkit-radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
  background: -moz-radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
  background: radial-gradient(center center, ellipse cover, #fcfcfc 50%, #ebebeb);
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
}
.colors {
  position: absolute;
  bottom: 0;
  width: 181.5px;
  height: 4px;
  z-index: 10;
}
.blue {
  background: blue;
  left: 0;
}
.red {
  background: red;
  left: 181px;
}
.yellow {
  background: yellow;
  left: 363px;
}
.green {
  background: green;
  right: 0;
}
.frame1 {
  position: relative;
  top: 0;
  -webkit-animation: frame1 500ms linear 3s forwards;
  -moz-animation: frame1 500ms linear 3s forwards;
  animation: frame1 500ms linear 3s forwards;
}
.text {
  color: #63b9d7;
  text-align: center;
}
.p1 {
  font-size: 17px;
  line-height: 45px;
}
.span {
  color: #222;
}
.frame2 {
  position: relative;
  top: 90px;
  -webkit-animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
  -moz-animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
  animation: frame2 500ms linear 3500ms forwards, frame2-1 500ms linear 7500ms forwards;
}
.plataforma {
  position: relative;
  width: 678px;
  height: 12px;
  border-radius: 10px;
  background-color: #3399cc;
  background-image: -webkit-radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);
background-image: -moz-radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);
background-image: radial-gradient(center, circle contain, #3399cc 50%, #000000 60%, transparent 70%);

-webkit-background-size: 45px 12px;
-moz-background-size: 45px 12px;
background-size: 45px 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  border-bottom: none;
  margin: 0 auto;
}
.adword {
  position: relative;
  margin-top: -50px;
  left: 65px;
  float: left;
  -webkit-animation: adword 1500ms linear 4s forwards;
  -moz-animation: adword 1500ms linear 4s forwards;
  animation: adword 1500ms linear 4s forwards;
}
.adwords {
  display: block;
  float: left;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: -1px;
  position: relative;
  top: 14px;
}
.ar {
  color: red;
  top: 13px;
}
.ds {
  color: #ff9900;
}
.wd {
  color: #56ab52;
}
.o {
  color: #3399cc;
}
.-deg {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.deg {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  transform: rotate(10deg);
}
.cifrao {
  position: absolute;
  top: -50px;
  right: 266px;
  -webkit-animation: cifrao 1s linear 5s forwards;
  -moz-animation: cifrao 1200ms linear 5s forwards;
  animation: cifrao 1200ms linear 5s forwards;
}
.cif {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border: solid 2px black;
  border-radius: 50%;
  background: #3399cc;
  box-shadow: 0 0 0 2px #3399cc;
  color: white;
  text-align: center;
  font-family: 'Arial';
  font-size: 22px;
  line-height: 22px;
}
.cif:first-child {
  -webkit-animation: cif-1 1s ease-in-out 5500ms forwards;
	-moz-animation: cif-1 1s ease-in-out 5500ms forwards;
	animation: cif-1 1s ease-in-out 5500ms forwards;
}
.cif:nth-child(2) {
  -webkit-animation: cif-2_5 1s ease-in-out 5400ms forwards;
	-moz-animation: cif-2_5 1s ease-in-out 5400ms forwards;
	animation: cif-2_5 1s ease-in-out 5400ms forwards;
}
.cif:nth-child(3) {
  -webkit-animation: cif-3 1s ease-in-out 5300ms forwards;
	-moz-animation: cif-3 1s ease-in-out 5300ms forwards;
	animation: cif-3 1s ease-in-out 5300ms forwards;
}
.cif:nth-child(4) {
  -webkit-animation: cif-4 1100ms ease-in-out 5200ms forwards;
	-moz-animation: cif-4 1100ms ease-in-out 5200ms forwards;
	animation: cif-4 1100ms ease-in-out 5200ms forwards;
}
.cif:last-child {
  -webkit-animation: cif-2_5 1100ms ease-in 5s forwards;
  -moz-animation: cif-2_5 1100ms ease-in 5s forwards;
  animation: cif-2_5 1100ms ease-in 5s forwards;
}
.processor {
  position: relative;
  top: -47px;
  width: 200px;
  height: 35px;
  margin: 0 auto;
  background-color: #c7c9c8;
  border-top-left-radius: 40px 8px;
  border-top-right-radius: 13px 5px;
}
.processor:after {
  position: absolute;
  top: -1px;
  left: 17px;
  content: "";
  width: 163px;
  height: 35px;
  background-color: gray;
  border: 1px solid #D4D4D4;
  border-bottom: none;
}
.sistema {
  position: relative;
  top: -102px;
  width: 155px;
  height: 66px;
  margin: 0 auto;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: none;
  background-color: #3399cc;
}
.sistema:before {
  position: absolute;
  top: 6px;
  left: 77px;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: solid 3px white;
  z-index: 9;
}
.sistema:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 92px;
  width: 4px;
  height: 12px;
  background-color: white;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  transform: rotate(-40deg);
  z-index: 9;
}
.boxleft {
  position: relative;
  top: 25px;
  width: 20px;
  height: 40px;
  border-top: solid 1px #c7c9c8;
  border-right: solid 1px #c7c9c8;
}
.boxleft:after {
  position: absolute;
  top: 8px;
  left: 3px;
  content: "";
  width: 10px;
  height: 10px;
  background-color: black;
  box-shadow: 0 7px 0 #3399cc, 0 8px 0 #c7c9c8, 0 9px 0 #3399cc, 0 10px 0 #c7c9c8, 0 11px 0 #3399cc, 0 12px 0 #c7c9c8, 0 13px 0 #3399cc, 0 14px 0 #c7c9c8, 0 15px 0 #3399cc, 0 16px 0 #c7c9c8, 0 17px 0 #3399cc, 0 18px 0 #c7c9c8, 0 19px 0 #3399cc, 0 20px 0 #c7c9c8;
}
.boxleft:before {
  position: absolute;
  top: -18px;
  left: 20px;
  content: "";
  height: 18px;
  border-right: solid 1px #c7c9c8;
  box-shadow: 80px 40px 0 #c7c9c8;
}
.gear-large {
  position: relative;
  top: -55px;
  left: 10px;
  width: 65px;
  height: 65px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #c7c9c8;
  z-index: 2;
  -webkit-animation: gearlarge 4s linear infinite;
  -moz-animation: gearlarge 4s linear infinite;
  animation: gearlarge 4s linear infinite;
}
.gear-large-in {
  position: relative;
  top: 4px;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  background-color: #c7c9c8;
  border-radius: 50%;
  border: dotted 5px #0e4c7c;
}
.gear-large-in:after {
  position: absolute;
  top: 0;
  content: "";
  width: 46px;
  height: 46px;
  margin: 0 auto;
  background-color: #0e4c7c;
  border-radius: 50%;
}
.search:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 12px;
  width: 4px;
  height: 12px;
  background-color: white;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  transform: rotate(-40deg);
}
.gear-small {
  position: relative;
  top: -87px;
  left: -32px;
  width: 45px;
  height: 45px;
  margin: 0 auto;
  background-color: #c7c9c8;
  border-radius: 50%;
  z-index: 5;
  -webkit-animation: gearsmall 3s linear infinite;
  -moz-animation: gearsmall 3s linear infinite;
  animation: gearsmall 3s linear infinite;
}
.gear-small-in {
  position: relative;
  top: 3px;
  width: 29px;
  height: 29px;
  margin: 0 auto;
  background-color: #c7c9c8;
  border-radius: 50%;
  border: dotted 5px white;
  z-index: 9;
}
.gear-small-in:after {
  position: absolute;
  content: "";
  width: 29px;
  height: 29px;
  margin: 0 auto;
  background: #ffffff -webkit-radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);
background: #ffffff -moz-radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);
background: #ffffff radial-gradient(center, circle contain, #0e4c7c 15%, transparent 32%, transparent 100%);

  border-radius: 50%;
}
.pistao {
  position: relative;
  top: -151px;
  left: 50px;
  width: 23px;
  height: 66px;
  margin: 0 auto;
  background-color: white;
  border-top: solid 4px black;
}
.pistao:after {
  content: "";
  position: absolute;
  top: 53px;
  left: -95px;
  width: 79px;
  border-bottom: solid 1px #c7c9c8;
}
.pistao:before {
  content: "";
  position: absolute;
  top: 16px;
  left: 23px;
  width: 16px;
  border-bottom: solid 1px #c7c9c8;
}
.pistaotop {
  position: relative;
  top: 4px;
  width: 9px;
  height: 9px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid #000;
  -webkit-animation: pistao-top 350ms linear alternate infinite;
  -moz-animation: pistao-top 350ms linear alternate infinite;
  animation: pistao-top 350ms linear alternate infinite;
}
.pistaotop:after {
  position: absolute;
  top: 9px;
  left: 4px;
  content: "";
  width: 2px;
  height: 10px;
  background-color: black;
}
.pistao-in {
  position: relative;
  top: 12px;
  width: 15px;
  height: 38px;
  margin: 0px auto;
  background-color: #ff9900;
  -webkit-animation: pistao-in 350ms linear alternate infinite;
  -moz-animation: pistao-in 350ms linear alternate infinite;
  animation: pistao-in 350ms linear alternate infinite;
}
.frame3 {
  position: absolute;
  top: -75px;
  width: 726px;
  -webkit-animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
  -moz-animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
  animation: frame3 500ms linear 7500ms forwards, frame3-1 500ms linear 10500ms forwards;
}
.p3 {
  font-size: 17px;
  line-height: 10px;
}
.frame4 {
  position: absolute;
  top: 0;
  width: 726px;
  padding: 0 10px 0 25px;
  opacity: 0;
  -webkit-animation: frame4 100ms linear 11s forwards;
  -moz-animation: frame4 100ms linear 11s forwards;
  animation: frame4 100ms linear 11s forwards;
}
.google {
  font-family: Times, serif;
  font-size: 35px;
  line-height: 10px;
  float: left;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-animation: google 500ms ease-in-out 11s forwards;
  -moz-animation: google 500ms ease-in-out 11s forwards;
  animation: google 500ms ease-in-out 11s forwards;
}
.Gg {
  color: #3399cc;
}
.oe {
  color: #ea325b;
}
._o {
  color: #fcc547;
}
._l {
  color: #56ab52;
}
.engage {
  font-family: Arial, sans-serif;
  color: #726C6E;
  font-size: 26px;
}
.p4 {
  padding-top: 10px;
  font-size: 16px;
  width: 221px;
  text-align: left;
  float: left;
  margin-left: 20px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-animation: p4 500ms ease-in-out 11500ms forwards;
  -moz-animation: p4 500ms ease-in-out 11500ms forwards;
  animation: p4 500ms ease-in-out 11500ms forwards;
}
.button {
  width: 181px;
  height: 32px;
  float: left;
  margin: 28px 0 0 45px;
  background: #5086E0;
  color: white;
  font-size: 15px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
  -moz-animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
  animation: button 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 12s forwards;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................