HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!-- Remove comment tag to see the giraffe pattern I traced -->
<!-- <div id="giraffe"></div> -->
<!-- Giraffe Head -->
<div id="head-1" class="head">
<span id="h-l-1" class="left-span"></span>
<span id="h-r-1" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f <br>f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i<br>
<span class="head-1-span1"></span> r a f f e G <br><span class="head-1-span2"></span>i r a f f e <br><span class="head-1-span3"></span>G i r</p>
</div>
<div id="head-2" class="head">
<span id="h-l-2" class="left-span"></span>
<span id="h-r-2" class="right-span"></span>
<p><br>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f</p>
</div>
<div id="head-3" class="head">
<span id="h-l-3" class="left-span"></span>
<span id="h-r-3" class="right-span"></span>
<p><br>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r</p>
</div>
<div id="head-4" class="head">
<span id="h-l-4" class="left-span"></span>
<span id="h-r-4" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e<br>G i r a f f e G<br>i r a f f e G<br> i r a f f e<br> G i</p>
</div>
<div id="head-5" class="head">
<span id="h-l-5" class="left-span"></span>
<span id="h-r-5" class="right-span"></span>
<span id="h-l-5-2" class="left-span"></span>
<span id="h-r-5-2" class="right-span"></span>
<p><br><span class="head-5-span1"></span>G i r a f <br>f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a </p>
</div>
<div id="head-6" class="head">
<span id="h-l-6" class="left-span"></span>
<span id="h-r-6" class="right-span"></span>
<p><br>G i r a f f e <br> G i r a f<br> f e G i r a f f e G <br>i r a f f e G <br>i r a f </p>
</div>
<div id="head-7" class="head">
<span id="h-l-7" class="left-span"></span>
<span id="h-r-7" class="right-span"></span>
<p>G i r a <br><span class="head-7-span1"></span>f f e G i <br> r a f f e G i r a f f<br>f e G i r a f f e G i</p>
</div>
<div id="head-8" class="head">
<span id="h-l-8" class="left-span"></span>
<span id="h-r-8" class="right-span"></span>
<p>G i r a f f e G i r a f f e</p>
</div>
<div id="head-9" class="head">
<span id="h-l-9" class="left-span"></span>
<span id="h-r-9" class="right-span"></span>
<p>G i r a f f e G i r a f f e</p>
</div>
<div id="head-10" class="head">
<span id="h-l-10" class="left-span"></span>
<span id="h-r-10" class="right-span"></span>
<span id="h-l-10-2" class="left-span"></span>
<p>G i <br>r a f f e G i r a f f e G i r a a <br> f f e <br> G i r <br> a f f <br> e G i <br> r a f f <br> e G i <br>r a f f e<br> G i r a f <br> f e G i r <br> a f f e G <br>i r a f f <br>e G i r<br> a f f e G i r a f f<br> e G i r a f f e G<br> i r a
f f e G i r<br> a f f e G i r a <br> f f e G i r a<br>f f e G i r<br> a f f e G <br>i r a f f e<br> G i r a f f <br> e G i r a f <br>f e G i r a f f e<br> G i r a f f e G i r a f f e G i r a f f e <br>G i r a f f e G i r a f f e G i r a f <br> f e
G i r a f f e G i r a f f</p>
</div>
<!-- End Giraffe Head -->
<!-- Giraffe Body -->
<div id="spot-1" class="spot">
<span id="l-1" class="left-span"></span>
<span id="r-1" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G</p>
</div>
<div id="spot-2" class="spot">
<span id="l-2" class="left-span"></span>
<span id="r-2" class="right-span"></span>
<p><br>G i r <br>a f f e G i <br> r a f f e G i <br>r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r</p>
</div>
<div id="spot-3" class="spot">
<span id="l-3" class="left-span"></span>
<span id="r-3" class="right-span"></span>
<p><span class="spot-3-span1"></span>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e <br>G i r a f f e <br>G i r</p>
</div>
<div id="spot-4" class="spot">
<span id="l-4" class="left-span"></span>
<span id="r-4" class="right-span"></span>
<p>G i r a f <br> f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r</p>
</div>
<div id="spot-5" class="spot">
<span id="l-5" class="left-span"></span>
<span id="r-5" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r</p>
</div>
<div id="spot-6" class="spot">
<span id="l-6" class="left-span"></span>
<span id="r-6" class="right-span"></span>
<p>G i r a f f <br> e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r</p>
</div>
<div id="spot-7" class="spot">
<span id="l-7" class="left-span"></span>
<span id="r-7" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e</p>
</div>
<div id="spot-8" class="spot">
<span id="l-8" class="left-span"></span>
<span id="r-8" class="right-span"></span>
<p><br> G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a</p>
</div>
<div id="spot-9" class="spot">
<span id="l-9" class="left-span"></span>
<span id="r-9" class="right-span"></span>
<p><br><br>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f</p>
</div>
<div id="spot-10" class="spot">
<span id="l-10" class="left-span"></span>
<span id="r-10" class="right-span"></span>
<span id="l-10-2" class="left-span"></span>
<span id="r-10-2" class="right-span"></span>
<p><br>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f</p>
</div>
<div id="spot-11" class="spot">
<span id="l-11" class="left-span"></span>
<span id="r-11" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e</p>
</div>
<div id="spot-12" class="spot">
<span id="l-12" class="left-span"></span>
<span id="r-12" class="right-span"></span>
<p><br>G i r a
<Br>f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e Gi r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i</p>
</div>
<div id="spot-13" class="spot">
<span id="l-13" class="left-span"></span>
<span id="r-13" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r <br>a</p>
</div>
<div id="spot-14" class="spot">
<span id="l-14" class="left-span"></span>
<span id="r-14" class="right-span"></span>
<p><br>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e</p>
</div>
<div id="spot-15" class="spot">
<span id="l-15" class="left-span"></span>
<span id="r-15" class="right-span"></span>
<p> <br> <br> G i r a f f e <span class="spot-15-span1"></span>G i r a f f e G i r a f f e G i r a f<span class="spot-15-span2"></span> f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G <br>i r a f f e G i r a f f e G i r a f f e <br>G i r a f f e G i r a f f e </p>
</div>
<div id="spot-16" class="spot">
<span id="l-16" class="left-span"></span>
<span id="r-16" class="right-span"></span>
<p> <span class="spot-16-span1"></span>G i r a f<br><span class="spot-16-span2"></span>f e G i r a f f e<br><span class="spot-16-span3"></span>G i r a f f e G i r a f<br><span class="spot-16-span4"></span>f e G i r a f f e G i r a f f <br><span class="spot-16-span5"></span>e
G i r a f f e G i r a f f e G i<br><span class="spot-16-span6"></span> r a f f e G i r a f f e G i r a f f e G <br><span class="spot-16-span7"></span> i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e <span class="spot-16-span8"></span> G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e <span class="spot-16-span9"></span>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a<span class="spot-16-span10"></span>f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a<span class="spot-16-span11"></span>f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e<span class="spot-16-span12"></span> G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f<br>f e G i r a f f e G i r<br>a f f e G i r a f<br>f e G i r</p>
</div>
<div id="spot-17" class="spot">
<span id="l-17" class="left-span"></span>
<span id="r-17" class="right-span"></span>
<p><br> G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i<br> r a f</p>
</div>
<div id="spot-18" class="spot">
<span id="l-18" class="left-span"></span>
<span id="r-18" class="right-span"></span>
<p><br><span class="spot-18-span1"></span>G i r a f f<br><span class="spot-18-span2"></span>e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i<br> r a f f e G i r a f f e G i r a f f e G i <br>r a f f e G i r a f f e G i r a</p>
</div>
<div id="spot-19" class="spot">
<span id="l-19" class="left-span"></span>
<span id="r-19" class="right-span"></span>
<p><span class="spot-19-span1">G i r a f f <br><span class="spot-19-span2">e G i r a f f e G i<br><span class="spot-19-span3">r a f f e G i r a f f e G i r<br><span class="spot-19-span4"> a f f e G i r a f f e G i r a f f e <br><span class="spot-19-span5">G i r a f f e G i r a f f e G i r a f f e <br><span class="spot-19-span6"> G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e </p>
</div>
<div id="spot-20" class="spot">
<span id="l-20" class="left-span"></span>
<span id="r-20" class="right-span"></span>
<p><span class="spot-20-span1"></span>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G
i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r
a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f</p>
</div>
<div id="spot-21" class="spot">
<span id="l-21" class="left-span"></span>
<span id="r-21" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i</p>
</div>
<div id="spot-22" class="spot">
<span id="l-22" class="left-span"></span>
<span id="r-22" class="right-span"></span>
<p><br><span class="spot-22-span1"></span>G i r a f f e<br><span class="spot-22-span2"></span> G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e
G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f
f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G</p>
</div>
<div id="spot-23" class="spot">
<span id="l-23" class="left-span"></span>
<span id="r-23" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r</p>
</div>
<div id="spot-24" class="spot">
<span id="l-24" class="left-span"></span>
<span id="r-24" class="right-span"></span>
<span id="l-24-2" class="left-span"></span>
<span id="r-24-2" class="right-span"></span>
<span id="l-24-3" class="left-span"></span>
<span id="r-24-3" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a<br> f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e</p>
</div>
<div id="spot-25" class="spot">
<span id="l-25" class="left-span"></span>
<span id="r-25" class="right-span"></span>
<p><br>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f </p>
</div>
<div id="spot-26" class="spot">
<span id="l-26" class="left-span"></span>
<span id="r-26" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f</p>
</div>
<div id="spot-27" class="spot">
<span id="l-27" class="left-span"></span>
<span id="r-27" class="right-span"></span>
<p>G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f
e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a
f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i
r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a f f e G i r a</p>
</div>
<!-- End Giraffe Body -->
body {
font-family: sans-serif;
font-weight: bold;
font-size: 5px;
background-color: #f7f2e8d9;
color: #c75f11;
}
#giraffe {
position: absolute;
margin-top: -100px;
height: 2000px;
width: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/noun_Giraffe_142451.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
.spot,
.head {
position: absolute;
z-index: 100;
}
.left-span {
float: left;
}
.right-span {
float: right;
}
p {
text-align: justify;
hyphens: auto;
}
/* Head 1 */
#head-1 {
height: 111px;
width: 74px;
left: 11px;
top: 86px;
}
#h-l-1,
#h-r-1 {
height: 111px;
}
#h-l-1 {
width: 37px;
shape-outside: polygon(
96.72% -0.52%,
114.3% 8.21%,
59.47% 6.53%,
33.32% 13.09%,
23.36% 25.3%,
40.2% 44.48%,
70.16% 65.33%,
104.41% 78.45%,
96.93% 98.8%,
8.83% 96.13%,
-0.22% 3.15%
);
}
#h-r-1 {
width: 37px;
shape-outside: polygon(98.34% -0.52%, 118.1% 100.69%, 5.37% 98.24%, 80.11% 93.86%, 110.57% 80.67%, 51.73% 68.17%, 73.95% 58.53%, 41.41% 47.67%, 19.31% 34.05%, 67.77% 23.14%, -4.24% 7.95%);
}
.head-1-span1 {
margin-left: 4px;
}
.head-1-span2 {
margin-left: 9px;
}
.head-1-span3 {
margin-left: 17px;
}
/* End of Head 1 */
/*********************************************/
/* Head 2 */
#head-2 {
height: 111px;
width: 60px;
left: 132px;
top: 18px;
}
#h-l-2,
#h-r-2 {
height: 111px;
}
#h-l-2 {
width: 30px;
shape-outside: polygon(
96.72% 1.28%,
44.29% 8.21%,
29.47% 14.64%,
39.99% 24.81%,
66.69% 34.3%,
90.2% 49.88%,
93.49% 74.34%,
84.41% 88.36%,
58.83% 97.93%,
-0.22% 3.15%
);
}
#h-r-2 {
width: 30px;
shape-outside: polygon(
95.01% 3.98%,
91.43% 96.19%,
46.77% 92.06%,
39.59% 80.67%,
35.06% 68.17%,
31.41% 53.98%,
42.64% 33.15%,
37.77% 15.03%,
5.76% 5.24%
);
}
/* End of Head 2 */
/*********************************************/
/* Head 3 */
#head-3 {
height: 111px;
width: 104px;
left: 191px;
top: 18px;
}
#h-l-3,
#h-r-3 {
height: 111px;
}
#h-l-3 {
width: 52px;
shape-outside: polygon(
108.26% -0.52%,
78.9% 15.42%,
69.86% 34.46%,
66.91% 49.13%,
58.99% 67.63%,
44.04% 83.22%,
24.26% 95.96%,
3.06% 96.13%,
-0.22% 3.15%
);
}
#h-r-3 {
width: 52px;
shape-outside: polygon(
95.01% 3.98%,
95.27% 100.7%,
41.58% 96.28%,
25.62% 81.25%,
18.44% 67.16%,
33.13% 51.05%,
73.73% 46.77%,
62.56% 42.49%,
56.1% 26.84%,
43.54% 17.73%,
30.56% 10.12%,
1.65% 8.02%,
1.92% -1.07%
);
}
/* End of Head 3 */
/*********************************************/
/* Head 4 */
#head-4 {
height: 135px;
width: 142px;
left: 131px;
top: 122px;
}
#h-l-4,
#h-r-4 {
height: 135px;
}
#h-l-4 {
width: 71px;
shape-outside: polygon(27.98% 2.45%, 15.52% 15.42%, 13.52% 34.46%, 14.8% 55.8%, 13.55% 65.41%, 20.99% 72.59%, 31.31% 83.36%, 38.7% 97.29%, 45.1% 97.5%, 3.06% 96.13%, -0.22% 3.15%);
}
#h-r-4 {
width: 71px;
shape-outside: polygon(
92.19% 1.02%,
71.33% 68.11%,
0.18% 99.81%,
0.93% 79.07%,
13.42% 76.28%,
24.21% 70.14%,
15.62% 58.27%,
13.41% 45.12%,
11.76% 29.73%,
21.7% 23.23%,
56.1% 19.43%,
58.74% 12.02%,
81.94% 14.68%
);
}
/* End of Head 4 */
/*********************************************/
/* Head 5 */
#head-5 {
height: 111px;
width: 104px;
left: 259px;
top: 136px;
}
#h-l-5,
#h-r-5 {
height: 55px;
}
#h-l-5-2,
#h-r-5-2 {
height: 56px;
}
#h-l-5 {
width: 64px;
shape-outside: polygon(
109.23% 15.18%,
87.39% 29.97%,
67.18% 47.09%,
46.05% 63.07%,
26.35% 82.95%,
10.87% 97.95%,
-0.22% 3.15%
);
}
#h-r-5 {
width: 40px;
shape-outside: polygon(
101.33% 0.83%,
98.94% 98.38%,
-7.69% 100.07%,
2.68% 88.9%,
32.43% 60.51%,
56.24% 33.84%,
61.04% 18.28%,
13.38% 17.77%,
13.14% -2.78%
);
}
#h-l-5-2 {
width: 37px;
shape-outside: polygon(
30.68% 4.24%,
65.82% 36.17%,
74.55% 72.21%,
91.05% 83.21%,
0.36% 72.92%,
-0.22% 3.15%
);
}
#h-r-5-2 {
width: 67px;
shape-outside: polygon(
72.79% 2.81%,
56.4% 78.82%,
0.18% 85.52%,
20.28% 60.51%,
30.38% 33.45%,
34.18% 5.75%
);
}
.head-5-span1 {
margin-left: 2px;
}
/* End of Head 5 */
/*********************************************/
/* Head 6 */
#head-6 {
height: 47px;
width: 58px;
left: 228px;
top: 248px;
}
#h-l-6,
#h-r-6 {
height: 47px;
}
#h-l-6 {
width: 29px;
shape-outside: polygon(
91.99% 8.79%,
42.03% 30.59%,
21.87% 64.02%,
60.28% 93.9%,
10.87% 97.95%,
-0.22% 3.15%
);
}
#h-r-6 {
width: 29px;
shape-outside: polygon(
101.33% 0.83%,
98.94% 98.38%,
-7.69% 100.07%,
74.03% 71.47%,
73.62% 17.78%,
-0.64% 1.48%
);
}
/* End of Head 6 */
/*********************************************/
/* Head 7 */
#head-7 {
height: 47px;
width: 58px;
left: 42px;
top: 228px;
}
#h-l-7,
#h-r-7 {
height: 47px;
}
#h-l-7 {
width: 29px;
shape-outside: polygon(
78.2% -6.1%,
8.08% 40.62%,
68.55% 54.18%,
132.4% 79.9%,
10.87% 97.95%,
-0.22% 3.15%
);
}
#h-r-7 {
width: 29px;
shape-outside: polygon(
101.33% 0.83%,
98.94% 98.38%,
2.65% 100.07%,
63.68% 62.96%,
63.28% 26.29%,
6.26% 5.74%
);
}
.head-7-span1 {
margin-left: 14px;
}
/* End of Head 7 */
/*********************************************/
/* Head 8 */
#head-8 {
height: 40px;
width: 38px;
left: 66px;
top: 391px;
}
#h-l-8,
#h-r-8 {
height: 40px;
}
#h-l-8 {
width: 19px;
shape-outside: polygon(
104.52% 13.9%,
44.92% 38.12%,
52.75% 79.18%,
53.46% 107.4%,
10.87% 97.95%,
-0.22% 3.15%
);
}
#h-r-8 {
width: 19px;
shape-outside: polygon(
101.33% 0.83%,
98.94% 98.38%,
2.65% 87.57%,
42.63% 60.46%,
47.5% 13.79%,
-7.8% 11.93%,
1.01% -1.76%
);
}
/* End of Head 8 */
/*********************************************/
/* Head 9 */
#head-9 {
height: 40px;
width: 38px;
left: 119px;
top: 399px;
}
#h-l-9,
#h-r-9 {
height: 40px;
}
#h-l-9 {
width: 19px;
shape-outside: polygon(
104.52% 13.9%,
44.92% 38.12%,
52.75% 79.18%,
53.46% 107.4%,
10.87% 97.95%,
-0.22% 3.15%
);
}
#h-r-9 {
width: 19px;
shape-outside: polygon(
101.33% 0.83%,
98.94% 98.38%,
2.65% 87.57%,
42.63% 60.46%,
47.5% 13.79%,
-7.8% 11.93%,
1.01% -1.76%
);
}
/* End of Head 9 */
/*********************************************/
/* Head 10 */
#head-10 {
height: 194px;
width: 218px;
left: 74px;
top: 294px;
}
#h-l-10,
#h-r-10 {
height: 40px;
}
#h-l-10-2 {
height: 164px;
}
#h-l-10 {
width: 197px;
shape-outside: polygon(
101.98% -18.6%,
96.7% 40.62%,
95.9% 71.68%,
94.07% 97.4%,
77.88% 87.95%,
83.03% 15.65%
);
}
#h-r-10 {
width: 21px;
shape-outside: polygon(
101.33% 0.83%,
98.94% 98.38%,
2.65% 87.57%,
42.63% 60.46%,
47.5% 13.79%,
-7.8% 11.93%,
1.01% -1.76%
);
}
#h-l-10-2 {
width: 195px;
shape-outside: polygon(
94.78% -0.1%,
89.02% 7.45%,
83.52% 14.51%,
77.05% 20.9%,
70.4% 29.99%,
66.68% 38.51%,
57.94% 34.91%,
53.3% 42.3%,
52.42% 56.78%,
48.92% 63.14%,
45.61% 67.18%,
39.83% 71.49%,
30.05% 74.13%,
20.62% 75.03%,
8.61% 74.87%,
7.22% 83.97%,
14.85% 89.62%,
0.84% 94.57%,
-0.22% 3.15%
);
}
/* End of Head 10 */
/*********************************************/
/* Spot 1 */
#spot-1 {
height: 70px;
width: 70px;
left: 255px;
top: 323px;
}
#l-1,
#r-1 {
height: 70px;
width: 35px;
}
#l-1 {
shape-outside: polygon(
96.72% -1.42%,
73.86% 12.19%,
47.68% 25.3%,
29.39% 43.58%,
18.8% 63.53%,
12.53% 88.36%,
3.42% 106.94%,
-2.92% -2.26%
);
}
#r-1 {
shape-outside: polygon(
76.72% -1.42%,
74.85% 99.79%,
1px 99.72%,
3.08% 83.49%,
25.3% 68.44%,
32.82% 41.26%,
32.63% 20.44%,
22.79% 3.45%
);
}
/* End of Spot 1 */
/*********************************************/
/* Spot 2 */
#spot-2 {
height: 120px;
width: 126px;
left: 291px;
top: 300px;
}
#l-2,
#r-2 {
height: 120px;
width: 63px;
}
#l-2 {
shape-outside: polygon(
55.62% 9.42%,
53.22% 17.19%,
54.03% 27.8%,
51.61% 42.75%,
45.78% 53.53%,
47.56% 67.45%,
55.39% 78.36%,
70.87% 90.64%,
104.87% 95.38%,
106.53% 100.05%,
11.35% 100.28%,
12.95% 0.24%,
100.01% -0.42%,
93.66% 5.47%,
65.04% 1.98%
);
}
#r-2 {
shape-outside: polygon(
98.94% -1.42%,
100.25% 102.29%,
-1px 100.55%,
25.96% 93.31%,
50.76% 91.46%,
66.57% 84.32%,
77.68% 75.94%,
72.3% 63.31%,
53.42% 51.54%,
39.17% 42.93%,
15.17% 28.77%,
-6.89% 17.27%,
3.74% 2.62%
);
}
/* End of Spot 2 */
/*********************************************/
/* Spot 3 */
#spot-3 {
height: 115px;
width: 200px;
left: 170px;
top: 388px;
}
#l-3,
#r-3 {
height: 115px;
}
#l-3 {
width: 90px;
shape-outside: polygon(
99.54% 20.54%,
84.48% 23.45%,
69.17% 29.71%,
54.34% 39.62%,
47.11% 53.54%,
45.85% 68.71%,
56.61% 80.1%,
74.3% 88.9%,
81.97% 98.31%,
11.35% 100.28%,
12.95% 0.24%,
96.84% 0.47%
);
}
#r-3 {
width: 110px;
shape-outside: polygon(
98.94% -1.42%,
100.25% 102.29%,
-1px 100.55%,
-3.39% 79.07%,
4.04% 61.72%,
12.17% 49.13%,
19.68% 40.29%,
31.39% 33.74%,
39.87% 21.98%,
33.44% 7.28%,
2.19% 14.22%,
0.74% 1.75%
);
}
.spot-3-span1 {
margin-left: 20px;
}
/* End of Spot 3 */
/*********************************************/
/* Spot 4 */
#spot-4 {
height: 205px;
width: 150px;
left: 241px;
top: 420px;
}
#l-4,
#r-4 {
height: 205px;
width: 75px;
}
#l-4 {
shape-outside: polygon(
100.87% 9.32%,
97.17% 16.54%,
86.34% 24.5%,
65.78% 31.1%,
47.18% 37%,
33.58% 43.56%,
26.62% 52.04%,
33.94% 60.59%,
46.53% 66.78%,
59.3% 71.71%,
66.35% 78.48%,
63.64% 85.4%,
69.53% 93.22%,
88.04% 98.43%,
11.35% 100.28%,
12.95% 0.24%,
99.51% -0.02%
);
}
#r-4 {
shape-outside: polygon(
98.94% -1.42%,
100.25% 98.39%,
-4px 95.67%,
7.76% 87.06%,
22.21% 78.06%,
35.64% 68.83%,
53.79% 58.68%,
66.88% 54.08%,
75.34% 46.43%,
65.8% 35.48%,
60.18% 33.52%,
53.02% 27.6%,
52.72% 20.56%,
40.3% 14.66%,
26.48% 9.37%,
25.17% 4.59%,
0% 6.17%,
11.41% 0.29%
);
}
/* End of Spot 4 */
/*********************************************/
/* Spot 5 */
#spot-5 {
height: 105px;
width: 120px;
left: 355px;
top: 418px;
}
#l-5,
#r-5 {
height: 105px;
width: 60px;
}
#l-5 {
shape-outside: polygon(
32.6% 25.88%,
38.29% 41.57%,
42.27% 54.88%,
53.2% 70.59%,
69.3% 85.04%,
91.37% 96.53%,
11.35% 100.28%,
12.95% 0.24%,
102.83% 10.11%,
69.51% 4.74%,
19.34% 13.24%
);
}
#r-5 {
shape-outside: polygon(
98.94% -1.42%,
100.25% 98.39%,
1px 90.91%,
33.94% 80.75%,
57.76% 70.87%,
73.16% 59.74%,
65.55% 42.82%,
45.8% 30.71%,
31.35% 19.98%,
-1.66% 10.92%,
-1.8% 1.55%
);
}
/* End of Spot 5 */
/*********************************************/
/* Spot 6 */
#spot-6 {
height: 215px;
width: 140px;
left: 407px;
top: 504px;
}
#l-6,
#r-6 {
height: 215px;
width: 70px;
}
#l-6 {
shape-outside: polygon(
19.74% 21.23%,
29.72% 30.87%,
43.7% 39.53%,
51.26% 51.65%,
51.77% 61.75%,
59.33% 73.23%,
69.3% 84.11%,
85.66% 92.81%,
112.8% 100.83%,
11.35% 100.28%,
12.95% 0.24%,
101.38% 0.75%,
117.23% 4.11%,
78.56% 0.91%,
61.41% 4.52%,
33.79% 9.86%,
23.63% 14.17%
);
}
#r-6 {
shape-outside: polygon(98.94% 0.44%, 100.25% 98.39%, 29.53% 96.95%, 29px 85.79%, 53.94% 75.17%, 66.33% 63.89%, 78.59% 52.11%, 72.4% 44.43%, 56.02% 38.35%, 35.55% 30.73%, 24.37% 22.8%, 11.35% 15.33%, 1.2% 8.13%, 1.06% 0.62%);
}
/* End of Spot 6 */
/*********************************************/
/* Spot 7 */
#spot-7 {
height: 185px;
width: 140px;
left: 300px;
top: 542px;
}
#l-7,
#r-7 {
height: 185px;
width: 70px;
}
#l-7 {
shape-outside: polygon(
91.17% 18.53%,
74% 27.63%,
52.27% 36.29%,
39.83% 46.24%,
33.2% 57.97%,
36.48% 69.99%,
56.44% 80.87%,
75.66% 87.55%,
98.73% 92.11%,
102.8% 100.05%,
11.35% 100.28%,
12.95% 0.24%,
101.38% 0.75%,
98.66% 10.6%
);
}
#r-7 {
shape-outside: polygon(98.94% 0.44%, 100.25% 98.39%, 8.59% 98.03%, 28.23% 86.52%, 26.33% 78.49%, 35.74% 69.95%, 53.83% 68.21%, 63.16% 61.6%, 61.27% 55.6%, 67.22% 49.83%, 69.64% 41.54%, 68.84% 28.65%, 48.49% 19.11%, 19.66% 12.1%, 1.2% 8.13%, 1.06% 0.62%);
}
/* End of Spot 7 */
/*********************************************/
/* Spot 8 */
#spot-8 {
height: 218px;
width: 200px;
left: 474px;
top: 640px;
}
#l-8,
#r-8 {
height: 218px;
width: 100px;
}
#l-8 {
shape-outside: polygon(
75.17% 12.56%,
65% 22.13%,
52.27% 30.79%,
39.83% 37.53%,
25.2% 41.45%,
18.48% 48.89%,
32.44% 59.31%,
50.97% 70.22%,
65.66% 79.29%,
76.73% 89.82%,
90.22% 95.77%,
99.8% 100.51%,
11.35% 100.28%,
12.95% 0.24%,
101.38% 2.13%,
86.66% 5.55%
);
}
#r-8 {
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
-3.41% 99.86%,
24.94% 88.35%,
33.33% 80.32%,
47.74% 71.78%,
63.83% 69.59%,
74.16% 65.27%,
80.27% 57.89%,
78.22% 49.37%,
69.64% 41.54%,
52.84% 30.94%,
33.49% 20.03%,
20.2% 12.26%,
1.06% 3.37%
);
}
/* End of Spot 8 */
/*********************************************/
/* Spot 9 */
#spot-9 {
height: 234px;
width: 240px;
left: 320px;
top: 716px;
}
#l-9,
#r-9 {
height: 234px;
width: 120px;
}
#l-9 {
shape-outside: polygon(61.02% 7.43%, 52.5% 7.6%, 38.1% 7.29%, 21.5% 2.91%, 21.04% 10.67%, 28.48% 19.41%, 38.27% 28.11%, 45.14% 38.17%, 50.66% 44.25%, 52.72% 51.16%, 58.18% 64.11%, 62.56% 74.86%, 77.72% 85.09%, 93.13% 100.52%, 11.35% 100.28%, 12.95% 0.24%, 99.96% 0.29%, 98.87% 5.54%);
}
#r-9 {
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
-1.74% 100.29%,
16.84% 90.83%,
25.77% 83.22%,
49.16% 80.32%,
63.57% 78.62%,
75.49% 71.73%,
75.83% 61.42%,
66.94% 50.2%,
57.38% 42.96%,
46.31% 35.13%,
36.17% 26.24%,
25.99% 16.18%,
16.86% 8.41%,
0.51% 4.95%,
-3.94% -0.47%
);
}
/* End of Spot 9 */
/*********************************************/
/* Spot 10 */
#spot-10 {
height: 246px;
width: 260px;
left: 592px;
top: 794px;
}
#l-10,
#r-10,
#l-10-2,
#r-10-2 {
height: 123px;
}
#l-10 {
width: 88px;
shape-outside: polygon(
75.98% 11.97%,
58.21% 31.17%,
35.73% 46.28%,
19.97% 56.35%,
6.76% 65.27%,
8.18% 77.42%,
28.23% 84.81%,
41.54% 92.38%,
49.86% 101.72%,
1.35% 100.28%,
1.28% 0.24%,
91.8% 0.32%
);
}
#l-10-2 {
width: 160px;
shape-outside: polygon(45.75% 3.84%, 57.42% 8.44%, 63.92% 21.23%, 70.53% 39.82%, 71.88% 53.07%, 72.78% 65.22%, 78.86% 77.92%, 101.25% 105.39%, 99.02% 99.72%, 1.35% 100.28%, 1.28% 0.24%, 23.78% 1.94%);
}
#r-10 {
width: 172px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
62.64% 97.89%,
49.78% 84.74%,
39.11% 71.76%,
31.14% 56.76%,
21.92% 40.62%,
13.63% 26.34%,
5.61% 13.51%,
-1.06% 4.01%
);
}
#r-10-2 {
width: 100px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
-0.69% 97.77%,
16.3% 87.59%,
55.62% 84.06%,
72.42% 82.39%,
85.81% 77.01%,
90.2% 61.01%,
88.92% 46.55%,
84.8% 33.23%,
72.05% 20.17%,
55.57% 8.91%,
39.37% -0.49%
);
}
/* End of Spot 10 */
/*********************************************/
/* Spot 11 */
#spot-11 {
height: 212px;
width: 190px;
left: 410px;
top: 900px;
}
#l-11,
#r-11 {
height: 212px;
}
#l-11 {
width: 128px;
shape-outside: polygon(
89.55% 7.59%,
73.84% 14.66%,
59.95% 19.4%,
50.02% 24.14%,
35.53% 27.53%,
26.36% 34.75%,
21.2% 42.83%,
22.79% 53.7%,
26.34% 64.77%,
31.17% 76.01%,
43.76% 84.9%,
62.29% 88.91%,
80.6% 93.43%,
102.49% 96.46%,
102.91% 100.09%,
1.35% 100.28%,
1.28% 0.24%,
102.24% 2.63%
);
}
#r-11 {
width: 62px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
-9.78% 95.45%,
3.18% 87.48%,
19.09% 77.14%,
40.11% 71.06%,
60.08% 62.8%,
66.62% 51.1%,
67.08% 37.32%,
63.63% 23.98%,
60.45% 10.68%,
42.49% 2.59%
);
}
/* End of Spot 11 */
/*********************************************/
/* Spot 12 */
#spot-12 {
height: 184px;
width: 130px;
left: 572px;
top: 907px;
}
#l-12,
#r-12 {
height: 182px;
}
#l-12 {
width: 45px;
shape-outside: polygon(45.28% 15.84%, 42.94% 28.97%, 51.62% 41.04%, 57.93% 60.5%, 62.6% 76.51%, 80.23% 86.45%, 96.16% 99.47%, 100.68% 101.19%, 1.35% 100.28%, 1.28% 0.24%, 81.38% 0.98%, 56.72% 8.58%);
}
#r-12 {
width: 85px;
shape-outside: polygon(98.94% 0.44%, 100.25% 98.39%, 28.42% 98.89%, 59.44% 96.54%, 61.64% 89.69%, 67.33% 83.73%, 77.67% 71.61%, 78.72% 56.75%, 75.59% 36.27%, 69.53% 26.8%, 59.39% 20.28%, 38.47% 15.74%, 17.28% 14.53%, 1.64% 8.73%, 0.5% 1.49%);
}
.spot-12-span1 {
margin-left: 4px;
}
.spot-12-span2 {
margin-left: 14px;
}
/* End of Spot 12 */
/*********************************************/
/* Spot 13 */
#spot-13 {
height: 118px;
width: 120px;
left: 830px;
top: 945px;
}
#l-13,
#r-13 {
height: 118px;
}
#l-13 {
width: 60px;
shape-outside: polygon(
70.28% 25.16%,
59.95% 52.06%,
54.6% 68.13%,
65.94% 83.29%,
90.19% 91.04%,
107.35% 99.54%,
1.35% 100.28%,
1.28% 0.24%,
105.03% 0.6%,
95.83% 10.81%,
80.05% 16.21%
);
}
#r-13 {
width: 60px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
-1.14% 97.89%,
2.82% 77.79%,
27.68% 63.99%,
49.7% 53.36%,
55.59% 37.12%,
35.13% 24.46%,
17.28% 17.91%,
-1.69% 14.66%,
1.48% 0.64%
);
}
/* End of Spot 13 */
/*********************************************/
/* Spot 14 */
#spot-14 {
height: 155px;
width: 150px;
left: 865px;
top: 1010px;
}
#l-14,
#r-14 {
height: 155px;
}
#l-14 {
width: 75px;
shape-outside: polygon(
59.62% 25.81%,
31.95% 37.87%,
13.26% 52.65%,
13.94% 69.1%,
22.18% 82.01%,
42.67% 89.03%,
67.91% 93.99%,
107.35% 99.54%,
1.35% 100.28%,
1.28% 0.24%,
98.36% 0.6%,
102.49% 7.58%,
82.72% 16.86%
);
}
#r-14 {
width: 75px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
-1.14% 97.89%,
6.6% 91.7%,
25.66% 85.3%,
52.15% 76.5%,
77.01% 62.05%,
88.37% 45.62%,
76.92% 33.25%,
47.13% 17.36%,
23.65% 7.56%,
7.69% 3.59%,
1.48% 0.64%
);
}
/* End of Spot 14 */
/*********************************************/
/* Spot 15 */
#spot-15 {
height: 210px;
width: 198px;
left: 662px;
top: 1028px;
}
#l-15,
#r-15 {
height: 210px;
}
#l-15 {
width: 99px;
shape-outside: polygon(
19.22% 70.1%,
16.8% 78.35%,
10.23% 85.03%,
12.93% 91.96%,
20.16% 93.91%,
60.85% 97.61%,
107.35% 99.54%,
1.35% 100.28%,
1.28% 0.24%,
102.06% 1.33%,
100.38% 6.79%,
53.64% 5.35%,
43.9% 9.48%,
40.31% 16.31%,
34.24% 25.43%,
22.77% 36.28%,
17.67% 46.36%,
20.62% 57.39%
);
}
#r-15 {
width: 99px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
0.88% 99.79%,
-2.26% 87.3%,
10.3% 81.33%,
28.86% 76.05%,
41.95% 72.65%,
67.07% 67.68%,
81.44% 62.69%,
88.12% 55.38%,
82.31% 45.62%,
67.83% 10.39%,
52.18% 4.99%,
33.75% 6.61%,
7.69% 3.59%,
1.48% 0.64%
);
}
.spot-15-span1 {
margin-left: 60px;
}
.spot-15-span2 {
margin-left: 24px;
}
/* End of Spot 15 */
/*********************************************/
/* Spot 16 */
#spot-16 {
height: 220px;
width: 240px;
left: 428px;
top: 1066px;
}
#l-16,
#r-16 {
height: 220px;
}
#l-16 {
width: 120px;
shape-outside: polygon(
25.06% 75.1%,
38.77% 86.05%,
47.66% 93%,
55.85% 96.7%,
107.35% 99.54%,
1.35% 100.28%,
1.28% 0.24%,
99.56% 1.33%,
100.29% 21.21%,
25.57% 14.02%,
19.47% 21.77%,
12.58% 26.34%,
8.6% 41.28%,
7.67% 51.36%,
12.29% 64.21%
);
}
#r-16 {
width: 120px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
0.88% 99.79%,
1.42% 84.42%,
10.24% 83.2%,
29.18% 86.03%,
47.2% 82.41%,
56.12% 79.01%,
71.24% 69.04%,
81.44% 62.69%,
90.62% 53.56%,
93.98% 39.26%,
86.08% 25.59%,
63.01% 14.09%,
49.51% 9.13%,
26.26% 1.16%,
0.06% 5.47%,
1.48% 0.64%
);
}
.spot-16-span1 {
margin-left: 29px;
}
.spot-16-span2 {
margin-left: 24px;
}
.spot-16-span3 {
margin-left: 21px;
}
.spot-16-span4 {
margin-left: 17px;
}
.spot-16-span5 {
margin-left: 15px;
}
.spot-16-span6 {
margin-left: 12px;
}
.spot-16-span7 {
margin-left: 10px;
}
.spot-16-span8 {
margin-left: 62px;
}
.spot-16-span9 {
margin-left: 44px;
}
.spot-16-span10 {
margin-left: 36px;
}
.spot-16-span11 {
margin-left: 31px;
}
.spot-16-span12 {
margin-left: 20px;
}
/* End of Spot 16 */
/*********************************************/
/* Spot 17 */
#spot-17 {
height: 128px;
width: 116px;
left: 1000px;
top: 1080px;
}
#l-17,
#r-17 {
height: 128px;
}
#l-17 {
width: 58px;
shape-outside: polygon(
43.36% 74.01%,
60.85% 89.8%,
107.35% 99.54%,
1.35% 100.28%,
1.28% 0.24%,
103.78% 5.24%,
81.39% 8.94%,
54.24% 22.35%,
25.98% 38.41%,
26.29% 56.52%
);
}
#r-17 {
width: 58px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
2.6% 98.23%,
-4.68% 77.78%,
17.19% 66.49%,
46.38% 53.61%,
69.29% 45.05%,
79.9% 34.6%,
64.25% 21.39%,
35.28% 12.18%,
1.48% 2.98%
);
}
/* End of Spot 17 */
/*********************************************/
/* Spot 18 */
#spot-18 {
height: 220px;
width: 234px;
left: 824px;
top: 1160px;
}
#l-18,
#r-18 {
height: 220px;
}
#l-18 {
width: 117px;
shape-outside: polygon(
43.36% 63.1%,
22.11% 74.01%,
6.95% 82.65%,
9.18% 90.81%,
16.45% 95.35%,
107.35% 99.54%,
1.35% 100.28%,
1.28% 0.24%,
100.85% 0.24%,
101.22% 2.06%,
71.99% 8.49%,
63.64% 18.26%,
67.86% 29.77%,
70.73% 43.34%,
58.15% 54.87%
);
}
#r-18 {
width: 117px;
shape-outside: polygon(
98.94% 0.44%,
100.25% 98.39%,
2.6% 98.23%,
3.94% 83.37%,
24.14% 81.82%,
50.89% 80.35%,
65.18% 75.06%,
76.52% 66.42%,
86.51% 57.42%,
92.57% 49.29%,
87.27% 40.13%,
75.43% 35.43%,
59.89% 26.86%,
47.42% 16.41%,
39.46% 6.39%,
33.29% 3.05%,
2.33% 1.16%
);
}
.spot-18-span1 {
margin-left: 33px;
}
.spot-18-span2 {
margin-left: 34px;
}
/* End of Spot 18 */
/*********************************************/
/* Spot 19 */
#spot-19 {
height: 155px;
width: 216px;
left: 678px;
top: 1181px;
}
#l-19,
#r-19 {
height: 155px;
}
#l-19 {
width: 108px;
shape-outside: polygon(
33.22% 83.7%,
49.54% 89.95%,
65.51% 94.95%,
107.35% 99.54%,
1.35% 100.28%,
1.28% 0.24%,
101.78% -0.41%,
93.8% 24.68%,
80.32% 31.4%,
63.64% 42.31%,
29.9% 43.21%,
13.31% 47.46%,
9.07% 61.62%,
20.61% 71.12%
);
}
#r-19 {
width: 108px;
shape-outside: polygon(
99.94% 1%,
100.25% 98.39%,
2.6% 98.23%,
22.46% 88.57%,
38.03% 81.52%,
53.67% 74.2%,
68.18% 65.28%,
77.25% 56.23%,
87.94% 43.34%,
85.42% 23.46%,
83.97% 10.8%,
75.64% 0.81%,
2.33% 1.16%
);
}
.spot-19-span1 {
margin-left: 63px;
}
.spot-19-span2 {
margin-left: 50px;
}
.spot-19-span3 {
margin-left: 38px;
}
.spot-19-span4 {
margin-left: 27px;
}
.spot-19-span5 {
margin-left: 17px;
}
.spot-19-span6 {
margin-left: 8px;
}
/* End of Spot 19 */
/*********************************************/
/* Spot 20 */
#spot-20 {
height: 132px;
width: 194px;
left: 460px;
top: 1268px;
}
#l-20,
#r-20 {
height: 132px;
}
#l-20 {
width: 97px;
shape-outside: polygon(
32.19% 87.49%,
51.08% 95.71%,
107.35% 99.54%,
1.35% 100.28%,
1.28% 0.24%,
101.78% -0.41%,
101.85% 9.17%,
82.46% 18.62%,
67.76% 27.92%,
37.11% 25.78%,
20.53% 20.94%,
9.07% 34.34%,
20.61% 71.12%
);
}
#r-20 {
width: 97px;
shape-outside: polygon(
99.94% 1%,
100.25% 98.39%,
2.6% 98.23%,
32.87% 90.61%,
51.6% 80.26%,
63.03% 71.35%,
79.31% 56.23%,
91.61% 38.61%,
79.65% 31.16%,
68.51% 19.89%,
57.08% 10.67%,
48.29% 6.42%,
2.33% 7.22%
);
}
.spot-20-span1 {
margin-left: 3px;
}
/* End of Spot 20 */
/*********************************************/
/* Spot 21 */
#spot-21 {
height: 82px;
width: 168px;
left: 645px;
top: 1322px;
}
#l-21,
#r-21 {
height: 82px;
}
#l-21 {
width: 56px;
shape-outside: polygon(
106.16% 86.13%,
1.35% 100.28%,
1.28% 0.24%,
101.78% 3.25%,
82.21% 17.7%,
74.3% 34.01%,
59.06% 47.75%,
33.84% 55.31%,
14.06% 72.64%,
27.16% 88.2%
);
}
#r-21 {
width: 112px;
shape-outside: polygon(
99.94% 1%,
100.25% 98.39%,
2.6% 98.23%,
2.51% 80.85%,
84.46% 85.99%,
90.02% 69.64%,
86.25% 52.02%,
74.29% 42.14%,
39.36% 25.93%,
2.33% 7.22%
);
}
/* End of Spot 21 */
/*********************************************/
/* Spot 22 */
#spot-22 {
height: 138px;
width: 140px;
left: 1068px;
top: 1173px;
}
#l-22,
#r-22 {
height: 138px;
}
#l-22 {
width: 70px;
shape-outside: polygon(
71.45% 100.01%,
1.35% 100.28%,
1.28% 0.24%,
106.07% 1.08%,
99.35% 14.08%,
77.16% 23.87%,
70.49% 39.05%,
55.27% 55.31%,
32.63% 71.19%,
17.16% 83.13%,
25.74% 93.56%
);
}
#r-22 {
width: 70px;
shape-outside: polygon(
99.94% 1%,
100.25% 98.39%,
2.6% 98.23%,
14.76% 88.4%,
33.94% 77.23%,
50.17% 58.45%,
70.02% 45.73%,
77.68% 31.73%,
74.29% 15.33%,
57.93% 4.92%,
-0.53% 2.87%
);
}
.spot-22-span1 {
margin-left: 19px;
}
.spot-22-span2 {
margin-left: 9px;
}
/* End of Spot 22 */
/*********************************************/
/* Spot 23 */
#spot-23 {
height: 94px;
width: 72px;
left: 1185px;
top: 1214px;
}
#l-23,
#r-23 {
height: 94px;
}
#l-23 {
width: 36px;
shape-outside: polygon(
71.45% 100.01%,
1.35% 100.28%,
1.28% 0.24%,
106.07% 3.21%,
77.13% 31.1%,
53.82% 49.69%,
24.72% 73.4%,
30.08% 84.88%
);
}
#r-23 {
width: 36px;
shape-outside: polygon(
99.94% 1%,
100.25% 98.39%,
-13.91% 98.26%,
35.93% 79.08%,
64.06% 66.96%,
61.69% 51.05%,
36.05% 16.29%,
52.68% 32.79%,
30.16% 5.98%,
-3.31% 7.12%
);
}
/* End of Spot 23 */
/*********************************************/
/* Spot 24 */
#spot-24 {
height: 118px;
width: 158px;
left: 1260px;
top: 1228px;
}
#l-24,
#r-24 {
height: 42px;
}
#l-24-2,
#r-24-2 {
height: 59px;
}
#l-24-3,
#r-24-3 {
height: 15px;
}
#l-24 {
width: 19px;
shape-outside: polygon(
1.35% 90.76%,
6.54% 0.24%,
106.07% 3.21%,
46.5% 29.21%,
82.71% 84.88%
);
}
#r-24 {
width: 139px;
shape-outside: polygon(
37.35% 17.67%,
57.8% 81.72%,
38.61% 91.64%,
24.54% 62.01%,
11.45% 33.67%,
1% 8.49%
);
}
#l-24-2 {
width: 74px;
shape-outside: polygon(
97.11% 105.09%,
27.03% 73.16%,
20.2% -3.15%,
34.45% 21.85%,
53.23% 53.98%,
67.11% 75.96%,
82.83% 91.79%
);
}
#r-24-2 {
width: 84px;
shape-outside: polygon(
73.75% 9.47%,
89.67% 85.02%,
73.72% 64.42%,
42.18% 32.25%,
11.49% 5.43%
);
}
#l-24-3 {
width: 135px;
shape-outside: polygon(82.4% 66.68%, 61.1% 59.83%, 53.7% 8.52%, 71.3% 56.07%);
}
#r-24-3 {
width: 23px;
shape-outside: polygon(
65.05% -37.2%,
73.72% 84.42%,
-23.03% 98.92%,
37.58% 58.77%
);
}
/* End of Spot 24 */
/*********************************************/
/* Spot 25 */
#spot-25 {
height: 48px;
width: 108px;
left: 1336px;
top: 1348px;
}
#l-25,
#r-25 {
height: 48px;
}
#l-25 {
width: 54px;
shape-outside: polygon(
3.2% 90.76%,
4.69% 2.32%,
96.33% 1.03%,
99.68% 14.81%,
62.33% 13.76%,
40.95% 25.04%,
21.16% 51.61%,
8.38% 82.81%,
96.73% 87.65%,
104.93% 101.54%
);
}
#r-25 {
width: 54px;
shape-outside: polygon(
98.46% 5.17%,
98.94% 89.73%,
85.65% 41.18%,
54.04% 19.09%,
8.41% 8.49%
);
}
/* End of Spot 25 */
/*********************************************/
/* Spot 26 */
#spot-26 {
height: 102px;
width: 148px;
left: 1167px;
top: 1297px;
}
#l-26,
#r-26 {
height: 102px;
}
#l-26 {
width: 95px;
shape-outside: polygon(
1.85% 100.56%,
4.69% 2.32%,
100.38% 1.03%,
88.1% 9.91%,
61.81% 20.78%,
37.05% 36.81%,
15.08% 61.85%,
8.68% 73.99%,
13.72% 85.8%,
96.73% 87.65%,
104.93% 101.54%
);
}
#r-26 {
width: 53px;
shape-outside: polygon(
98.46% 5.17%,
100.39% 102.99%,
81.46% 79.25%,
60.26% 28.43%,
43.77% 15.17%,
25.98% 3.59%
);
}
/* End of Spot 26 */
/*********************************************/
/* Spot 27 */
#spot-27 {
height: 90px;
width: 210px;
left: 957px;
top: 1312px;
}
#l-27,
#r-27 {
height: 90px;
}
#l-27 {
width: 105px;
shape-outside: polygon(
1.85% 100.56%,
0.88% 4.54%,
104.19% 8.81%,
90% 18.8%,
78.01% 28.56%,
63.19% 40.53%,
47.53% 50.14%,
27.46% 60.74%,
5.82% 73.99%,
10.86% 86.91%,
98.63% 85.43%,
104.93% 101.54%
);
}
#r-27 {
width: 105px;
shape-outside: polygon(
98.46% 5.17%,
100.36% 103.27%,
62.79% 86.32%,
79.44% 74.1%,
88.18% 49.88%,
91.94% 31.47%,
85.02% 16.21%,
59.96% 9.61%,
30.39% 7.12%,
-1.03% 11.67%,
-2.59% -1.97%
);
}
.spot {
overflow: hidden;
}
// Giraffe Pattern by Arturo Alejandro Romo Escartin from the Noun Project https://thenounproject.com/icon/142451/
Also see: Tab Triggers