Banner Google Engage CSS

Developer
Size
4,893 Kb
Views
16,192

How do I make an banner google engage css?

Desafio 17 de css do Maujor*outdated *. What is a banner google engage css? How do you make a banner google engage css? This script and codes were developed by João Victor on 14 October 2022, Friday.

Banner Google Engage CSS Previews

Banner Google Engage CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title> Banner Google Engage CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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> <script src="js/index.js"></script>
</body>
</html>

Banner Google Engage CSS - Script Codes CSS Codes

/****
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;
}

Banner Google Engage CSS - Script Codes JS Codes

//outdated
Banner Google Engage CSS - Script Codes
Banner Google Engage CSS - Script Codes
Home Page Home
Developer João Victor
Username jotavejv
Uploaded October 14, 2022
Rating 3.5
Size 4,893 Kb
Views 16,192
Do you need developer help for Banner Google Engage CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

João Victor (jotavejv) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!