Appirio Demos

Developer
UX Snippets
Size
4,466 Kb
Views
18,216
  1. Appirio Demos Previews
  2. Appirio Demos HTML Codes
  3. Appirio Demos CSS Codes

How do I make an appirio demos?

Testing some simple animation techniques with SVG images.. What is a appirio demos? How do you make a appirio demos? This script and codes were developed by UX Snippets on 27 October 2022, Thursday.

Appirio Demos Previews
IQ Test

Appirio Demos - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Appirio Demos</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="overlay"></div>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 1280" enable-background="new 0 0 1280 1280" xml:space="preserve">
<g class="cloud-01">	<path fill="#dddddd" d="M1157.4,441.6c0,0-0.1-0.1-0.1-0.1c-6.4-202.6-172.8-365.8-377.6-365.8c-147.2,0-275.1,84.2-338.1,207.9	c0,0.1-0.2,0-0.2,0.1c226.8,112.6-33.9-7.4,52.4-7.4c-78.9,0-146.1,51.2-169.6,122.6c0,0-0.1,0.1-0.1,0.1	C96.9,427.4,2.5,537.8,0.1,669.8c-3,159,126.8,289.1,285.8,289.1h708.3c156.7,0,286.5-128.2,285.9-284.9	C1279.6,577.5,1231.7,492.6,1157.4,441.6z"/>
</g>
<g class="cloud-02">	<path fill="#5E90C0" d="M297.6,1193.6c-104.5,0-188.8-86.4-188.8-192c0-104.5,83.2-189.9,185.6-192	c26.7-152.5,161.1-266.7,317.9-266.7c132.3,0,252.8,82.1,300.8,205.9c117.3,5.3,211.2,102.4,211.2,221.9	c0,122.7-99.2,222.9-220.8,222.9H297.6z"/>	<path fill="#FFFFFF" d="M612.3,553.6c134.4,0,249.6,86.4,293.3,205.9c115.2,1.1,208,96,208,211.2c0,116.3-93.9,212.3-210.1,212.3	H297.6c-98.1,0-178.1-82.1-178.1-181.3c0-98.1,80-181.3,178.1-181.3c2.1,0,3.2,0,5.3,0C325.3,669.9,455.5,553.6,612.3,553.6 M612.3,532.3c-158.9,0-296.5,114.1-327.5,267.7c-103.5,6.4-186.7,94.9-186.7,201.6c0,112,89.6,202.7,199.5,202.7h605.9	c126.9,0,231.5-104.5,231.5-233.6c0-122.7-94.9-222.9-214.4-231.5C869.3,614.4,746.7,532.3,612.3,532.3L612.3,532.3z"/>
</g>
</svg>
<div class="logo"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/84940/appirio-logo-vert.png" class="img-responsive"/> <div class="tagline">Demos</div> <p class="info">Nothing to see here, check your URL and try again.</p>
</div>
</body>
</html>

Appirio Demos - Script Codes CSS Codes

