HTML SVG under construction
by Good Muyis
HTML
<style>
body {}
#content {
font-family: "Raleway", sans-serif;
text-align: center;
margin-top: 30px;
}
h1 {
font-family: "Raleway", sans-serif;
}
h4 {
font-family: "Raleway", sans-serif;
}
#svgElement {
width: 620px;
margin-left: auto;
margin-right: auto;
}
#ConeLight {
fill: orange !important;
animation: 0.6s infinite coneCycle;
}
@-webkit-keyframes coneCycle {
50% {
fill: white;
}
100% {
fill: #d62209;
}
}
#CraneLight {
fill: white;
animation: 0.6s infinite coneCycle;
}
#Winch {
transform: translateX(88px);
animation: 4s linear infinite winchCycle;
animation-direction: alternate-reverse;
}
@-webkit-keyframes winchCycle {
0% {
transform: translateX(88px);
}
100% {
transform: translateX(4px);
}
}
#PaintRoller {
animation: 0.7s ease infinite paintRoller;
transform: translateY(-1px);
animation-direction: alternate-reverse;
}
@-webkit-keyframes paintRoller {
0% {
transform: translateY(-7px);
}
100% {
transform: translateY(21px);
}
}
</style>
<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
<script src="https://use.typekit.net/ebp7xrq.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<div id="wrapper">
<div id="content">
<h4>Page Under Construction</h4>
<p>We're currently in the process of updating this page. check back later</p>
<div id="svgElement">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 834 938" style="enable-background:new 0 0 834 938;" xml:space="preserve">
<style type="text/css">
.st0 {
...