Cessna

Developer
Andrew Bales
Size
2,407 Kb
Views
26,312
  1. Cessna Previews
  2. Cessna HTML Codes
  3. Cessna CSS Codes

How do I make an cessna?

Cessna logo, animated SVG.. What is a cessna? How do you make a cessna? This script and codes were developed by Andrew Bales on 03 October 2022, Monday.

Cessna Previews
IQ Test

Cessna - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cessna</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="logo"> <div class="shapes"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> <g id="colors"> <path id="bottom-red" fill="#D50032" d="M242.5,269.75h16.75v-27L244.5,257.5c0,0-2,2.75-2,6.5V269.75z"/> <path id="top-red" fill="#D50032" d="M225,235.75h27.5c0,0-14.875,16.875-21.25,17.5H225V235.75z"/> <path id="bottom-blue" fill="#0077C8" d="M284.833,216.333v53.417H268.5v-34C268.5,235.75,266.999,233.5,284.833,216.333z"/> <path id="top-blue" fill="#0077C8" d="M278.917,210H225v17.167h32.167c0,0,3.018-0.072,10.75-7C270.648,217.719,274.605,214.456,278.917,210z"/> </g> </svg> </div>
</div>
<div class="cessna"> <h1>Cessna</h1>
</div>
</body>
</html>

Cessna - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { width: 100vw; height: 100vh; overflow: hidden;
}
h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;	font-size: 7em;	font-weight: 700;	letter-spacing: -10px;
}
.cessna { position: absolute; top: 0; left: 0; width: 100%; margin: 250px auto; text-align: center;
}
.logo { width: 100%; height: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-animation: fly 8s infinite; animation: fly 8s infinite;
}
.shapes { width: 500px; height: 500px; -webkit-transform: scale(5); transform: scale(5); margin: 0 auto;
}
#top-blue { -webkit-animation: top-blue 4s infinite alternate; animation: top-blue 4s infinite alternate;
}
#bottom-blue { -webkit-animation: bottom-blue 4s infinite alternate; animation: bottom-blue 4s infinite alternate;
}
#top-red { -webkit-animation: top-red 4s infinite alternate; animation: top-red 4s infinite alternate;
}
#bottom-red { -webkit-animation: bottom-red 4s infinite alternate; animation: bottom-red 4s infinite alternate;
}
@-webkit-keyframes top-blue { 0% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 30% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 50% {-webkit-transform: translate(0px,6px);transform: translate(0px,6px);} 100% {-webkit-transform: translate(0px,6px);transform: translate(0px,6px);}
}
@keyframes top-blue { 0% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 30% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 50% {-webkit-transform: translate(0px,6px);transform: translate(0px,6px);} 100% {-webkit-transform: translate(0px,6px);transform: translate(0px,6px);}
}
@-webkit-keyframes bottom-blue { 0% {-webkit-transform: translate(0px,0px) rotate(0deg);transform: translate(0px,0px) rotate(0deg);} 30% {-webkit-transform: translate(0px,0px) rotate(0deg);transform: translate(0px,0px) rotate(0deg);} 50% {-webkit-transform: translate(-4px,-3px) rotate(.5deg);transform: translate(-4px,-3px) rotate(.5deg);} 100% {-webkit-transform: translate(-4px,-3px) rotate(.5deg);transform: translate(-4px,-3px) rotate(.5deg);}
}
@keyframes bottom-blue { 0% {-webkit-transform: translate(0px,0px) rotate(0deg);transform: translate(0px,0px) rotate(0deg);} 30% {-webkit-transform: translate(0px,0px) rotate(0deg);transform: translate(0px,0px) rotate(0deg);} 50% {-webkit-transform: translate(-4px,-3px) rotate(.5deg);transform: translate(-4px,-3px) rotate(.5deg);} 100% {-webkit-transform: translate(-4px,-3px) rotate(.5deg);transform: translate(-4px,-3px) rotate(.5deg);}
}
@-webkit-keyframes top-red { 0% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 33% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 63% {-webkit-transform: translate(6px,0px);transform: translate(6px,0px);} 100% {-webkit-transform: translate(6px,0px) rotate(.5deg);transform: translate(6px,0px) rotate(.5deg);}
}
@keyframes top-red { 0% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 33% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 63% {-webkit-transform: translate(6px,0px);transform: translate(6px,0px);} 100% {-webkit-transform: translate(6px,0px) rotate(.5deg);transform: translate(6px,0px) rotate(.5deg);}
}
@-webkit-keyframes bottom-red { 0% {-webkit-transform: translate(0px,0px) rotate(0deg);transform: translate(0px,0px) rotate(0deg);} 33% {-webkit-transform: translate(0px,0px) rotate(0deg);transform: translate(0px,0px) rotate(0deg);} 63% {-webkit-transform: translate(2px,-9px) rotate(.5deg);transform: translate(2px,-9px) rotate(.5deg);} 100% {-webkit-transform: translate(2px,-9px) rotate(.5deg);transform: translate(2px,-9px) rotate(.5deg);}
}
@keyframes bottom-red { 0% {-webkit-transform: translate(0px,0px) rotate(0deg);transform: translate(0px,0px) rotate(0deg);} 33% {-webkit-transform: translate(0px,0px) rotate(0deg);transform: translate(0px,0px) rotate(0deg);} 63% {-webkit-transform: translate(2px,-9px) rotate(.5deg);transform: translate(2px,-9px) rotate(.5deg);} 100% {-webkit-transform: translate(2px,-9px) rotate(.5deg);transform: translate(2px,-9px) rotate(.5deg);}
}
@-webkit-keyframes fly { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 30% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 75% {tranform: rotate(260deg);} 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes fly { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 30% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 75% {tranform: rotate(260deg);} 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
Cessna - Script Codes
Cessna - Script Codes
Home Page Home
Developer Andrew Bales
Username agbales
Uploaded October 03, 2022
Rating 3.5
Size 2,407 Kb
Views 26,312
Do you need developer help for Cessna?

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!

Andrew Bales (agbales) Script Codes
Name
Floating Camel
Open Weather Map API
The Motherlode
The Glacier - A Cinematic Novel
Angular Reading List
Adopt Sweater Kitten
Donald Trump - The New Yorker
Kitten Carousel
Wikipedia Viewer
Jigsaw
Create amazing blog posts 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!