@-webkit-keyframes heart-beat { 0% { -webkit-transform: scale(0.5); } 50% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes heart-beat { 0% { -moz-transform: scale(0.5); } 50% { -moz-transform: scale(0); } 100% { -moz-transform: scale(1); }
}
@keyframes heart-beat { 0% { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 50% { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes scale { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); }
}
@-moz-keyframes scale { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(0.9); } 100% { -moz-transform: scale(1); }
}
@keyframes scale { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes shake { 0% { -webkit-transform: translate(0px, 0px) rotate(5deg); } 10% { -webkit-transform: translate(-1px, -1px) rotate(3deg); } 20% { -webkit-transform: translate(-2px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(-1deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(3deg); } 60% { -webkit-transform: translate(-2px, 1px) rotate(5deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(3deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(3deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(5deg); }
}
@-moz-keyframes shake { 0% { -moz-transform: translate(0px, 0px) rotate(5deg); } 10% { -moz-transform: translate(-1px, -1px) rotate(3deg); } 20% { -moz-transform: translate(-2px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(-1deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(3deg); } 60% { -moz-transform: translate(-2px, 1px) rotate(5deg); } 70% { -moz-transform: translate(2px, 1px) rotate(3deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(3deg); } 100% { -moz-transform: translate(0px, 0px) rotate(5deg); }
}
@keyframes shake { 0% { -webkit-transform: translate(0px, 0px) rotate(5deg); -moz-transform: translate(0px, 0px) rotate(5deg); -ms-transform: translate(0px, 0px) rotate(5deg); -o-transform: translate(0px, 0px) rotate(5deg); transform: translate(0px, 0px) rotate(5deg); } 10% { -webkit-transform: translate(-1px, -1px) rotate(3deg); -moz-transform: translate(-1px, -1px) rotate(3deg); -ms-transform: translate(-1px, -1px) rotate(3deg); -o-transform: translate(-1px, -1px) rotate(3deg); transform: translate(-1px, -1px) rotate(3deg); } 20% { -webkit-transform: translate(-2px, 0px) rotate(1deg); -moz-transform: translate(-2px, 0px) rotate(1deg); -ms-transform: translate(-2px, 0px) rotate(1deg); -o-transform: translate(-2px, 0px) rotate(1deg); transform: translate(-2px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(-1deg); -moz-transform: translate(0px, 2px) rotate(-1deg); -ms-transform: translate(0px, 2px) rotate(-1deg); -o-transform: translate(0px, 2px) rotate(-1deg); transform: translate(0px, 2px) rotate(-1deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); -moz-transform: translate(1px, -1px) rotate(1deg); -ms-transform: translate(1px, -1px) rotate(1deg); -o-transform: translate(1px, -1px) rotate(1deg); transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(3deg); -moz-transform: translate(-1px, 2px) rotate(3deg); -ms-transform: translate(-1px, 2px) rotate(3deg); -o-transform: translate(-1px, 2px) rotate(3deg); transform: translate(-1px, 2px) rotate(3deg); } 60% { -webkit-transform: translate(-2px, 1px) rotate(5deg); -moz-transform: translate(-2px, 1px) rotate(5deg); -ms-transform: translate(-2px, 1px) rotate(5deg); -o-transform: translate(-2px, 1px) rotate(5deg); transform: translate(-2px, 1px) rotate(5deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(3deg); -moz-transform: translate(2px, 1px) rotate(3deg); -ms-transform: translate(2px, 1px) rotate(3deg); -o-transform: translate(2px, 1px) rotate(3deg); transform: translate(2px, 1px) rotate(3deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); -moz-transform: translate(-1px, -1px) rotate(1deg); -ms-transform: translate(-1px, -1px) rotate(1deg); -o-transform: translate(-1px, -1px) rotate(1deg); transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(3deg); -moz-transform: translate(2px, 2px) rotate(3deg); -ms-transform: translate(2px, 2px) rotate(3deg); -o-transform: translate(2px, 2px) rotate(3deg); transform: translate(2px, 2px) rotate(3deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(5deg); -moz-transform: translate(0px, 0px) rotate(5deg); -ms-transform: translate(0px, 0px) rotate(5deg); -o-transform: translate(0px, 0px) rotate(5deg); transform: translate(0px, 0px) rotate(5deg); }
}
body { font-family: 'Roboto', sans-serif;
}
.overlay { width: 95%; height: 95%; position: absolute; background: -webkit-linear-gradient(white, rgba(255, 255, 255, 0) 50%) left repeat; background: linear-gradient(white, rgba(255, 255, 255, 0) 50%) left repeat; z-index: 3;
}
header { margin: 0; position: fixed; z-index: 5; top: 0; padding: 2rem 0; width: 100%; left: 0; background: rgba(0, 0, 0, 0.8); color: white;
}
footer { margin: 0; position: fixed; bottom: 0; width: 100%; padding: 2rem 0; left: 0; text-align: center; background: rgba(0, 0, 0, 0.8); color: white;
}
.img-responsive { max-width: 100%; height: auto;
}
.logo { text-align: center; width: 100%; margin: 0 auto; position: absolute; left: 0; z-index: 3; top: 40%; transform: translateY(-50%);
}
.logo .tagline { margin-top: 1rem; font-size: 60px; letter-spacing: 15px; font-weight: 100; color: rgba(0, 0, 0, 0.5); text-transform: uppercase;
}
.logo .info { margin-top: 3rem; position: absolute; background: rgba(175, 200, 224, 0.8); color: white; width: 100%; text-align: center; padding: 1rem 0;
}
svg { position: fixed; right: 30%; top: 0; opacity: 0.5; text-align: center; display: block; height: auto; margin: 1rem; -webkit-animation: heart-beat 0.5s 1; -moz-animation: heart-beat 0.5s 1; animation: heart-beat 0.5s 1;
}
.cloud-01 { -webkit-animation-name: shake; -moz-animation-name: shake; animation-name: shake; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; animation-duration: 4s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
}
.cloud-02 { -webkit-animation-name: scale; -moz-animation-name: scale; animation-name: scale; -webkit-animation-duration: 4s; -moz-animation-duration: 4s; animation-duration: 4s; -webkit-transform-origin: 30% 30%; -moz-transform-origin: 30% 30%; -ms-transform-origin: 30% 30%; -o-transform-origin: 30% 30%; transform-origin: 30% 30%; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
}
.cloud-03 { -webkit-animation-name: shake; -moz-animation-name: shake; animation-name: shake; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; animation-duration: 8s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear;
}
Appirio Demos - Script Codes
Appirio Demos - Script Codes
Home Page Home
Developer UX Snippets
Username appirio-ux
Uploaded October 27, 2022
Rating 3
Size 4,466 Kb
Views 18,216
Do you need developer help for Appirio Demos?

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!

UX Snippets (appirio-ux) Script Codes
Name
Range Slider
Material Icon toggling
Tree Nav - Jade template
Color Indicators
Clone the things
Animated SVG
Weekly Email - 02
Fancyselect Sample
Update for IE11 support
Scroll Progress
Create amazing captions 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!